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