From 0d899feeaf7193c3e332b4de906825fe964a8019 Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Mon, 26 May 2025 08:22:34 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/views/MixLayout.vue | 49 ++++++++++++++++++++-
 src/layouts/views/TopLayout.vue | 75 +++++++++++++++++++++++++++++++--
 2 files changed, 119 insertions(+), 5 deletions(-)

diff --git a/src/layouts/views/MixLayout.vue b/src/layouts/views/MixLayout.vue
index 7cbea3d1..40a02388 100644
--- a/src/layouts/views/MixLayout.vue
+++ b/src/layouts/views/MixLayout.vue
@@ -5,7 +5,7 @@
       <div class="layout__header-content">
         <!-- Logo区域 -->
         <div v-if="isShowLogo" class="layout__header-logo">
-          <AppLogo :collapse="false" />
+          <AppLogo :collapse="isLogoCollapsed" />
         </div>
 
         <!-- 顶部菜单区域 -->
@@ -60,6 +60,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useRoute } from "vue-router";
+import { useWindowSize } from "@vueuse/core";
 import { useLayout } from "../composables/useLayout";
 import { useLayoutMenu } from "../composables/useLayoutMenu";
 import BaseLayout from "./BaseLayout.vue";
@@ -80,6 +81,12 @@ const { isShowTagsView, isShowLogo, isSidebarOpen, toggleSidebar } = useLayout()
 // 菜单相关
 const { sideMenuRoutes, activeTopMenuPath } = useLayoutMenu();
 
