From 264961ce08b17f5e639e284aff5cdc97b5f4c1b5 Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Tue, 27 May 2025 11:29:30 +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/components/AppLogo/index.vue      | 50 +++++---------
 .../components/Menu/components/MenuItem.vue   |  6 --
 .../Menu/components/MenuItemTitle.vue         | 56 ++++++++++++----
 src/layouts/components/Settings/index.vue     |  3 +-
 src/layouts/composables/useLayout.ts          |  9 ---
 src/layouts/views/LeftLayout.vue              |  2 +-
 src/layouts/views/MixLayout.vue               | 42 +-----------
 src/layouts/views/TopLayout.vue               | 65 +------------------
 8 files changed, 64 insertions(+), 169 deletions(-)

diff --git a/src/layouts/components/AppLogo/index.vue b/src/layouts/components/AppLogo/index.vue
index a7a6370a..003f209a 100644
--- a/src/layouts/components/AppLogo/index.vue
+++ b/src/layouts/components/AppLogo/index.vue
@@ -40,56 +40,36 @@ defineProps({
 </style>
 
 <style lang="scss">
-// 全局样式：针对顶部布局和混合布局的特殊处理
+// 顶部布局和混合布局的特殊处理
 .layout-top,
 .layout-mix {
   .logo {
-    // 在顶部和混合布局中，移除背景色，使其透明
     background-color: transparent !important;
 
     .title {
-      // 确保标题颜色适配当前主题
       color: var(--menu-text);
     }
   }
 }
 
-// 顶部布局的响应式宽度控制
-.layout-top {
-  .layout__header-left .logo {
-    flex-shrink: 0; // 防止Logo被压缩
-    width: $sidebar-width; // 默认宽度：显示logo+文字
-    margin-right: 20px;
-
-    // 中屏设备优化（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; // 减少右边距
-    }
+// 宽屏时：openSidebar 状态下显示完整Logo+文字
+.openSidebar {
+  &.layout-top .layout__header-left .logo,
+  &.layout-mix .layout__header-logo .logo {
+    width: $sidebar-width; // 210px，显示logo+文字
   }
 }
 
-// 混合布局的响应式宽度控制
-.layout-mix {
-  .layout__header-logo .logo {
-    flex-shrink: 0;
-    width: $sidebar-width; // 默认宽度：显示logo+文字
+// 窄屏时：hideSidebar 状态下只显示Logo图标
+.hideSidebar {
+  &.layout-top .layout__header-left .logo,
+  &.layout-mix .layout__header-logo .logo {
+    width: $sidebar-width-collapsed; // 54px，只显示logo
+  }
 
-    // 中屏设备优化（800px-1100px）：适度缩小但保持显示文字
-    @media (min-width: 768px) and (max-width: 1100px) {
-      width: 180px; // 缩小到180px，为菜单腾出空间
-    }
-
-    // 小屏设备：只显示logo，使用收缩宽度
-    @media (max-width: 767px) {
-      width: $sidebar-width-collapsed; // 只显示logo：54px
-    }
+  // 隐藏文字，只显示图标
+  .logo .title {
+    display: none;
   }
 }
 </style>
diff --git a/src/layouts/components/Menu/components/MenuItem.vue b/src/layouts/components/Menu/components/MenuItem.vue
index 87cc6d25..4fa3e52d 100644
--- a/src/layouts/components/Menu/components/MenuItem.vue
+++ b/src/layouts/components/Menu/components/MenuItem.vue
@@ -140,12 +140,6 @@ function resolvePath(routePath: string) {
   .submenu-title-noDropdown {
     position: relative;
 
-    .el-tooltip {
-      .sub-el-icon {
-        margin-left: 19px;
-      }
-    }
-
     & > span {
       display: inline-block;
       visibility: hidden;
diff --git a/src/layouts/components/Menu/components/MenuItemTitle.vue b/src/layouts/components/Menu/components/MenuItemTitle.vue
index 5fa71c96..b9d49364 100644
--- a/src/layouts/components/Menu/components/MenuItemTitle.vue
+++ b/src/layouts/components/Menu/components/MenuItemTitle.vue
@@ -1,16 +1,16 @@
 <template>
   <!-- 菜单图标 -->
   <template v-if="icon">
-    <el-icon v-if="isElIcon" class="el-icon">
+    <el-icon v-if="isElIcon" class="menu-icon">
       <component :is="iconComponent" />
     </el-icon>
-    <div v-else :class="`i-svg:${icon}`" />
+    <div v-else :class="`i-svg:${icon}`" class="menu-icon" />
   </template>
   <template v-else>
-    <div class="i-svg:menu" />
+    <div class="i-svg:menu menu-icon" />
   </template>
   <!-- 菜单标题 -->
-  <span v-if="title" class="ml-1">{{ translateRouteTitle(title) }}</span>
+  <span v-if="title" class="menu-title ml-1">{{ translateRouteTitle(title) }}</span>
 </template>
 
 <script setup lang="ts">
@@ -26,28 +26,60 @@ const iconComponent = computed(() => props.icon?.replace("el-icon-", ""));
 </script>
 
 <style lang="scss" scoped>
+.menu-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+  color: currentcolor;
+}
+
 .el-icon {
-  width: 14px !important;
-  margin-right: 0 !important;
+  width: 18px !important;
+  height: 18px !important;
   color: currentcolor;
 }
 
 [class^="i-svg:"] {
-  width: 14px;
-  height: 14px;
+  width: 18px;
+  height: 18px;
   color: currentcolor !important;
 }
 
+// 收缩状态下的样式优化
 .hideSidebar {
   .el-sub-menu,
   .el-menu-item {
-    .el-icon {
+    // 确保菜单项内容居中
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+
+    .menu-icon {
+      width: 20px;
+      height: 20px;
       margin: 0 auto;
     }
-  }
 
-  [class^="i-svg:"] {
-    margin: 0 auto;
+    .el-icon {
+      width: 20px !important;
+      height: 20px !important;
+      margin: 0 auto;
+    }
+
+    [class^="i-svg:"] {
+      width: 20px;
+      height: 20px;
+      margin: 0 auto;
+    }
+
+    // 隐藏文字标题
+    .menu-title {
+      display: none;
+    }
   }
 }
 </style>
diff --git a/src/layouts/components/Settings/index.vue b/src/layouts/components/Settings/index.vue
index 2df32403..fd074573 100644
--- a/src/layouts/components/Settings/index.vue
+++ b/src/layouts/components/Settings/index.vue
@@ -146,7 +146,6 @@
 
 <script setup lang="ts">
 import { DocumentCopy, RefreshLeft, Check } from "@element-plus/icons-vue";
-import { markRaw } from "vue";
 
 const { t } = useI18n();
 import { LayoutMode } from "@/enums/settings/layout.enum";
@@ -154,7 +153,7 @@ import { ThemeMode } from "@/enums/settings/theme.enum";
 import { SidebarColor } from "@/enums/settings/theme.enum";
 import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
 
-// 按钮图标 - 使用markRaw避免响应式警告
+// 按钮图标
 const copyIcon = markRaw(DocumentCopy);
 const resetIcon = markRaw(RefreshLeft);
 
diff --git a/src/layouts/composables/useLayout.ts b/src/layouts/composables/useLayout.ts
index 31fec66f..23f54b80 100644
--- a/src/layouts/composables/useLayout.ts
+++ b/src/layouts/composables/useLayout.ts
@@ -1,4 +1,3 @@
-import { computed } from "vue";
 import { useAppStore, useSettingsStore } from "@/store";
 import defaultSettings from "@/settings";
 
@@ -49,14 +48,6 @@ export function useLayout() {
     appStore.closeSideBar();
   }
 
-  // 暂时注释掉这个逻辑，避免影响手动操作
-  // 监听路由变化，在移动端自动关闭侧边栏
-  // watchEffect(() => {
-  //   if (appStore.device === "mobile" && appStore.sidebar.opened) {
-  //     appStore.closeSideBar();
-  //   }
-  // });
-
   return {
     currentLayout,
     isSidebarOpen,
diff --git a/src/layouts/views/LeftLayout.vue b/src/layouts/views/LeftLayout.vue
index e71d29bb..b4ada9cb 100644
--- a/src/layouts/views/LeftLayout.vue
+++ b/src/layouts/views/LeftLayout.vue
@@ -102,7 +102,7 @@ console.log("🔍 LeftLayout - isMobile:", isMobile.value);
   }
 }
 
-/* 移动端样式 - 注意这里需要正确应用到父元素 */
+/* 移动端样式 */
 .mobile {
   .layout__sidebar {
     width: $sidebar-width !important;
diff --git a/src/layouts/views/MixLayout.vue b/src/layouts/views/MixLayout.vue
index 1ee93513..4582a17f 100644
--- a/src/layouts/views/MixLayout.vue
+++ b/src/layouts/views/MixLayout.vue
@@ -136,26 +136,7 @@ console.log("🎨 MixLayout rendered");
       flex-shrink: 0;
       align-items: center;
       justify-content: center;
-      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%;
-
-        a {
-          height: 100%;
-        }
-      }
     }
 
     &-menu {
@@ -182,20 +163,6 @@ 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);
-          }
-
           &.is-active {
             background-color: rgba(255, 255, 255, 0.12);
             border-bottom: 2px solid var(--el-color-primary);
@@ -210,14 +177,6 @@ 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;
-      }
     }
   }
 
@@ -255,6 +214,7 @@ console.log("🎨 MixLayout rendered");
         width: 100%;
         height: 50px;
         line-height: 50px;
+        background-color: var(--menu-background);
         box-shadow: 0 0 6px -2px var(--el-color-primary);
       }
     }
diff --git a/src/layouts/views/TopLayout.vue b/src/layouts/views/TopLayout.vue
index a7e82c76..6e6497b2 100644
--- a/src/layouts/views/TopLayout.vue
+++ b/src/layouts/views/TopLayout.vue
@@ -59,7 +59,6 @@ const isLogoCollapsed = computed(() => width.value < 768);
     width: 100%;
     height: $navbar-height;
     background-color: $menu-background;
-    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
     &-left {
       display: flex;
@@ -67,32 +66,11 @@ const isLogoCollapsed = computed(() => width.value < 768);
       align-items: center;
       min-width: 0; // 允许flex收缩
       height: 100%;
-      overflow: hidden; // 防止溢出
 
-      // Logo 样式 - 使用SCSS变量管理宽度
+      // Logo样式由AppLogo组件的全局样式控制
       :deep(.logo) {
         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; // 减少右边距
-        }
-
-        a {
-          height: 100%;
-        }
       }
     }
 
@@ -104,7 +82,7 @@ const isLogoCollapsed = computed(() => width.value < 768);
       padding-left: 12px;
     }
 
-    // 限制菜单高度
+    // 菜单样式
     :deep(.el-menu--horizontal) {
       flex: 1;
       min-width: 0; // 允许菜单收缩
@@ -117,33 +95,12 @@ const isLogoCollapsed = computed(() => width.value < 768);
       .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;
-          }
         }
       }
 
@@ -166,22 +123,4 @@ const isLogoCollapsed = computed(() => width.value < 768);
     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 {
-      padding: 0 4px;
-    }
-  }
-}
 </style>