From 0a5a9fc87216aba6f93db8cc587977fc06f25fa5 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 28 Aug 2018 15:46:09 +0800 Subject: [PATCH] improve less compile --- package.json | 1 - src/components/SettingDarwer/index.js | 3 + src/components/SettingDarwer/index.less | 14 +++- src/defaultSetting.js | 11 +++ src/locales/zh-CN.js | 3 +- src/models/setting.js | 89 +++++++++++++++---------- src/pages/document.ejs | 8 --- 7 files changed, 80 insertions(+), 49 deletions(-) create mode 100644 src/defaultSetting.js diff --git a/package.json b/package.json index 0e79cd09..c4a07b73 100755 --- a/package.json +++ b/package.json @@ -74,7 +74,6 @@ "mockjs": "^1.0.1-beta3", "prettier": "1.14.2", "pro-download": "^1.0.1", - "react-loadable": "^5.4.0", "redbox-react": "^1.5.0", "regenerator-runtime": "^0.12.0", "stylelint": "^9.4.0", diff --git a/src/components/SettingDarwer/index.js b/src/components/SettingDarwer/index.js index 3b8f2848..4c81b420 100644 --- a/src/components/SettingDarwer/index.js +++ b/src/components/SettingDarwer/index.js @@ -224,6 +224,9 @@ class SettingDarwer extends PureComponent { {formatMessage({ id: 'app.setting.copy' })} +
+ {formatMessage({ id: 'app.setting.production.hint' })} +
); diff --git a/src/components/SettingDarwer/index.less b/src/components/SettingDarwer/index.less index f43db072..462fa36d 100644 --- a/src/components/SettingDarwer/index.less +++ b/src/components/SettingDarwer/index.less @@ -12,7 +12,7 @@ margin-right: 16px; position: relative; // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - border-radius: 4px; + border-radius: @border-radius-base; cursor: pointer; img { width: 48px; @@ -31,6 +31,7 @@ font-weight: bold; } } + .color_block { width: 38px; height: 22px; @@ -41,9 +42,10 @@ display: inline-block; vertical-align: middle; } + .title { font-size: 14px; - color: rgba(0, 0, 0, 0.85); + color: @heading-color; line-height: 22px; margin-bottom: 12px; } @@ -51,7 +53,7 @@ .handle { position: fixed; top: 240px; - background: #1890ff; + background: @primary-color; width: 48px; height: 48px; right: 273px; @@ -65,3 +67,9 @@ font-size: 16px; border-radius: 4px 0 0 4px; } + +.productionHint { + font-size: 12px; + color: @text-color-secondary; + margin-top: 4px; +} diff --git a/src/defaultSetting.js b/src/defaultSetting.js new file mode 100644 index 00000000..93509816 --- /dev/null +++ b/src/defaultSetting.js @@ -0,0 +1,11 @@ +export default { + collapse: false, + silderTheme: 'dark', + themeColor: '#1890FF', + layout: 'sidemenu', + grid: 'Fluid', + fixedHeader: false, + autoHideHeader: false, + fixSiderbar: false, + colorWeak: false, +}; diff --git a/src/locales/zh-CN.js b/src/locales/zh-CN.js index 52683dcb..05107549 100644 --- a/src/locales/zh-CN.js +++ b/src/locales/zh-CN.js @@ -162,5 +162,6 @@ export default { 'app.setting.othersettings': '其他设置', 'app.setting.weakmode': '色弱模式', 'app.setting.copy': '拷贝设置', - 'app.setting.copyinfo': '拷贝成功，请到 src/models/setting.js 中替换 defaultSetting', + 'app.setting.copyinfo': '拷贝成功，请到 src/defaultSetting.js 中替换', + 'app.setting.production.hint': '设置侧边栏只会出现在开发环境，请手动配置 src/defaultSetting.js', }; diff --git a/src/models/setting.js b/src/models/setting.js index f968d6ce..ffb7d807 100644 --- a/src/models/setting.js +++ b/src/models/setting.js @@ -1,42 +1,59 @@ import { message } from 'antd'; +import defaultSetting from '../defaultSetting'; -const defaultSetting = { - collapse: false, - silderTheme: 'dark', - themeColor: '#1890FF', - layout: 'sidemenu', - grid: 'Fluid', - fixedHeader: false, - autoHideHeader: false, - fixSiderbar: false, - colorWeak: false, -}; - -const buildLessAndWeak = (themeColor, colorWeak) => { +let lessNodesAppended; +const buildSettings = (themeColor, colorWeak) => { + document.body.className = colorWeak ? '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 (!themeColor || themeColor === '#1890FF' || themeColor === window['antd_pro_less_color']) { + return; } - if (colorWeak) { - document.body.className = 'colorWeak'; + const hideMessage = message.loading('正在编译主题！', 0); + if (!lessNodesAppended) { + console.log('append less nodes'); + const lessStyleNode = document.createElement('link'); + const lessConfigNode = document.createElement('script'); + const lessScriptNode = document.createElement('script'); + lessStyleNode.setAttribute('rel', 'stylesheet/less'); + lessStyleNode.setAttribute('href', '/color.less'); + lessConfigNode.innerHTML = ` + window.less = { + async: true, + env: 'production', + javascriptEnabled: true + }; + `; + lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js'; + lessScriptNode.async = true; + lessScriptNode.onload = () => { + buildIt(); + lessScriptNode.onload = null; + }; + document.head.appendChild(lessStyleNode); + document.head.appendChild(lessConfigNode); + document.head.appendChild(lessScriptNode); + lessNodesAppended = true; } else { - document.body.className = ''; + buildIt(); + } + function buildIt() { + if (!window.less) { + return; + } + window.less + .modifyVars({ + '@primary-color': themeColor, + '@input-hover-border-color': themeColor, + }) + .then(() => { + console.log('start to compile'); + window['antd_pro_less_color'] = themeColor; + hideMessage(); + }) + .catch(() => { + message.error(`Failed to update theme`); + hideMessage(); + }); } }; @@ -54,7 +71,7 @@ export default { } }); const { themeColor, colorWeak } = setting; - buildLessAndWeak(themeColor, colorWeak); + buildSettings(themeColor, colorWeak); return { ...state, ...setting, @@ -80,7 +97,7 @@ export default { } }); const { themeColor, colorWeak } = payload; - buildLessAndWeak(themeColor, colorWeak); + buildSettings(themeColor, colorWeak); window.history.replaceState(null, 'setting', urlParams.href); return { ...state, diff --git a/src/pages/document.ejs b/src/pages/document.ejs index a3644cbf..43ae1f3e 100644 --- a/src/pages/document.ejs +++ b/src/pages/document.ejs @@ -10,13 +10,5 @@
- - - -- GitLab