From 3f14e9dde643e4b5fbd62f10df40c86bba5abbd9 Mon Sep 17 00:00:00 2001
From: wf <2547096351@qq.com>
Date: Mon, 6 May 2024 16:36:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BE=A7=E8=BE=B9=E6=A0=8F=E6=B7=B1?=
 =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useThemeMethods.ts                  |  8 +++--
 src/layout/components/Aside/index.vue         |  7 ++--
 .../components/theme-settings/index.vue       |  4 +--
 src/layout/components/Logo/index.vue          | 35 +++++++++++++++++++
 src/layout/components/Menu/index.vue          |  3 +-
 src/store/modules/theme-config.ts             |  2 ++
 6 files changed, 52 insertions(+), 7 deletions(-)
 create mode 100644 src/layout/components/Logo/index.vue

diff --git a/src/hooks/useThemeMethods.ts b/src/hooks/useThemeMethods.ts
index 9993ffa..9c3b7bb 100644
--- a/src/hooks/useThemeMethods.ts
+++ b/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");
diff --git a/src/layout/components/Aside/index.vue b/src/layout/components/Aside/index.vue
index 02ef3be..80b0e3e 100644
--- a/src/layout/components/Aside/index.vue
+++ b/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;
diff --git a/src/layout/components/Header/components/theme-settings/index.vue b/src/layout/components/Header/components/theme-settings/index.vue
index f102309..3c3e8a7 100644
--- a/src/layout/components/Header/components/theme-settings/index.vue
+++ b/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: {
diff --git a/src/layout/components/Logo/index.vue b/src/layout/components/Logo/index.vue
new file mode 100644
index 0000000..416acb3
--- /dev/null
+++ b/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>
diff --git a/src/layout/components/Menu/index.vue b/src/layout/components/Menu/index.vue
index 5710800..47cce20 100644
--- a/src/layout/components/Menu/index.vue
+++ b/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 菜单点击事件
diff --git a/src/store/modules/theme-config.ts b/src/store/modules/theme-config.ts
index 7b37e83..014ba37 100644
--- a/src/store/modules/theme-config.ts
+++ b/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",