update 调整菜单栏收起时的样式

src/assets/styles/sidebar.scss

@@ -168,6 +168,7 @@
     }
   }
 
+  // 收起菜单后的样式
   .hideSidebar {
     .sidebar-container {
       width: 54px !important;
@@ -180,29 +181,48 @@
     .sub-menu-title-noDropdown {
       padding: 0 !important;
       position: relative;
+      height: 45px;
+      // 选中状态的菜单
+      &.is-active {
+        background-color: var(--el-menu-active-color) !important;
+        color: #fff !important;
+      }
 
       .el-tooltip {
         padding: 0 !important;
-
-        .svg-icon {
-          margin-left: 20px;
-        }
       }
     }
 
-    .el-sub-menu {
+
+    & .el-sub-menu {
       overflow: hidden;
+      border-radius: 8px;
+      .el-sub-menu__title.el-tooltip__trigger {
+        border-radius: 8px;
+        height: 45px;
+      }
+
+      // 选中状态的菜单
+      &.is-active .el-sub-menu__title.el-tooltip__trigger {
+        background-color: var(--el-menu-active-color) !important;
+      }
+
 
       & > .el-sub-menu__title {
         padding: 0 !important;
-
-        .svg-icon {
-          margin-left: 20px;
-        }
       }
     }
 
     .el-menu--collapse {
+      .is-active .svg-icon {
+        fill: #fff;
+      }
+      .svg-icon {
+        display: flex;
+        margin: auto;
+        height: 100%;
+        // 这里设置width会跟随sidebar-container的transition 不符合预期
+      }
       .el-sub-menu {
         & > .el-sub-menu__title {
           & > span {
@@ -264,3 +284,13 @@
     }
   }
 }
+// 收起菜单后悬浮的菜单样式
+.el-popper.is-pure{
+  border-radius: 8px;
+  .el-menu--popup{
+    border-radius: 8px;
+  }
+  .el-menu-item{
+    border-radius: 4px;
+  }
+}

src/layout/components/Sidebar/index.vue

@@ -11,6 +11,7 @@
           :unique-opened="true"
           :active-text-color="theme"
           :collapse-transition="false"
+          :popper-offset="12"
           mode="vertical"
         >
           <sidebar-item v-for="(r, index) in sidebarRouters" :key="r.path + index" :item="r" :base-path="r.path" />