feat: 🎸 重构sider组件中

src/styles/index.less

@@ -1,4 +1,5 @@
 @import '~element-plus/lib/theme-chalk/index.css';
+// @import './sidebar.less';
 @import './transition.less';
 @import './silder.less';
 @import './glob.less';

src/styles/sidebar.less

@@ -0,0 +1,234 @@
+#app {
+
+  // 主体区域 Main container
+  .main-container {
+    min-height: 100%;
+    transition: margin-left .28s;
+    margin-left: @menuWidth;
+    position: relative;
+  }
+
+  // 侧边栏 Sidebar container
+  .sidebar-container {
+    transition: width 0.28s;
+    width: @menuWidth !important;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+
+    //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__view {
+        height: 100%;
+      }
+    }
+
+    .el-scrollbar__bar.is-vertical {
+      right: 0px;
+    }
+    
+    .el-scrollbar {
+      height: 100%;
+    }
+    
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 70px);
+      }
+    }
+
+    .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;
+    }
+
+    // menu hover
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      color: hsla(0,0%,100%,.7) !important;
+      &:hover {
+        // background-color: @menuHover !important;
+        color: @subMenuActiveText !important;
+      }
+    }
+    
+    .is-active>.el-submenu__title {
+      color: @subMenuActiveText !important;
+    }
+
+    .is-active {
+      color: @subMenuActiveText !important;
+      background-color: @menuActiveBg !important;
+      &:hover {
+        color: @subMenuActiveText !important;
+        background-color: @menuActiveBg !important;
+      }
+      & .el-menu-item {
+        background-color: @menuActiveBg !important;
+        &:hover {
+          color: @subMenuActiveText !important;
+        }
+      }
+    }
+
+    & .nest-menu .el-submenu>.el-submenu__title,
+    & .el-submenu .el-menu-item {
+      min-width: @menuWidth !important;
+      background-color: @subMenuBg !important;
+
+      &:hover {
+        color: @subMenuActiveText !important;
+        background-color: @subMenuHover !important;
+      }
+    }
+    
+    & .nest-menu {
+      & .is-active {
+        background-color: @menuActiveBg !important;
+        &:hover {
+          color: @subMenuActiveText !important;
+          background-color: @menuActiveBg !important;
+        }
+      }
+    }
+  }
+
+  .hideSidebar {
+    .sidebar-container {
+      width: 36px !important;
+    }
+
+    .main-container {
+      margin-left: 36px;
+    }
+
+    .submenu-title-noDropdown {
+      padding-left: 10px !important;
+      position: relative;
+
+      .el-tooltip {
+        padding: 0 10px !important;
+      }
+    }
+
+    .el-submenu {
+      overflow: hidden;
+
+      &>.el-submenu__title {
+        padding-left: 10px !important;
+
+        .el-submenu__icon-arrow {
+          display: none;
+        }
+      }
+    }
+
+    .el-menu--collapse {
+      .el-submenu {
+        &>.el-submenu__title {
+          &>span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: @menuWidth !important;
+  }
+
+  // 适配移动端, Mobile responsive
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+
+    .sidebar-container {
+      transition: transform .28s;
+      width: @menuWidth !important;
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        transform: translate3d(-@menuWidth, 0, 0);
+      }
+    }
+  }
+
+  .withoutAnimation {
+
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
+}
+
+// when menu collapsed
+.el-menu--vertical {
+  &>.el-menu {
+    .svg-icon {
+      margin-right: 16px;
+    }
+  }
+
+  .nest-menu .el-submenu>.el-submenu__title,
+  .el-menu-item {
+    &:hover {
+      // you can use @subMenuHover
+      // background-color: @menuHover !important;
+    }
+  }
+
+  // the scroll bar appears when the subMenu is too long
+  >.el-menu--popup {
+    max-height: 100vh;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 20px;
+    }
+  }
+}

src/styles/variables.less

@@ -1,15 +1,25 @@
 // Silder
+@menuText: #bfcbd9;
+@menuActiveText: #409EFF;
+@menuActiveBg: #2d8cf0;
+
+@menuBg: #001529;
+
+@subMenuBg: #1f2d3d;
+@subMenuHover: #1f2d3d;
+@subMenuActiveText: #fff;
+
+@menuWidth: 200px;
+@menuMinWidth: 64px;
+
 @menuLightActiveText: #1890ff;
 @menuLightActiveBg: #e6f7ff;
 
 @menuDarkActiveText: #fff;
 @menuDarkActiveBg: #1890ff;
 
-@menuBg: #001529;
 @menuLightBg: #fff;
 
-@menuWidth: 200px;
-
 // topSilder
 @topSilderHeight: 50px;
 
@@ -26,4 +36,16 @@
 @minWidth: 992px;
 
 // deep
-@deep: ~'::v-deep';
+@deep: ~'::v-deep';
+
+// the :export directive is the magic sauce for webpack
+:export {
+  menuText: @menuText;
+  menuActiveText: @menuActiveText;
+  menuActiveBg: @menuActiveBg;
+  menuBg: @menuBg;
+  subMenuBg: @subMenuBg;
+  subMenuHover: @subMenuHover;
+  menuWidth: @menuWidth;
+  menuMinWidth: @menuMinWidth;
+}

src/styles/variables.less.d.ts

@@ -0,0 +1,14 @@
+export interface IScssVariables {
+  menuText: string
+  menuActiveText: string
+  menuActiveBg: string
+  menuBg: string
+  subMenuBg: string
+  subMenuHover: string
+  menuWidth: string
+  menuMinWidth: string
+}
+
+export const variables: IScssVariables
+
+export default variables