From 839daf2fc4ad41f547110fc33475828532fc6f42 Mon Sep 17 00:00:00 2001
From: "YUN-PC5\\user" <bmdzh11713@163.com>
Date: Tue, 17 Oct 2023 14:01:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=BC=95=E5=85=A5=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E5=8F=98=E9=87=8F=E8=AE=BE=E7=BD=AE=E8=83=8C=E6=99=AF=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=EF=BC=8C=E5=AD=97=E4=BD=93=E9=A2=9C=E8=89=B2=E5=8F=8A?=
 =?UTF-8?q?logo=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/sidebar.scss                | 29 +++++++++++++++++--
 src/assets/styles/variables.module.scss       | 22 +++++---------
 src/layout/components/Sidebar/Logo.vue        |  2 +-
 src/layout/components/Sidebar/SidebarItem.vue |  5 +++-
 4 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index e20fd7e..3894bdb 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -4,6 +4,7 @@
     overflow-y: hidden;
     z-index: 1001;
     transition: width 0.28s ease;
+    background-image: var(--base-menu-background);
     background-color: var(--base-menu-background);
     height: 100%;
     display: flex;
@@ -96,14 +97,38 @@
 }
 
 // when menu collapsed
+.el-menu--vertical.theme-dark {
+  // the scroll bar appears when the subMenu is too long
+  > .el-menu--popup {
+    max-height: 100vh;
+    // overflow-y: auto;
+    background-image: $base-menu-background;
+    background-color: $base-menu-background;
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    svg {
+      margin-right: 5px;
+    }
+    .el-menu-item {
+      --el-menu-text-color: #{$base-menu-text-color};
+    }
+    .el-sub-menu__title {
+      --el-menu-text-color: #{$base-menu-text-color};
+    }
+  }
+}
+
 .el-menu--vertical {
   // the scroll bar appears when the subMenu is too long
   > .el-menu--popup {
     max-height: 100vh;
-    overflow-y: auto;
-
+    // overflow-y: auto;
     &::-webkit-scrollbar {
       width: 6px;
     }
+    svg {
+      margin-right: 5px;
+    }
   }
 }
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 3feb928..713ad7e 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -21,20 +21,19 @@ $panGreen: #30b08f;
   //登录框宽度
   --base-login-width: 280px;
 }
-
-$base-menu-background: #324157;
-$base-menu-light-background: #ffffff;
-$base-menu-color: #bfcbd9;
-$base-menu-light-color: rgba(0, 0, 0, 0.7);
+// #324157
+$base-menu-background: linear-gradient(-225deg, #cbbacc 0%, #2580b3 100%);
+$base-menu-title-color: #ffffff;
+$base-menu-text-color: #e5eaf3;
 
 /***侧边栏深色配置***/
 [data-theme='theme-dark'] {
-  --base-menu-background: #324157;
+  --base-menu-background: #{$base-menu-background};
   // --base-menu-background: linear-gradient(to right, #243949 0%, #517fa4 100%);
-  --base-logo-title-color: #ffffff;
+  --base-logo-title-color: #{$base-menu-title-color};
   // // el-ement ui 设置
   // --el-fill-color-blank: #304156;
-  --el-text-color-primary: #e5eaf3;
+  --el-text-color-primary: #{$base-menu-text-color};
   --el-menu-text-color: var(--el-text-color-primary);
 }
 html.dark {
@@ -49,10 +48,3 @@ html.cafe {
 html.contrast {
   filter: contrast(2);
 }
-
-:export {
-  menuColor: $base-menu-color;
-  menuLightColor: $base-menu-light-color;
-  menuBackground: $base-menu-background;
-  menuLightBackground: $base-menu-light-background;
-}
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 1754f9f..570e5b6 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -44,7 +44,7 @@ const sideTheme = computed(() => settingsStore.sideTheme)
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: var(--base-menu-background);
+  // background: var(--base-menu-background);
   text-align: center;
   overflow: hidden;
 
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index d0a08c4..2fbc91e 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -15,7 +15,7 @@
       </app-link>
     </template>
 
-    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)">
+    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" :popper-class="sideTheme">
       <template #title>
         <svg-icon :name="item.meta && item.meta.icon" />
         <span v-if="item.meta && item.meta.titleKey">{{ $t(item.meta.titleKey) }}</span>
@@ -31,7 +31,10 @@
 import { isExternal } from '@/utils/validate'
 import AppLink from './Link'
 import { getNormalPath } from '@/utils/ruoyi'
+import useSettingsStore from '@/store/modules/settings'
 
+const settingsStore = useSettingsStore()
+const sideTheme = computed(() => settingsStore.sideTheme)
 const props = defineProps({
   // route object
   item: {