feat: 刷新时的菜单折叠兼容

src/layout/components/Header/components/button-collapsed/index.vue

@@ -19,10 +19,8 @@ import { useDevicesSize } from "@/hooks/useDevicesSize";
 const themeStore = useThemeConfig();
 const { collapsed } = storeToRefs(themeStore);
 const { isPc } = useDevicesSize();
-
-if (!isPc.value) {
-  collapsed.value = true; // 进入移动端模式先折叠菜单
-}
+// 刷新时，PC窗口展开菜单，移动端收起菜单
+collapsed.value = isPc.value ? false : true;
 
 // 折叠
 const onCollapsed = () => {
@@ -31,15 +29,7 @@ const onCollapsed = () => {
 
 // 监听屏幕尺寸变化，PC端自动展开菜单，移动端自动收起
 watch(isPc, (newV: Boolean) => {
-  if (newV) {
-    collapsed.value = false;
-  } else {
-    collapsed.value = true;
-  }
-});
-
-onUnmounted(() => {
-  collapsed.value = false; // 进入PC端打开折叠
+  collapsed.value = newV ? false : true;
 });
 </script>
 

src/layout/components/Header/components/theme-settings/index.vue

@@ -55,11 +55,12 @@
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
 import { useThemeMethods } from "@/hooks/useThemeMethods";
+import { useDevicesSize } from "@/hooks/useDevicesSize";
 import { ColorPicker } from "vue-color-kit";
 import "vue-color-kit/dist/vue-color-kit.css";
 
 const themeStore = useThemeConfig();
-const { layoutType, colorWeakMode, grayMode, darkMode, asideDark, transitionPage, themeColor, presetColors } =
+const { layoutType, collapsed, colorWeakMode, grayMode, darkMode, asideDark, transitionPage, themeColor, presetColors } =
   storeToRefs(themeStore);
 
 const layoutList = reactive({
@@ -121,6 +122,8 @@ const onGray = () => {
 // 布局变化
 const layouetChange = (type: string) => {
   layoutType.value = type;
+  const { isPc } = useDevicesSize();
+  collapsed.value = isPc.value ? false : true;
 };
 
 const props = defineProps({

src/layout/layout-mixing/index.vue

@@ -8,12 +8,12 @@
     </div>
     <a-layout class="layout-right">
       <a-layout-header class="header">
-        <div class="header-left" v-if="!isPc">
+        <div class="header-left">
           <ButtonCollapsed />
-          <Breadcrumb />
+          <Breadcrumb v-if="!isPc" />
         </div>
 
-        <div class="layout-head-menu" v-else>
+        <div class="layout-head-menu" v-if="isPc">
           <a-menu
             v-if="drawing"
             mode="horizontal"