124 lines
3.4 KiB
JavaScript
124 lines
3.4 KiB
JavaScript
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,
|
|
};
|
|
},
|
|
},
|
|
};
|