From d23bf73a2efcf049d8aca652b8b4786228ecfd72 Mon Sep 17 00:00:00 2001
From: lau <1807121535@qq.com>
Date: Thu, 14 Aug 2025 20:16:26 +0800
Subject: [PATCH] =?UTF-8?q?update:=20tag=E5=92=8C=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=A0=8F=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4=EF=BC=8C=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=9C=86=E8=A7=92=E5=92=8C=E7=BC=A9=E8=BF=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/sidebar.scss           | 44 ++++++++++++++++++++----
 src/assets/styles/variables.module.scss  |  7 +++-
 src/layout/components/TagsView/index.vue |  9 +++--
 3 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 7410b6fb..44e7e3ed 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -65,7 +65,7 @@
     }
 
     .svg-icon {
-      margin-right: 16px;
+      margin-right: 10px;
     }
 
     .el-menu {
@@ -88,12 +88,16 @@
     // menu hover
     .theme-dark .sub-menu-title-noDropdown,
     .theme-dark .el-sub-menu__title {
+      border-radius: 8px;
+      margin: 1px 5px 1px 5px;
       &:hover {
         background-color: $base-sub-menu-title-hover !important;
       }
     }
     .sub-menu-title-noDropdown,
     .el-sub-menu__title {
+      border-radius: 8px;
+      margin: 1px 5px 1px 5px;
       &:hover {
         background-color: rgba(0, 0, 0, 0.05) !important;
       }
@@ -105,8 +109,11 @@
 
     & .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
-      min-width: $base-sidebar-width !important;
-      &:hover {
+      min-width: calc($base-sidebar-width - 20px) !important;
+      border-radius: 8px;
+      height: 45px;
+      margin: 1px 8px 1px 8px;
+      &:not(.is-active):hover {
         background-color: rgba(0, 0, 0, 0.1) !important;
       }
     }
@@ -114,22 +121,47 @@
     & .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;
+      border-radius: 8px;
+      height: 45px;
+      margin: 1px 8px 1px 8px;
 
-      &:hover {
+      &.is-active {
+        background-color: var(--el-menu-active-color) !important;
+        color: #fff;
+      }
+      &:not(.is-active):hover {
+        // you can use $sub-menuHover
         background-color: $base-sub-menu-hover !important;
       }
     }
 
     & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .theme-dark .el-menu-item {
-      &:hover {
+      border-radius: 8px;
+      height: 45px;
+      margin: 1px 8px 1px 8px;
+
+      &.is-active {
+        background-color: var(--el-menu-active-color) !important;
+        color: #fff;
+      }
+      &:not(.is-active):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 {
+      border-radius: 8px;
+      height: 45px;
+      margin: 1px 8px 1px 8px;
+
+      &.is-active {
+        background-color: var(--el-menu-active-color) !important;
+        color: #fff;
+      }
+      &:not(.is-active):hover {
         // you can use $sub-menuHover
         background-color: rgba(0, 0, 0, 0.04) !important;
       }
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 3aa871b9..8f9c4bd9 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -1,6 +1,6 @@
 // 全局SCSS变量
 :root {
-  --menuBg: #304156;
+  --menuBg: #1f2d3d;
   --menuColor: #bfcbd9;
   --menuActiveText: #f4f4f5;
   --menuHover: #263445;
@@ -10,6 +10,11 @@
   --subMenuHover: #001528;
   --subMenuTitleHover: #293444;
 
+  // 菜单栏缩进
+  --el-menu-base-level-padding: 12px;
+  --el-menu-level-padding: 8px;
+  --el-menu-item-height: 50px;
+
   --fixedHeaderBg: #ffffff;
   --tableHeaderBg: #f8f8f9;
   --tableHeaderTextColor: #515a6e;
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 92e5f0a6..e9ee6759 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -13,7 +13,7 @@
         @contextmenu.prevent="openMenu(tag, $event)"
       >
         <svg-icon v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'" :icon-class="tag.meta.icon"/>
-        {{ tag.title }}
+        <span class="tags-view-item-title">{{ tag.title }}</span>
         <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
           <close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
         </span>
@@ -253,7 +253,7 @@ onMounted(() => {
       position: relative;
       cursor: pointer;
       height: 26px;
-      line-height: 23px;
+      line-height: 25px;
       background-color: var(--el-bg-color);
       border: 1px solid var(--el-border-color-light);
       color: #495060;
@@ -261,6 +261,7 @@ onMounted(() => {
       font-size: 12px;
       margin-left: 5px;
       margin-top: 4px;
+      border-radius: 4px;
       &:hover {
         color: var(--el-color-primary);
       }
@@ -290,6 +291,10 @@ onMounted(() => {
   .tags-view-item.active.has-icon::before {
     content: none !important;
   }
+  .tags-view-item-title {
+    margin-left: 4px;
+    margin-right: 3px;
+  }
   .contextmenu {
     margin: 0;
     background: var(--el-bg-color);
-- 
Gitee