优化菜单栏样式

src/assets/styles/sidebar.scss

@@ -7,116 +7,12 @@
     position: relative;
   }
 
-	// 改动2022年3月31日
+	// 展开sidebar状态设置svg-icon边距
-  .el-menu-item .el-menu-tooltip__trigger {
+	.openSidebar .layout-sidebar__container .svg-icon {
-    // padding: 0 !important;
+		margin-right: 10px;
-		// 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;
-      }
-    }
-   }
-
   .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 {
+      &>.el-sub-menu__title {
-        padding: 0 !important;
+        .el-sub-menu__icon-arrow {
-
+          display: none;
-        .svg-icon {
-          margin-left: 20px;
         }
-
       }
     }
 
     .el-menu--collapse {
-      .el-submenu {
+      [class^=el-icon] {
-        &>.el-submenu__title {
+        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

src/layout/components/Sidebar/SidebarItem.vue

@@ -4,15 +4,17 @@
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
           <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
-          <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>
+          <template v-if="onlyOneChild.meta.title" #title>
+            <span>{{ onlyOneChild.meta.title }}</span>
+          </template>
         </el-menu-item>
       </app-link>
     </template>
 
     <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
-      <template v-if="item.meta" #title>
+      <template v-slot:title>
         <svg-icon :icon-class="item.meta && item.meta.icon" />
-        <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>
+        <span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
       </template>
 
       <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)"

src/layout/components/Sidebar/index.vue

@@ -1,12 +1,15 @@
 <template>
-  <div :class="{ 'has-logo': showLogo }"
+  <div class="layout-sidebar__container" :class="{ 'has-logo': showLogo }"
     :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+
     <logo v-if="showLogo" :collapse="isCollapse" />
+
     <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
       <el-menu :default-active="activeMenu" :collapse="isCollapse"
         :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
         :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor" :unique-opened="true" :active-text-color="theme"
         :collapse-transition="false" mode="vertical">
+
         <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
@@ -36,3 +39,64 @@ const activeMenu = computed(() => {
   return path
 })
 </script>
+
+<style lang="scss">
+@import '@/assets/styles/variables.module.scss';
+.layout-sidebar__container {
+  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;
+
+  .scrollbar-wrapper {
+    overflow-x: hidden;
+  }
+  .el-scrollbar {
+    flex: 1;
+  }
+  .el-scrollbar__bar.is-vertical {
+    right: 0px;
+  }
+
+  a {
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .el-menu {
+    border: none;
+    height: 100%;
+    width: 100% !important;
+  }
+
+  // menu hover
+  .submenu-title-noDropdown,
+  .el-sub-menu__title {
+    &:hover {
+      // background-color: $menuHover !important;
+    }
+  }
+
+  .is-active > .el-sub-menu__title {
+    // color: $subMenuActiveText !important;
+  }
+
+  & .nest-menu .el-sub-menu > .el-sub-menu__title,
+  & .el-sub-menu .el-menu-item {
+    min-width: $base-sidebar-width !important;
+    // background-color: $base-menu-background !important;
+
+    &:hover {
+      // background-color: $base-sub-menu-hover !important;
+    }
+  }
+}
+</style>

src/layout/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
     <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
+    <sidebar class="sidebar-container" v-if="!sidebar.hide" />
-    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+    <div class="main-container" :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }">
       <div :class="{ 'fixed-header': fixedHeader }">
         <navbar @setLayout="setLayout" />
         <tags-view v-if="needTagsView" />
@@ -59,7 +59,7 @@ function setLayout() {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import '@/assets/styles/mixin.scss';
 @import '@/assets/styles/variables.module.scss';
 
@@ -68,7 +68,6 @@ function setLayout() {
   position: relative;
   height: 100%;
   width: 100%;
-
   &.mobile.openSidebar {
     position: fixed;
     top: 0;
@@ -76,8 +75,7 @@ function setLayout() {
 }
 
 .drawer-bg {
-  background: #000;
+  background: rgba(0, 0, 0, 0.3);
-  opacity: 0.3;
   width: 100%;
   top: 0;
   height: 100%;
@@ -93,15 +91,10 @@ function setLayout() {
   width: calc(100% - #{$base-sidebar-width});
   transition: width 0.28s;
 }
-
 .hideSidebar .fixed-header {
   width: calc(100% - 54px);
 }
 
-.sidebarHide .fixed-header {
-  width: 100%;
-}
-
 .mobile .fixed-header {
   width: 100%;
 }

src/main.js

@@ -61,12 +61,12 @@ app.component('UploadFile', FileUpload)
 app.component('UploadImage', ImageUpload)
 app.component('ImagePreview', ImagePreview)
 app.component('RightToolbar', RightToolbar)
+app.component('svg-icon', SvgIcon)
 
 app.use(router)
 app.use(store)
 app.use(plugins)
 app.use(elementIcons)
-app.component('svg-icon', SvgIcon)
 
 directive(app)