123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123 |
- import { message } from 'antd';
- import defaultSettings from '../defaultSettings';
- let lessNodesAppended;
- const updateTheme = primaryColor => {
- // Don't compile less in production!
- if (APP_TYPE !== 'site') {
- return;
- }
- // Determine if the component is remounted
- if (!primaryColor) {
- return;
- }
- const hideMessage = message.loading('正在编译主题!', 0);
- function buildIt() {
- if (!window.less) {
- return;
- }
- setTimeout(() => {
- window.less
- .modifyVars({
- '@primary-color': primaryColor,
- })
- .then(() => {
- hideMessage();
- })
- .catch(() => {
- message.error('Failed to update theme');
- hideMessage();
- });
- }, 200);
- }
- if (!lessNodesAppended) {
- // insert less.js and color.less
- 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.body.appendChild(lessStyleNode);
- document.body.appendChild(lessConfigNode);
- document.body.appendChild(lessScriptNode);
- lessNodesAppended = true;
- } else {
- buildIt();
- }
- };
- const updateColorWeak = colorWeak => {
- document.body.className = colorWeak ? 'colorWeak' : '';
- };
- export default {
- namespace: 'setting',
- state: defaultSettings,
- reducers: {
- getSetting(state) {
- const setting = {};
- const urlParams = new URL(window.location.href);
- Object.keys(state).forEach(key => {
- if (urlParams.searchParams.has(key)) {
- const value = urlParams.searchParams.get(key);
- setting[key] = value === '1' ? true : value;
- }
- });
- const { primaryColor, colorWeak } = setting;
- if (state.primaryColor !== primaryColor) {
- updateTheme(primaryColor);
- }
- updateColorWeak(colorWeak);
- return {
- ...state,
- ...setting,
- };
- },
- changeSetting(state, { payload }) {
- const urlParams = new URL(window.location.href);
- Object.keys(defaultSettings).forEach(key => {
- if (urlParams.searchParams.has(key)) {
- urlParams.searchParams.delete(key);
- }
- });
- Object.keys(payload).forEach(key => {
- if (key === 'collapse') {
- return;
- }
- let value = payload[key];
- if (value === true) {
- value = 1;
- }
- if (defaultSettings[key] !== value) {
- urlParams.searchParams.set(key, value);
- }
- });
- const { primaryColor, colorWeak, contentWidth } = payload;
- if (state.primaryColor !== primaryColor) {
- updateTheme(primaryColor);
- }
- if (state.contentWidth !== contentWidth && window.dispatchEvent) {
- window.dispatchEvent(new Event('resize'));
- }
- updateColorWeak(colorWeak);
- window.history.replaceState(null, 'setting', urlParams.href);
- return {
- ...state,
- ...payload,
- };
- },
- },
- };
|