---修改主题功能

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'));