From 1217f1abdc054413c743a5aad2e3f7db5cf9e4f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Sat, 6 May 2023 19:40:19 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E8=8F=9C=E5=8D=95=E4=B9=8B=E5=90=8E=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E4=B8=8D=E4=BC=9A=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Sidebar/index.vue |  7 +++++-
 src/layout/index.vue                    | 30 +++++++++++++++++--------
 src/store/modules/app.js                | 12 +++++-----
 3 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 399637d..7683035 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/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>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index d501bc8..3ea0a25 100644
--- a/src/layout/index.vue
+++ b/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">
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index 4452058..84d2ae4 100644
--- a/src/store/modules/app.js
+++ b/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