---修改输入数字组件bug

1、调整日期范围组件为不可修改
2026-03-09 16:08:50 +08:00
parent afa3de5bdf
commit a5e715e459
31 changed files with 208 additions and 73 deletions
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@ -0,0 +1,144 @@
+/**
+ * 主题样式
+ */
+export interface ThemeCss {
+    class?: string;
+    backColor: string;
+    textColor?: string;
+    borderColor: string;
+    hoverColor: string;
+    hoverTextColor?: string;
+    activeColor: 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', backColor: '', borderColor: '', hoverColor: '', activeColor: '', textColor: '' }),
+  LIGHT: new ThemeInfo('LIGHT', { class: 'lng-theme-light', backColor: '', borderColor: '', hoverColor: '', activeColor: '', textColor: '' }),
+}
+
+/*--menu-top-active-color*/
+
+
+export class AppThemeType {
+
+  info: ThemeInfo | undefined = undefined;
+  app: HTMLElement | undefined | null = undefined;
+
+  setTheme(theme?: ThemeInfo):boolean {
+    let old = this.info!=undefined?this.info.name:null;
+    if(theme==undefined){
+        this.info = ThemeType.PRIMARY;
+    }else{
+      if(old && old == theme.name){
+         return false;
+      }
+      this.info = theme;
+    }
+    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('--menu-top-bg-color', this.info.css.backColor);
+    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-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);
+    return true;
+  }
+
+  getTheme() {
+    return this.info;
+  }
+
+  setCssVar(prop: string, val: any) {
+    document.documentElement.style.setProperty(prop, val);
+  }
+
+  init() {
+    this.app = document.getElementById('app');
+    let themeType = localStorage.getItem('themeType');
+    if (!themeType){
+        this.setTheme();
+    }else{
+       this.setTheme(ThemeType[themeType]);
+    }
+  }
+}
+  
+
+export const AppTheme = {
+
+  /**@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);
+  }
+
+}