Optimization: Reduce the dependency of the setting component

package.json

@@ -44,7 +44,6 @@
     "react-fittext": "^1.0.0",
     "rollbar": "^2.4.2",
     "setprototypeof": "^1.1.0",
-    "umi-plugin-locale": "^1.0.1",
     "url-polyfill": "^1.0.13"
   },
   "devDependencies": {
@@ -87,7 +86,8 @@
     "stylelint-config-standard": "^18.0.0",
     "umi": "^1.3.15",
     "umi-plugin-dva": "^0.9.1",
-    "umi-plugin-routes": "^0.1.5"
+    "umi-plugin-routes": "^0.1.5",
+    "umi-plugin-locale": "^1.0.1"
   },
   "optionalDependencies": {
     "puppeteer": "^1.6.0"

src/components/SettingDarwer/index.js

@@ -20,24 +20,9 @@ const Body = ({ children, title, style }) => (
 
 @connect(({ setting }) => ({ setting }))
 class SettingDarwer extends PureComponent {
-  componentDidMount() {
-    const {
-      setting: { themeColor, colorWeak },
-    } = this.props;
-    // Determine if the component is remounted
-    if (themeColor !== '#1890FF' && themeColor !== window['antd_pro_less_color']) {
-      window.less.refresh().then(() => {
-        this.colorChange(themeColor);
-      });
-    }
-    if (colorWeak === 'open') {
-      document.body.className = 'colorWeak';
-    }
-  }
-
   getLayOutSetting = () => {
     const {
-      setting: { grid, fixedHeader, autoHideHeader, fixSiderbar },
+      setting: { grid, fixedHeader, layout, autoHideHeader, fixSiderbar },
     } = this.props;
     return [
       {
@@ -77,6 +62,7 @@ class SettingDarwer extends PureComponent {
       },
       {
         title: '固定 Siderbar',
+        hide: layout === 'topmenu',
         action: [
           <Switch
             size="small"
@@ -106,13 +92,6 @@ class SettingDarwer extends PureComponent {
         nextState.autoHideHeader = false;
       }
     }
-    if (key === 'colorWeak') {
-      if (value) {
-        document.body.className = 'colorWeak';
-      } else {
-        document.body.className = '';
-      }
-    }
     this.setState(nextState, () => {
       const { dispatch } = this.props;
       dispatch({
@@ -127,25 +106,6 @@ class SettingDarwer extends PureComponent {
     this.changeSetting('collapse', !setting.collapse);
   };
 
-  colorChange = color => {
-    this.changeSetting('themeColor', color);
-    const hideMessage = message.loading('正在编译主题！', 0);
-    setTimeout(() => {
-      window.less
-        .modifyVars({
-          '@primary-color': color,
-          '@input-hover-border-color': color,
-        })
-        .then(() => {
-          window['antd_pro_less_color'] = color;
-          hideMessage();
-        })
-        .catch(() => {
-          message.error(`Failed to update theme`);
-        });
-    }, 200);
-  };
-
   render() {
     const { setting } = this.props;
     const { collapse, silderTheme, themeColor, layout, colorWeak } = setting;
@@ -197,7 +157,10 @@ class SettingDarwer extends PureComponent {
             />
           </Body>
 
-          <ThemeColor value={themeColor} onChange={this.colorChange} />
+          <ThemeColor
+            value={themeColor}
+            onChange={color => this.changeSetting('themeColor', color)}
+          />
 
           <Divider />
 

src/models/setting.js

+import { message } from 'antd';
 const defaultSetting = {
   collapse: false,
   silderTheme: 'dark',
@@ -10,6 +11,34 @@ const defaultSetting = {
   colorWeak: false,
 };
 
+const buildLessAndWeak = (themeColor, colorWeak) => {
+  // Determine if the component is remounted
+  if (themeColor && themeColor !== '#1890FF' && themeColor !== window['antd_pro_less_color']) {
+    window.less.refresh().then(() => {
+      const hideMessage = message.loading('正在编译主题！', 0);
+      setTimeout(() => {
+        window.less
+          .modifyVars({
+            '@primary-color': themeColor,
+            '@input-hover-border-color': themeColor,
+          })
+          .then(() => {
+            window['antd_pro_less_color'] = themeColor;
+            hideMessage();
+          })
+          .catch(() => {
+            message.error(`Failed to update theme`);
+          });
+      }, 200);
+    });
+  }
+  if (colorWeak) {
+    document.body.className = 'colorWeak';
+  } else {
+    document.body.className = '';
+  }
+};
+
 export default {
   namespace: 'setting',
   state: defaultSetting,
@@ -23,6 +52,8 @@ export default {
           setting[key] = value === '1' ? true : value;
         }
       });
+      const { themeColor, colorWeak } = setting;
+      buildLessAndWeak(themeColor, colorWeak);
       return {
         ...state,
         ...setting,
@@ -47,6 +78,8 @@ export default {
           urlParams.searchParams.set(key, value);
         }
       });
+      const { themeColor, colorWeak } = payload;
+      buildLessAndWeak(themeColor, colorWeak);
       window.history.replaceState(null, 'setting', urlParams.href);
       return {
         ...state,

src/pages/document.ejs

@@ -15,7 +15,7 @@
 
 <body>
   <div id="root"></div>
-  <link rel="stylesheet/less" type="text/css" href="/static/color.less" />
+  <link rel="stylesheet/less" type="text/css" href="/color.less" />
   <script>
     window.less = {
       async: false,