From 71ca5a87f186179e3fb52d7134259ddd60265aea Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Fri, 19 Apr 2024 19:13:34 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/NavHeader/ViewSwitcher.vue     | 30 +++++++++----
 src/layout/components/NavLeft/SidebarItem.vue | 13 ++++--
 src/layout/components/NavLeft/index.vue       | 42 ++++++++++++++-----
 src/styles/menu.scss                          | 18 --------
 yarn.lock                                     |  8 ++--
 5 files changed, 66 insertions(+), 45 deletions(-)

diff --git a/src/layout/components/NavHeader/ViewSwitcher.vue b/src/layout/components/NavHeader/ViewSwitcher.vue
index 5e5d40180..37e7c32a7 100644
--- a/src/layout/components/NavHeader/ViewSwitcher.vue
+++ b/src/layout/components/NavHeader/ViewSwitcher.vue
@@ -19,6 +19,7 @@
         :key="view.name"
         :index="view.name"
       >
+        <span class="outline" />
         <svg-icon :icon-class="view.meta.icon" class="icons" />
         <span slot="title" class="icons-title">{{ view.meta.title }}</span>
       </el-menu-item>
@@ -189,6 +190,23 @@ export default {
   color: #606266 !important;
 }
 
+.el-menu-item {
+  &.is-active {
+    font-weight: bold;
+    color: var(--menu-text-active);
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 3px;
+      background-color: var(--menu-text-active);
+    }
+  }
+}
+
 .icons {
   vertical-align: middle !important;
   font-size: 16px;
@@ -200,15 +218,9 @@ export default {
 .icons-title {
   display: inline-block;
   font-size: 14px;
-}
 
-.el-menu-item.is-active {
-  font-weight: bold;
-  color: var(--menu-text-active);
-  border-left: 4px solid var(--menu-text-active);
-}
-
-.menu-main.mobile-view-switch >>> .el-submenu__icon-arrow {
-  right: 10px;
+  .menu-main.mobile-view-switch >>> .el-submenu__icon-arrow {
+    right: 10px;
+  }
 }
 </style>
diff --git a/src/layout/components/NavLeft/SidebarItem.vue b/src/layout/components/NavLeft/SidebarItem.vue
index 2c293acd4..0a96360d1 100644
--- a/src/layout/components/NavLeft/SidebarItem.vue
+++ b/src/layout/components/NavLeft/SidebarItem.vue
@@ -6,8 +6,16 @@
         !item.alwaysShow"
     >
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :class="{'submenu-title-noDropdown':!isNest}" :index="resolvePath(onlyOneChild.path)" class="submenu-item">
-          <item :children="item.children" :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="getItemTitle(onlyOneChild)" />
+        <el-menu-item
+          :class="{'submenu-title-noDropdown':!isNest}"
+          :index="resolvePath(onlyOneChild.path)"
+          class="submenu-item"
+        >
+          <item
+            :children="item.children"
+            :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)"
+            :title="getItemTitle(onlyOneChild)"
+          />
         </el-menu-item>
       </app-link>
     </template>
@@ -17,7 +25,6 @@
       ref="subMenu"
       :index="resolvePath(item.path)"
       class="el-submenu-sidebar submenu-item"
-      default-active="1"
       popper-append-to-body
     >
       <template slot="title">
diff --git a/src/layout/components/NavLeft/index.vue b/src/layout/components/NavLeft/index.vue
index 1623e2225..ba26b347a 100644
--- a/src/layout/components/NavLeft/index.vue
+++ b/src/layout/components/NavLeft/index.vue
@@ -11,10 +11,12 @@
             trigger="hover"
           >
             <span slot="reference" style="width: 100%">
-              <span v-show="!isCollapse" style="margin-left: 5px;">
+              <span class="icon-zone">
+                <svg-icon class="icon" icon-class="switch" />
+              </span>
+              <span v-show="!isCollapse" class="view-title">
                 {{ isRouteMeta.title || '' }}
               </span>
-              <svg-icon class="icon" icon-class="switch" />
             </span>
             <ViewSwitcher mode="vertical" @view-change="handleViewChange" />
           </el-popover>
@@ -121,7 +123,7 @@ export default {
     }
   },
   mounted() {
-    this.setViewIconAttention()
+    // this.setViewIconAttention()
     this.setLeastMenuOpen()
   },
   methods: {
@@ -178,12 +180,20 @@ export default {
 
   .collapsed {
     text-align: left;
+
     .nav-title {
       &:hover {
         background-color: var(--menu-hover);
       }
-     .switch-view .icon {
-        margin-left: 0;
+
+      .switch-view {
+        .icon-zone {
+          float: none;
+          padding: 0;
+        }
+        .switch-view .icon {
+          margin-left: 0;
+        }
       }
     }
   }
@@ -209,13 +219,17 @@ export default {
       line-height: 10px;
       border-radius: 3px;
 
-      .icon {
-        margin-left: 60px;
-        margin-right: 0 !important;
+      .icon-zone {
+        float: right;
+        padding: 4px;
 
         &:hover {
           color: var(--color-primary);
         }
+
+        .icon {
+          margin-right: 0 !important;
+        }
       }
     }
   }
@@ -271,6 +285,12 @@ export default {
     display: none;
   }
 
+  .view-title {
+    margin-left: 5px;
+    width: calc(100% - 10px);
+    display: inline-block
+  }
+
   $mobileHeight: 40px;
 
   .active-mobile {
@@ -299,12 +319,12 @@ export default {
 
     .mobile-view-switch {
       &>>> .el-menu-item.is-active {
-      color: var(--menu-text-active)!important;
-      .svg-icon {
         color: var(--menu-text-active)!important;
+        .svg-icon {
+          color: var(--menu-text-active)!important;
+        }
       }
     }
-    }
   }
 
   @media screen and (max-width: 992px) {
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index 606f46ca7..54d301f38 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -9,17 +9,6 @@
     font-weight: 600;
   }
 
-  .el-submenu-sidebar.el-submenu.is-opened {
-    //box-shadow: 0 0 8px rgb(0 0 0 / 10%);
-
-    //* {
-    //  background-color: #f6f6f6 !important;
-    //}
-
-    border-top: solid 1px #f3f3f4;
-    //border-bottom: solid 1px #f3f3f4;
-  }
-
   .el-submenu, .el-menu-item.submenu-title-noDropdown {
     background-color: $menuBg;
     border-top: solid 1px $menuBg;
@@ -112,10 +101,6 @@
   }
 
   li.is-active {
-    //* {
-    //  background-color: var(--menu-hover) !important;
-    //}
-
     border-left: 4px solid var(--menu-text-active);
   }
 
@@ -126,9 +111,6 @@
   .el-submenu.is-opened {
     background-color: $subMenuBg;
 
-    .el-submenu__title {
-    }
-
     & .nest-menu {
       background-color: $subMenuBg;
     }
diff --git a/yarn.lock b/yarn.lock
index 8ae5a08a1..ab8400b23 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -776,9 +776,9 @@
     "to-fast-properties" "^2.0.0"
 
 "@fontsource/open-sans@^5.0.24":
-  "integrity" "sha512-bIF+87vxfOPTyvnBKS+rCPmz/m66um3zCk1UdPv8RGBgwu6MMxwED0jpcbvyFSkfy0ApcdjfkDSAhlFTm/pgiw=="
-  "resolved" "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-5.0.24.tgz"
-  "version" "5.0.24"
+  "integrity" "sha512-tFTqx2TE9srmM3pMEHldw0lTglqhKwFX6PVDEL0OF9xNT0x5W9brsezFHhV/U36pQV9So7S0vo4yVpnLzBBQew=="
+  "resolved" "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-5.0.27.tgz"
+  "version" "5.0.27"
 
 "@gar/promisify@^1.0.1":
   "integrity" "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw=="
@@ -2344,7 +2344,7 @@
 
 "axios@0.21.1":
   "integrity" "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA=="
-  "resolved" "https://registry.npmmirror.com/axios/-/axios-0.21.1.tgz"
+  "resolved" "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz"
   "version" "0.21.1"
   dependencies:
     "follow-redirects" "^1.10.0"