---修改主题功能

.env.development

@@ -11,7 +11,7 @@ VITE_PUBLIC_PATH = /
 # 可以有多个，注意多个不能换行，否则代理将会失效
 #VITE_PROXY = [["/api","http://localhost:3000"],["/upload","http://localhost:3300/upload"]]
 #VITE_PROXY=[["/api/workflow","http://10.0.0.2:8093/workflow/"],["/api","http://10.10.2.102:9500"]]
-VITE_PROXY=[["/api/system/login","http://127.0.0.1:8092","/system/login"],["/api","http://10.10.2.102:9500"]]
+VITE_PROXY=[["/api","http://10.10.2.102:9500"]]
 #VITE_PROXY=[["/api/approve/","http://127.0.0.1:8096","/approve/"],["/api","http://10.10.2.102:9500"]]
 #VITE_PROXY=[["/api/system/generator/","http://127.0.0.1:8091/system/generator/"],["/api/system/file/","http://127.0.0.1:8091/system/file/"],["/api/system/oss/","http://127.0.0.1:8091/system/oss/"],["/api/sales/","http://127.0.0.1:8096","/sales/"],["/api/mdm/","http://127.0.0.1:8096","/mdm/"],["/api","http://10.10.2.102:9500"]]
 #VITE_PROXY=[["/api/sales/","http://127.0.0.1:8096","/sales/"],["/api/mdm/","http://127.0.0.1:8096","/mdm/"],["/api","http://10.10.2.102:9500"]]

src/assets/style/theme/lng-theme.less

