正在显示
2 个修改的文件
包含
0 行增加
和
132 行删除
| 1 | -module.exports = { | ||
| 2 | - navTheme: 'dark', // theme for nav menu | ||
| 3 | - primaryColor: '#1890FF', // primary color of ant design | ||
| 4 | - layout: 'sidemenu', // nav menu position: sidemenu or topmenu | ||
| 5 | - contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu | ||
| 6 | - fixedHeader: false, // sticky header | ||
| 7 | - autoHideHeader: false, // auto hide header | ||
| 8 | - fixSiderbar: false, // sticky siderbar | ||
| 9 | -}; |
| 1 | -import { message } from 'antd'; | ||
| 2 | -import defaultSettings from '../defaultSettings'; | ||
| 3 | - | ||
| 4 | -let lessNodesAppended; | ||
| 5 | -const updateTheme = primaryColor => { | ||
| 6 | - // Don't compile less in production! | ||
| 7 | - if (APP_TYPE !== 'site') { | ||
| 8 | - return; | ||
| 9 | - } | ||
| 10 | - // Determine if the component is remounted | ||
| 11 | - if (!primaryColor) { | ||
| 12 | - return; | ||
| 13 | - } | ||
| 14 | - const hideMessage = message.loading('正在编译主题!', 0); | ||
| 15 | - function buildIt() { | ||
| 16 | - if (!window.less) { | ||
| 17 | - return; | ||
| 18 | - } | ||
| 19 | - setTimeout(() => { | ||
| 20 | - window.less | ||
| 21 | - .modifyVars({ | ||
| 22 | - '@primary-color': primaryColor, | ||
| 23 | - }) | ||
| 24 | - .then(() => { | ||
| 25 | - hideMessage(); | ||
| 26 | - }) | ||
| 27 | - .catch(() => { | ||
| 28 | - message.error('Failed to update theme'); | ||
| 29 | - hideMessage(); | ||
| 30 | - }); | ||
| 31 | - }, 200); | ||
| 32 | - } | ||
| 33 | - if (!lessNodesAppended) { | ||
| 34 | - // insert less.js and color.less | ||
| 35 | - const lessStyleNode = document.createElement('link'); | ||
| 36 | - const lessConfigNode = document.createElement('script'); | ||
| 37 | - const lessScriptNode = document.createElement('script'); | ||
| 38 | - lessStyleNode.setAttribute('rel', 'stylesheet/less'); | ||
| 39 | - lessStyleNode.setAttribute('href', '/color.less'); | ||
| 40 | - lessConfigNode.innerHTML = ` | ||
| 41 | - window.less = { | ||
| 42 | - async: true, | ||
| 43 | - env: 'production', | ||
| 44 | - javascriptEnabled: true | ||
| 45 | - }; | ||
| 46 | - `; | ||
| 47 | - lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js'; | ||
| 48 | - lessScriptNode.async = true; | ||
| 49 | - lessScriptNode.onload = () => { | ||
| 50 | - buildIt(); | ||
| 51 | - lessScriptNode.onload = null; | ||
| 52 | - }; | ||
| 53 | - document.body.appendChild(lessStyleNode); | ||
| 54 | - document.body.appendChild(lessConfigNode); | ||
| 55 | - document.body.appendChild(lessScriptNode); | ||
| 56 | - lessNodesAppended = true; | ||
| 57 | - } else { | ||
| 58 | - buildIt(); | ||
| 59 | - } | ||
| 60 | -}; | ||
| 61 | - | ||
| 62 | -const updateColorWeak = colorWeak => { | ||
| 63 | - document.body.className = colorWeak ? 'colorWeak' : ''; | ||
| 64 | -}; | ||
| 65 | - | ||
| 66 | -export default { | ||
| 67 | - namespace: 'setting', | ||
| 68 | - state: defaultSettings, | ||
| 69 | - reducers: { | ||
| 70 | - getSetting(state) { | ||
| 71 | - const setting = {}; | ||
| 72 | - const urlParams = new URL(window.location.href); | ||
| 73 | - Object.keys(state).forEach(key => { | ||
| 74 | - if (urlParams.searchParams.has(key)) { | ||
| 75 | - const value = urlParams.searchParams.get(key); | ||
| 76 | - setting[key] = value === '1' ? true : value; | ||
| 77 | - } | ||
| 78 | - }); | ||
| 79 | - const { primaryColor, colorWeak } = setting; | ||
| 80 | - if (state.primaryColor !== primaryColor) { | ||
| 81 | - updateTheme(primaryColor); | ||
| 82 | - } | ||
| 83 | - updateColorWeak(colorWeak); | ||
| 84 | - return { | ||
| 85 | - ...state, | ||
| 86 | - ...setting, | ||
| 87 | - }; | ||
| 88 | - }, | ||
| 89 | - changeSetting(state, { payload }) { | ||
| 90 | - const urlParams = new URL(window.location.href); | ||
| 91 | - Object.keys(defaultSettings).forEach(key => { | ||
| 92 | - if (urlParams.searchParams.has(key)) { | ||
| 93 | - urlParams.searchParams.delete(key); | ||
| 94 | - } | ||
| 95 | - }); | ||
| 96 | - Object.keys(payload).forEach(key => { | ||
| 97 | - if (key === 'collapse') { | ||
| 98 | - return; | ||
| 99 | - } | ||
| 100 | - let value = payload[key]; | ||
| 101 | - if (value === true) { | ||
| 102 | - value = 1; | ||
| 103 | - } | ||
| 104 | - if (defaultSettings[key] !== value) { | ||
| 105 | - urlParams.searchParams.set(key, value); | ||
| 106 | - } | ||
| 107 | - }); | ||
| 108 | - const { primaryColor, colorWeak, contentWidth } = payload; | ||
| 109 | - if (state.primaryColor !== primaryColor) { | ||
| 110 | - updateTheme(primaryColor); | ||
| 111 | - } | ||
| 112 | - if (state.contentWidth !== contentWidth && window.dispatchEvent) { | ||
| 113 | - window.dispatchEvent(new Event('resize')); | ||
| 114 | - } | ||
| 115 | - updateColorWeak(colorWeak); | ||
| 116 | - window.history.replaceState(null, 'setting', urlParams.href); | ||
| 117 | - return { | ||
| 118 | - ...state, | ||
| 119 | - ...payload, | ||
| 120 | - }; | ||
| 121 | - }, | ||
| 122 | - }, | ||
| 123 | -}; |
请
注册
或
登录
后发表评论