欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用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

 

使用ice-plugin-fusion给icedesign的模板加个主题(theme)

参考材料:

ice主题配置

select选择器