geg-gas-web/src/utils/theme.ts

import { useAppStore } from '/@/store/modules/app';
import { changeTheme } from '/@/logics/theme';

/**
 * 主题样式
 */
export interface ThemeCss {
    class: string;
    borderColor: string;
    backColor: string;
    textColor: string;
    hoverBackColor: string;
    hoverTextColor: string;
    activeBackColor: string;
    activeTextColor: string;
}

/**
 * 主题详情
 */
export class ThemeInfo {
  name: string;
  css: ThemeCss;

  constructor(name: string, css: ThemeCss) {
    this.name = name;
    this.css = css;
  }
};

export const ThemeType = {
  PRIMARY: new ThemeInfo('PRIMARY', { class: 'lng-theme-primary', borderColor: '#0960bd', backColor: '#0960bd', textColor: '#fff', hoverBackColor: '#0960bd',hoverTextColor: '#fff', activeBackColor: '#004496', activeTextColor: '#fff' }),
  LIGHT: new ThemeInfo('LIGHT', { class: 'lng-theme-light', borderColor: '#01768C', backColor: '#01768C', textColor: '#fff', hoverBackColor: '#00889D',hoverTextColor: '#fff', activeBackColor: '#005B6E', activeTextColor: '#fff' }),
  THEME1: new ThemeInfo('THEME1', { class: 'lng-theme-theme1', borderColor: '#2070B5', backColor: '#2070B5', textColor: '#fff', hoverBackColor: '#10A4C0',hoverTextColor: '#fff', activeBackColor: '#059ABA', activeTextColor: '#fff' }),
  THEME2: new ThemeInfo('THEME2', { class: 'lng-theme-theme2', borderColor: '#6834D2', backColor: '#6834D2', textColor: '#fff', hoverBackColor: '#0487D1',hoverTextColor: '#fff', activeBackColor: '#7330CD', activeTextColor: '#fff' }),
  THEME3: new ThemeInfo('THEME3', { class: 'lng-theme-theme3', borderColor: '#2451C3', backColor: '#2451C3', textColor: '#fff', hoverBackColor: '#0498DE',hoverTextColor: '#fff', activeBackColor: '#056CC4', activeTextColor: '#fff' }),
  THEME4: new ThemeInfo('THEME4', { class: 'lng-theme-theme4', borderColor: '#6bb836', backColor: '#6bb836', textColor: '#000', hoverBackColor: '#A2DE79',hoverTextColor: '#000', activeBackColor: '#A2DE79', activeTextColor: '#000' }),
  THEME5: new ThemeInfo('THEME5', { class: 'lng-theme-theme5', borderColor: '#0B0023', backColor: '#0B0023', textColor: '#fff', hoverBackColor: '#7A0589',hoverTextColor: '#fff', activeBackColor: '#4A0353', activeTextColor: '#fff' }),
  THEME6: new ThemeInfo('THEME6', { class: 'lng-theme-theme6', borderColor: '#02311F', backColor: '#02311F', textColor: '#fff', hoverBackColor: '#007261',hoverTextColor: '#fff', activeBackColor: '#00553D', activeTextColor: '#fff' }),
  THEME7: new ThemeInfo('THEME7', { class: 'lng-theme-theme7', borderColor: '#35b3a9', backColor: '#35b3a9', textColor: '#000', hoverBackColor: '#C8FCF7',hoverTextColor: '#000', activeBackColor: '#67CBC4', activeTextColor: '#000' }),
  THEME8: new ThemeInfo('THEME8', { class: 'lng-theme-theme8', borderColor: '#53779B', backColor: '#53779B', textColor: '#000', hoverBackColor: '#86A2BA',hoverTextColor: '#000', activeBackColor: '#6084A8', activeTextColor: '#000' }),
}

export const ThemeList = [ThemeType.PRIMARY, ThemeType.LIGHT,ThemeType.THEME1,ThemeType.THEME2,
  ThemeType.THEME3,ThemeType.THEME5,ThemeType.THEME6,ThemeType.THEME4,ThemeType.THEME7,ThemeType.THEME8];

export class AppThemeType {

  info: ThemeInfo | undefined = undefined;
  app: HTMLElement | undefined | null = undefined;

  setTheme(theme?: ThemeInfo):boolean {
    let old = this.info!=undefined?this.info.name:undefined;
    if(theme==undefined){
        this.info = ThemeType.PRIMARY;
    }else{
      if(old && old == theme.name){
         return false;
      }
      this.info = theme;
    }
    console.log("设置主题", this.info);
    localStorage.setItem('themeType', this.info.name);
    //删除旧的class
    if(old && old != undefined && old != null){
      this.app?.classList.remove(ThemeType[old].css.class);
    }
    //添加新的主题样式
    this.app?.classList.add(this.info.css.class);

    this.setCssVar('--border-color', this.info.css.borderColor);
    this.setCssVar('--back-color', this.info.css.backColor);
    this.setCssVar('--text-color', this.info.css.textColor);
    this.setCssVar('--hover-back-color', this.info.css.hoverBackColor);
    this.setCssVar('--hover-text-color', this.info.css.hoverTextColor);
    this.setCssVar('--active-back-color', this.info.css.activeBackColor);
    this.setCssVar('--active-text-color', this.info.css.activeTextColor);

    this.setCssVar('--menu-top-color', this.info.css.textColor);
    //this.setCssVar('--menu-top-bg-color', this.info.css.backColor);

    //左边菜单主题样式
    this.setCssVar('--sider-dark-bg-color', this.info.css.backColor);
    this.setCssVar('--sider-dark-darken-bg-color', this.info.css.backColor);
    this.setCssVar('--sider-dark-lighten-bg-color', this.info.css.backColor);
    this.changeAppTheme();
    return true;
  }

  changeAppTheme() {
    if (this.info != undefined) {
      const appStore = useAppStore();
      const color = this.info.css.backColor;
      // 同步 Ant Design 主色调
      appStore.setProjectConfig({ themeColor: color });
      changeTheme(color);
    }
  }

  getTheme() {
    return this.info;
  }

  setCssVar(prop: string, val: any) {
    document.documentElement.style.setProperty(prop, val);
  }

  init() {
    this.app = document.getElementById('app');
    this.app?.classList.add("lng-theme");
    let themeType = localStorage.getItem('themeType');
    console.log("初始化主题", themeType);
    if (!themeType){
        this.setTheme();
    }else{
       this.setTheme(ThemeType[themeType]);
    }
  }
}


  
export const AppTheme = {
    instance: undefined as AppThemeType | undefined,
    getInstance(): AppThemeType {
      if (this.instance) {
        return this.instance;
      }
      this.instance = new AppThemeType();
      return this.instance;
    },
    getTheme(): ThemeInfo | undefined {
      return this.getInstance().info;
    },
    setTheme(theme: ThemeInfo) {
      this.getInstance().setTheme(theme);
    },
    changeAppTheme() {
      this.getInstance().changeAppTheme();
    },
    init() {
      this.getInstance().init();
    },
};