+// 响应式窗口尺寸
+const { width } = useWindowSize();
+
+// 只有在小屏设备（移动设备）时才折叠Logo（只显示图标，隐藏文字）
+const isLogoCollapsed = computed(() => width.value < 768);
+
 // 当前激活的菜单
 const activeMenu = computed(() => {
   const { meta, path } = route;
@@ -120,6 +127,7 @@ console.log("🎨 MixLayout rendered");
     &-content {
       display: flex;
       align-items: center;
+      min-width: 768px;
       height: 100%;
       padding: 0;
     }
@@ -129,9 +137,19 @@ console.log("🎨 MixLayout rendered");
       flex-shrink: 0;
       align-items: center;
       justify-content: center;
-      width: $sidebar-width;
+      width: $sidebar-width; // 默认宽度：显示logo+文字
       height: 100%;
 
+      // 中屏设备优化（800px-1100px）：适度缩小但保持显示文字
+      @media (min-width: 768px) and (max-width: 1100px) {
+        width: 180px; // 缩小到180px，为菜单腾出空间
+      }
+
+      // 小屏设备：只显示logo，使用收缩宽度
+      @media (max-width: 767px) {
+        width: $sidebar-width-collapsed; // 只显示logo：54px
+      }
+
       :deep(.logo) {
         height: 100%;
 
@@ -145,10 +163,19 @@ console.log("🎨 MixLayout rendered");
       display: flex;
       flex: 1;
       align-items: center;
+      min-width: 0;
       height: 100%;
       margin: 0 16px;
       overflow: hidden;
 
+      @media (min-width: 768px) and (max-width: 1200px) {
+        margin: 0 12px;
+      }
+
+      @media (max-width: 767px) {
+        margin: 0 8px;
+      }
+
       :deep(.el-menu) {
         height: 100%;
         background-color: transparent;
@@ -165,6 +192,16 @@ console.log("🎨 MixLayout rendered");
           line-height: $navbar-height;
           border-bottom: none;
 
+          @media (min-width: 768px) and (max-width: 1200px) {
+            padding: 0 12px;
+            font-size: 14px;
+          }
+
+          @media (max-width: 767px) {
+            padding: 0 8px;
+            font-size: 13px;
+          }
+
           &:hover {
             background-color: rgba(255, 255, 255, 0.08);
           }
@@ -183,6 +220,14 @@ console.log("🎨 MixLayout rendered");
       align-items: center;
       height: 100%;
       padding: 0 16px;
+
+      @media (min-width: 768px) and (max-width: 1200px) {
+        padding: 0 12px;
+      }
+
+      @media (max-width: 767px) {
+        padding: 0 8px;
+      }
     }
   }
 
diff --git a/src/layouts/views/TopLayout.vue b/src/layouts/views/TopLayout.vue
index 3b772816..c809458a 100644
--- a/src/layouts/views/TopLayout.vue
+++ b/src/layouts/views/TopLayout.vue
@@ -4,7 +4,7 @@
     <div class="layout__header">
       <div class="layout__header-left">
         <!-- Logo -->
-        <AppLogo v-if="isShowLogo" :collapse="false" />
+        <AppLogo v-if="isShowLogo" :collapse="isLogoCollapsed" />
         <!-- 菜单 -->
         <BasicMenu :data="routes" menu-mode="horizontal" base-path="" />
       </div>
@@ -23,6 +23,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
 import { useLayout } from "../composables/useLayout";
 import { useLayoutMenu } from "../composables/useLayoutMenu";
 import BaseLayout from "./BaseLayout.vue";
@@ -37,6 +39,12 @@ const { isShowTagsView, isShowLogo } = useLayout();
 
 // 菜单相关
 const { routes } = useLayoutMenu();
+
+// 响应式窗口尺寸
+const { width } = useWindowSize();
+
+// 只有在小屏设备（移动设备）时才折叠Logo（只显示图标，隐藏文字）
+const isLogoCollapsed = computed(() => width.value < 768);
 </script>
 
 <style lang="scss" scoped>
@@ -49,6 +57,7 @@ const { routes } = useLayoutMenu();
     align-items: center;
     justify-content: space-between;
     width: 100%;
+    min-width: 768px; // 设置最小宽度，防止过度压缩
     height: $navbar-height;
     background-color: $menu-background;
     box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
@@ -57,16 +66,31 @@ const { routes } = useLayoutMenu();
       display: flex;
       flex: 1;
       align-items: center;
+      min-width: 0; // 允许flex收缩
       height: 100%;
+      overflow: hidden; // 防止溢出
 
-      // Logo 样式
+      // Logo 样式 - 使用SCSS变量管理宽度
       :deep(.sidebar-logo) {
-        width: $sidebar-width;
+        flex-shrink: 0; // 防止Logo被压缩
+        width: $sidebar-width; // 默认宽度：显示logo+文字
         height: $navbar-height;
         padding: 0;
         margin-right: 20px;
         background: transparent;
 
+        // 中屏设备优化（800px-1100px）：适度缩小但保持显示文字
+        @media (min-width: 768px) and (max-width: 1100px) {
+          width: 180px; // 缩小到180px，为菜单腾出空间
+          margin-right: 16px; // 减少右边距
+        }
+
+        // 小屏设备：只显示logo，使用收缩宽度
+        @media (max-width: 767px) {
+          width: $sidebar-width-collapsed; // 只显示logo：54px
+          margin-right: 12px; // 减少右边距
+        }
+
         .sidebar-logo__link {
           height: 100%;
         }
@@ -80,14 +104,18 @@ const { routes } = useLayoutMenu();
 
     &-right {
       display: flex;
+      flex-shrink: 0; // 防止操作按钮被压缩
       align-items: center;
       height: 100%;
+      padding-left: 12px;
     }
 
     // 限制菜单高度
     :deep(.el-menu--horizontal) {
       flex: 1;
+      min-width: 0; // 允许菜单收缩
       height: $navbar-height;
+      overflow: hidden; // 防止菜单溢出
       line-height: $navbar-height;
       background-color: transparent;
       border: none;
@@ -95,12 +123,33 @@ const { routes } = useLayoutMenu();
       .el-menu-item {
         height: $navbar-height;
         line-height: $navbar-height;
+
+        // 响应式菜单项
+        @media (min-width: 768px) and (max-width: 1200px) {
+          padding: 0 12px; // 中屏设备减少内边距
+          font-size: 14px; // 稍微缩小字体
+        }
+
+        @media (max-width: 767px) {
+          padding: 0 8px; // 小屏设备进一步减少内边距
+          font-size: 13px;
+        }
       }
 
       .el-sub-menu {
         .el-sub-menu__title {
           height: $navbar-height;
           line-height: $navbar-height;
+
+          @media (min-width: 768px) and (max-width: 1200px) {
+            padding: 0 12px;
+            font-size: 14px;
+          }
+
+          @media (max-width: 767px) {
+            padding: 0 8px;
+            font-size: 13px;
+          }
         }
       }
 
@@ -117,9 +166,29 @@ const { routes } = useLayoutMenu();
   }
 }
 
+// 当存在TagsView时的样式调整
 .hasTagsView {
   :deep(.app-main) {
     height: calc(100vh - $navbar-height - $tags-view-height) !important;
   }
 }
+
+// 中屏设备的特殊优化
+@media (min-width: 768px) and (max-width: 1200px) {
+  .layout {
+    &__header {
+      padding: 0 8px; // 添加少量内边距
+    }
+  }
+}
+
+// 小屏设备的特殊优化
+@media (max-width: 767px) {
+  .layout {
+    &__header {
+      min-width: 600px; // 小屏设备的最小宽度
+      padding: 0 4px;
+    }
+  }
+}
 </style>