Optimization parameter logic

src/components/Charts/WaterWave/index.js

@@ -30,11 +30,13 @@ export default class WaterWave extends PureComponent {
 
   resize = () => {
     requestAnimationFrame(() => {
-      const { height } = this.props;
-      const { offsetWidth } = this.root.parentNode;
-      this.setState({
-        radio: offsetWidth < height ? offsetWidth / height : 1,
-      });
+      if (this.root) {
+        const { height } = this.props;
+        const { offsetWidth } = this.root.parentNode;
+        this.setState({
+          radio: offsetWidth < height ? offsetWidth / height : 1,
+        });
+      }
     });
   };
 

src/components/Sidebar/LayoutSetting.js

@@ -1,39 +1,18 @@
 import { Tooltip } from 'antd';
 import React from 'react';
 import NavSate from './navState';
+import style from './index.less';
 
 const LayoutSetting = ({ value, onChange }) => {
   return (
-    <div
-      style={{
-        margin: 5,
-        display: 'flex',
-      }}
-    >
+    <div className={style.layoutSetting}>
       {['sidemenu', 'topmenu'].map(layout => (
-        <div
-          onClick={() => onChange && onChange(layout)}
-          key={layout}
-          style={{
-            width: 70,
-            height: 44,
-            textAlign: 'center',
-            margin: 8,
-          }}
-        >
+        <div className={style.item} onClick={() => onChange && onChange(layout)} key={layout}>
           <NavSate type={layout} state={value === layout ? 'active' : 'default'} alt={layout} />
         </div>
       ))}
       <Tooltip title="等待后期实现！">
-        <div
-          key="topside"
-          style={{
-            width: 70,
-            height: 44,
-            textAlign: 'center',
-            margin: 8,
-          }}
-        >
+        <div key="topside" className={style.item}>
           <NavSate type="topside" state="disable" alt="topside" />
         </div>
       </Tooltip>

src/components/Sidebar/index.js

@@ -1,6 +1,7 @@
 import React, { PureComponent, Fragment } from 'react';
 import { Select, message, List, Switch, Divider, Radio } from 'antd';
 import DrawerMenu from 'rc-drawer-menu';
+import { connect } from 'dva';
 import styles from './index.less';
 import ThemeColor from './ThemeColor';
 import LayoutSeting from './LayoutSetting';
@@ -30,45 +31,23 @@ const Body = ({ children, title, style }) => (
     {children}
   </div>
 );
-
+@connect(({ setting }) => ({ setting }))
 class Sidebar extends PureComponent {
-  static getDerivedStateFromProps(nextProps, prevState) {
-    const nextState = {};
-    Object.keys(nextProps).forEach(key => {
-      if (nextProps[key] && prevState[key] !== undefined) {
-        nextState[key] = nextProps[key];
-      }
-    });
-    return nextState;
-  }
-  constructor(props) {
-    super(props);
-    this.defaultstate = {
-      collapse: false,
-      silderTheme: 'dark',
-      themeColor: '#1890FF',
-      layout: 'sidemenu',
-      grid: 'Fluid',
-      fixedHeader: false,
-      autoHideHeader: false,
-      fixSiderbar: false,
-      colorWeak: 'close',
-    };
-    const propsState = this.propsToState(props);
-    this.state = { ...this.defaultstate, ...propsState };
-  }
   componentDidMount() {
-    this.colorChange(this.state.themeColor);
+    const { themeColor } = this.props.setting;
+    if (themeColor !== '#1890FF') {
+      this.colorChange(themeColor);
+    }
   }
   getLayOutSetting = () => {
-    const { layout } = this.state;
+    const { grid, fixedHeader, autoHideHeader, fixSiderbar, layout } = this.props.setting;
     return [
       {
         title: '栅格模式',
         isShow: true,
         action: [
           <Select
-            value={this.state.grid}
+            value={grid}
             onSelect={value => this.changeSetting('grid', value)}
             style={{ width: 120 }}
           >
@@ -82,7 +61,7 @@ class Sidebar extends PureComponent {
         isShow: true,
         action: [
           <Switch
-            checked={!!this.state.fixedHeader}
+            checked={!!fixedHeader}
             onChange={checked => this.changeSetting('fixedHeader', checked)}
           />,
         ],
@@ -92,7 +71,7 @@ class Sidebar extends PureComponent {
         isShow: true,
         action: [
           <Switch
-            checked={!!this.state.autoHideHeader}
+            checked={!!autoHideHeader}
             onChange={checked => this.changeSetting('autoHideHeader', checked)}
           />,
         ],
@@ -100,7 +79,7 @@ class Sidebar extends PureComponent {
       {
         title: 'Fix Siderbar',
         isShow: layout === 'sidemenu',
-        action: [<Switch checked={!!this.state.fixSiderbar} onChange={this.fixSiderbar} />],
+        action: [<Switch checked={!!fixSiderbar} onChange={this.fixSiderbar} />],
       },
     ].filter(item => item.isShow);
   };
@@ -118,48 +97,34 @@ class Sidebar extends PureComponent {
       }
     }
     this.setState(nextState, () => {
-      if (this.props.onChange) {
-        this.props.onChange(this.state);
-      }
+      this.props.dispatch({
+        type: 'setting/changeSetting',
+        payload: this.state,
+      });
     });
   };
-  propsToState = props => {
-    const nextState = {};
-    Object.keys(props).forEach(key => {
-      if (props[key] && this.defaultstate[key] !== undefined) {
-        nextState[key] = props[key];
-      }
-    });
-    return nextState;
-  };
   togglerContent = () => {
-    this.changeSetting('collapse', !this.state.collapse);
+    this.changeSetting('collapse', !this.props.setting.collapse);
   };
   colorChange = color => {
     this.changeSetting('themeColor', color);
-    this.setState(
-      {
-        themeColor: color,
-      },
-      () => {
-        const hideMessage = message.loading('正在编译主题！', 0);
-        window.less
-          .modifyVars({
-            '@primary-color': color,
-          })
-          .then(() => {
-            hideMessage();
-          })
-          .catch(() => {
-            message.error(`Failed to update theme`);
-          });
-      }
-    );
+    const hideMessage = message.loading('正在编译主题！', 0);
+    window.less
+      .modifyVars({
+        '@primary-color': color,
+      })
+      .then(() => {
+        hideMessage();
+      })
+      .catch(() => {
+        message.error(`Failed to update theme`);
+      });
   };
   render() {
     const radioStyle = {
       display: 'block',
     };
+    const { collapse, silderTheme, themeColor, layout, colorWeak } = this.props.setting;
     return (
       <div className={styles.sidebar}>
         <div className={styles.mini_bar} onClick={this.togglerContent}>
@@ -172,7 +137,7 @@ class Sidebar extends PureComponent {
           parent={null}
           level={null}
           iconChild={null}
-          open={this.state.collapse}
+          open={collapse}
           placement="right"
           width="336px"
           onMaskClick={this.togglerContent}
@@ -186,7 +151,7 @@ class Sidebar extends PureComponent {
             >
               <RadioGroup
                 onChange={({ target }) => this.changeSetting('silderTheme', target.value)}
-                value={this.state.silderTheme}
+                value={silderTheme}
               >
                 <Radio style={radioStyle} value="dark">
                   <ColorBlock color="#002140" title="深色导航" />
@@ -195,13 +160,13 @@ class Sidebar extends PureComponent {
                   <ColorBlock color="#E9E9E9" title="浅色导航" />
                 </Radio>
               </RadioGroup>
-              <ThemeColor value={this.state.themeColor} onChange={this.colorChange} />
+              <ThemeColor value={themeColor} onChange={this.colorChange} />
             </Body>
             <Divider style={{ margin: 0 }} />
             <Body title="导航设置 ">
               <LayoutSeting
-                value={this.state.layout}
-                onChange={layout => this.changeSetting('layout', layout)}
+                value={layout}
+                onChange={value => this.changeSetting('layout', value)}
               />
               <List
                 split={false}
@@ -218,7 +183,7 @@ class Sidebar extends PureComponent {
                     title: '色弱模式',
                     action: [
                       <Select
-                        value={this.state.colorWeak}
+                        value={colorWeak}
                         onSelect={value => this.changeSetting('colorWeak', value)}
                         style={{ width: 120 }}
                       >

src/components/Sidebar/index.less

@@ -10,6 +10,8 @@
     position: fixed;
     bottom: 50px;
     right: 50px;
+    cursor: pointer;
+    z-index: 99;
     box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.35);
     img {
       width: 28px;
@@ -37,6 +39,18 @@
     }
   }
 }
+
+.layoutSetting {
+  margin: 5px;
+  display: flex;
+  .item {
+    cursor: pointer;
+    width: 70px;
+    height: 44px;
+    text-align: center;
+    margin: 8px;
+  }
+}
 .color_block {
   width: 38px;
   height: 22px;

src/layouts/BasicLayout.js

@@ -18,8 +18,6 @@ import Context from './MenuContext';
 const { Content } = Layout;
 const { AuthorizedRoute, check } = Authorized;
 
-const RightSidebar = connect(({ setting }) => ({ ...setting }))(Sidebar);
-
 /**
  * 获取面包屑映射
  * @param {Object} menuData 菜单配置
@@ -103,12 +101,6 @@ class BasicLayout extends React.PureComponent {
       payload: collapsed,
     });
   };
-  changeSetting = setting => {
-    this.props.dispatch({
-      type: 'setting/changeSetting',
-      payload: setting,
-    });
-  };
   render() {
     const { isMobile, redirectData, routerData, fixedHeader, match } = this.props;
     const isTop = this.props.layout === 'topmenu';
@@ -164,7 +156,7 @@ class BasicLayout extends React.PureComponent {
             <Context.Provider value={this.getContext()}>
               <div className={classNames(params)}>
                 {layout}
-                <RightSidebar onChange={this.changeSetting} />
+                <Sidebar />
               </div>
             </Context.Provider>
           )}

src/layouts/Header.js

@@ -18,9 +18,7 @@ class HeaderView extends PureComponent {
     document.getElementById('root').addEventListener('scroll', this.handScroll);
   }
   componentWillUnmount() {
-    document
-      .getElementById('root')
-      .removeEventListener('scroll', this.handScroll);
+    document.getElementById('root').removeEventListener('scroll', this.handScroll);
   }
   getHeadWidth = () => {
     const { fixedHeader, layout, fixSiderbar } = this.props.setting;
@@ -34,7 +32,7 @@ class HeaderView extends PureComponent {
       return 'calc(100% - 80px)';
     }
   };
-  handleNoticeClear = (type) => {
+  handleNoticeClear = type => {
     message.success(`清空了${type}`);
     this.props.dispatch({
       type: 'global/clearNotices',
@@ -60,7 +58,7 @@ class HeaderView extends PureComponent {
       });
     }
   };
-  handleNoticeVisibleChange = (visible) => {
+  handleNoticeVisibleChange = visible => {
     if (visible) {
       this.props.dispatch({
         type: 'global/fetchNotices',

src/layouts/LoadingPage.js

@@ -56,25 +56,12 @@ class LoadingPage extends PureComponent {
       loading: false,
     });
   }
+  /**
+   * get setting from url params
+   */
   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,
+      type: 'setting/getSetting',
     });
   }
   render() {

src/models/setting.js

@@ -1,20 +1,37 @@
+const defaultSetting = {
+  collapse: false,
+  silderTheme: 'dark',
+  themeColor: '#1890FF',
+  layout: 'sidemenu',
+  grid: 'Fluid',
+  fixedHeader: false,
+  autoHideHeader: false,
+  fixSiderbar: false,
+  colorWeak: 'close',
+};
 export default {
   namespace: 'setting',
 
-  state: {
-    collapse: false,
-    silderTheme: 'dark',
-    themeColor: '#1890FF',
-    layout: 'sidemenu',
-    grid: 'Fluid',
-    fixedHeader: false,
-    autoHideHeader: false,
-    fixSiderbar: false,
-    colorWeak: 'close',
-  },
+  state: defaultSetting,
   reducers: {
+    getSetting(state) {
+      const setting = { ...state };
+      const urlParams = new URL(window.location.href);
+      Object.keys(state).forEach(key => {
+        if (urlParams.searchParams.has(key)) {
+          const value = urlParams.searchParams.get(key);
+          setting[key] = value;
+        }
+      });
+      return setting;
+    },
     changeSetting(state, { payload }) {
       const urlParams = new URL(window.location.href);
+      Object.keys(defaultSetting).forEach(key => {
+        if (urlParams.searchParams.has(key)) {
+          urlParams.searchParams.delete(key);
+        }
+      });
       Object.keys(payload).forEach(key => {
         if (key === 'collapse') {
           return;
@@ -23,7 +40,9 @@ export default {
         if (value === true) {
           value = 1;
         }
-        urlParams.searchParams.set(key, value);
+        if (defaultSetting[key] !== value) {
+          urlParams.searchParams.set(key, value);
+        }
       });
       window.history.replaceState(null, 'setting', urlParams.href);
       return {