From 54e5f3829ad2c0627a0e1fc9a141bb40ae9ad082 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 8 Mar 2022 16:43:25 +0800
Subject: [PATCH] perf: optimize the experience of collapsing the menu (#493)

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/App.vue                                   |  4 +-
 src/components/GlobalHeader/GlobalHeader.vue  | 61 ++++++++-----------
 .../SettingDrawer/SettingDrawer.vue           |  1 +
 src/components/Tools/Logo.vue                 |  3 +
 src/layouts/BasicLayout.vue                   |  9 ---
 src/store/getters.js                          |  1 +
 src/store/modules/app.js                      |  6 +-
 7 files changed, 35 insertions(+), 50 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ee57debb..3988ecfe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,11 +22,11 @@ export default {
       switch (deviceType) {
         case DEVICE_TYPE.DESKTOP:
           $store.commit('TOGGLE_DEVICE', 'desktop')
-          $store.dispatch('setSidebar', true)
+          $store.dispatch('setSidebar', this.$store.getters.sidebar)
           break
         case DEVICE_TYPE.TABLET:
           $store.commit('TOGGLE_DEVICE', 'tablet')
-          $store.dispatch('setSidebar', false)
+          $store.dispatch('setSidebar', this.$store.getters.sidebar)
           break
         case DEVICE_TYPE.MOBILE:
         default:
diff --git a/src/components/GlobalHeader/GlobalHeader.vue b/src/components/GlobalHeader/GlobalHeader.vue
index 1ff4a7ba..55aacd23 100644
--- a/src/components/GlobalHeader/GlobalHeader.vue
+++ b/src/components/GlobalHeader/GlobalHeader.vue
@@ -1,36 +1,34 @@
 <template>
   <transition name="showHeader">
-    <div v-if="visible" class="header-animat">
-      <a-layout-header
-        v-if="visible"
-        :class="[
-          fixedHeader && 'ant-header-fixedHeader',
-          sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed'
-        ]"
-        style="padding: 0"
-      >
-        <div v-if="mode === 'sidemenu'" class="header">
-          <a-icon
-            v-if="device === 'mobile'"
-            :type="collapsed ? 'menu-fold' : 'menu-unfold'"
-            class="trigger"
-            @click="toggle"
-          />
-          <a-icon v-else :type="collapsed ? 'menu-unfold' : 'menu-fold'" class="trigger" @click="toggle" />
-          <user-menu></user-menu>
-        </div>
-        <div v-else :class="['top-nav-header-index', theme]">
-          <div class="header-index-wide">
-            <div class="header-index-left">
-              <logo v-if="device !== 'mobile'" class="top-nav-header" />
-              <s-menu v-if="device !== 'mobile'" :menu="menus" :theme="theme" mode="horizontal" />
-              <a-icon v-else :type="collapsed ? 'menu-fold' : 'menu-unfold'" class="trigger" @click="toggle" />
-            </div>
-            <user-menu class="header-index-right"></user-menu>
+    <a-layout-header
+      v-if="visible"
+      :class="[
+        fixedHeader && 'ant-header-fixedHeader',
+        sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed'
+      ]"
+      style="padding: 0"
+    >
+      <div v-if="mode === 'sidemenu'" class="header">
+        <a-icon
+          v-if="device === 'mobile'"
+          :type="collapsed ? 'menu-fold' : 'menu-unfold'"
+          class="trigger"
+          @click="toggle"
+        />
+        <a-icon v-else :type="collapsed ? 'menu-unfold' : 'menu-fold'" class="trigger" @click="toggle" />
+        <user-menu></user-menu>
+      </div>
+      <div v-else :class="['top-nav-header-index', theme]">
+        <div class="header-index-wide">
+          <div class="header-index-left">
+            <logo v-if="device !== 'mobile'" class="top-nav-header" />
+            <s-menu v-if="device !== 'mobile'" :menu="menus" :theme="theme" mode="horizontal" />
+            <a-icon v-else :type="collapsed ? 'menu-fold' : 'menu-unfold'" class="trigger" @click="toggle" />
           </div>
+          <user-menu class="header-index-right"></user-menu>
         </div>
-      </a-layout-header>
-    </div>
+      </div>
+    </a-layout-header>
   </transition>
 </template>
 
@@ -116,11 +114,6 @@ export default {
 </script>
 
 <style lang="less">
-.header-animat {
-  position: relative;
-  z-index: 999;
-}
-
 .showHeader-enter-active {
   transition: all 0.25s ease;
 }
diff --git a/src/components/SettingDrawer/SettingDrawer.vue b/src/components/SettingDrawer/SettingDrawer.vue
index 255db097..67ec286c 100644
--- a/src/components/SettingDrawer/SettingDrawer.vue
+++ b/src/components/SettingDrawer/SettingDrawer.vue
@@ -176,6 +176,7 @@ export default {
       } else {
         this.handleSetFixedHeader(true)
         this.handleSetFixedSidebar(false)
+        this.$store.dispatch('setSidebar', true)
       }
     },
     handleContentWidthChange(type) {
diff --git a/src/components/Tools/Logo.vue b/src/components/Tools/Logo.vue
index 8997ceb1..33b2fd50 100644
--- a/src/components/Tools/Logo.vue
+++ b/src/components/Tools/Logo.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="logo">
     <img
+      :style="{ width: sidebarOpened ? '64px' : '48px' }"
       alt="Halo Logo"
       class="select-none cursor-pointer hover:brightness-125 transition-all"
       src="/images/logo.svg"
@@ -13,9 +14,11 @@
 import { mapActions, mapGetters } from 'vuex'
 import apiClient from '@/utils/api-client'
 import throttle from 'lodash.throttle'
+import { mixin } from '@/mixins/mixin'
 
 export default {
   name: 'Logo',
+  mixins: [mixin],
   data() {
     return {
       clickCount: 0
diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index 7c223421..6fdcf630 100644
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -131,15 +131,6 @@ export default {
       this.setSidebar(!this.collapsed)
       triggerWindowResizeEvent()
     },
-    paddingCalc() {
-      let left = ''
-      if (this.sidebarOpened) {
-        left = this.isDesktop() ? '256px' : '80px'
-      } else {
-        left = (this.isMobile() && '0') || (this.fixedSidebar && '80px') || '0'
-      }
-      return left
-    },
     menuSelect() {
       if (!this.isDesktop()) {
         this.collapsed = false
diff --git a/src/store/getters.js b/src/store/getters.js
index d2887558..2a18e12e 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -3,6 +3,7 @@ const getters = {
   theme: state => state.app.theme,
   color: state => state.app.color,
   layoutSetting: state => state.app.layoutSetting,
+  sidebar: state => state.app.sidebar,
   loginModal: state => state.app.loginModal,
   token: state => state.user.token,
   user: state => state.user.user,
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index 8142981d..92d33d3b 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -27,12 +27,8 @@ const app = {
   },
   mutations: {
     SET_SIDEBAR_TYPE: (state, type) => {
-      state.sidebar = type
       Vue.ls.set(SIDEBAR_TYPE, type)
-    },
-    CLOSE_SIDEBAR: state => {
-      Vue.ls.set(SIDEBAR_TYPE, true)
-      state.sidebar = false
+      state.sidebar = type
     },
     TOGGLE_DEVICE: (state, device) => {
       state.device = device