fix：移动端点击菜单之后面板不会隐藏

src/layout/components/Sidebar/index.vue

@@ -34,7 +34,7 @@ const showLogo = computed(() => settingsStore.sidebarLogo)
 const sideTheme = computed(() => settingsStore.sideTheme)
 const theme = computed(() => settingsStore.theme)
 const isCollapse = computed(() => !appStore.sidebar.opened)
-
+const device = computed(() => appStore.device)
 const activeMenu = computed(() => {
   const { meta, path } = route
   // if set path, the sidebar will highlight the path you set
@@ -43,4 +43,9 @@ const activeMenu = computed(() => {
   }
   return path
 })
+watch(route, (val) => {
+  if (device.value === 'mobile') {
+    appStore.closeSideBar()
+  }
+})
 </script>

src/layout/index.vue

@@ -1,7 +1,14 @@
 <template>
   <el-container :class="classObj" class="app-layout" :style="{ '--current-color': theme }">
     <!-- 移动端打开菜单遮罩 -->
-    <el-drawer v-if="device === 'mobile'" :size="220" v-model="menuDrawer" :with-header="false" modal-class="sidebar-mobile" direction="ltr">
+    <el-drawer
+      v-if="device === 'mobile'"
+      :size="220"
+      v-model="menuDrawer"
+      :with-header="false"
+      modal-class="sidebar-mobile"
+      direction="ltr"
+      @close="close">
       <sidebar />
     </el-drawer>
     <sidebar v-else-if="!sidebar.hide" />
@@ -38,12 +45,7 @@ import iframeToggle from './components/IframeToggle/index'
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
 import useTagsViewStore from '@/store/modules/tagsView'
-const menuDrawer = computed({
-  get: () => useAppStore().sidebar.opened,
-  set: (val) => {
-    useAppStore().toggleSideBar(val)
-  }
-})
+
 const settingsStore = useSettingsStore()
 const theme = computed(() => settingsStore.theme)
 const sidebar = computed(() => useAppStore().sidebar)
@@ -51,7 +53,14 @@ const device = computed(() => useAppStore().device)
 const needTagsView = computed(() => settingsStore.tagsView)
 const fixedHeader = computed(() => settingsStore.fixedHeader)
 const showFooter = computed(() => settingsStore.showFooter)
-
+const menuDrawer = computed({
+  get: () => useAppStore().sidebar.opened,
+  set: (val) => {
+    if (device.value !== 'mobile') {
+      useAppStore().toggleSideBar(val)
+    }
+  }
+})
 // appMain 模块 start
 const route = useRoute()
 useTagsViewStore().addCachedView(route)
@@ -71,7 +80,7 @@ const WIDTH = 792 // refer to Bootstrap's responsive design
 
 watchEffect(() => {
   if (device.value === 'mobile' && sidebar.value.opened) {
-    // useAppStore().closeSideBar()
+    useAppStore().closeSideBar()
   }
   if (width.value - 1 < WIDTH) {
     useAppStore().toggleDevice('mobile')
@@ -85,6 +94,9 @@ const settingRef = ref(null)
 function setLayout() {
   settingRef.value.openSetting()
 }
+function close() {
+  useAppStore().closeSideBar()
+}
 </script>
 
 <style lang="scss">

src/store/modules/app.js

@@ -1,33 +1,31 @@
 import Cookies from 'js-cookie'
-
+import defaultSettings from '@/settings'
 const useAppStore = defineStore('app', {
   state: () => ({
     sidebar: {
       opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
-      withoutAnimation: false,
+      // withoutAnimation: false,
       hide: false
     },
     device: 'desktop',
-    size: Cookies.get('size') || 'small',
+    size: Cookies.get('size') || defaultSettings.defaultSize,
     lang: Cookies.get('lang') || 'zh-cn'
   }),
   actions: {
-    toggleSideBar(withoutAnimation) {
+    toggleSideBar() {
       if (this.sidebar.hide) {
         return false
       }
       this.sidebar.opened = !this.sidebar.opened
-      this.sidebar.withoutAnimation = withoutAnimation
       if (this.sidebar.opened) {
         Cookies.set('sidebarStatus', 1)
       } else {
         Cookies.set('sidebarStatus', 0)
       }
     },
-    closeSideBar(withoutAnimation) {
+    closeSideBar() {
       Cookies.set('sidebarStatus', 0)
       this.sidebar.opened = false
-      this.sidebar.withoutAnimation = withoutAnimation
     },
     toggleDevice(device) {
       this.device = device