From d6de05a4b7c5636a46307cca8130e95e7962d8c8 Mon Sep 17 00:00:00 2001
From: lostelk <lostelkwork@163.com>
Date: Wed, 19 Feb 2025 12:45:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=B5=85=E8=89=B2=E6=A8=A1=E5=BC=8F=E4=B8=8B=E7=9A=84=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E9=85=8D=E8=89=B2=E5=88=87=E6=8D=A2=EF=BC=9A?=
 =?UTF-8?q?=E6=B7=B1=E8=93=9D=E8=89=B2=E3=80=81=E7=99=BD=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/enums/ThemeEnum.ts                        | 14 +++++++++
 src/lang/package/en.ts                        |  3 ++
 src/lang/package/zh-cn.ts                     |  3 ++
 .../NavBar/components/NavbarRight.vue         | 20 ++++++++++++-
 src/layout/components/Settings/index.vue      | 19 +++++++++++-
 .../Sidebar/components/SidebarMenu.vue        | 22 ++++++++++++--
 .../Sidebar/components/SidebarMenuItem.vue    |  6 ++++
 .../Sidebar/components/SidebarMixTopMenu.vue  | 22 ++++++++++++--
 src/settings.ts                               |  2 ++
 src/store/modules/settings.ts                 | 30 +++++++++++++++++--
 src/styles/variables.scss                     | 23 +++++++++-----
 src/types/global.d.ts                         |  2 ++
 src/utils/theme.ts                            | 20 +++++++++++++
 13 files changed, 169 insertions(+), 17 deletions(-)

diff --git a/src/enums/ThemeEnum.ts b/src/enums/ThemeEnum.ts
index 91458e16..6d2ad192 100644
--- a/src/enums/ThemeEnum.ts
+++ b/src/enums/ThemeEnum.ts
@@ -16,3 +16,17 @@ export const enum ThemeEnum {
    */
   AUTO = "auto",
 }
+
+/**
+ * 浅色主题下的侧边栏配色方案枚举
+ */
+export const enum SidebarLightThemeEnum {
+  /**
+   * 深蓝色
+   */
+  DARKBLUE = "light-darkBlue",
+  /**
+   * 白色
+   */
+  WHITE = "light-white",
+}
diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts
index 3b062127..446e4c75 100644
--- a/src/lang/package/en.ts
+++ b/src/lang/package/en.ts
@@ -57,6 +57,9 @@ export default {
     themeColor: "Theme Color",
     tagsView: "Tags View",
     sidebarLogo: "Sidebar Logo",
+    sidebarColorScheme: "Sidebar Color Scheme",
     watermark: "Watermark",
+    white: "white",
+    darkBlue: "darkBlue",
   },
 };
diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts
index 0b48e4a3..4ad0f150 100644
--- a/src/lang/package/zh-cn.ts
+++ b/src/lang/package/zh-cn.ts
@@ -57,6 +57,9 @@ export default {
     themeColor: "主题颜色",
     tagsView: "开启 Tags-View",
     sidebarLogo: "侧边栏 Logo",
+    sidebarColorScheme: "侧边栏配色方案",
     watermark: "开启水印",
+    white: "白色",
+    darkBlue: "深蓝色",
   },
 };
diff --git a/src/layout/components/NavBar/components/NavbarRight.vue b/src/layout/components/NavBar/components/NavbarRight.vue
index b53bd0d7..959573f4 100644
--- a/src/layout/components/NavBar/components/NavbarRight.vue
+++ b/src/layout/components/NavBar/components/NavbarRight.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar__right">
+  <div class="navbar__right" :class="navbarRightClass">
     <!-- 非手机设备（窄屏）才显示 -->
     <template v-if="!isMobile">
       <!-- 搜索 -->
@@ -35,11 +35,19 @@ import { useAppStore, useSettingsStore } from "@/store";
 
 import UserProfile from "./UserProfile.vue";
 import Notification from "./Notification.vue";
+import { SidebarLightThemeEnum } from "@/enums/ThemeEnum";
 
 const appStore = useAppStore();
 const settingStore = useSettingsStore();
 
 const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
+
+// 根据浅色模式-侧边栏颜色配置选择navbar右侧的样式类
+const navbarRightClass = computed(() => {
+  return settingStore.sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+    ? "navbar__right--darkBlue"
+    : "navbar__right--white";
+});
 </script>
 
 <style lang="scss" scoped>
