148 lines
6.4 KiB
TypeScript
148 lines
6.4 KiB
TypeScript
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: '#0B4A99', backColor: '#0B4A99', textColor: '#000', hoverBackColor: '#1664A7',hoverTextColor: '#000', activeBackColor: '#127498', activeTextColor: '#000' }),
|
|
THEME3: new ThemeInfo('THEME3', { class: 'lng-theme-theme3', borderColor: '#82B802', backColor: '#82B802', textColor: '#000', hoverBackColor: '#B5D783',hoverTextColor: '#000', activeBackColor: '#568A02', activeTextColor: '#000' }),
|
|
THEME4: new ThemeInfo('THEME4', { class: 'lng-theme-theme4', borderColor: '#406872', backColor: '#406872', textColor: '#000', hoverBackColor: '#3BA5C1',hoverTextColor: '#000', activeBackColor: '#416961', activeTextColor: '#000' }),
|
|
THEME5: new ThemeInfo('THEME5', { class: 'lng-theme-theme5', borderColor: '#E05FB2', backColor: '#E05FB2', textColor: '#000', hoverBackColor: '#F0A4A6',hoverTextColor: '#000', activeBackColor: '#D1178E', activeTextColor: '#000' }),
|
|
THEME6: new ThemeInfo('THEME6', { class: 'lng-theme-theme6', borderColor: '#5AB712', backColor: '#5AB712', textColor: '#000', hoverBackColor: '#9DDB6C',hoverTextColor: '#000', activeBackColor: '#90DE55', activeTextColor: '#000' }),
|
|
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: '#BD2D18', backColor: '#BD2D18', textColor: '#000', hoverBackColor: '#ED7967',hoverTextColor: '#000', activeBackColor: '#D8503E', activeTextColor: '#000' }),
|
|
THEME9: new ThemeInfo('THEME9', { class: 'lng-theme-theme9', borderColor: '#3950E0', backColor: '#3950E0', textColor: '#000', hoverBackColor: '#5D71EA',hoverTextColor: '#000', activeBackColor: '#081FB7', activeTextColor: '#000' }),
|
|
THEME10: new ThemeInfo('THEME10', { class: 'lng-theme-theme10', borderColor: '#A5583E', backColor: '#A5583E', textColor: '#fff', hoverBackColor: '#D37658',hoverTextColor: '#fff', activeBackColor: '#DB4D1F', activeTextColor: '#fff' }),
|
|
}
|
|
|
|
export const ThemeList = [ThemeType.THEME1,ThemeType.THEME2,ThemeType.THEME3,ThemeType.THEME4,ThemeType.THEME5,
|
|
ThemeType.THEME6,ThemeType.THEME7,ThemeType.THEME8,ThemeType.THEME9,ThemeType.THEME10];
|
|
|
|
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();
|
|
},
|
|
};
|
|
|