@@ -1,6 +1,47 @@
+:root {
+  --border-color: unset;
+  --back-color: unset;
+  --text-color: unset;
+  --hover-back-color: unset;
+  --hover-text-color: unset;
+  --active-back-color: unset;
+  --active-text-color: unset;
+
+  --menu-top-color: #fff;
+  --menu-top-bg-color: unset;
+  
+}
 
 
-.lng-theme-primary {
+.lng-theme {
+  /**
+   * 侧边栏主题
+   */
+  .vben-default-layout-main{
+    margin-left: 0 !important;
+  }
+
+  .vben-layout-header-left {
+
+    .vben-layout-header-trigger{
+      svg {
+        fill: var(--text-color) !important;
+      }
+
+      &.light:hover {
+        background-color: var(--hover-back-color) !important;
+              
+        svg {
+          fill: var(--hover-text-color) !important;
+          color: var(--hover-text-color) !important;
+        }
+      }
+    }
+  }
+
+   /**
+    * 左边菜单主题
+    */
   .lng-menu {
     .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu{
       background: unset !important;
@@ -12,72 +53,298 @@
     } 
   }
 
+  /**
+   * 顶部菜单主题
+  */
+  .ant-menu-horizontal > .ant-menu-item::after, .ant-menu-horizontal > .ant-menu-submenu::after {
+      bottom: 4px;
+      right: 10px;
+      left: 10px;
+    }
+
     .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-active::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected::after {
       border-bottom: 2px solid #fff;
       right: 10px;
       left: 10px;
       bottom: 4px;
+    }
+
+  .vben-menu-dark.vben-menu-vertical .vben-menu-item:hover, .vben-menu-dark.vben-menu-vertical .vben-menu-submenu-title:hover {
+    background-color: var(--hover-back-color) !important;
+    color: var(--hover-text-color) !important;
+  }
+
+  .vben-layout-breadcrumb.ant-menu .ant-menu-item {
+    &.ant-menu-item-selected{
+      background-color: rgba(0, 0, 0, 0.4) !important;
+      color: var(--active-text-color) !important;
+    }
+
+
+    &:hover{
+      background-color: var(--hover-back-color) !important;
+      color: var(--hover-text-color) !important;
+    }
+  }
+
+
+  .vben-layout-header-action {
+    svg {
+      fill: var(--text-color) !important;
+      color: var(--text-color) !important;
+    }
+
+    .vben-layout-header-action__item:hover{
+      background-color: var(--hover-back-color) !important;
+
+      svg {
+        fill: var(--text-color) !important;
+        color: var(--text-color) !important;
+      }
+    }
+  }
+
+  .vben-header-user-dropdown__name{
+    color: var(--text-color) !important;
+  }
+
+  .vben-header-user-dropdown--light:hover{
+    background-color: var(--hover-back-color) !important;
+  }
 
   .ant-menu-title-content{
-       color: #000 !important;
-    }
+    color: #fff;
   }
 
+}
+
+.lng-theme-primary {
   .vben-layout-sideBar {
     background: unset !important;
     background-image: url('/@/assets/style/theme/imgs/primary-left.png') !important;
     background-size: 100% 100% !important;
   }
 
-
-  .vben-default-layout-main{
-    margin-left: 0px !important;
-  }
-
   .ant-layout-header{
     background: unset !important;
     background-image: url('/@/assets/style/theme/imgs/primary-top.png') !important;
     background-size: 100% 100% !important;
-
-      .vben-layout-header-left {
-
-        .vben-layout-header-trigger{
-            svg {
-              fill: #fff !important;
   }
 
-            &.light:hover {
-              background-color: unset !important;
+}
 
-               svg {
-                  fill: #5e95ff !important;
+
+.lng-theme-light {
+
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/light-left.png') !important;
+    background-size: 100% 100% !important;
   }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/light-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+
+.lng-theme-theme1 {
+
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme1-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme1-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+/**
+ * 主题2
+ */
+.lng-theme-theme2 {
+
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme2-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme2-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+/**
+ * 主题3
+ */
+.lng-theme-theme3 {
+
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme3-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme3-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+/**
+ * 主题4
+ */
+.lng-theme-theme4 {
+
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme4-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+   /**
+    * 左边菜单主题
+    */
+  .lng-menu {
+    .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{
+      background: unset !important;
+      color: #000 !important;
+
+      .vben-menu-submenu-title-active:not(.vben-menu-submenu){
+        color: #fff !important;
+        background-color: rgba(0, 0, 0, 0.4) !important;
       }
     } 
   }
 
   .ant-menu-title-content{
-        color: #fff !important;
+      color: var(--text-color) !important;
   }
 
-      .vben-layout-header-action {
-         svg {
-           fill: #fff !important;
-           color: #fff !important;
-         }
-
-         .vben-layout-header-action__item:hover{
-            background-color: #0960bd !important;
-         }
-      }
-
-      .vben-header-user-dropdown__name{
-        color: #fff !important;
-      }
-
-      .vben-header-user-dropdown--light:hover{
-        background-color: #0960bd !important;
-      }
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme4-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+/**
+ * 主题5
+ */
+.lng-theme-theme5 {
+
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme5-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme5-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+/**
+ * 主题6
+ */
+.lng-theme-theme6 {
+
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme6-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme6-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+/**
+ * 主题7
+ */
+.lng-theme-theme7 {
+
+  /**
+    * 左边菜单主题
+    */
+  .lng-menu {
+    .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{
+      background: unset !important;
+      color: #000 !important;
+
+      .vben-menu-submenu-title-active:not(.vben-menu-submenu){
+        color: #fff !important;
+        background-color: rgba(0, 0, 0, 0.4) !important;
+      }
+    } 
+  }
+
+  .ant-menu-title-content{
+      color: var(--text-color) !important;
+  }
+
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme7-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme7-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+/**
+ * 主题8
+ */
+.lng-theme-theme8 {
+
+   /**
+    * 左边菜单主题
+    */
+  .lng-menu {
+    .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{
+      background: unset !important;
+      color: #000 !important;
+
+      .vben-menu-submenu-title-active:not(.vben-menu-submenu){
+        color: #fff !important;
+        background-color: rgba(0, 0, 0, 0.4) !important;
+      }
+    } 
+  }
+
+  .ant-menu-title-content{
+      color: var(--text-color);
+  }
+
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme8-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme8-top.png') !important;
+    background-size: 100% 100% !important;
   }
 
 }

src/layouts/default/setting/SettingDrawer.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, computed, unref } from 'vue';
 import { BasicDrawer } from '/@/components/Drawer/index';
 import { Divider } from 'ant-design-vue';
-import { TypePicker, ThemeColorPicker, SettingFooter, SwitchItem, SelectItem, InputNumberItem } from './components';
+import { TypePicker, ThemeColorPicker, SettingFooter, SwitchItem, SelectItem, InputNumberItem, LngThemeSetting } from './components';
 
 // import { AppDarkModeToggle } from '/@/components/Application';
 
@@ -16,6 +16,7 @@ import { useI18n } from '/@/hooks/web/useI18n';
 
 import { baseHandler } from './handler';
 
+
 import { HandlerEnum, contentModeOptions, topMenuAlignOptions, getMenuTriggerOptions, routerTransitionOptions, menuTypeList, mixSidebarTriggerOptions } from './enum';
 
 import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST, APP_PRESET_COLOR_LIST } from '/@/settings/designSetting';
@@ -102,6 +103,10 @@ export default defineComponent({
             return <ThemeColorPicker colorList={APP_PRESET_COLOR_LIST} def={unref(getThemeColor)} event={HandlerEnum.CHANGE_THEME_COLOR} />;
         }
 
+        function renderLngTheme() {
+            return <LngThemeSetting />;
+        }
+
         /**
          * @description:
          */
@@ -202,11 +207,11 @@ export default defineComponent({
                 { /*<Divider>{() => t('导航栏模式')}</Divider>
                 {renderSidebar()} */}
                 <Divider>{() => t('系统主题')}</Divider>
-                {renderMainTheme()}
+                {renderLngTheme()}
 {/*                 <Divider>{() => t('顶栏主题')}</Divider>
                 {renderHeaderTheme()} */}
-                <Divider>{() => t('菜单主题')}</Divider>
-                {renderSiderTheme()}
+{/*                 <Divider>{() => t('菜单主题')}</Divider>
+                {renderSiderTheme()} */}
                 <Divider>{() => t('界面功能')}</Divider>
                 {renderFeatures()}
                 <Divider>{() => t('界面显示')}</Divider>

src/layouts/default/setting/components/LngThemeSetting.vue

@@ -0,0 +1,85 @@
+<template>
+    <div :class="bodyClass">
+        <template v-for="(item,$index) in ThemeList || []" :key="item.name">
+          <div :class="['theme-item',{'theme-item--active': currentTheme?.name == item.name}]" 
+          @click="handleClick(item,$index)">
+            <div class="theme-color" :style="{ background: item.css.backColor }">
+              <CheckOutlined v-if="currentTheme?.name == item.name" />
+            </div>
+          </div>
+        </template>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,ref } from 'vue';
+import { ThemeList,AppTheme,ThemeInfo} from '/@/utils/theme';
+import { CheckOutlined } from '@ant-design/icons-vue';
+export default defineComponent({
+    name: 'LngThemeSetting',
+    components: { CheckOutlined },
+    props: {},
+    setup(props) {
+        return {
+            bodyClass: 'lng-theme-setting',
+        };
+    },
+    data() {
+        return {
+            ThemeList: ThemeList,
+            currentTheme: ref<ThemeInfo | undefined>(undefined),
+        };
+    },
+    mounted() {
+        this.currentTheme = AppTheme.getTheme();
+        console.log(this.ThemeList,this.currentTheme);
+    },
+    methods: {
+        handleClick: function(item: ThemeInfo, index: number){
+            this.currentTheme = item;
+            AppTheme.setTheme(item);
+        }
+    }
+});
+</script>
+<style lang="less" scoped>
+.lng-theme-setting {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 16px 0;
+    justify-content: space-around;
+
+    .theme-item {
+      width: 20px;
+      height: 20px;
+      margin: 0px;
+      display: inline-block;
+      vertical-align: top;
+      cursor: pointer;
+
+      .theme-color {
+          width: 100%;
+          height: 100%;
+          line-height: 20px;
+          text-align: center;
+          border-radius: 2px;
+      }
+
+      .anticon {
+        font-size: 12px;
+        color: #fff;
+        line-height: 12px;
+        vertical-align: top !important;
+        fill: #fff;
+        
+      }
+   }
+
+   .theme-item--active {
+        .theme-color {
+          border: 2px solid #409eff;
+        }
+   }
+}
+
+
+</style>

src/layouts/default/setting/components/index.ts

@@ -6,3 +6,4 @@ export const SettingFooter = createAsyncComponent(() => import('./SettingFooter.
 export const SwitchItem = createAsyncComponent(() => import('./SwitchItem.vue'));
 export const SelectItem = createAsyncComponent(() => import('./SelectItem.vue'));
 export const InputNumberItem = createAsyncComponent(() => import('./InputNumberItem.vue'));
+export const LngThemeSetting = createAsyncComponent(() => import('./LngThemeSetting.vue'));

src/utils/theme.ts

@@ -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{
@@ -101,44 +121,27 @@ 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);
-  }
-
-}