@@ -70,4 +78,14 @@ const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
 .dark .navbar__right > *:hover {
   background: rgb(255 255 255 / 20%);
 }
+
+.layout-top .navbar__right--darkBlue > *,
+.layout-mix .navbar__right--darkBlue > * {
+  color: #fff;
+}
+
+.layout-top .navbar__right--white > *,
+.layout-mix .navbar__right--white > * {
+  color: #000;
+}
 </style>
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index edc7a0da..5409656f 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -27,6 +27,13 @@
       <span class="text-xs">{{ $t("settings.watermark") }}</span>
       <el-switch v-model="settingsStore.watermarkEnabled" />
     </div>
+    <div v-if="!isDark" class="py-1 flex-x-between">
+      <span class="text-xs">{{ $t("settings.sidebarColorScheme") }}</span>
+      <el-radio-group v-model="settingsStore.sidebarColorScheme" @change="changeSidebarColorScheme">
+        <el-radio :value="SidebarLightThemeEnum.WHITE">{{ $t("settings.white") }}</el-radio>
+        <el-radio :value="SidebarLightThemeEnum.DARKBLUE">{{ $t("settings.darkBlue") }}</el-radio>
+      </el-radio-group>
+    </div>
 
     <el-divider>{{ $t("settings.navigation") }}</el-divider>
 
@@ -37,7 +44,7 @@
 <script setup lang="ts">
 import { LayoutEnum } from "@/enums/LayoutEnum";
 import { ThemeEnum } from "@/enums/ThemeEnum";
-
+import { SidebarLightThemeEnum } from "@/enums/ThemeEnum";
 import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
 
 const route = useRoute();
@@ -74,6 +81,16 @@ const changeTheme = (val: any) => {
   settingsStore.changeTheme(isDark.value ? ThemeEnum.DARK : ThemeEnum.LIGHT);
 };
 
