---修改主题功能
This commit is contained in:
@ -1,15 +1,20 @@
|
||||
import { useAppStore } from '/@/store/modules/app';
|
||||
import { changeTheme } from '/@/logics/theme';
|
||||
import { colorIsDark, lighten, darken } from '/@/utils/color';
|
||||
import { ThemeEnum } from '/@/enums/appEnum';
|
||||
|
||||
/**
|
||||
* 主题样式
|
||||
*/
|
||||
export interface ThemeCss {
|
||||
class?: string;
|
||||
backColor: string;
|
||||
textColor?: string;
|
||||
class: string;
|
||||
borderColor: string;
|
||||
hoverColor: string;
|
||||
hoverTextColor?: string;
|
||||
activeColor: string;
|
||||
activeTextColor?: string;
|
||||
backColor: string;
|
||||
textColor: string;
|
||||
hoverBackColor: string;
|
||||
hoverTextColor: string;
|
||||
activeBackColor: string;
|
||||
activeTextColor: string;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -26,12 +31,20 @@ export class ThemeInfo {
|
||||
};
|
||||
|
||||
export const ThemeType = {
|
||||
PRIMARY: new ThemeInfo('PRIMARY', { class: 'lng-theme-primary', backColor: '', borderColor: '', hoverColor: '', activeColor: '', textColor: '' }),
|
||||
LIGHT: new ThemeInfo('LIGHT', { class: 'lng-theme-light', backColor: '', borderColor: '', hoverColor: '', activeColor: '', textColor: '' }),
|
||||
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' }),
|
||||
}
|
||||
|
||||
/*--menu-top-active-color*/
|
||||
|
||||
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 {
|
||||
|
||||
@ -39,7 +52,7 @@ export class AppThemeType {
|
||||
app: HTMLElement | undefined | null = undefined;
|
||||
|
||||
setTheme(theme?: ThemeInfo):boolean {
|
||||
let old = this.info!=undefined?this.info.name:null;
|
||||
let old = this.info!=undefined?this.info.name:undefined;
|
||||
if(theme==undefined){
|
||||
this.info = ThemeType.PRIMARY;
|
||||
}else{
|
||||
@ -48,6 +61,7 @@ export class AppThemeType {
|
||||
}
|
||||
this.info = theme;
|
||||
}
|
||||
console.log("设置主题", this.info);
|
||||
localStorage.setItem('themeType', this.info.name);
|
||||
//删除旧的class
|
||||
if(old && old != undefined && old != null){
|
||||
@ -55,32 +69,36 @@ export class AppThemeType {
|
||||
}
|
||||
//添加新的主题样式
|
||||
this.app?.classList.add(this.info.css.class);
|
||||
//顶部菜单样式
|
||||
this.setCssVar('--menu-top-bg-color', this.info.css.backColor);
|
||||
|
||||
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-active-bg-color', this.info.css.activeColor);
|
||||
this.setCssVar('--menu-top-active-color', this.info.css.activeTextColor);
|
||||
this.setCssVar('--menu-top-hover-bg-color', this.info.css.hoverColor);
|
||||
this.setCssVar('--menu-top-hover-color', this.info.css.hoverTextColor);
|
||||
//this.setCssVar('--menu-top-bg-color', this.info.css.backColor);
|
||||
|
||||
//左边菜单主题样式
|
||||
this.setCssVar('--menu-left-bg-color', this.info.css.backColor);
|
||||
this.setCssVar('--menu-left-color', this.info.css.textColor);
|
||||
this.setCssVar('--menu-left-active-bg-color', this.info.css.activeColor);
|
||||
this.setCssVar('--menu-left-active-color', this.info.css.activeTextColor);
|
||||
this.setCssVar('--menu-left-hover-bg-color', this.info.css.hoverColor);
|
||||
this.setCssVar('--menu-left-hover-color', this.info.css.hoverTextColor);
|
||||
|
||||
//其他主题样式
|
||||
this.setCssVar('--other-theme-bg-color', this.info.css.backColor);
|
||||
this.setCssVar('--other-theme-color', this.info.css.textColor);
|
||||
this.setCssVar('--other-theme-active-bg-color', this.info.css.activeColor);
|
||||
this.setCssVar('--other-theme-active-color', this.info.css.activeTextColor);
|
||||
this.setCssVar('--other-theme-hover-bg-color', this.info.css.hoverColor);
|
||||
this.setCssVar('--other-theme-hover-color', this.info.css.hoverTextColor);
|
||||
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;
|
||||
}
|
||||
@ -91,7 +109,9 @@ export class AppThemeType {
|
||||
|
||||
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{
|
||||
@ -99,46 +119,29 @@ export class AppThemeType {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
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();
|
||||
},
|
||||
};
|
||||
|
||||
/**@type {ThemeInfo | undefined} */
|
||||
info:undefined,
|
||||
app:undefined,
|
||||
|
||||
setTheme:function(theme: ThemeInfo) {
|
||||
let old = this.info!=undefined?this.info.name:null;
|
||||
if(old && old !== theme.name){
|
||||
this.app?.classList.remove(`lng-theme-${old}`);
|
||||
}
|
||||
this.info = theme;
|
||||
localStorage.setItem('themeType', theme.name);
|
||||
let classList = this.app?.classList;
|
||||
if(classList){
|
||||
for(let i=0;i<classList.length;i++){
|
||||
if(classList[i].startsWith('lng-theme-')){
|
||||
this.app?.classList.remove(classList[i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.app?.classList.add(theme.css.class);
|
||||
},
|
||||
getTheme:function() {
|
||||
return this.info;
|
||||
},
|
||||
getThemeCss:function() {
|
||||
return this.info.css;
|
||||
},
|
||||
init:function() {
|
||||
this.app = document.getElementById('app');
|
||||
let themeType = localStorage.getItem('themeType') || 'PRIMARY';
|
||||
this.info = ThemeType[themeType];
|
||||
this.setTheme(this.info);
|
||||
},
|
||||
setCssVar(prop: string, val: any) {
|
||||
document.documentElement.style.setProperty(prop, val);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user