From 5e23ae79264865dc963831add5a6ac609607d6d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chuailei000=E2=80=9D?= <2280131253@qq.com>
Date: Tue, 28 Feb 2023 16:39:05 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Hamburger/index.vue        |  4 +-
 src/icons/svg/direction-left.svg          |  3 ++
 src/layout/components/NavHeader/index.vue |  1 -
 src/layout/components/NavLeft/index.vue   | 57 +++++++++++++++++++----
 4 files changed, 54 insertions(+), 11 deletions(-)
 create mode 100644 src/icons/svg/direction-left.svg

diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 742159857..936927e7f 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="padding: 0 20px;" @click="toggleClick">
-    <svg-icon icon-class="arrow-to-left" class="hamburger" style="color: #ffffff;" :class="{'is-active':isActive}" />
+    <svg-icon icon-class="direction-left" class="hamburger" :class="{'is-active':isActive}" />
   </div>
 </template>
 
@@ -30,6 +30,6 @@ export default {
   color: $menuText;
 }
 .hamburger.is-active {
-  transform: rotate(180deg);
+  transform: rotate(-180deg);
 }
 </style>
diff --git a/src/icons/svg/direction-left.svg b/src/icons/svg/direction-left.svg
new file mode 100644
index 000000000..84dd449b5
--- /dev/null
+++ b/src/icons/svg/direction-left.svg
@@ -0,0 +1,3 @@
+<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#646A73" d="M4.856 11H16.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H4.814l5.025 5.024a.5.5 0 0 1 0 .707l-.707.708a.5.5 0 0 1-.707 0L2.42 13.435l-.006.008L1 12.028l.008-.007L1 12.014 2.414 10.6l.008.007 6.003-6.003a.5.5 0 0 1 .707 0l.707.706a.5.5 0 0 1 0 .708L4.856 11ZM21.5 20a.5.5 0 0 1-.5-.5v-15a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-.5.5h-1Z"/><path fill-opacity=".2" fill="#000" d="M4.856 11H16.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H4.814l5.025 5.024a.5.5 0 0 1 0 .707l-.707.708a.5.5 0 0 1-.707 0L2.42 13.435l-.006.008L1 12.028l.008-.007L1 12.014 2.414 10.6l.008.007 6.003-6.003a.5.5 0 0 1 .707 0l.707.706a.5.5 0 0 1 0 .708L4.856 11ZM21.5 20a.5.5 0 0 1-.5-.5v-15a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-.5.5h-1Z"/></svg> -->
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#646A73" d="M19.144 13H7.5a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h11.686l-5.024-5.025a.5.5 0 0 1 0-.707l.706-.707a.5.5 0 0 1 .708 0l6.003 6.004.007-.008 1.41 1.41a.005.005 0 0 1 0 .008.005.005 0 0 0 0 .007.005.005 0 0 1 0 .007l-1.41 1.411-.008-.007-6.002 6.003a.5.5 0 0 1-.708 0l-.707-.706a.5.5 0 0 1 0-.708L19.144 13ZM2.5 4a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-15a.5.5 0 0 1 .5-.5h1Z"/><path fill-opacity=".2" fill="#000" d="M19.144 13H7.5a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h11.686l-5.024-5.025a.5.5 0 0 1 0-.707l.706-.707a.5.5 0 0 1 .708 0l6.003 6.004.007-.008 1.41 1.41a.005.005 0 0 1 0 .008.005.005 0 0 0 0 .007.005.005 0 0 1 0 .007l-1.41 1.411-.008-.007-6.002 6.003a.5.5 0 0 1-.708 0l-.707-.706a.5.5 0 0 1 0-.708L19.144 13ZM2.5 4a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-15a.5.5 0 0 1 .5-.5h1Z"/></svg>
\ No newline at end of file
diff --git a/src/layout/components/NavHeader/index.vue b/src/layout/components/NavHeader/index.vue
index 5acb62f63..192dce755 100644
--- a/src/layout/components/NavHeader/index.vue
+++ b/src/layout/components/NavHeader/index.vue
@@ -198,7 +198,6 @@ export default {
     line-height: 30px;
     border-radius: 4px;
     border-color: $--color-primary;
-    background-color: white;
     color: #fff;
     cursor: pointer;
     transition: .2s;
diff --git a/src/layout/components/NavLeft/index.vue b/src/layout/components/NavLeft/index.vue
index eb2780a22..78e18e7fe 100644
--- a/src/layout/components/NavLeft/index.vue
+++ b/src/layout/components/NavLeft/index.vue
@@ -3,19 +3,17 @@
     <div class="nav-header">
       <div class="active-mobile">
         <Organization v-if="$hasLicense()" class="organization" />
-        <ViewSwitcher class="mobile-view-switch" mode="vertical" />
       </div>
       <div class="nav-title">
         <span
           v-show="!isCollapse"
           style="margin-left: 5px;"
-          @click="viewShown = !viewShown"
         >
           {{ isRouteMeta.title || '' }}
         </span>
+
         <span class="switch-view active-switch-view">
           <el-popover
-            v-model="viewShown"
             placement="right-start"
             trigger="hover"
             width="160"
@@ -24,6 +22,9 @@
             <svg-icon slot="reference" class="icon" icon-class="switch" />
           </el-popover>
         </span>
+        <span class="switch-view show-switch-view">
+          <svg-icon class="icon" icon-class="switch" @click="toggleSwitch" />
+        </span>
       </div>
     </div>
     <el-scrollbar class="menu-wrap" wrap-class="scrollbar-wrapper">
@@ -53,6 +54,9 @@
         <Hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
       </div>
     </div>
+    <div class="mobile-menu" :class="{'is-show': viewShown}" @click="viewShown = false">
+      <ViewSwitcher :mode="'vertical'" />
+    </div>
   </div>
 </template>
 
@@ -124,6 +128,9 @@ export default {
   methods: {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
+    },
+    toggleSwitch() {
+      this.viewShown = true
     }
   }
 }
@@ -217,6 +224,26 @@ export default {
     }
   }
 
+  .is-show {
+    display: block!important;;
+  }
+
+  .mobile-menu {
+    display: none;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    padding-top: 10px;
+    background: #fff;
+    z-index: 100;
+  }
+
+  .show-switch-view {
+    display: none;
+  }
+
   .active-mobile {
     display: none;
 
@@ -227,10 +254,6 @@ export default {
       border-bottom: 1px solid rgba(31, 35, 41, .15);
     }
 
-    & > > > .menu-main {
-      margin-left: -10px;
-    }
-
     & > > > .title-label {
       color: white !important;
     }
@@ -243,9 +266,27 @@ export default {
   @media screen and (max-width: 992px) {
     .active-mobile {
       display: block;
+      .organization {
+        &>>> .svg-icon {
+          color: #FFF!important;
+          margin-right:0px!important;
+        }
+      }
+      .mobile-view-switch {
+        background: #fff!important;
+        &>>> .el-menu-item.is-active {
+          color: var(--menu-text-active)!important;
+          .svg-icon {
+            color: var(--menu-text-active)!important;
+          }
+        }
+      }
     }
     .active-switch-view {
-      display: none !important;;
+      display: none!important;
+    }
+    .show-switch-view {
+      display: block!important;
     }
   }
 </style>