update: settings render method

added: plugins settings

update: about app thirdparty libs & technologies

config/index.js

@@ -19,7 +19,7 @@ module.exports = {
     session_data_storage: 'data',
     
     appTheme_container: 'app_theme',
-    appTheme_desiredContrast: 4.5,
+    appTheme_desiredContrast: 7,
     // Contrast level AA = 4.5, Level AAA = 7
     // Reference: https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&showtechniques=143#qr-visual-audio-contrast-contrast
 
@@ -58,6 +58,11 @@ module.exports = {
         post_hidebar: true,
 
         feed_autorefresh: false,
+        keybinds: {
+          nextElement: "J",
+          prevElement: "U",
+          createNew: "N"
+        }
   },
 
   stricts: {

package.json

@@ -51,6 +51,7 @@
     "electron-updater": "^4.3.4",
     "enquire-js": "^0.2.1",
     "feather-reactjs": "^2.0.13",
+    "heroicons": "^0.4.2",
     "html2canvas": "^1.0.0-rc.7",
     "jquery": "^3.5.1",
     "jsonwebtoken": "^8.5.1",
@@ -60,6 +61,7 @@
     "moment": "^2.28.0",
     "node-sass": "^4.13.1",
     "nprogress": "^0.2.0",
+    "package": "^1.0.1",
     "path-to-regexp": "^6.1.0",
     "platform": "^1.3.6",
     "radium": "^0.26.0",

public/logo.svg

@@ -1,18 +1,22 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.31418 77.6027">
+<svg id="a5b341d4-efcc-46ea-a271-f2bea59c6abd" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 73.95833 75.98684">
   <defs>
-    <clipPath id="a" transform="translate(-62.852 -42.79726)">
+    <clipPath id="ff5fefc3-adb2-4abb-b227-248fe5798176" transform="translate(-59.54167 -41.51316)">
-      <path d="M67.69373,97.48126A37.88884,37.88884,0,0,1,64.32235,81.962V47.74457a4,4,0,0,1,4-4h34.81344A40.202,40.202,0,0,1,115.504,45.80379V60.70226H99.244v5.1882a17.26642,17.26642,0,0,0-12.40516,13.0078H80.273v18.583Z" style="fill: none"/>
+      <path d="M65.66466,94.80263h11.627V77.03947h7.12138A17.46634,17.46634,0,0,1,89.91264,67.661a16.65479,16.65479,0,0,1,5.129-3.01224v-5.3724h17.75V44.65313a38.859,38.859,0,0,0-13.03991-2.15171H66.44444A3.9459,3.9459,0,0,0,62.5,46.44878V80a37.22971,37.22971,0,0,0,3.16466,14.80263Z" style="fill:none"/>
     </clipPath>
   </defs>
-  <g>
+  <g id="ff89d78c-8832-4326-ac52-0a37a191ec6c" data-name="ISO">
-    <path d="M120.3477,73.49586l16.068-8.392a1.421,1.421,0,0,0,.581-1.925l-.004-.009a39.55488,39.55488,0,0,0-53.655-14.202q-.636.369-1.259.763a37.94591,37.94591,0,0,0-16.316,42.476,38.68947,38.68947,0,0,0,8.549,15.373,39.509,39.509,0,0,0,44.645,9.645,38.33887,38.33887,0,0,0,9.525-5.922,1.41255,1.41255,0,0,0,.121-1.993l-.019-.02-11.979-12.759a1.4336,1.4336,0,0,0-1.902-.165,17.03956,17.03956,0,0,1-3.628,2.287,17.77554,17.77554,0,0,1-9.363,1.361c-8.267-1.065-12.512-7.864-12.815-8.361a17.70265,17.70265,0,0,1-2.409-10.684,17.95939,17.95939,0,0,1,6.646-12.087,17.73033,17.73033,0,0,1,24.61,3.044c.283.361.549.734.802,1.117a1.413,1.413,0,0,0,1.802.453" transform="translate(-62.852 -42.79726)" style="fill: #ff6064"/>
+    <path 
-    <g style="clip-path: url(#a)">
+      d="M117.10747,71.60975l15.661-8.2106a1.393,1.393,0,0,0,.56628-1.88339l-.0039-.0088a38.47206,38.47206,0,0,0-52.29612-13.895q-.61987.361-1.22711.74651A37.19166,37.19166,0,0,0,63.90489,89.91631a37.89348,37.89348,0,0,0,8.33249,15.0407,38.40645,38.40645,0,0,0,43.51431,9.43652,37.34524,37.34524,0,0,0,9.28377-5.794,1.3857,1.3857,0,0,0,.11794-1.94992l-.01852-.01957L113.45926,94.14684a1.39344,1.39344,0,0,0-1.85383-.16143,16.599,16.599,0,0,1-3.53612,2.23757,17.26606,17.26606,0,0,1-9.12587,1.33158c-8.05763-1.042-12.19512-7.694-12.49045-8.18028a17.37349,17.37349,0,0,1-2.348-10.45305,17.5888,17.5888,0,0,1,6.47768-11.82574,17.23688,17.23688,0,0,1,23.98672,2.9782c.27583.35319.5351.71813.78169,1.09286a1.3741,1.3741,0,0,0,1.75637.4432" 
-      <rect width="17.421" height="17.905" style="fill: #ff7c8c"/>
+      transform="translate(-59.54167 -41.51316)" 
-      <rect x="17.421" width="18.971" height="17.905" style="fill: #ff4971"/>
+      style="fill:#ff6064"
-      <rect x="36.392" width="16.26" height="17.905" style="fill: #ff4457"/>
+    />
-      <rect y="17.905" width="17.421" height="18.196" style="fill: #ff4971"/>
+      <g style="clip-path:url(#ff5fefc3-adb2-4abb-b227-248fe5798176)">
-      <rect y="36.101" width="17.421" height="18.583" style="fill: #ff4457"/>
+        <rect width="17.75" height="17.76316" style="fill:#ff7c8c"/>
-      <rect x="17.421" y="17.905" width="18.971" height="18.196" style="fill: #ff4457"/>
+        <rect x="17.75" width="17.75" height="17.76316" style="fill:#ff4971"/>
+        <rect x="35.5" width="17.75" height="17.76316" style="fill:#ff4457"/>
+        <rect y="17.76316" width="17.75" height="17.76316" style="fill:#ff4971"/>
+        <rect y="35.52632" width="17.75" height="17.76316" style="fill:#ff4457"/>
+        <rect x="17.75" y="17.76316" width="17.75" height="17.76316" style="fill:#ff4457"/>
       </g>
   </g>
 </svg>

src/components/Icons/custom.js

@@ -1 +1,13 @@
-export const VerifiedBadge = () => (<svg xmlns="http://www.w3.org/2000/svg" fill="#55acee" width="15" height="15" viewBox="0 0 24 24"> <path d="M23 12l-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12m-13 5l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path></svg>)
+const marginedStyle = { width: "1em", height: "1em", marginRight: "10px", verticalAlign: "-0.125em" }
+
+export const verifiedBadge = () => <svg style={marginedStyle} xmlns="http://www.w3.org/2000/svg" fill="#55acee" viewBox="0 0 24 24"> <path d="M23 12l-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12m-13 5l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path></svg>
+export const lightningBolt = () => <svg style={marginedStyle} className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+export const sparkles = () => <svg style={marginedStyle} className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>
+export const statusOnline = () => <svg style={marginedStyle} className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414" /></svg>
+export const fingerprint = () => <svg style={marginedStyle} className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4" /></svg>
+export const colorSwatch = () => <svg style={marginedStyle} className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" /></svg>
+export const collection = () => <svg style={marginedStyle} className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
+export const cubeTransparent = () => <svg style={marginedStyle} className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" /></svg>
+export const keyRound = () => <svg style={marginedStyle} className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" /></svg>
+export const searchCircles = () => <svg style={marginedStyle} className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16l2.879-2.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242zM21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+export const template = () => <svg style={marginedStyle} className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" /></svg>

src/core/index.js

@@ -198,9 +198,9 @@ export function objectToArray(object) {
 
   const keys = Object.keys(object)
   const values = Object.values(object)
-  const lenght = keys.length
+  const sourceLength = keys.length
 
-  for (let i = 0; i < lenght; i++) {
+  for (let i = 0; i < sourceLength; i++) {
     let obj = {}
     obj.key = keys[i]
     obj.value = values[i]

src/core/libs/style/index.js

@@ -2,7 +2,6 @@ import store from 'store';
 import { app_config } from 'config';
 import verbosity from 'core/libs/verbosity'
 import * as errorHandlers from 'core/libs/errorhandler'
-import * as core from 'core'
 
 const { appTheme_desiredContrast, appTheme_container } = app_config
 
@@ -17,8 +16,6 @@ export const theme = {
       return errorHandlers.onError.invalid_data(error, "ThemeScheme")
     }
     return container
-    
-  
   },
   set: (data) => {
     if (!data || data.length > 2) return false

src/models/app.js

@@ -29,7 +29,7 @@ export default {
 
     contextMenu: {
       visible: false,
-      fragment: "WooW, whats happening here!",
+      fragment: null,
       yPos: 0,
       xPos: 0
     },

src/pages/settings/components/base.js

@@ -107,9 +107,6 @@ class Base extends Component {
     return (
       <Fragment>
         <div>
-          <h1>
-            <Icons.PullRequestOutlined /> Behaviors
-          </h1>
           <List
             itemLayout="horizontal"
             dataSource={this.state.list}

src/pages/settings/components/electron/index.js

@@ -3,6 +3,27 @@ import * as antd from 'antd'
 import * as Icons from 'components/Icons'
 import styles from './index.less'
 import { connect } from 'umi';
+import { package_json, objectToArray } from 'core'
+
+const AppTech = (info) => {
+    if (!info) return null
+    return(
+        <div className={styles.versions}>
+            <div>umi<antd.Tag>{info.g_umi.version}</antd.Tag></div>
+            <div>react<antd.Tag>{info.react_version}</antd.Tag></div>
+            <div><Icons.V8/><antd.Tag>{info.process.versions.v8}</antd.Tag></div>
+            <div><Icons.NodeDotJs /><antd.Tag>{info.process.version}</antd.Tag></div>
+            <div><Icons.Electron /><antd.Tag>{info.process.versions.electron}</antd.Tag></div>
+            <div><Icons.Webpack /> Webpack </div>
+            <div><Icons.SocketDotIo /> Socket.io </div>
+            <div><Icons.Javascript /> JS </div>
+            <div><Icons.Typescript /> TS </div>
+            <div><Icons.Webassembly /> WebAssembly </div>
+            <div><Icons.Openai /> OpenAI </div>
+        </div>
+    )
+}
+
 
 @connect(({ app }) => ({ app }))
 export default class ElectronSettings extends React.PureComponent{
@@ -17,7 +38,9 @@ export default class ElectronSettings extends React.PureComponent{
             loading: false, 
             info: {
                 g_umi: window.g_umi, 
-                process: window.process
+                process: window.process,
+                react_version: React.version,
+                deps: objectToArray(package_json.dependencies)
             } 
         })
     }
@@ -26,47 +49,41 @@ export default class ElectronSettings extends React.PureComponent{
         this.getInfo()
     }
 
+    
     render(){
-        const { info } = this.state
+        const showAppTech = () => {
+            antd.Modal.info({
+                title: package_json.title,
+                content: AppTech(this.state.info),
+                width: 550
+            })
+        }
+
+        const showThirdParty = () => {
+            const generateList = () => {
+                return this.state.info.deps.map((e) => {
+                    return(
+                        <div key={e.key}>
+                            -> {e.key} <antd.Tag onClick={null} >{e.value.slice(1,e.value.length)}</antd.Tag>
+                        </div>
+                    )
+                })
+            }
+            
+            antd.Modal.info({
+                title: package_json.title,
+                content: generateList(),
+                width: 550
+            })
+        }
+
+        if (this.state.loading){
+            return <antd.Skeleton active />
+        }
         return(
             <div className={styles.main}>
-            <h2>
+                <antd.Button onClick={() => showAppTech()}> App Technologies </antd.Button>
-              <Icons.Command /> Application Settings
+                <antd.Button onClick={() => showThirdParty()}> Third-Party </antd.Button>
-            </h2>
-            <div>
-            { this.state.loading
-                ? <antd.Skeleton active />
-                : <div className={styles.versions}>
-                    <div>umi<antd.Tag>{info.g_umi.version} </antd.Tag></div>
-                    <div>react</div>
-                    <div><Icons.V8/><antd.Tag>{info.process.versions.v8}</antd.Tag></div>
-                    <div><Icons.NodeDotJs /><antd.Tag>{info.process.version}</antd.Tag></div>
-                    <div><Icons.Electron /><antd.Tag>{info.process.versions.electron}</antd.Tag></div>
-                    <div><Icons.Openssl /><antd.Tag>{info.process.versions.openssl}</antd.Tag></div>
-                    <div><Icons.Css3 /> CCS3</div>
-                    <div><Icons.Yarn /> Yarn </div>
-                    <div><Icons.Npm /> npm </div>
-                    <div><Icons.Jpeg /> .jpeg </div>
-                    <div><Icons.Json /> JSON </div>
-                    <div><Icons.Webgl /> WebGL </div>
-                    <div><Icons.Auth0 /> Auth0 </div>
-                    <div><Icons.Babel /> Babel </div>
-                    <div><Icons.Redux /> Redux </div>
-                    <div><Icons.Gitlab /> Gitlab </div>
-                    <div><Icons.Jquery /> jQuery</div>
-                    <div><Icons.Webpack /> Webpack </div>
-                    <div><Icons.SocketDotIo /> Socket.io </div>
-                    <div><Icons.Javascript /> JS </div>
-                    <div><Icons.Typescript /> TS </div>
-                    <div><Icons.Webassembly /> WebAssembly </div>
-                    <div><Icons.Openai /> OpenAI </div>
-                    <div><Icons.Hp /> HP </div>
-                    <div><Icons.Simpleicons /> Simple Icons </div>
-                    <div><Icons.Googlechrome /> Google Chrome </div>
-                    <div><Icons.Visualstudiocode /> VisualStudio Code </div>
-                </div> 
-            }
-            </div>
             </div>
         )
     }

src/pages/settings/components/electron/index.less

@@ -1,4 +1,5 @@
 .versions{
+    overflow: scroll;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: repeat(4, 1fr);

src/pages/settings/components/keybinds/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import * as Icons from 'components/Icons'
+import * as antd from 'antd'
+import verbosity from 'core/libs/verbosity'
+import settings from 'core/libs/settings'
+import {connect} from 'umi'
+
+@connect(({ app }) => ({ app }))
+export default class Keybinds extends React.Component {
+  render() {
+    return <>
+    
+
+    </>
+  }
+}
+

src/pages/settings/components/notification/index.js

@@ -6,9 +6,7 @@ export default class NotificationView extends React.Component {
   render() {
     return (
       <div className={styles.main}>
-        <h2>
+  
-          <Icons.NotificationOutlined /> Notifications
-        </h2>
       </div>
     )
   }

src/pages/settings/components/plugins/index.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import * as Icons from 'components/Icons'
+import * as antd from 'antd'
+import verbosity from 'core/libs/verbosity'
+import settings from 'core/libs/settings'
+import {connect} from 'umi'
+
+@connect(({ app }) => ({ app }))
+export default class Plugins extends React.Component {
+  render() {
+    return <>
+    
+
+
+    </>
+  }
+}
+

src/pages/settings/components/security/index.js

@@ -35,8 +35,6 @@ export default class SecurityView extends React.Component {
   render() {
     return (
       <div className={styles.main}>
-        <h2>
-          <Icons.LockOutlined /> Your Security & Privacy
           <Menu
             onClick={this.handleClick}
             selectedKeys={[this.state.current]}
@@ -56,7 +54,6 @@ export default class SecurityView extends React.Component {
             </Menu.Item>
           </Menu>
           <div>{this.renderChildren()}</div>
-        </h2>
       </div>
     )
   }

src/pages/settings/components/theme/index.js

@@ -289,7 +289,6 @@ export default class ThemeSettings extends React.Component{
         const isActive = (key) => { return key? key.active : false }
         return(
             <div>
-                <h2><Icons.Layers/> Theme</h2>
                 <antd.List
                   itemLayout="horizontal"
                   dataSource={ThemeSettingsList}

src/pages/settings/index.js

@@ -3,80 +3,85 @@ import { Menu } from 'antd'
 import * as Icons from 'components/Icons'
 
 import styles from './style.less'
+import { connect } from 'umi';
 
 import NotificationView from './components/notification/index.js'
 import SecurityView from './components/security/index.js'
-import Earnings from './components/earnings/index.js'
 
 import Base from './components/base.js'
 import AppAbout from './components/about.js'
 import Theme from './components/theme'
 import ElectronApp from './components/electron'
+import Keybinds from './components/keybinds'
+import Plugins from './components/plugins'
 
 const Settings = {
   base: <Base />,
   about: <AppAbout />,
+  keybinds: <Keybinds />,
   theme: <Theme />,
-  earnings: <Earnings />,
+  plugins: <Plugins />,
   security: <SecurityView />,
   notification: <NotificationView />,
   app: <ElectronApp />
 }
 
-
-const { Item } = Menu
-
 const menuList = [
   {
     key: "base",
     title: "General",
-    icons: <Icons.ControlOutlined />,
+    icon: <Icons.template />,
   },
   {
     key: "app",
     title: "Application",
-    icons: <Icons.Command />,
+    icon: <Icons.Command />,
     require: "embedded"
   },
+  {
+    key: "keybinds",
+    title: "Keybinds",
+    icon: <Icons.lightningBolt />
+  },
   {
     key: "theme",
     title: "Customization",
-    icons: <Icons.Layers />,
+    icon: <Icons.sparkles />,
+  },
+  {
+    key: "plugins",
+    title: "Plugins",
+    icon: <Icons.cubeTransparent />,
   },
   {
     key: "security",
     title: "Security & Privacity",
-    icons: <Icons.ControlOutlined />,
+    icon: <Icons.keyRound />,
   },
   {
     key: "notification",
     title: "Notification",
-    icons: <Icons.Bell />,
+    icon: <Icons.Bell />,
   },
   {
     key: "help",
     title: "Help",
-    icons: <Icons.LifeBuoy />,
+    icon: <Icons.LifeBuoy />,
   },
   {
     key: "about",
     title: "About",
-    icons: <Icons.Info />,
+    icon: <Icons.Info />,
-  },
+  }
 ]
 
-import { connect } from 'umi';
-
 @connect(({ app }) => ({ app }))
 class GeneralSettings extends React.PureComponent {
-  constructor(props) {
+  state = {
-    super(props)
-    this.state = {
     loading: true,
     selectKey: 'base',
     menus: []
   }
-  }
 
   requireQuery(require){
     return new Promise(resolve => {
@@ -113,9 +118,9 @@ class GeneralSettings extends React.PureComponent {
 
   getMenu() {
     return this.state.menus.map(item => (
-      <Item key={item.key}>
+      <Menu.Item key={item.key}>
-        <span>{item.icons} {item.title}</span>
+        <span>{item.icon} {item.title}</span>
-      </Item>
+      </Menu.Item>
     ))
   }
   selectKey = key => {
@@ -125,8 +130,17 @@ class GeneralSettings extends React.PureComponent {
   }
 
   renderChildren = () => {
+    let titlesArray = []
+    this.state.menus.forEach(e => {
+      titlesArray[e.key] = e
+    })
     if(this.state.selectKey){
-      return Settings[this.state.selectKey]
+      return <>
+        <div>
+          <h2>{titlesArray[this.state.selectKey].icon || null}{titlesArray[this.state.selectKey].title || null}</h2>
+        </div>
+        {Settings[this.state.selectKey]}
+      </>
     }else{
       <div> Select an setting </div>
     }
@@ -150,7 +164,7 @@ class GeneralSettings extends React.PureComponent {
           <Menu
             mode="inline"
             selectedKeys={[selectKey]}
-            onClick={({ key }) => this.selectKey(key)}
+            onClick={({key}) => this.selectKey(key)}
           >
             {this.getMenu()}
           </Menu>

src/pages/settings/style.less

@@ -13,6 +13,7 @@
   border-radius: 10px;
 
   .leftMenu {
+    user-select: none;
     width: 224px;
     :global {
       .ant-menu-inline {