refactor(Menu): ♻️ 浅色主题Menu色系搭配改版

1.浅色主题下以白色背景为核心默认使用el-element浅色系配色。
2.浅色主题下支持悬浮、选中状态颜色根据主题色变化。3.修改浅色主题的侧边栏logo文字颜色。

# #182

src/layout/components/NavBar/components/NavbarRight.vue

@@ -70,9 +70,4 @@ const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
 .dark .navbar__right > *:hover {
   background: rgb(255 255 255 / 20%);
 }
-
-.layout-top .navbar__right > *,
-.layout-mix .navbar__right > * {
-  color: #fff;
-}
 </style>

src/layout/components/Sidebar/components/SidebarLogo.vue

@@ -34,7 +34,7 @@ defineProps({
     margin-left: 10px;
     font-size: 14px;
     font-weight: bold;
-    color: white;
+    color: $sidebar-logo-text-color;
   }
 }
 

src/layout/components/Sidebar/components/SidebarMenu.vue

@@ -4,9 +4,10 @@
     ref="menuRef"
     :default-active="currentRoute.path"
     :collapse="!appStore.sidebar.opened"
-    :background-color="variables['menu-background']"
-    :text-color="variables['menu-text']"
-    :active-text-color="variables['menu-active-text']"
+    :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"
+    :popper-effect="theme"
     :unique-opened="false"
     :collapse-transition="false"
     :mode="menuMode"
@@ -59,6 +60,9 @@ const menuMode = computed(() => {
   return settingsStore.layout === LayoutEnum.TOP ? "horizontal" : "vertical";
 });
 
+// 获取主题
+const theme = computed(() => settingsStore.theme);
+
 /**
  * 获取完整路径
  *

src/layout/components/Sidebar/components/SidebarMenuItem.vue

@@ -187,7 +187,9 @@ function resolvePath(routePath: string) {
   }
 }
 
-.el-menu-item:hover {
-  background-color: $menu-hover;
+html.dark {
+  .el-menu-item:hover {
+    background-color: $menu-hover;
+  }
 }
 </style>

src/layout/components/Sidebar/components/SidebarMixTopMenu.vue

@@ -4,9 +4,9 @@
     <el-menu
       mode="horizontal"
       :default-active="activePath"
-      :background-color="variables['menu-background']"
-      :text-color="variables['menu-text']"
-      :active-text-color="variables['menu-active-text']"
+      :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"
       @select="handleMenuSelect"
     >
       <el-menu-item v-for="route in topMenus" :key="route.path" :index="route.path">
@@ -32,7 +32,7 @@
  * 导入模块：先外部库，再内部模块，最后导入样式和工具类
  */
 import { LocationQueryRaw, RouteRecordRaw } from "vue-router";
-import { usePermissionStore, useAppStore } from "@/store";
+import { usePermissionStore, useAppStore, useSettingsStore } from "@/store";
 import { translateRouteTitle } from "@/utils/i18n";
 import variables from "@/styles/variables.module.scss";
 
@@ -42,10 +42,14 @@ import variables from "@/styles/variables.module.scss";
 const router = useRouter();
 const appStore = useAppStore();
 const permissionStore = usePermissionStore();
+const settingsStore = useSettingsStore();
 
 // 当前激活的顶部菜单路径
 const activePath = computed(() => appStore.activeTopMenuPath);
 
+// 获取主题
+const theme = computed(() => settingsStore.theme);
+
 // 顶部菜单列表
 const topMenus = ref<RouteRecordRaw[]>([]);
 

src/styles/variables.scss

@@ -25,11 +25,15 @@
 /** 全局SCSS变量 */
 
 :root {
-  --menu-background: #304156;
-  --menu-text: #bfcbd9;
-  --menu-active-text: var(--el-menu-active-color);
-  --menu-hover: #263445;
-  --sidebar-logo-background: #2d3748;
+  --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;
 
   // 修复表格 fixed 列被选中后由于透明色导致叠字的 bug
   .el-table {
@@ -44,6 +48,7 @@ html.dark {
   --menu-active-text: var(--el-menu-active-color);
   --menu-hover: rgb(0 0 0 / 20%);
   --sidebar-logo-background: rgb(0 0 0 / 20%);
+  --sidebar-logo-text-color: #fff;
 }
 
 $menu-background: var(--menu-background); // 菜单背景色
@@ -51,6 +56,7 @@ $menu-text: var(--menu-text); // 菜单文字颜色
 $menu-active-text: var(--menu-active-text); // 菜单激活文字颜色
 $menu-hover: var(--menu-hover); // 菜单悬停背景色
 $sidebar-logo-background: var(--sidebar-logo-background); // 侧边栏 Logo 背景色
+$sidebar-logo-text-color: var(--sidebar-logo-text-color); // 侧边栏 Logo 文字颜色
 
 $sidebar-width: 210px; // 侧边栏宽度
 $sidebar-width-collapsed: 54px; // 侧边栏收缩宽度