style: 微调 Dashboard 面板日期按钮边框以及侧边栏切换系统角色时默认展开项

src/layout/components/NavLeft/index.vue

@@ -26,17 +26,17 @@
     </div>
     <div class="menu-wrap el-scrollbar">
       <el-menu
+        class="left-menu"
+        mode="vertical"
         :active-text-color="variables['menuActiveText']"
         :background-color="variables['menuBg']"
         :collapse="isCollapse"
         :collapse-transition="false"
         :default-active="activeMenu"
-        :default-openeds="defaultOpensMenu"
+        :default-openeds="defaultMenu"
         :text-color="variables['menuText']"
         :text-weigth="variables['menuTextWeight']"
         :unique-opened="false"
-        class="left-menu"
-        mode="vertical"
       >
         <sidebar-item
           v-for="route in currentViewRoute.children"
@@ -75,7 +75,8 @@ export default {
   data() {
     return {
       viewShown: false,
-      switchViewOtherClasses: ''
+      switchViewOtherClasses: '',
+      defaultMenu: []
     }
   },
   computed: {
@@ -83,9 +84,7 @@ export default {
       'currentViewRoute',
       'sidebar'
     ]),
-    defaultOpensMenu() {
-      return this.currentViewRoute.children.filter(route => route.children).map(route => route.path)
-    },
+
     activeMenu() {
       const route = this.$route
       const { meta, path } = route
@@ -128,19 +127,27 @@ export default {
   mounted() {
     // this.setViewIconAttention()
     this.setLeastMenuOpen()
-    console.log('currentViewRoute', this.currentViewRoute.children)
+    this.defaultOpensMenu()
   },
   methods: {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
+      this.$nextTick(() => {
+        if (!this.isCollapse) {
+          this.defaultOpensMenu()
+        }
+      })
     },
     toggleSwitch() {
       this.viewShown = true
     },
     handleViewChange() {
-      // setTimeout(() => {
-      //   this.setLeastMenuOpen()
-      // }, 500)
+      // 此处不使用 nextTick 的原因可能是由于子组件中切换 tag 需要触发异步的 dispatch
+      setTimeout(() => {
+      // this.setLeastMenuOpen()
+        this.defaultOpensMenu()
+        console.log('defaultMenu', this.defaultMenu)
+      }, 500)
     },
     setLeastMenuOpen() {
       const hasOpened = document.querySelector('.el-submenu-sidebar.submenu-item.el-submenu.is-opened')
@@ -160,6 +167,9 @@ export default {
         clearInterval(t)
         this.switchViewOtherClasses = ''
       }, 3000)
+    },
+    defaultOpensMenu() {
+      this.defaultMenu = this.currentViewRoute.children.filter(route => route.children).map(route => route.path)
     }
   }
 }
@@ -267,7 +277,7 @@ $origin-color: #ffffff;
 
   .nav-footer {
     display: flex;
-    justify-content: flex-end;
+    justify-content: flex-start;
     border-top: 1px solid rgba(31, 35, 41, 0.15);
     background-color: $subMenuBg;
 
@@ -275,7 +285,7 @@ $origin-color: #ffffff;
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 50px;
+      width: 54px;
       height: 50px;
       border: 0;
       cursor: pointer;

src/styles/menu.scss

@@ -140,7 +140,7 @@ $single-menu-height: 38px;
     .submenu-title-noDropdown .el-tooltip {
       display: flex !important;
       align-items: center !important;
-      min-width: 54px !important;
+      min-width: 55px !important;
 
       .svg-icon {
         display: block
@@ -148,6 +148,8 @@ $single-menu-height: 38px;
     }
 
     .submenu-item {
+      width: 55px;
+
       &.is-active {
         cursor: pointer;
         @include hover_active
@@ -165,7 +167,7 @@ $single-menu-height: 38px;
         }
 
         .svg-icon {
-          display: block;
+          //display: block;
         }
       }
     }

src/views/dashboard/components/SwitchDate.vue

@@ -56,28 +56,27 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$origin-color: #ffffff;
+
 .switch {
   font-weight: 400;
 
   ::v-deep .el-radio-button {
-    .el-radio-button__inner {
-      border-right: 1px solid var(--color-border);
-      color: var(--color-text-primary);
-      background: #ffffff;
-      border-radius: 0;
-    }
-
     &.is-active {
       .el-radio-button__inner {
-        border: 1px solid #1ab394;
-        color: #1ab394;
-        background-color: #FFF;
+        border-color: var(--color-primary);
+        color: var(--color-primary);
+        background-color: $origin-color;
       }
     }
   }
 
-  & >>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
-    box-shadow: none;
+  ::v-deep .el-radio-button {
+    .el-radio-button__inner {
+      color: var(--color-text-primary);
+      background: $origin-color;
+      border-radius: 0;
+    }
   }
 }
 </style>