+/**
+ * 更改侧边栏颜色方案
+ *
+ * @param val 颜色方案名称
+ */
+const changeSidebarColorScheme = (val: any) => {
+  console.log(val);
+  settingsStore.changeSidebarColorScheme(val);
+};
+
 /**
  * 切换布局
  *
diff --git a/src/layout/components/Sidebar/components/SidebarMenu.vue b/src/layout/components/Sidebar/components/SidebarMenu.vue
index 0701ef65..2f52d063 100644
--- a/src/layout/components/Sidebar/components/SidebarMenu.vue
+++ b/src/layout/components/Sidebar/components/SidebarMenu.vue
@@ -4,9 +4,21 @@
     ref="menuRef"
     :default-active="currentRoute.path"
     :collapse="!appStore.sidebar.opened"
-    :background-color="theme === 'dark' ? variables['menu-background'] : undefined"
-    :text-color="theme === 'dark' ? variables['menu-text'] : undefined"
-    :active-text-color="theme === 'dark' ? variables['menu-active-text'] : undefined"
+    :background-color="
+      theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+        ? variables['menu-background']
+        : undefined
+    "
+    :text-color="
+      theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+        ? variables['menu-text']
+        : undefined
+    "
+    :active-text-color="
+      theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+        ? variables['menu-active-text']
+        : undefined
+    "
     :popper-effect="theme"
     :unique-opened="false"
     :collapse-transition="false"
@@ -29,6 +41,7 @@ import path from "path-browserify";
 import type { MenuInstance } from "element-plus";
 
 import { LayoutEnum } from "@/enums/LayoutEnum";
+import { SidebarLightThemeEnum } from "@/enums/ThemeEnum";
 import { useSettingsStore, useAppStore } from "@/store";
 import { isExternal } from "@/utils/index";
 
@@ -63,6 +76,9 @@ const menuMode = computed(() => {
 // 获取主题
 const theme = computed(() => settingsStore.theme);
 
+// 获取浅色主题下的侧边栏配色方案
+const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
+
 /**
  * 获取完整路径
  *
diff --git a/src/layout/components/Sidebar/components/SidebarMenuItem.vue b/src/layout/components/Sidebar/components/SidebarMenuItem.vue
index 35579937..c89142b6 100644
--- a/src/layout/components/Sidebar/components/SidebarMenuItem.vue
+++ b/src/layout/components/Sidebar/components/SidebarMenuItem.vue
@@ -192,4 +192,10 @@ html.dark {
     background-color: $menu-hover;
   }
 }
+
+html.light-darkBlue {
+  .el-menu-item:hover {
+    background-color: $menu-hover;
+  }
+}
 </style>
diff --git a/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue b/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
index 613ed94a..36d81158 100644
--- a/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
+++ b/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
@@ -4,9 +4,21 @@
     <el-menu
       mode="horizontal"
       :default-active="activePath"
-      :background-color="theme === 'dark' ? variables['menu-background'] : undefined"
-      :text-color="theme === 'dark' ? variables['menu-text'] : undefined"
-      :active-text-color="theme === 'dark' ? variables['menu-active-text'] : undefined"
+      :background-color="
+        theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+          ? variables['menu-background']
+          : undefined
+      "
+      :text-color="
+        theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+          ? variables['menu-text']
+          : undefined
+      "
+      :active-text-color="
+        theme === 'dark' || sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE
+          ? variables['menu-active-text']
+          : undefined
+      "
       @select="handleMenuSelect"
     >
       <el-menu-item v-for="route in topMenus" :key="route.path" :index="route.path">
@@ -35,6 +47,7 @@ import { LocationQueryRaw, RouteRecordRaw } from "vue-router";
 import { usePermissionStore, useAppStore, useSettingsStore } from "@/store";
 import { translateRouteTitle } from "@/utils/i18n";
 import variables from "@/styles/variables.module.scss";
+import { SidebarLightThemeEnum } from "@/enums/ThemeEnum";
 
 /**
  * 定义状态：先定义 reactive、ref 或 computed 状态
@@ -50,6 +63,9 @@ const activePath = computed(() => appStore.activeTopMenuPath);
 // 获取主题
 const theme = computed(() => settingsStore.theme);
 
+// 获取浅色主题下的侧边栏配色方案
+const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
+
 // 顶部菜单列表
 const topMenus = ref<RouteRecordRaw[]>([]);
 
diff --git a/src/settings.ts b/src/settings.ts
index 60244795..f155263d 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -33,6 +33,8 @@ const defaultSettings: AppSettings = {
   watermarkEnabled: false,
   // 水印内容
   watermarkContent: pkg.name,
+  // 侧边栏配色方案
+  sidebarColorScheme: "light-white",
 };
 
 export default defaultSettings;
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 025d2df8..368805c4 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -1,6 +1,11 @@
 import defaultSettings from "@/settings";
-import { ThemeEnum } from "@/enums/ThemeEnum";
-import { generateThemeColors, applyTheme, toggleDarkMode } from "@/utils/theme";
+import { SidebarLightThemeEnum, ThemeEnum } from "@/enums/ThemeEnum";
+import {
+  generateThemeColors,
+  applyTheme,
+  toggleDarkMode,
+  toggleLightModeSidebarColorScheme,
+} from "@/utils/theme";
 
 type SettingsValue = boolean | string;
 
@@ -11,6 +16,11 @@ export const useSettingsStore = defineStore("setting", () => {
   const tagsView = useStorage<boolean>("tagsView", defaultSettings.tagsView);
   // 侧边栏 Logo
   const sidebarLogo = useStorage<boolean>("sidebarLogo", defaultSettings.sidebarLogo);
+  // 浅色主题下的侧边栏配色方案 (白色/深蓝色)
+  const sidebarColorScheme = useStorage<string>(
+    "sidebarColorScheme",
+    defaultSettings.sidebarColorScheme
+  );
   // 布局
   const layout = useStorage<string>("layout", defaultSettings.layout);
   // 水印
@@ -34,10 +44,20 @@ export const useSettingsStore = defineStore("setting", () => {
     { immediate: true }
   );
 
+  //  监听浅色侧边栏配色方案变化
+  watch(
+    [sidebarColorScheme],
+    ([newSidebarColorScheme]) => {
+      toggleLightModeSidebarColorScheme(newSidebarColorScheme === SidebarLightThemeEnum.DARKBLUE);
+    },
+    { immediate: true }
+  );
+
   // 设置映射
   const settingsMap: Record<string, Ref<SettingsValue>> = {
     tagsView,
     sidebarLogo,
+    sidebarColorScheme,
     layout,
     watermarkEnabled,
   };
@@ -51,6 +71,10 @@ export const useSettingsStore = defineStore("setting", () => {
     theme.value = val;
   }
 
+  function changeSidebarColorScheme(val: string) {
+    sidebarColorScheme.value = val;
+  }
+
   function changeThemeColor(color: string) {
     themeColor.value = color;
   }
@@ -63,6 +87,7 @@ export const useSettingsStore = defineStore("setting", () => {
     settingsVisible,
     tagsView,
     sidebarLogo,
+    sidebarColorScheme,
     layout,
     themeColor,
     theme,
@@ -71,5 +96,6 @@ export const useSettingsStore = defineStore("setting", () => {
     changeTheme,
     changeThemeColor,
     changeLayout,
+    changeSidebarColorScheme,
   };
 });
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 96c09235..8edef2c4 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -25,22 +25,31 @@
 /** 全局SCSS变量 */
 
 :root {
-  --menu-background: #fff;
-  --menu-text: #212121; // 菜单文字颜色 浅色模式下仅占位，实际颜色由 el-menu-item 组件决定
+  --menu-background: #fff; // 菜单背景色
+  --menu-text: #212121; // 菜单文字颜色 浅色主题-白色侧边栏配色下仅占位，实际颜色由 el-menu-item 组件决定
   --menu-active-text: var(
     --el-menu-active-color
-  ); // 菜单激活文字颜色 浅色模式下仅占位，实际颜色由 el-menu-item 组件决定
-
-  --menu-hover: #e6f4ff; // 菜单悬停背景色 浅色模式下仅占位，实际颜色由 el-menu-item 组件决定
-  --sidebar-logo-background: #f5f5f5;
-  --sidebar-logo-text-color: #333;
+  ); // 菜单激活文字颜色 浅色主题-白色侧边栏配色下仅占位，实际颜色由 el-menu-item 组件决定
 
