优化菜单栏样式

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" />
-    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+    <sidebar class="sidebar-container" v-if="!sidebar.hide" />
+    <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;
-  opacity: 0.3;
+  background: rgba(0, 0, 0, 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%;
 }