From 1e92bd416e4f171095de4f04e819de210c1227ef Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Thu, 25 Nov 2021 12:37:56 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=90=8C=E6=AD=A5=E5=AE=8C=E6=95=B4?=
 =?UTF-8?q?=E7=89=88=E5=88=86=E6=94=AF=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/index.vue     | 68 ++++++++++++++++++++----------------------------
 src/layout/types.ts      |  1 +
 src/store/modules/app.ts | 38 ++++++++++++++-------------
 src/style/sidebar.scss   |  3 ++-
 4 files changed, 51 insertions(+), 59 deletions(-)

diff --git a/src/layout/index.vue b/src/layout/index.vue
index 0d8d7cd..e8298b3 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -4,8 +4,6 @@ import {
   reactive,
   computed,
   onMounted,
-  watchEffect,
-  onBeforeMount,
   defineComponent,
   getCurrentInstance
 } from "vue";
@@ -13,11 +11,11 @@ import { setType } from "./types";
 import { useI18n } from "vue-i18n";
 import { routerArrays } from "./types";
 import { emitter } from "/@/utils/mitt";
-import { useEventListener } from "@vueuse/core";
 import backTop from "/@/assets/svg/back_top.svg";
 import { useAppStoreHook } from "/@/store/modules/app";
 import fullScreen from "/@/assets/svg/full_screen.svg";
 import exitScreen from "/@/assets/svg/exit_screen.svg";
+import { deviceDetection } from "/@/utils/deviceDetection";
 import { useSettingStoreHook } from "/@/store/modules/settings";
 
 import navbar from "./components/navbar.vue";
@@ -27,6 +25,7 @@ import setting from "./components/setting/index.vue";
 import Vertical from "./components/sidebar/vertical.vue";
 import Horizontal from "./components/sidebar/horizontal.vue";
 
+const isMobile = deviceDetection();
 const pureSetting = useSettingStoreHook();
 const instance = getCurrentInstance().appContext.app.config.globalProperties;
 
@@ -93,10 +92,6 @@ const set: setType = reactive({
   })
 });
 
