feat: 增加配置侧边栏深色模式

src/config/style.ts

@@ -11,4 +11,5 @@ export default {
   isUseTabsRouter: false,
   showHeader: true,
   brandTheme: '#0052D9',
+  sideIsDark: 'light',
 };

src/layouts/components/LayoutSideNav.vue

@@ -5,7 +5,7 @@
     :layout="settingStore.layout"
     :is-fixed="settingStore.isSidebarFixed"
     :menu="sideMenu"
-    :theme="settingStore.displayMode"
+    :theme="settingStore.displaySideMode"
     :is-compact="settingStore.isSidebarCompact"
   />
 </template>

src/layouts/components/SideNav.vue

@@ -124,4 +124,14 @@ const getLogo = () => {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.t-menu--dark {
+  .@{starter-prefix} {
+    &-side-nav-logo {
+      &-tdesign-logo {
+        color: white;
+      }
+    }
+  }
+}
+</style>

src/layouts/setting.vue

@@ -62,6 +62,9 @@
           </div>
         </t-radio-group>
 
+        <t-form-item :label="$t('layout.setting.sideIsDark')" name="sideIsDark">
+          <t-switch v-model="formData.sideIsDark" :custom-value="['dark', 'light']" />
+        </t-form-item>
         <t-form-item v-show="formData.layout === 'mix'" label="分割菜单（混合模式下有效）" name="splitMenu">
           <t-switch v-model="formData.splitMenu" />
         </t-form-item>

src/locales/lang/en_US/layout.ts

@@ -32,6 +32,7 @@ export default {
         auto: 'Follow System',
       },
     },
+    sideIsDark: 'Side Menu Is Dark',
     navigationLayout: 'Navigation Layout',
     splitMenu: 'Split Menu（Only Mix mode）',
     fixedSidebar: 'Fixed Sidebar',

src/locales/lang/zh_CN/layout.ts

@@ -32,6 +32,7 @@ export default {
         auto: '跟随系统',
       },
     },
+    sideIsDark: '侧边栏深色',
     navigationLayout: '导航布局',
     splitMenu: '分割菜单（混合模式下有效）',
     fixedSidebar: '固定侧边栏',

src/store/modules/setting.ts

@@ -33,6 +33,9 @@ export const useSettingStore = defineStore('setting', {
       }
       return state.mode as 'dark' | 'light';
     },
+    displaySideMode: (state): 'dark' | 'light' => {
+      return state.sideIsDark as 'dark' | 'light';
+    },
   },
   actions: {
     async changeMode(mode: 'dark' | 'light' | 'auto') {
@@ -71,6 +74,9 @@ export const useSettingStore = defineStore('setting', {
       insertThemeStylesheet(brandTheme, colorMap, mode as 'light' | 'dark');
       document.documentElement.setAttribute('theme-color', brandTheme);
     },
+    changeSideTheme(sideTheme: string) {
+      this.sideIsDark = sideTheme;
+    },
     updateConfig(payload: Partial<TState>) {
       for (const key in payload) {
         if (payload[key as TStateKey] !== undefined) {
@@ -82,6 +88,9 @@ export const useSettingStore = defineStore('setting', {
         if (key === 'brandTheme') {
           this.changeBrandTheme(payload[key]);
         }
+        if (key === 'sideIsDark') {
+          this.changeSideTheme(payload[key]);
+        }
       }
     },
   },