refactor: ♻️ 移动端点击左侧菜单后关闭左侧菜单

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>