From dbfafaf5477166e54b29de3e341f422de9037559 Mon Sep 17 00:00:00 2001
From: hxr <1490493387@qq.com>
Date: Tue, 16 Apr 2024 00:22:57 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E7=82=B9=E5=87=BB=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=90=8E=E5=85=B3=E9=97=AD=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/index.vue | 39 +++++++++++++++++++++------------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/layout/index.vue b/src/layout/index.vue
index 7d17ec9b..3155f1a1 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -2,7 +2,7 @@
   <div class="wh-full" :class="classObj">
     <!-- 遮罩层 -->
     <div
-      v-if="classObj.mobile && classObj.openSidebar"
+      v-if="isMobile && isOpenSidebar"
       class="wh-full fixed-lt z-999 bg-black bg-opacity-30"
       @click="handleOutsideClick"
     ></div>
@@ -11,7 +11,7 @@
     <Sidebar class="sidebar-container" />
 
     <!-- 混合布局 -->
-    <div v-if="layout === 'mix'" class="mix-container">
+    <div v-if="layout === LayoutEnum.MIX" class="mix-container">
       <div class="mix-container__left">
         <SidebarMenu :menu-list="mixLeftMenus" :base-path="activeTopMenuPath" />
         <div class="sidebar-toggle">
@@ -47,11 +47,16 @@
 import { useAppStore, useSettingsStore, usePermissionStore } from "@/store";
 import defaultSettings from "@/settings";
 import { DeviceEnum } from "@/enums/DeviceEnum";
+import { LayoutEnum } from "@/enums/LayoutEnum";
 
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
+const width = useWindowSize().width;
 
+const WIDTH_DESKTOP = 992; // 响应式布局容器固定宽度  大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
+const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
+const isOpenSidebar = computed(() => appStore.sidebar.opened);
 const fixedHeader = computed(() => settingsStore.fixedHeader); // 是否固定header
 const showTagsView = computed(() => settingsStore.tagsView); // 是否显示tagsView
 const layout = computed(() => settingsStore.layout); // 布局模式 left top mix
@@ -73,26 +78,17 @@ const classObj = computed(() => ({
   hideSidebar: !appStore.sidebar.opened,
   openSidebar: appStore.sidebar.opened,
   mobile: appStore.device === DeviceEnum.MOBILE,
-  "layout-left": layout.value === "left",
-  "layout-top": layout.value === "top",
-  "layout-mix": layout.value === "mix",
+  [`layout-${settingsStore.layout}`]: true,
 }));
 
-const width = useWindowSize().width;
-const WIDTH = 992; // 响应式布局容器固定宽度  大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
-
 watchEffect(() => {
-  if (width.value < WIDTH) {
-    appStore.toggleDevice(DeviceEnum.MOBILE);
-    appStore.closeSideBar();
+  appStore.toggleDevice(
+    width.value < WIDTH_DESKTOP ? DeviceEnum.MOBILE : DeviceEnum.DESKTOP
+  );
+  if (width.value >= WIDTH_DESKTOP) {
+    appStore.openSideBar();
   } else {
-    appStore.toggleDevice(DeviceEnum.DESKTOP);
-
-    if (width.value >= 1200) {
-      appStore.openSideBar();
-    } else {
-      appStore.closeSideBar();
-    }
+    appStore.closeSideBar();
   }
 });
 
@@ -103,6 +99,13 @@ function handleOutsideClick() {
 function toggleSidebar() {
   appStore.toggleSidebar();
 }
+
+const route = useRoute();
+watch(route, () => {
+  if (isMobile.value && isOpenSidebar.value) {
+    appStore.closeSideBar();
+  }
+});
 </script>
 
 <style lang="scss" scoped>