ipink-theme/theme.store.js

Theme for ui, 根据自定义的颜色值导出一套常用的Map合集, 字号、圆角、边框、字色、背景色、...

/**
 * 用于 Vue2 的store
 */

import { createThemeList, ThemeConfig } from "ipink-theme";


const themeList = ThemeConfig.themeList || [{"colorPrimary": "#16AD90", id: "blue", label: "经典蓝"}];
const list = createThemeList({ themeList, useDark: ThemeConfig.useDark }) || [];
export default {
    namespaced: true,
    state: () => {
        return {
            id: ThemeConfig.themeId,    // 当前主题
            modeId: ThemeConfig.modeId, // 当前模式 light | dark
            themeList: list,
            useDark: ThemeConfig.useDark
        }
    },
    getters: {
        theme(state){
            let theme = state.themeList.find((theme) => theme.id === `${state.id}-${state.modeId}` || theme.id === state.id);
            if (!theme) theme = state.themeList.find((theme) => theme.id === `${state.id}-${state.modeId === "light" ? "light" : "dark"}`)
			if(!theme){
				theme = state.themeList.find(theme => theme.id.includes(state.modeId))
				if(theme) {
					const [id, mode] = theme.id.split("-")
					state.id = id;
				}
			}
            return theme;
        },
        mode(state){
			return state.modeId
		}
    },
    mutations: {
        /** @desc 切换主题暗黑模式 **/
        changeMode(state, id) {
            if (id) state.modeId = id
            else state.modeId = state.modeId === "light" ? "dark" : "light";
        },
        /** @desc 切换主题 **/
        change(state, id) {
            if(!id) return;
            if(id.includes("-light")) id = id.split("-light")[0];
            if(id.includes("-dark")) id = id.split("-dark")[0];
            state.id = id;
        },
        /**
         * @desc 添加单个主题
         * @param seed { SeedOption }
         * @param dir 添加的方向 { "push" | "unshift" }
         * @return: -1 | 1
         */
        add(state, seed, dir) {
            return this.addList([seed], dir);
        },
        /**
         * @desc 添加多个主题
         * @param seedList { SeedOption[] }
         * @param dir 添加的方向 { "push" | "unshift" }
         * @return: -1 | 1
         */
        addList(state, seedList, dir) {
            (seedList || []).forEach((item) => {
                Object.keys(item).forEach((key) => {
                    if(!item[key]) delete item[key];
                })
            })
            const newList = createThemeList({ themeList: seedList, useDark: state.useDark }) || [];
            if(!newList.length) return -1;
            if(dir == "unshift") state.themeList = newList.concat(state.themeList)
            else state.themeList = state.themeList.concat(newList);
            return 1
        },
        /**
         * @desc 删除指定主题， 不可删除当前使用的主题
         * @param id { string }
         * @return: -1 | 1
         */
        del(state, id) {
            const newList= [];
            state.themeList.forEach((theme) => {
                if (theme.id != id && theme.id != `${id}-dark` && theme.id != `${id}-light`) newList.push(theme);
            })
            const status = newList.length === state.themeList.length ? -1 : 1;
            if(status == 1) {
				state.themeList = newList;
				if(id == state.id){
					this.commit("change", newList[0].id);
				}
			}
            return status;
        },
        sort(state, func) {
            return state.themeList = state.themeList.sort(func);
        },
        /**
         * @desc 初始化主题列表， 会覆盖原有的
         * @param seedList { SeedOption[] }
         * @return: -1 | 1
         */
        init(state, seedList = ThemeConfig.themeList) {
            const newList = createThemeList({ themeList: seedList, useDark: ThemeConfig.useDark }) || [];
            if(!newList.length) return -1
            state.themeList = newList;
            this.commit("change", state.themeList[0].id);
            return 1;
        }
    }
}