-const handleClickOutside = (params: boolean) => {
-  useAppStoreHook().closeSideBar({ withoutAnimation: params });
-};
-
 function setTheme(layoutModel: string) {
   window.document.body.setAttribute("layout", layoutModel);
   instance.$storage.layout = {
@@ -105,32 +100,37 @@ function setTheme(layoutModel: string) {
   };
 }
 
+function toggle(device: string, bool: boolean) {
+  useAppStoreHook().toggleDevice(device);
+  useAppStoreHook().toggleSideBar(bool, "resize");
+}
+
 // 监听容器
 emitter.on("resize", ({ detail }) => {
+  if (isMobile) return;
   let { width } = detail;
   width <= 670 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
-});
-
-watchEffect(() => {
-  if (set.device === "mobile" && !set.sidebar.opened) {
-    handleClickOutside(false);
+  /** width app-wrapper类容器宽度
+   * 0 < width <= 760 隐藏侧边栏
+   * 760 < width <= 990 折叠侧边栏
+   * width > 990 展开侧边栏
+   */
+  if (width > 0 && width <= 760) {
+    toggle("mobile", false);
+  } else if (width > 760 && width <= 990) {
+    toggle("desktop", false);
+  } else if (width > 990) {
+    if (!set.sidebar.isClickHamburger) {
+      toggle("desktop", true);
+    }
   }
 });
 
-const $_isMobile = () => {
-  const rect = document.body.getBoundingClientRect();
-  return rect.width - 1 < 992;
-};
-
-const $_resizeHandler = () => {
-  if (!document.hidden) {
-    const isMobile = $_isMobile();
-    useAppStoreHook().toggleDevice(isMobile ? "mobile" : "desktop");
-    if (isMobile) {
-      handleClickOutside(true);
-    }
+onMounted(() => {
+  if (isMobile) {
+    toggle("mobile", false);
   }
-};
+});
 
 function onFullScreen() {
   pureSetting.hiddenSideBar
@@ -138,18 +138,6 @@ function onFullScreen() {
     : pureSetting.changeSetting({ key: "hiddenSideBar", value: true });
 }
 
-onMounted(() => {
-  const isMobile = $_isMobile();
-  if (isMobile) {
-    useAppStoreHook().toggleDevice("mobile");
-    handleClickOutside(true);
-  }
-});
-
-onBeforeMount(() => {
-  useEventListener("resize", $_resizeHandler);
-});
-
 const layoutHeader = defineComponent({
   render() {
     return h(
@@ -202,8 +190,8 @@ const layoutHeader = defineComponent({
         set.sidebar.opened &&
         layout.includes('vertical')
       "
-      class="drawer-bg"
-      @click="handleClickOutside(false)"
+      class="app-mask"
+      @click="useAppStoreHook().toggleSideBar()"
     />
     <Vertical
       v-show="!pureSetting.hiddenSideBar && layout.includes('vertical')"
@@ -261,7 +249,7 @@ const layoutHeader = defineComponent({
   margin-left: 0 !important;
 }
 
-.drawer-bg {
+.app-mask {
   background: #000;
   opacity: 0.3;
   width: 100%;
diff --git a/src/layout/types.ts b/src/layout/types.ts
index 1825d61..5cf452b 100644
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -40,6 +40,7 @@ export interface setType {
   sidebar: {
     opened: boolean;
     withoutAnimation: boolean;
+    isClickHamburger: boolean;
   };
   device: string;
   fixedHeader: boolean;
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 4c05552..1561dd5 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -8,6 +8,8 @@ interface AppState {
   sidebar: {
     opened: boolean;
     withoutAnimation: boolean;
+    // 判断是否手动点击Hamburger
+    isClickHamburger: boolean;
   };
   layout: string;
   device: string;
@@ -20,7 +22,8 @@ export const useAppStore = defineStore({
       opened: storageLocal.getItem("sidebarStatus")
         ? !!+storageLocal.getItem("sidebarStatus")
         : true,
-      withoutAnimation: false
+      withoutAnimation: false,
+      isClickHamburger: false
     },
     // 这里的layout用于监听容器拖拉后恢复对应的导航模式
     layout:
@@ -36,28 +39,27 @@ export const useAppStore = defineStore({
     }
   },
   actions: {
-    TOGGLE_SIDEBAR() {
-      this.sidebar.opened = !this.sidebar.opened;
-      this.sidebar.withoutAnimation = false;
-      if (this.sidebar.opened) {
-        storageLocal.setItem("sidebarStatus", 1);
-      } else {
-        storageLocal.setItem("sidebarStatus", 0);
+    TOGGLE_SIDEBAR(opened?: boolean, resize?: string) {
+      if (opened && resize) {
+        this.sidebar.withoutAnimation = true;
+        this.sidebar.opened = true;
+        storageLocal.setItem("sidebarStatus", true);
+      } else if (!opened && resize) {
+        this.sidebar.withoutAnimation = true;
+        this.sidebar.opened = false;
+        storageLocal.setItem("sidebarStatus", false);
+      } else if (!opened && !resize) {
+        this.sidebar.withoutAnimation = false;
+        this.sidebar.opened = !this.sidebar.opened;
+        this.sidebar.isClickHamburger = !this.sidebar.opened;
+        storageLocal.setItem("sidebarStatus", this.sidebar.opened);
       }
     },
-    CLOSE_SIDEBAR(withoutAnimation: boolean) {
-      storageLocal.setItem("sidebarStatus", 0);
-      this.sidebar.opened = false;
-      this.sidebar.withoutAnimation = withoutAnimation;
-    },
     TOGGLE_DEVICE(device: string) {
       this.device = device;
     },
-    async toggleSideBar() {
-      await this.TOGGLE_SIDEBAR();
-    },
-    closeSideBar(withoutAnimation) {
-      this.CLOSE_SIDEBAR(withoutAnimation);
+    async toggleSideBar(opened?: boolean, resize?: string) {
+      await this.TOGGLE_SIDEBAR(opened, resize);
     },
     toggleDevice(device) {
       this.TOGGLE_DEVICE(device);
diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss
index 87574b5..4951701 100644
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -39,7 +39,7 @@
     position: fixed;
     top: 0;
     right: 0;
-    z-index: 1000;
+    z-index: 998;
     width: calc(100% - 210px);
     transition: width 0.28s;
   }
@@ -557,6 +557,7 @@
     }
   }
 
+  /* vertical菜单下hideSidebar去除动画 */
   .withoutAnimation {
     .main-container,
     .sidebar-container {