From 56ce1efa819c38b7723deb28de63834c1e54c570 Mon Sep 17 00:00:00 2001 From: jim Date: Mon, 30 Apr 2018 21:05:03 +0800 Subject: [PATCH] add build message --- src/components/Sidebar/LayoutSetting.js | 31 ++++++++--------- src/components/Sidebar/ThemeColor.less | 2 +- src/components/Sidebar/index.js | 46 +++++++++++++++---------- src/components/Sidebar/index.less | 14 +++----- src/components/Sidebar/navState.js | 27 +++++---------- src/layouts/LoadingPage.js | 35 ++++++++++++------- src/models/setting.js | 13 ++++--- 7 files changed, 88 insertions(+), 80 deletions(-) diff --git a/src/components/Sidebar/LayoutSetting.js b/src/components/Sidebar/LayoutSetting.js index 7670480c..f4947402 100644 --- a/src/components/Sidebar/LayoutSetting.js +++ b/src/components/Sidebar/LayoutSetting.js @@ -1,3 +1,4 @@ +import { Tooltip } from 'antd'; import React from 'react'; import NavSate from './navState'; @@ -20,24 +21,22 @@ const LayoutSetting = ({ value, onChange }) => { margin: 8, }} > - + ))} -
- -
+ +
+ +
+ ); }; diff --git a/src/components/Sidebar/ThemeColor.less b/src/components/Sidebar/ThemeColor.less index 9170eca3..9dd141b4 100644 --- a/src/components/Sidebar/ThemeColor.less +++ b/src/components/Sidebar/ThemeColor.less @@ -19,7 +19,7 @@ width: 18px; height: 18px; margin: 4px; - border: 2px solid hsl(90, 100%, 50%); + border: 2px solid hsl(90, 100%, 50%); box-shadow: 0 0 4px 0 hsl(90, 100%, 50%); } } diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js index a1999753..1a538168 100644 --- a/src/components/Sidebar/index.js +++ b/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,29 +136,37 @@ class Sidebar extends PureComponent { this.changeSetting('collapse', !this.state.collapse); }; colorChange = color => { - window.less - .modifyVars({ - '@primary-color': color, - }) - .then(() => {}) - .catch(() => { - message.error(`Failed to update theme`); - }); 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`); + }); + } + ); }; render() { const radioStyle = { display: 'block', }; return ( - <> -
-
- logo -
+
+
+ logo
- +
); } } diff --git a/src/components/Sidebar/index.less b/src/components/Sidebar/index.less index c44432ba..a58f6896 100644 --- a/src/components/Sidebar/index.less +++ b/src/components/Sidebar/index.less @@ -1,13 +1,4 @@ .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 { diff --git a/src/components/Sidebar/navState.js b/src/components/Sidebar/navState.js index fbabb241..59090fa2 100644 --- a/src/components/Sidebar/navState.js +++ b/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', }, }; diff --git a/src/layouts/LoadingPage.js b/src/layouts/LoadingPage.js index 5b3356a6..5a4167be 100644 --- a/src/layouts/LoadingPage.js +++ b/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 ( diff --git a/src/models/setting.js b/src/models/setting.js index e2a554e6..a7b3a6fb 100644 --- a/src/models/setting.js +++ b/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, -- GitLab