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[]>([]);