优化菜单栏样式

src/assets/styles/sidebar.scss

@@ -7,116 +7,12 @@
     position: relative;
   }
 
-	// 改动2022年3月31日
-  .el-menu-item .el-menu-tooltip__trigger {
-    // padding: 0 !important;
-		// justify-content: space-around;
-		
-		// .svg-icon {
-		// 	margin-right: 0 !important;
-		// }
-  }
-
-   .sidebar-container {
-     -webkit-transition: width .28s;
-     transition: width 0.28s;
-     width: $base-sidebar-width !important;
-     background-color: $base-menu-background;
-     height: 100%;
-     position: fixed;
-     font-size: 0px;
-     top: 0;
-     bottom: 0;
-     left: 0;
-     z-index: 1001;
-     overflow: hidden;
-    // 有改动
-    -webkit-box-shadow: 2px 0 14px rgba(0, 21, 41, .10);
-    box-shadow: 2px 0 14px rgba(0, 21, 41, .10);
-
-    // reset element-ui css
-    .horizontal-collapse-transition {
-      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
-    }
-
-    .scrollbar-wrapper {
-      overflow-x: hidden !important;
-    }
-
-    .el-scrollbar__bar.is-vertical {
-      right: 0px;
-    }
-
-    .el-scrollbar {
-      height: 100%;
-    }
-
-    &.has-logo {
-      .el-scrollbar {
-        height: calc(100% - 50px);
-      }
-    }
-
-    .is-horizontal {
-      display: none;
-    }
-
-    a {
-      display: inline-block;
-      width: 100%;
-      overflow: hidden;
-    }
-
-    .svg-icon {
-      margin-right: 16px;
-    }
-
-    .el-menu {
-      border: none;
-      height: 100%;
-      width: 100% !important;
-    }
-
-    .el-menu-item,
-    .el-submenu__title {
-      overflow: hidden !important;
-      text-overflow: ellipsis !important;
-      white-space: nowrap !important;
-    }
-
-    // menu hover
-    .submenu-title-noDropdown,
-    .el-submenu__title {
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
-      }
-    }
-
-    & .theme-dark .is-active>.el-submenu__title {
-      color: $base-menu-color-active !important;
-    }
-
-    & .nest-menu .el-submenu>.el-submenu__title,
-    & .el-submenu .el-menu-item {
-      min-width: $base-sidebar-width !important;
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
-      }
-    }
-
-    & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
-    & .theme-dark .el-submenu .el-menu-item {
-      background-color: $base-sub-menu-background !important;
-
-      &:hover {
-        background-color: $base-sub-menu-hover !important;
-      }
-    }
-   }
-
+	// 展开sidebar状态设置svg-icon边距
+	.openSidebar .layout-sidebar__container .svg-icon {
+		margin-right: 10px;
+	}
   .hideSidebar {
-    .sidebar-container {
+    .layout-sidebar__container {
       width: 54px !important;
     }
 
@@ -130,29 +26,25 @@
 
       .el-tooltip {
         padding: 0 !important;
-
-        .svg-icon {
-          margin-left: 20px;
-        }
       }
     }
 
-    .el-submenu {
+    .el-sub-menu {
       overflow: hidden;
-
-      &>.el-submenu__title {
-        padding: 0 !important;
-
-        .svg-icon {
-          margin-left: 20px;
+      
+      &>.el-sub-menu__title {
+        .el-sub-menu__icon-arrow {
+          display: none;
         }
-
       }
     }
 
     .el-menu--collapse {
-      .el-submenu {
-        &>.el-submenu__title {
+      [class^=el-icon] {
+        width: auto;
+      }
+      .el-sub-menu {
+        &>.el-sub-menu__title {
           &>span {
             height: 0;
             width: 0;
@@ -165,7 +57,7 @@
     }
   }
 
-  .el-menu--collapse .el-menu .el-submenu {
+  .el-menu--collapse .el-menu .el-sub-menu {
     min-width: $base-sidebar-width !important;
   }
 
@@ -175,13 +67,13 @@
       margin-left: 0px;
     }
 
-    .sidebar-container {
+    .layout-sidebar__container {
       transition: transform .28s;
       width: $base-sidebar-width !important;
     }
 
     &.hideSidebar {
-      .sidebar-container {
+      .layout-sidebar__container {
         pointer-events: none;
         transition-duration: 0.3s;
         transform: translate3d(-$base-sidebar-width, 0, 0);
@@ -192,7 +84,7 @@
   .withoutAnimation {
 
     .main-container,
-    .sidebar-container {
+    .layout-sidebar__container {
       transition: none;
     }
   }
@@ -200,17 +92,12 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  &>.el-menu {
-    .svg-icon {
-      margin-right: 16px;
-    }
-  }
 
-  .nest-menu .el-submenu>.el-submenu__title,
+  .nest-menu .el-sub-menu>.el-sub-menu__title,
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
-      background-color: rgba(0, 0, 0, 0.06) !important;
+      background-color: $base-sub-menu-hover !important;
     }
   }
 
@@ -232,4 +119,4 @@
       border-radius: 20px;
     }
   }
- }
+}

src/assets/styles/variables.module.scss

@@ -13,6 +13,12 @@ $base-menu-color: #bfcbd9;
 $base-menu-color-active: #f4f4f5;
 $base-menu-background: #304156;
 $base-logo-title-color: #ffffff;
+$menuHover:#263445;
+// sidebar
+$menuText:#bfcbd9;
+$menuActiveText:#409EFF;
+$subMenuActiveText:#f4f4f5; 
+//https://github.com/ElemeFE/element/issues/12951
 
 $base-menu-light-color: rgba(0, 0, 0, 0.7);
 $base-menu-light-background: #ffffff;
@@ -21,28 +27,13 @@ $base-logo-light-title-color: #001529;
 $base-sub-menu-background: #1f2d3d;
 $base-sub-menu-hover: #001528;
 
-// 自定义暗色菜单风格
-/**
-$base-menu-color:hsla(0,0%,100%,.65);
-$base-menu-color-active:#fff;
-$base-menu-background:#001529;
-$base-logo-title-color: #ffffff;
-
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
-$base-logo-light-title-color: #001529;
-
-$base-sub-menu-background:#000c17;
-$base-sub-menu-hover:#001528;
-*/
-
 $--color-primary: #409EFF;
 $--color-success: #67C23A;
 $--color-warning: #E6A23C;
 $--color-danger: #F56C6C;
 $--color-info: #909399;
 
-$base-sidebar-width: 200px;
+$base-sidebar-width: 210px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass