add build message

src/components/Sidebar/LayoutSetting.js

+import { Tooltip } from 'antd';
 import React from 'react';
 import NavSate from './navState';
 
@@ -20,13 +21,10 @@ const LayoutSetting = ({ value, onChange }) => {
             margin: 8,
           }}
         >
-          <NavSate
-            type={layout}
-            state={value === layout ? 'active' : 'default'}
-            alt={layout}
-          />
+          <NavSate type={layout} state={value === layout ? 'active' : 'default'} alt={layout} />
         </div>
       ))}
+      <Tooltip title="等待后期实现！">
         <div
           key="topside"
           style={{
@@ -38,6 +36,7 @@ const LayoutSetting = ({ value, onChange }) => {
         >
           <NavSate type="topside" state="disable" alt="topside" />
         </div>
+      </Tooltip>
     </div>
   );
 };

src/components/Sidebar/index.js

@@ -57,7 +57,9 @@ class Sidebar extends PureComponent {
     const propsState = this.propsToState(props);
     this.state = { ...this.defaultstate, ...propsState };
   }
-
+  componentDidMount() {
+    this.colorChange(this.state.themeColor);
+  }
   getLayOutSetting = () => {
     const { layout } = this.state;
     return [
@@ -134,22 +136,31 @@ class Sidebar extends PureComponent {
     this.changeSetting('collapse', !this.state.collapse);
   };
   colorChange = color => {
+    this.changeSetting('themeColor', color);
+    this.setState(
+      {
+        themeColor: color,
+      },
+      () => {
+        const hideMessage = message.loading('正在编译主题！', 0);
         window.less
           .modifyVars({
             '@primary-color': color,
           })
-      .then(() => {})
+          .then(() => {
+            hideMessage();
+          })
           .catch(() => {
             message.error(`Failed to update theme`);
           });
-    this.changeSetting('themeColor', color);
+      }
+    );
   };
   render() {
     const radioStyle = {
       display: 'block',
     };
     return (
-      <>
       <div className={styles.sidebar}>
         <div className={styles.mini_bar} onClick={this.togglerContent}>
           <img
@@ -157,7 +168,6 @@ class Sidebar extends PureComponent {
             src="https://gw.alipayobjects.com/zos/rmsportal/ApQgLmeZDNJMomKNvavq.svg"
           />
         </div>
-        </div>
         <DrawerMenu
           parent={null}
           level={null}
@@ -223,7 +233,7 @@ class Sidebar extends PureComponent {
             </Body>
           </div>
         </DrawerMenu>
-      </>
+      </div>
     );
   }
 }

src/components/Sidebar/index.less

 .sidebar {
-  position: fixed;
-  right: -336px;
-  top: 150px;
-  transition: 0.3s;
-  display: flex;
-  z-index: 9;
-  &.show {
-    right: 0;
-  }
   .mini_bar {
     width: 50px;
     height: 45px;
@@ -25,6 +16,11 @@
       height: 28px;
     }
   }
+  :global {
+    .drawer {
+      z-index: 999;
+    }
+  }
 }
 
 .content {

src/components/Sidebar/navState.js

@@ -2,28 +2,19 @@ import React from 'react';
 
 const UrlMap = {
   sidemenu: {
-    active:
-      'https://gw.alipayobjects.com/zos/rmsportal/WEqgEeCsLvecmwJwbhif.svg',
-    default:
-      'https://gw.alipayobjects.com/zos/rmsportal/bjdhEDZlJzyMlyGbFQQd.svg',
-    disable:
-      'https://gw.alipayobjects.com/zos/rmsportal/VeCtUculrOjKzkzSzrye.svg',
+    active: 'https://gw.alipayobjects.com/zos/rmsportal/WEqgEeCsLvecmwJwbhif.svg',
+    default: 'https://gw.alipayobjects.com/zos/rmsportal/bjdhEDZlJzyMlyGbFQQd.svg',
+    disable: 'https://gw.alipayobjects.com/zos/rmsportal/VeCtUculrOjKzkzSzrye.svg',
   },
   topside: {
-    active:
-      'https://gw.alipayobjects.com/zos/rmsportal/RbntcRzDHttDvYfKxsPc.svg',
-    default:
-      'https://gw.alipayobjects.com/zos/rmsportal/gqjBdnSHfVYIFvpGbLZV.svg',
-    disable:
-      'https://gw.alipayobjects.com/zos/rmsportal/VlSlQQkUGdbcOZdbUgMp.svg',
+    active: 'https://gw.alipayobjects.com/zos/rmsportal/RbntcRzDHttDvYfKxsPc.svg',
+    default: 'https://gw.alipayobjects.com/zos/rmsportal/gqjBdnSHfVYIFvpGbLZV.svg',
+    disable: 'https://gw.alipayobjects.com/zos/rmsportal/VlSlQQkUGdbcOZdbUgMp.svg',
   },
   topmenu: {
-    active:
-      'https://gw.alipayobjects.com/zos/rmsportal/nWoQtAGvMihfwxKZEzAi.svg',
-    default:
-      'https://gw.alipayobjects.com/zos/rmsportal/tbfuZcaGaYQGyeaiTaDg.svg',
-    disable:
-      'https://gw.alipayobjects.com/zos/rmsportal/VYNKTivFAQOBBbZkkWNb.svg',
+    active: 'https://gw.alipayobjects.com/zos/rmsportal/nWoQtAGvMihfwxKZEzAi.svg',
+    default: 'https://gw.alipayobjects.com/zos/rmsportal/tbfuZcaGaYQGyeaiTaDg.svg',
+    disable: 'https://gw.alipayobjects.com/zos/rmsportal/VYNKTivFAQOBBbZkkWNb.svg',
   },
 };
 

src/layouts/LoadingPage.js

@@ -45,19 +45,7 @@ class LoadingPage extends PureComponent {
     this.props.dispatch({
       type: 'user/fetchCurrent',
     });
-    const urlParams = new URL(window.location.href);
-    const settingString = urlParams.searchParams.get('setting');
-    if (settingString) {
-      const setting = {};
-      settingString.split(';').forEach(keyValue => {
-        const [key, value] = keyValue.split(':');
-        setting[key] = value;
-      });
-      this.props.dispatch({
-        type: 'setting/changeSetting',
-        payload: setting,
-      });
-    }
+    this.initSetting();
     this.hideLoading();
   }
   componentWillUnmount() {
@@ -68,6 +56,27 @@ class LoadingPage extends PureComponent {
       loading: false,
     });
   }
+  initSetting() {
+    const setting = {
+      collapse: false,
+      silderTheme: 'dark',
+      themeColor: '#1890FF',
+      layout: 'sidemenu',
+      grid: 'Fluid',
+      fixedHeader: false,
+      autoHideHeader: false,
+      fixSiderbar: false,
+      colorWeak: 'close',
+    };
+    const urlParams = new URL(window.location.href);
+    Object.keys(setting).forEach(key => {
+      setting[key] = urlParams.searchParams.get(key);
+    });
+    this.props.dispatch({
+      type: 'setting/changeSetting',
+      payload: setting,
+    });
+  }
   render() {
     if (this.state.loading) {
       return (

src/models/setting.js

@@ -15,13 +15,16 @@ export default {
   reducers: {
     changeSetting(state, { payload }) {
       const urlParams = new URL(window.location.href);
-      let urlParamsString = '';
-      Object.keys(payload).forEach((key) => {
-        if (payload[key] && state[key] !== undefined && key !== 'collapse') {
-          urlParamsString += `${key}:${payload[key]};`;
+      Object.keys(payload).forEach(key => {
+        if (key === 'collapse') {
+          return;
         }
+        let value = payload[key];
+        if (value === true) {
+          value = 1;
+        }
+        urlParams.searchParams.set(key, value);
       });
-      urlParams.searchParams.set('setting', urlParamsString);
       window.history.replaceState(null, 'setting', urlParams.href);
       return {
         ...state,