style: 整合改造 menu 样式以及 table button 样式

src/components/DataActions/index.vue

@@ -250,10 +250,8 @@ $color-drop-menu-border: #e4e7ed;
   .el-button {
     display: flex;
     align-items: center;
-    height: 20px !important;
+    padding: 3px 6px;
-    padding: 2px 6px;
     color: $btn-text-color;
-    border-color: var(--color-primary);
   }
 
   ::v-deep .action-item.el-dropdown .el-button {

src/layout/components/NavLeft/SidebarItem.vue

@@ -13,7 +13,7 @@
         >
           <item
             :children="item.children"
-            :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)"
+            :icon="onlyOneChild.meta.icon||(item.meta && item.meta.icon)"
             :title="getItemTitle(onlyOneChild)"
           />
         </el-menu-item>
@@ -73,11 +73,13 @@ export default {
     // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
     // TODO: refactor with render function
     this.onlyOneChild = null
-    return {}
+    return {
+    }
   },
   methods: {
     needHidden(item) {
       let hidden = item.hidden
+
       if (typeof item.hidden === 'function') {
         hidden = item.hidden()
       }
@@ -121,7 +123,7 @@ export default {
 
       // Show parent if there are no child router to display
       if (showingChildren.length === 0) {
-        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
         return true
       }
 
@@ -139,15 +141,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
->>> .submenu-item.el-submenu {
-//  border-left: 4px solid transparent;
-}
-
-.el-submenu.is-active {
-  &>>> .svg-icon {
-    color: var(--menu-text-active)!important;
-  }
-}
-</style>

src/layout/components/NavLeft/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{'has-logo': showLogo, 'show-orgs': showOrgs, 'collapsed': isCollapse}">
+  <div class="left-side-wrapper" :class="{'has-logo': showLogo, 'show-orgs': showOrgs, 'collapsed': isCollapse}">
     <div class="nav-header">
       <div class="active-mobile">
         <Organization v-if="$hasLicense()" class="organization" />
@@ -11,12 +11,12 @@
             trigger="hover"
           >
             <span slot="reference" style="width: 100%">
-              <span class="icon-zone">
-                <svg-icon class="icon" icon-class="switch" />
-              </span>
               <span v-show="!isCollapse" class="view-title">
                 {{ isRouteMeta.title || '' }}
               </span>
+              <span class="icon-zone">
+                <svg-icon class="icon" icon-class="switch" />
+              </span>
             </span>
             <ViewSwitcher mode="vertical" @view-change="handleViewChange" />
           </el-popover>
@@ -127,6 +127,7 @@ export default {
   mounted() {
     // this.setViewIconAttention()
     this.setLeastMenuOpen()
+    console.log('currentViewRoute', this.currentViewRoute.children)
   },
   methods: {
     toggleSideBar() {
@@ -163,114 +164,144 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-  @import "~@/styles/variables.scss";
+@import "~@/styles/variables.scss";
 
-  .left-menu >>> .el-submenu__title * {
+$mobileHeight: 40px;
-    vertical-align: inherit;
+$origin-color: #ffffff;
-  }
 
+.left-side-wrapper {
   .nav-header {
-    overflow: hidden;
+    display: flex;
-    background-color: var(--color-primary);
+    flex-wrap: wrap;
-  }
+    justify-content: center;
+    align-items: center;
 
-  .nav-logo {
+    .active-mobile {
-    height: 50px;
+      display: none;
-  }
 
-  .hover-switch-view {
+      ::v-deep .organization {
-    background: var(--menu-hover) !important;
+        height: $mobileHeight;
-    color: var(--color-primary);
+        padding-left: 20px;
-    text-align: center;
+        background: var(--color-primary-dark-1);
-  }
+        color: $origin-color;
 
-  .collapsed {
+        .el-input--prefix {
-    text-align: left;
+          display: flex;
+          align-items: center;
+          height: 40px;
+          line-height: 40px;
+        }
 
-    .nav-title {
+        .svg-icon {
-      &:hover {
+          color: $origin-color !important;
-        background-color: var(--menu-hover);
+          margin-right: 0 !important;
+        }
       }
 
-      .switch-view {
+      & >>> .title-label {
-        .icon-zone {
+        color: $origin-color !important;
-          float: none;
+      }
-          padding: 0;
+
-        }
+      .mobile-view-switch {
-        .switch-view .icon {
+        &>>> .el-menu-item.is-active {
-          margin-left: 0;
+          color: var(--menu-text-active) !important;
+          .svg-icon {
+            color: var(--menu-text-active) !important;
+          }
         }
       }
     }
-  }
 
-  .nav-title {
+    .nav-title {
-    box-sizing: border-box;
+      display: flex;
-    height: 48px;
+      align-items: center;
-    padding: 14px;
+      width: 100%;
-    font-size: 16px;
+      height: 50px;
-    font-weight: 500;
+      font-size: 18px;
-    color: #1F2329;
+      font-weight: 500;
-    overflow: hidden;
+      overflow: hidden;
-    white-space: nowrap;
+      white-space: nowrap;
-    cursor: pointer;
+      cursor: pointer;
-    background-color: var(--menu-bg);
+      transition: all 0.3s;
-    transition: all 0.3s;
+      color: var(--color-text-primary);
+      background-color: var(--menu-bg);
+      //border-bottom: 1px solid rgba(31, 35, 41, .15);
 
-    .switch-view {
+      .switch-view {
-      padding: 6px;
+        width: 100%;
-      right: 16px;
+        padding: 6px;
-      transform: translateY(-50%);
-      z-index: 1;
-      line-height: 10px;
-      border-radius: 2px;
 
-      .icon-zone {
+        ::v-deep .el-popover__reference {
-        float: right;
+          display: flex;
-        padding: 4px;
+          justify-content: center;
+          align-items: center;
 
-        &:hover {
+          .view-title {
-          color: var(--color-primary);
+            margin-left: 15px;
+            width: calc(100% - 10px);
+            display: inline-block
+          }
+
+          .icon-zone {
+            margin-right: 5px;
+
+            &:hover {
+              color: var(--color-primary);
+            }
+
+            .icon {
+              margin-right: 0 !important;
+            }
+          }
         }
+      }
 
-        .icon {
+      .hover-switch-view {
-          margin-right: 0 !important;
+        background: var(--menu-hover) !important;
-        }
+        color: var(--color-primary);
+        text-align: center;
       }
     }
   }
 
   .nav-footer {
-    display: block;
+    display: flex;
-    width: 100%;
+    justify-content: flex-end;
-    height: 48px;
-    line-height: 48px;
-    margin-top: 2px;
-    box-sizing: border-box;
     border-top: 1px solid rgba(31, 35, 41, 0.15);
     background-color: $subMenuBg;
 
     .toggle-bar {
-      width: 55px;
+      display: flex;
-      height: 100%;
+      align-items: center;
-      bottom: 0;
+      justify-content: center;
-      left: 0;
+      width: 50px;
-      top: auto;
+      height: 50px;
       border: 0;
-      z-index: 1000;
-      position: relative;
       cursor: pointer;
-    }
 
-    .toggle-bar:hover {
+      ::v-deep .hamburger-container {
-      background-color: $subMenuHover;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-right: 0 !important;
+          transform: translateY(-25%);
+        }
+      }
+
+      &:hover {
+        background-color: $subMenuHover;
+      }
     }
   }
 
   .is-show {
     display: block!important;;
   }
-
   .mobile-menu {
     display: none;
     position: absolute;
@@ -283,59 +314,26 @@ export default {
     z-index: 100;
   }
 
-  .show-switch-view {
+  &.collapsed .nav-title .switch-view {
-    display: none;
+    ::v-deep .el-popover__reference {
-  }
+      .icon-zone {
-
+        margin-right: 0;
-  .view-title {
-    margin-left: 5px;
-    width: calc(100% - 10px);
-    display: inline-block
-  }
-
-  $mobileHeight: 40px;
-
-  .active-mobile {
-    display: none;
-
-    & >>> .organization {
-      height: $mobileHeight;
-      line-height: $mobileHeight;
-      padding-left: 20px;
-      background: var(--color-primary-dark-1);
-      color: #fff;
-      border-bottom: 1px solid rgba(31, 35, 41, .15);
-
-      .el-input--prefix .el-input__inner {
-        height: $mobileHeight!important;
-        line-height: $mobileHeight!important;
       }
-      .svg-icon {
+
-        color: #FFF!important;
+      .switch-view .icon {
-        margin-right: 0!important;
+        margin-left: 0;
       }
     }
 
-    & >>> .title-label {
+    &:hover {
-      color: white !important;
+      color: var(--color-primary);
-    }
-
-    .mobile-view-switch {
-      &>>> .el-menu-item.is-active {
-        color: var(--menu-text-active)!important;
-        .svg-icon {
-          color: var(--menu-text-active)!important;
-        }
-      }
     }
   }
+}
 
-  @media screen and (max-width: 992px) {
+@media screen and (max-width: 992px) {
-    .active-mobile {
+  ::v-deep .active-mobile {
-      display: block;
+    display: block !important;
-    }
-    .show-switch-view {
-      display: block!important;
-    }
   }
+}
 </style>

src/layout/components/Page/PageHeading.vue

@@ -6,14 +6,12 @@
       <PasswordExpireTip />
     </slot>
     <div class="page-heading">
-      <el-row :gutter="0">
+      <el-row :gutter="0" type="flex">
         <el-col :span="16" class="page-heading-left">
           <slot><h2>{{ title }}</h2></slot>
         </el-col>
-        <el-col :span="8">
+        <el-col :span="8" class="page-heading-right">
-          <div class="page-heading-right">
+          <slot name="rightSide" />
-            <slot name="rightSide" />
-          </div>
         </el-col>
       </el-row>
     </div>
@@ -47,34 +45,35 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$origin-color: #ffffff;
+
 .page-heading {
-  position: relative;
+  display: flex;
+  align-items: center;
   height: 50px;
-  line-height: 50px;
+  background-color: $origin-color;
-  background-color: #ffffff;
+  border-bottom: 1px solid rgba(31, 35, 41, .15);
-  border-bottom: solid 1px #ebeef5;
 
   .el-row {
     width: 100%;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
     padding: 0 24px;
+
+    .page-heading-left,
+    h2 {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--color-text-primary);
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .page-heading-right {
+      display: flex;
+      justify-content: flex-end;
+    }
   }
 }
-
-.page-heading-left,
-h2 {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 2;
-  color: var(--color-text-primary);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.page-heading-right {
-  float: right;
-}
 </style>

src/styles/menu.scss

@@ -1,55 +1,142 @@
 @import "./variables";
 
+$icon-width: 14px;
+$single-menu-height: 45px;
+@mixin hover_active {
+  background-color: var(--menu-hover);
+  color: var(--menu-text-active);
+}
+
+.el-menu {
+  border-right: none !important;
+}
+
 .left-menu.el-menu {
-  .el-menu--inline {
+  .submenu-item {
-    background-color: $subMenuBg;
+    &.el-submenu-sidebar {
-  }
+      // 有子菜单项的 title
+      .el-submenu__title {
+        height: 30px;
+        font-size: 11px;
+        cursor: default;
+        font-weight: 600;
+        line-height: 30px;
+        letter-spacing: .05em;
+        color: var(--color-text-primary) !important;
 
-  .el-menu-item, .el-submenu {
+        .svg-icon {
-    font-weight: 600;
+          display: none;
-  }
+        }
 
-  .el-submenu, .el-menu-item.submenu-title-noDropdown {
+        &:hover {
-    background-color: $menuBg;
+          background-color: #ffffff;
-
+        }
-    .el-submenu__title {
-      color: $menuText;
-      font-weight: 400;
-
-      &:hover {
-        color: $menuActiveText;
-        background-color: $menuHover;
       }
 
-      i {
+      // 子菜单项
-        color: $menuActiveText;
+      .el-menu--inline {
+        background-color: $subMenuBg;
+
+        .nest-menu {
+          display: flex;
+
+          .el-menu-item {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            height: 45px;
+            padding: 20px !important;
+            line-height: 45px;
+            min-width: 200px;
+            font-size: 12px;
+
+            &:hover,
+            &.is-active {
+              @include hover_active
+            }
+
+            .svg-icon {
+              overflow: hidden;
+              width: $icon-width;
+              height: $icon-width;
+            }
+
+            span {
+              padding-left: 10px;
+            }
+          }
+        }
       }
     }
-  }
 
-  .el-menu-item, .el-submenu-sidebar .el-menu-item {
+    // 当前菜单样式
-    background-color: $subMenuBg;
+    &.is-active .el-submenu__title {
-    color: $menuText;
+      color: $menuActiveText;
-    list-style: circle inside;
+    }
 
+    // 没有子菜单的项
     &.submenu-title-noDropdown {
-      list-style: none;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      height: $single-menu-height;
+      line-height: $single-menu-height;
+      min-width: 200px;
+      font-size: 12px;
+
+      &:hover,
+      &.is-active {
+       @include hover_active
+      }
+
+      .svg-icon {
+        //display: none;
+        width: $icon-width;
+        height: $icon-width;
+      }
 
       span {
-        padding-left: 0;
+        padding-left: 10px;
+      }
+    }
+  }
+
+  // 折叠状态下
+  &.el-menu--collapse {
+    width: 100% !important;
+
+    .submenu-title-noDropdown,
+    .submenu-title-noDropdown .el-tooltip {
+      display: flex !important;
+      align-items: center !important;
+      min-width: 54px !important;
+
+      .svg-icon {
+        display: block
       }
     }
 
-    &.is-active {
+    .submenu-item {
-      color: $subMenuActiveText;
+      &.is-active {
-      font-weight: 500;
+        cursor: pointer;
-      list-style-type: disc;
+        @include hover_active
-    }
+      }
 
-    &:hover {
+      .el-submenu__title {
-      background-color: $subMenuHover !important;
+        display: flex;
-      color: $subMenuActiveText;
+        align-items: center;
-      list-style-type: disc;
+        height: $single-menu-height;
+
+        &:hover,
+        &.is-active {
+          cursor: pointer;
+          @include hover_active
+        }
+
+        .svg-icon {
+          display: block;
+        }
+      }
     }
   }
 
@@ -62,90 +149,6 @@
     color: $menuActiveText;
   }
 
-  .el-menu-item, .el-submenu__title {
-    height: 45px;
-    line-height: 45px;
-    font-weight: 400;
-    font-size: 13px;
-  }
-
-  .el-submenu .el-menu-item {
-    height: 35px;
-    line-height: 35px;
-    padding: 0 52px;
-    min-width: 200px;
-    font-size: 12px;
-  }
-
-  .nest-menu .el-submenu__title {
-    height: 30px;
-    line-height: 30px;
-    padding: 0 52px;
-    min-width: 200px;
-  }
-
-  .nest-menu li.is-opened, .nest-menu li.is-active {
-    border-left: none;
-  }
-
-  .el-menu-item * {
-    vertical-align: inherit ;
-  }
-
-  .el-menu-item:hover, .el-menu-item:focus {
-    color: $subMenuActiveText;
-  }
-
-  .navbar li.is-active, .navbar li.is-opened {
-    border: none;
-  }
-
-  .submenu-item.el-submenu.is-opened {
-    border-top: dotted 1px #ecedf2;
-  }
-
-  .nest-menu li.is-active {
-    border: none;
-  }
-
-  .el-submenu-sidebar.submenu-item.el-submenu.is-active {
-    .el-submenu__title,.nest-menu, .el-menu-item {
-      &:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        width: 3px;
-        background-color: var(--menu-text-active);
-      }
-    }
-  }
-
-  .submenu-item.is-active.submenu-title-noDropdown {
-    &:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      width: 3px;
-      background-color: var(--menu-text-active);
-    }
-  }
-
-  .el-submenu-sidebar .el-menu-item {
-    background-color: $subMenuBg;
-  }
-
-  .el-submenu.is-opened {
-    background-color: $subMenuBg;
-
-    & .nest-menu {
-      background-color: $subMenuBg;
-    }
-  }
-
   .nest-menu:last-child {
     padding-bottom: 10px;
   }

src/styles/sidebar.scss

@@ -57,47 +57,6 @@
       width: 100%;
       overflow: hidden;
     }
-
-    .svg-icon {
-      margin-right: 16px;
-      vertical-align: -0.15em;
-      fill: currentColor;
-      overflow: hidden;
-      width: 14px;
-      height: 14px;
-    }
-
-    .el-menu {
-      border: none;
-      height: 100%;
-      width: 100% !important;
-    }
-
-    // menu hover
-    .submenu-title-noDropdown,
-    .el-submenu__title {
-      font-weight: 500;
-      font-size: 13px;
-
-      i {
-        color: inherit;
-        font-weight: 500;
-      }
-
-      &:hover {
-        //background-color: $menuHover !important;
-      }
-    }
-
-    .is-active > .el-submenu__title {
-      color: $menuActiveText !important;
-    }
-
-    & .nest-menu .el-submenu-sidebar > .el-submenu__title,
-    & .el-submenu-sidebar .el-menu-item {
-      min-width: $sideBarWidth !important;
-      background-color: $subMenuBg;
-    }
   }
 
   .hideSidebar {
@@ -141,10 +100,6 @@
     }
   }
 
-  .el-menu--collapse .el-menu .el-submenu-sidebar {
-    min-width: $sideBarWidth !important;
-  }
-
   // mobile responsive
   .mobile {
     .main-container {
@@ -173,48 +128,3 @@
   }
 }
 
-// when menu collapsed
-.el-menu--vertical {
-  & > .el-menu {
-    .svg-icon {
-      margin-right: 16px;
-    }
-  }
-
-
-  .nest-menu .el-submenu-sidebar > .el-submenu__title,
-  .el-menu-item {
-    &:hover {
-      background-color: $menuHover !important;
-    }
-  }
-
-  // the scroll bar appears when the subMenu is too long
-  > .el-menu--popup {
-    max-height: 100vh;
-    overflow: hidden;
-
-    &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
-    }
-
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: #99a9bf;
-      border-radius: 20px;
-    }
-
-    .el-menu-item {
-      height: 36px;
-      line-height: 36px;
-
-      &.is-active {
-        color: var(--color-primary);
-        border-left: 4px solid var(--color-primary);
-      }
-    }
-  }
-}

src/styles/variables.scss

@@ -23,8 +23,8 @@ $menuHover: var(--menu-hover);
 $subMenuBg: var(--submenu-bg);
 $subMenuHover: var(--menu-hover);
 $subMenuActiveText: var(--menu-text-active);
-$sideBarWidth: 200px;
 
+$sideBarWidth: 200px;
 $headerHeight: 40px;
 
 :export {