使用ice-plugin-fusion给icedesign的模板加个主题(theme)
程序员文章站
2022-05-23 12:15:00
抄写多语言组件,基于ice-plugin-fusion为iceworks的“ICE Design Pro”实现一个多主题切换功能 ......
最近一直处于半失业状态,好多年没有更新对前端的理解了,闲来看看前端技术的发展。因为一直是个草台班子,身兼多职东看看西看看,一直没太搞清楚iceworks、ant design, fusion等等一堆阿里系的开源项目。用了半小时用iceworks搭了一个react的模板出来,感觉好像自己突然成了react砖家似的,花了几天时间像猫吃刺猬一样,难以下嘴。总是觉得“ice design pro”没有动态主题配置很不方便。摸索了两天,算是磕磕绊绊的抄出了一个功能。那就仿照这“多语言”设置依葫芦画瓢整一个多主题配置吧。
在路径“\src\layouts\basiclayout\components\header”下找到了index.jsx
import selectlang from '@/components/selectlang';
import selecttheme from '@/components/selecttheme'; //添加一个不存在的组件
<div classname={styles.headeraction}>
{/*依葫芦画瓢整个标签,来切换主题*/}
{/*多主题选择*/}
<selecttheme />
{/*依葫芦画瓢整个标签,来切换主题*/}
{/* 多语言选择 */}
<selectlang />
然后,照样在“src\components”下把selectlang文件夹拷贝更名为“selecttheme”,然后修改"\src\components\selecttheme\index.jsx"
import react from 'react';
import { select } from '@alifd/next';
import { gettheme, settheme } from '@/utils/theme';
const option = select.option;
const theme_config = {
'@icedesign/theme': {
text: '默认主题',
icon: '',
},
'@alifd/theme-ice-green': {
text: '绿色主题',
icon: '',
},
'@alifd/theme-ice-orange': {
text: '橙色主题',
icon: '',
},
'@alifd/theme-ice-purple': {
text: '紫色主题',
icon: '',
},
};
function changetheme(key) {
settheme(key);
}
export default function selecttheme() {
const selectedtheme = gettheme();
return (
<select
onchange={changetheme}
defaultvalue={selectedtheme}
size="small"
style={{ display: 'flex', alignitems: 'center' }}
>
{object.keys(theme_config).map((theme) => {
return (
<option value={theme} key={theme}>
{theme_config[theme].text}
</option>
);
})}
</select>
);
}
然后拷贝“src\utils\locale.js”改名为"theme.js"
/**
* 设置当前主题
* @param {string} ctheme
*/
function settheme(ctheme) {
if (ctheme === undefined) {
ctheme = '@icedesign/theme';
}
if (gettheme() !== ctheme) {
window.localstorage.setitem('theme', ctheme);
// 可以在设置的主题包 @icedesign/theme 和 @alifd/theme-ice-purple 之间切换
window.__changetheme__(ctheme);
}
}
/**
* 获取当前主题
*/
function gettheme() {
if (!window.localstorage.getitem('theme')) {
window.localstorage.setitem('theme', navigator.theme);
}
return localstorage.getitem('theme');
}
export { settheme, gettheme };
测试一下,没问题了。总算抄出来一个功能,比较有装逼的成就感了。
当然用iceworks的gui还需要改一下"ice.config.js"
plugins: [
['ice-plugin-fusion', {
// 通过数组方式配置多主题包
themepackage: [{
name: '@icedesign/theme',
// 设置默认加载主题,如果不进行设置,默认以最后添加主题包作为默认主题
default: true,
// 设置自定义主题颜色,可以在 scss 文件中直接使用该变量,比如: .bg-color { background: $custom-color; }
themeconfig: {
'custom-color': '#000',//测试自定义
},
}, {
name: '@alifd/theme-ice-orange',
themeconfig: {
'custom-color': '#fff', //测试自定义
},
}, {
name: '@alifd/theme-ice-green',
themeconfig: {
'custom-color': '#fff',//测试自定义
},
}, {
name: '@alifd/theme-ice-purple',
themeconfig: {
'custom-color': '#fff',//测试自定义
},
}],
}],
['ice-plugin-moment-locales', {
locales: ['zh-cn'],
}]
],
剩下的就是用npm把这几个主题引入到工程中了,另外fusion提供了一个可以在线编辑主题的功能,可以访问“fusion”
参考材料: