update: tag和菜单栏样式调整，增加圆角和缩进

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;
       }

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;