From 9502b993e938fc1990e0d212a63699757f9648b9 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Fri, 8 Mar 2024 13:25:15 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BE=A7=E8=BE=B9=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=82=AC=E6=B5=AE=E4=BB=A5=E5=8F=8A=E9=80=89=E4=B8=AD=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layout/components/Menu.vue            | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/core/core-frontend/src/layout/components/Menu.vue b/core/core-frontend/src/layout/components/Menu.vue
index c3875e0f82..31f9faa6e0 100644
--- a/core/core-frontend/src/layout/components/Menu.vue
+++ b/core/core-frontend/src/layout/components/Menu.vue
@@ -4,6 +4,14 @@ import { ElMenu } from 'element-plus-secondary'
 import { useRoute, useRouter } from 'vue-router'
 import { isExternal } from '@/utils/validate'
 import MenuItem from './MenuItem.vue'
+import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
+const appearanceStore = useAppearanceStoreWithOut()
+const tempColor = computed(() => {
+  return {
+    '--temp-color':
+      (appearanceStore.themeColor === 'custom' ? appearanceStore.customColor : '#3370FF') + '1A'
+  }
+})
 const isCollapse = ref(false)
 const route = useRoute()
 const { push } = useRouter()
@@ -26,6 +34,7 @@ const menuSelect = (index: string, indexPath: string[]) => {
 
 <template>
   <el-menu
+    :style="tempColor"
     @select="menuSelect"
     :default-active="activeIndex"
     class="el-menu-vertical"
@@ -40,7 +49,37 @@ const menuSelect = (index: string, indexPath: string[]) => {
   width: 100%;
   min-height: 400px;
 }
+
 .ed-menu {
   border: none;
+  .ed-menu-item:not(.is-active) {
+    &:hover {
+      background-color: #1f23291a !important;
+    }
+  }
+  .is-active:not(.ed-sub-menu) {
+    background-color: var(--temp-color);
+  }
+  :deep(.ed-sub-menu) {
+    margin: 0;
+    .ed-sub-menu__title {
+      &:hover {
+        background-color: #1f23291a;
+      }
+    }
+    .ed-menu-item:not(.is-active) {
+      &:hover {
+        background-color: #1f23291a !important;
+      }
+    }
+  }
+  :deep(.ed-sub-menu.is-active) {
+    .ed-sub-menu__title {
+      color: var(--ed-color-primary);
+    }
+    .is-active {
+      background-color: var(--temp-color);
+    }
+  }
 }
 </style>