+  --menu-hover: #e6f4ff; // 菜单悬停背景色 浅色主题-白色侧边栏配色下仅占位，实际颜色由 el-menu-item 组件决定
+  --sidebar-logo-background: #f5f5f5; // 侧边栏 Logo 背景色
+  --sidebar-logo-text-color: #333; // 侧边栏 Logo 文字颜色
   // 修复表格 fixed 列被选中后由于透明色导致叠字的 bug
   .el-table {
     --el-table-current-row-bg-color: rgb(235 243 250);
   }
 }
 
+/** 浅色主题-深蓝色侧边栏配色 */
+html.light-darkBlue {
+  --menu-background: #304156; // 菜单背景色
+  --menu-text: #bfcbd9; // 菜单文字颜色
+  --menu-active-text: var(--el-menu-active-color); // 菜单激活文字颜色
+  --menu-hover: #263445; // 菜单悬停背景色
+  --sidebar-logo-background: #2d3748; // 侧边栏 Logo 背景色
+  --sidebar-logo-text-color: #fff; // 侧边栏 Logo 文字颜色
+}
+
 /** 暗黑主题 */
 html.dark {
   --menu-background: var(--el-bg-color-overlay);
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index efc4ba45..2a285ab1 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -76,6 +76,8 @@ declare global {
     watermarkEnabled: boolean;
     /** 水印内容 */
     watermarkContent: string;
+    /** 侧边栏配色方案(light-white | light-darkBlue) */
+    sidebarColorScheme: "light-white" | "light-darkBlue";
   }
 
   /**
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index a62d01d1..560e8c21 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -1,3 +1,5 @@
+import { SidebarLightThemeEnum } from "@/enums/ThemeEnum";
+
 // 辅助函数：将十六进制颜色转换为 RGB
 function hexToRgb(hex: string): [number, number, number] {
   const bigint = parseInt(hex.slice(1), 16);
@@ -43,6 +45,11 @@ export function applyTheme(colors: Record<string, string>) {
   });
 }
 
+/**
+ * 切换暗黑模式
+ *
+ * @param isDark 是否启用暗黑模式
+ */
 export function toggleDarkMode(isDark: boolean) {
   if (isDark) {
     document.documentElement.classList.add("dark");
@@ -50,3 +57,16 @@ export function toggleDarkMode(isDark: boolean) {
     document.documentElement.classList.remove("dark");
   }
 }
+
+/**
+ * 切换浅色主题下的侧边栏颜色方案
+ *
+ * @param isBlue 布尔值，表示是否开启深蓝色侧边栏颜色方案
+ */
+export function toggleLightModeSidebarColorScheme(isDarkBlueDark: boolean) {
+  if (isDarkBlueDark) {
+    document.documentElement.classList.add(SidebarLightThemeEnum.DARKBLUE);
+  } else {
+    document.documentElement.classList.remove(SidebarLightThemeEnum.DARKBLUE);
+  }
+}