换肤笔记

utils/elementPlus/config.ts

interface IElementPlusConfig {
    [key: string]: string | null;
  }
  
  import settings from '@/settings';
  
  const Theme = {
      blue: {
          '--el-color-primary': '#112170', // 主色
          '--el-color-success': '#2da641', // 成功色
          '--el-color-warning': '#ed6a0c', // 警告色
          '--el-color-danger': '#d40000', // 危险色
          '--el-color-error': '#d40000', // 信息色
          '--el-color-info': '#909399', // 信息色
      },
      purple: {
          '--el-color-primary': '#5D1870', // 主色
          '--el-color-success': '#2da641', // 成功色
          '--el-color-warning': '#ed6a0c', // 警告色
          '--el-color-danger': '#C62922', // 危险色
          '--el-color-error': '#d40000', // 危险色
          '--el-color-info': '#909399', // 信息色
      },
  };
  
  export const elementPlusConfig: IElementPlusConfig =
    Theme[settings.theme as string] || Theme.blue;

utils/elementPlus/index.ts

import { elementPlusConfig } from './config';

/**
 * @description: 批量设置element-plus css变量
 * @return {*}
 */
export function setElementPlus() {
    Object.keys(elementPlusConfig).forEach((key) => {
        document.documentElement.style.setProperty(key, elementPlusConfig[key]);
    });
}

main.ts

import { setElementPlus } from './utils/elementPlus';
setElementPlus()

setting.ts

import settingMap from '@/settingsMap';

const settings: SettingsTypes = {
    siteTitle: '展教服务',
    navbarEnable: true,
    sidebarEnable: true,
    drawerMenuEnable: true,
    globalSiteObj: settingMap[0], // 全局对象
    theme: 'blue', // 主题色
};
const host = location.host;
// 展教组件对应域名
const manage = ['xxx-manage-test.cn'];

// 科技馆 场景域名
const manageChangjing = [
   'xxx-manage-test.cn'
];

// 展品组件的主题色
if (manage.indexOf(host) > -1) {
    settings.globalSiteObj = settingMap[0];
    settings.theme = 'blue';
}

// 科技馆（场景）---展品组件的主题色
if (manageChangjing.indexOf(host) > -1) {
    settings.globalSiteObj = settingMap[1];
    settings.theme = 'purple';
}

export default settings;

settingMap.ts

const settingMap: any = {
    // 展教组件
    0:{
        theme:"blue",// 主题颜色
    },
    // 展教 - 科技馆 场景
    1:{
        theme:"purple",// 主题颜色
    }
};


export default settingMap;

layout.vue

 
import settings from '@/settings';
const theme = computed(()=>settings.theme);