From a5a7490a7a4b418dee132c7c5c78f0f6ec6cb356 Mon Sep 17 00:00:00 2001
From: "WANGFAN\\wangf" <15871339963@163.com>
Date: Wed, 15 Jan 2025 20:48:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=B7=E6=96=B0=E6=97=B6=E7=9A=84?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=8A=98=E5=8F=A0=E5=85=BC=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Header/components/button-collapsed/index.vue | 16 +++-------------
 .../Header/components/theme-settings/index.vue   |  5 ++++-
 src/layout/layout-mixing/index.vue               |  6 +++---
 3 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/layout/components/Header/components/button-collapsed/index.vue b/src/layout/components/Header/components/button-collapsed/index.vue
index 4906c92..8a68ae4 100644
--- a/src/layout/components/Header/components/button-collapsed/index.vue
+++ b/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>
 
diff --git a/src/layout/components/Header/components/theme-settings/index.vue b/src/layout/components/Header/components/theme-settings/index.vue
index 9449ebd..107b931 100644
--- a/src/layout/components/Header/components/theme-settings/index.vue
+++ b/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({
diff --git a/src/layout/layout-mixing/index.vue b/src/layout/layout-mixing/index.vue
index 9f3d7f9..14ea636 100644
--- a/src/layout/layout-mixing/index.vue
+++ b/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"