feat: 侧边栏深色模式

src/hooks/useThemeMethods.ts

@@ -1,7 +1,10 @@
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
 import { generate, getRgbStr } from "@arco-design/color";
-/* 主题处理hooks */
+/**
+ * 主题处理hooks，内置多种主题处理场景
+ * @returns 主题方法
+ */
 export const useThemeMethods = () => {
   /**
    * @description: 初始化主题
@@ -24,10 +27,11 @@ export const useThemeMethods = () => {
    */
   const setDarkMode = () => {
     const themeStore = useThemeConfig();
-    const { darkMode } = storeToRefs(themeStore);
+    const { darkMode, asideDark } = storeToRefs(themeStore);
     if (darkMode.value) {
       // 设置为暗黑主题
       document.body.setAttribute("arco-theme", "dark");
+      asideDark.value = false; // 黑暗模式与侧边栏深色互斥
     } else {
       // 恢复亮色主题
       document.body.removeAttribute("arco-theme");

src/layout/components/Aside/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="aside">
+  <div :class="asideDark ? 'aside dark' : 'aside'">
     <div class="logo_head">
       <img :src="Logo" class="logo" />
       <span class="logo_title" v-if="!collapsed">dc admin</span>
@@ -17,13 +17,16 @@ import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
 
 const themeStore = useThemeConfig();
-const { collapsed } = storeToRefs(themeStore);
+const { collapsed, asideDark } = storeToRefs(themeStore);
 </script>
 
 <style lang="scss" scoped>
 .aside {
   height: 100vh;
 }
+.dark {
+  background: #232324;
+}
 // 头部
 .logo_head {
   height: 60px;

src/layout/components/Header/components/theme-settings/index.vue

@@ -38,7 +38,7 @@
         </div>
         <div class="flex-row">
           <div>侧边栏深色</div>
-          <a-switch />
+          <a-switch :disabled="darkMode" v-model="asideDark" />
         </div>
         <div class="flex-row">
           <div>页面过渡</div>
@@ -58,7 +58,7 @@ import { useThemeConfig } from "@/store/modules/theme-config";
 import { useThemeMethods } from "@/hooks/useThemeMethods";
 
 const themeStore = useThemeConfig();
-const { layoutType, themeColor, presetColors, colorWeakMode, grayMode } = storeToRefs(themeStore);
+const { layoutType, themeColor, presetColors, colorWeakMode, grayMode, darkMode, asideDark } = storeToRefs(themeStore);
 
 const layoutList = reactive({
   layoutDefaults: {

src/layout/components/Logo/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="logo_head">
+    <img :src="Logo" class="logo" />
+    <span class="logo_title" v-if="!collapsed">dc admin</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Logo from "@/assets/img/logo.jpg";
+import { storeToRefs } from "pinia";
+import { useThemeConfig } from "@/store/modules/theme-config";
+const themeStore = useThemeConfig();
+const { collapsed } = storeToRefs(themeStore);
+</script>
+
+<style lang="scss" scoped>
+// 头部
+.logo_head {
+  height: 60px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  box-sizing: border-box;
+  border-right: $border-1 solid $color-border-2;
+
+  .logo {
+    width: 30px;
+  }
+
+  .logo_title {
+    font-weight: bold;
+    font-size: $font-size-title-2;
+  }
+}
+</style>

src/layout/components/Menu/index.vue

@@ -2,6 +2,7 @@
   <a-menu
     :breakpoint="layoutType === 'layoutDefaults' ? undefined : 'xl'"
     :mode="'vertical'"
+    :theme="asideDark ? 'dark' : 'light'"
     :collapsed="collapsed"
     :auto-scroll-into-view="true"
     :auto-open-selected="true"
@@ -24,7 +25,7 @@ const router = useRouter();
 const routerStore = useRoutesListStore();
 const { routeTree, currentRoute } = storeToRefs(routerStore);
 const themeStore = useThemeConfig();
-const { collapsed, isAccordion, layoutType } = storeToRefs(themeStore);
+const { collapsed, isAccordion, layoutType, asideDark } = storeToRefs(themeStore);
 
 /**
  * @description 菜单点击事件

src/store/modules/theme-config.ts

@@ -17,6 +17,7 @@ interface ThemeConfig {
   layoutType: string;
   grayMode: Boolean;
   colorWeakMode: Boolean;
+  asideDark: Boolean;
   themeColor: string;
   presetColors: Array<string>;
 }
@@ -47,6 +48,7 @@ export const useThemeConfig = defineStore("theme-config", {
     layoutType: "layoutDefaults", // 布局模式：layoutDefaults、layoutHead、layoutMixing
     colorWeakMode: false, // 色弱模式
     grayMode: false, // 灰色模式
+    asideDark: false, // 侧边栏深色
     themeColor: "#165DFF", // 主题色
     presetColors: [
       "#165DFF",