refactor:优化小屏下的菜单抽屉

web/src/layouts/frontend/components/aside.vue

@@ -50,20 +50,17 @@
 
 <script setup lang="ts">
 import { useRoute, useRouter, type RouteRecordRaw } from 'vue-router'
-import { useUserInfo } from '/@/stores/userInfo'
 import { useMemberCenter } from '/@/stores/memberCenter'
-import { onClickMenu } from '/@/utils/router'
+import { useUserInfo } from '/@/stores/userInfo'
 import { fullUrl } from '/@/utils/common'
+import { onClickMenu } from '/@/utils/router'
 
 const route = useRoute()
 const router = useRouter()
 const userInfo = useUserInfo()
 const memberCenter = useMemberCenter()
 
-const routerPush = (routeName = '', route?: RouteRecordRaw) => {
-    if (document.body.clientWidth < 992) {
-        memberCenter.toggleMenuExpand(false)
-    }
+const routerPush = (routeName: string, route?: RouteRecordRaw) => {
     if (routeName) {
         router.push({ name: routeName })
     } else if (route) {

web/src/layouts/frontend/components/header.vue

@@ -21,7 +21,7 @@
             v-model="memberCenter.state.menuExpand"
             :with-header="false"
             direction="ltr"
-            size="40%"
+            :size="memberCenter.state.shrink ? '70%' : '40%'"
         >
             <div class="header-row">
                 <div @click="router.push({ name: '/' })" class="header-logo">
@@ -38,28 +38,20 @@
 </template>
 
 <script setup lang="ts">
-import { watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useSiteConfig } from '/@/stores/siteConfig'
-import { useMemberCenter } from '/@/stores/memberCenter'
+import { onBeforeRouteUpdate, useRouter } from 'vue-router'
 import { initialize } from '/@/api/frontend/index'
 import Menu from '/@/layouts/frontend/components/menu.vue'
+import { useMemberCenter } from '/@/stores/memberCenter'
 import { layoutMenuScrollbarRef } from '/@/stores/refs'
+import { useSiteConfig } from '/@/stores/siteConfig'
 
-const route = useRoute()
 const router = useRouter()
 const siteConfig = useSiteConfig()
 const memberCenter = useMemberCenter()
 
-watch(
-    () => route.path,
-    () => {
-        memberCenter.toggleMenuExpand(false)
-    },
-    {
-        immediate: true,
-    }
-)
+onBeforeRouteUpdate(() => {
+    memberCenter.toggleMenuExpand(false)
+})
 
 /**
  * 前端初始化请求，获取站点配置信息，动态路由信息等