!38 fix #I7WUYJ 菜单切换主题为浅色主题后颜色不正常

Merge pull request !38 from ahaos/tspr

Author: JavaLionLi

src/assets/styles/sidebar.scss

@@ -81,10 +81,16 @@
     }
 
     // menu hover
+    .theme-dark .sub-menu-title-noDropdown,
+    .theme-dark .el-sub-menu__title {
+      &:hover {
+        background-color: $base-sub-menu-title-hover !important;
+      }
+    }
     .sub-menu-title-noDropdown,
     .el-sub-menu__title {
       &:hover {
-        background-color: $base-sub-menu-title-hover !important;
+        background-color: rgba(0, 0, 0, 0.05) !important;
       }
     }
 
@@ -95,12 +101,12 @@
     & .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
       min-width: $base-sidebar-width !important;
-
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: rgba(0, 0, 0, 0.1) !important;
       }
     }
 
+
     & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .theme-dark .el-sub-menu .el-menu-item {
       background-color: $base-sub-menu-background !important;
@@ -109,6 +115,21 @@
         background-color: $base-sub-menu-hover !important;
       }
     }
+
+    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .theme-dark .el-menu-item {
+      &:hover {
+        // you can use $sub-menuHover
+        background-color: $base-menu-hover !important;
+      }
+    }
+    & .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .el-menu-item {
+      &:hover {
+        // you can use $sub-menuHover
+        background-color: rgba(0, 0, 0, 0.04) !important;
+      }
+    }
   }
 
   .hideSidebar {
@@ -207,14 +228,6 @@
     }
   }
 
-  .nest-menu .el-sub-menu > .el-sub-menu__title,
-  .el-menu-item {
-    &:hover {
-      // you can use $sub-menuHover
-      background-color: $base-menu-hover !important;
-    }
-  }
-
   // the scroll bar appears when the sub-menu is too long
   > .el-menu--popup {
     max-height: 100vh;

src/enums/SideThemeEnum.ts

@@ -0,0 +1,4 @@
+export enum SideThemeEnum {
+  DARK = 'theme-dark',
+  LIGHT = 'theme-light'
+}

src/layout/components/Settings/index.vue

@@ -3,7 +3,7 @@
     <h3 class="drawer-title">主题风格设置</h3>
 
     <div class="setting-drawer-block-checbox">
-      <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
+      <div class="setting-drawer-block-checbox-item" @click="handleTheme(SideThemeEnum.DARK)">
         <img src="@/assets/images/dark.svg" alt="dark" />
         <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
           <i aria-label="图标: check" class="anticon anticon-check">
@@ -15,7 +15,7 @@
           </i>
         </div>
       </div>
-      <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
+      <div class="setting-drawer-block-checbox-item" @click="handleTheme(SideThemeEnum.LIGHT)">
         <img src="@/assets/images/light.svg" alt="light" />
         <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
           <i aria-label="图标: check" class="anticon anticon-check">
@@ -95,6 +95,7 @@ import usePermissionStore from '@/store/modules/permission'
 import { handleThemeStyle } from '@/utils/theme'
 import { ComponentInternalInstance } from "vue";
 import { SettingTypeEnum } from "@/enums/SettingTypeEnum";
+import { SideThemeEnum } from "@/enums/SideThemeEnum";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const appStore = useAppStore()
@@ -114,6 +115,13 @@ const isDark = useDark({
   valueDark: 'dark',
   valueLight: 'light',
 });
+watch(isDark, ()=> {
+  if (isDark.value) {
+    settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: SideThemeEnum.DARK })
+  } else {
+    settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: sideTheme.value })
+  }
+})
 const toggleDark = () => useToggle(isDark);
 
 /** 是否需要topNav */
@@ -166,8 +174,13 @@ const themeChange = (val: string | null) => {
     }
 }
 const handleTheme = (val: string) => {
-    settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: val })
     sideTheme.value = val;
+    if (isDark.value && val === SideThemeEnum.LIGHT) {
+      // 暗黑模式颜色不变
+      settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: SideThemeEnum.DARK })
+      return
+    }
+    settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: val })
 }
 const saveSetting = () => {
     proxy?.$modal.loading("正在保存到本地，请稍候...");

src/layout/components/Sidebar/index.vue

@@ -27,7 +27,6 @@ import variables from '@/assets/styles/variables.module.scss'
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
-import { ComponentInternalInstance } from "vue";
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const route = useRoute();