perf: layout

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%;

src/layout/types.ts

@@ -40,6 +40,7 @@ export interface setType {
   sidebar: {
     opened: boolean;
     withoutAnimation: boolean;
+    isClickHamburger: boolean;
   };
   device: string;
   fixedHeader: boolean;

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);

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 {