正在显示
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 | -}; |
请
注册
或
登录
后发表评论