From 2e78e5e5c6fdb188bb095a90cdf709e0324aa620 Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Fri, 24 May 2024 17:18:47 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=BE=AE=E8=B0=83=20Dashboard=20?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E6=97=A5=E6=9C=9F=E6=8C=89=E9=92=AE=E8=BE=B9?=
 =?UTF-8?q?=E6=A1=86=E4=BB=A5=E5=8F=8A=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E7=B3=BB=E7=BB=9F=E8=A7=92=E8=89=B2=E6=97=B6=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E5=B1=95=E5=BC=80=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/NavLeft/index.vue       | 36 ++++++++++++-------
 src/styles/menu.scss                          |  6 ++--
 src/views/dashboard/components/SwitchDate.vue | 23 ++++++------
 3 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/src/layout/components/NavLeft/index.vue b/src/layout/components/NavLeft/index.vue
index 1aec085a8..8eb444985 100644
--- a/src/layout/components/NavLeft/index.vue
+++ b/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;
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index 3a65d8f33..895a9a14c 100644
--- a/src/styles/menu.scss
+++ b/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;
         }
       }
     }
diff --git a/src/views/dashboard/components/SwitchDate.vue b/src/views/dashboard/components/SwitchDate.vue
index d35c115dd..d53d92a97 100644
--- a/src/views/dashboard/components/SwitchDate.vue
+++ b/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>