From dfb9a735d6adcca3f9742393ce1b0c527e7752dc Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Mon, 26 May 2025 23:21:14 +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      | 52 +++++++++++++++++--
 .../Menu/components/MenuItemTitle.vue         |  4 +-
 .../NavBar/components/NavbarActions.vue       | 42 ++++++++-------
 src/layouts/components/NavBar/index.vue       |  5 +-
 src/layouts/views/MixLayout.vue               |  9 ----
 src/layouts/views/TopLayout.vue               |  9 +---
 6 files changed, 76 insertions(+), 45 deletions(-)

diff --git a/src/layouts/components/AppLogo/index.vue b/src/layouts/components/AppLogo/index.vue
index 841784ef..a7a6370a 100644
--- a/src/layouts/components/AppLogo/index.vue
+++ b/src/layouts/components/AppLogo/index.vue
@@ -37,16 +37,58 @@ defineProps({
     color: $sidebar-logo-text-color;
   }
 }
+</style>
 
+<style lang="scss">
+// 全局样式：针对顶部布局和混合布局的特殊处理
 .layout-top,
 .layout-mix {
   .logo {
-    width: $sidebar-width;
-  }
+    // 在顶部和混合布局中，移除背景色，使其透明
+    background-color: transparent !important;
 
-  &.hideSidebar {
-    .logo {
-      width: $sidebar-width-collapsed;
+    .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; // 减少右边距
+    }
+  }
+}
+
+// 混合布局的响应式宽度控制
+.layout-mix {
+  .layout__header-logo .logo {
+    flex-shrink: 0;
+    width: $sidebar-width; // 默认宽度：显示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
     }
   }
 }
diff --git a/src/layouts/components/Menu/components/MenuItemTitle.vue b/src/layouts/components/Menu/components/MenuItemTitle.vue
index 67bf325c..a3b55580 100644
--- a/src/layouts/components/Menu/components/MenuItemTitle.vue
+++ b/src/layouts/components/Menu/components/MenuItemTitle.vue
@@ -42,12 +42,12 @@ const iconComponent = computed(() => props.icon?.replace("el-icon-", ""));
   .el-sub-menu,
   .el-menu-item {
     .el-icon {
-      margin-left: 20px;
+      margin: 0 10px;
     }
   }
 
   [class^="i-svg:"] {
-    margin-left: 20px;
+    margin: 0 10px;
   }
 }
 </style>
diff --git a/src/layouts/components/NavBar/components/NavbarActions.vue b/src/layouts/components/NavBar/components/NavbarActions.vue
index 87ca259f..ef3386ce 100644
--- a/src/layouts/components/NavBar/components/NavbarActions.vue
+++ b/src/layouts/components/NavBar/components/NavbarActions.vue
@@ -52,7 +52,7 @@
     <div
       v-if="defaultSettings.showSettings"
       class="navbar-actions__item"
-      @click="settingStore.settingsVisible = true"
+      @click="handleSettingsClick"
     >
       <div class="i-svg:setting" />
     </div>
@@ -68,6 +68,13 @@ import { useAppStore, useSettingsStore, useUserStore } from "@/store";
 import { SidebarColor, ThemeMode } from "@/enums/settings/theme.enum";
 import { LayoutMode } from "@/enums";
 
+// 导入子组件
+import MenuSearch from "@/components/MenuSearch/index.vue";
+import Fullscreen from "@/components/Fullscreen/index.vue";
+import SizeSelect from "@/components/SizeSelect/index.vue";
+import LangSelect from "@/components/LangSelect/index.vue";
+import Notification from "@/components/Notification/index.vue";
+
 const { t } = useI18n();
 const appStore = useAppStore();
 const settingStore = useSettingsStore();
@@ -127,6 +134,13 @@ function logout() {
     });
   });
 }
+
+/**
+ * 打开系统设置页面
+ */
+function handleSettingsClick() {
+  settingStore.settingsVisible = true;
+}
 </script>
 
 <style lang="scss" scoped>
@@ -136,45 +150,37 @@ function logout() {
   height: 100%;
 
   &__item {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
-    min-width: 36px;
+    min-width: 44px; /* 增加最小点击区域到44px，符合人机交互标准 */
     height: 100%;
+    min-height: 44px;
     padding: 0 8px;
     text-align: center;
     cursor: pointer;
     transition: all 0.3s;
 
-    // 确保直接子元素也居中
+    // 确保子元素居中
     > * {
       display: flex;
       align-items: center;
       justify-content: center;
     }
 
-    // 确保 el-dropdown 也居中
-    :deep(.el-dropdown) {
+    // 确保 Element Plus 组件可以正常工作
+    :deep(.el-dropdown),
+    :deep(.el-tooltip) {
       display: flex;
       align-items: center;
       justify-content: center;
+      width: 100%;
       height: 100%;
     }
 
-    // 修复可能的 SVG 图标容器
-    :deep(.icon-container),
-    :deep(.action-icon) {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-    }
-
-    // 默认图标样式（明亮模式 + 左侧布局）
+    // 图标样式
     :deep([class^="i-svg:"]) {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
       font-size: 18px;
       line-height: 1;
       color: var(--el-text-color-regular);
diff --git a/src/layouts/components/NavBar/index.vue b/src/layouts/components/NavBar/index.vue
index f455c6d9..fd917b14 100644
--- a/src/layouts/components/NavBar/index.vue
+++ b/src/layouts/components/NavBar/index.vue
@@ -36,12 +36,9 @@ function toggleSideBar() {
 <style lang="scss" scoped>
 .navbar {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   height: $navbar-height;
-  padding: 0 20px;
-  background: var(--el-bg-color);
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   &__actions {
     display: flex;
diff --git a/src/layouts/views/MixLayout.vue b/src/layouts/views/MixLayout.vue
index 40a02388..9cda8927 100644
--- a/src/layouts/views/MixLayout.vue
+++ b/src/layouts/views/MixLayout.vue
@@ -165,17 +165,8 @@ console.log("🎨 MixLayout rendered");
       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;
diff --git a/src/layouts/views/TopLayout.vue b/src/layouts/views/TopLayout.vue
index c809458a..57bdd295 100644
--- a/src/layouts/views/TopLayout.vue
+++ b/src/layouts/views/TopLayout.vue
@@ -71,7 +71,7 @@ const isLogoCollapsed = computed(() => width.value < 768);
       overflow: hidden; // 防止溢出
 
       // Logo 样式 - 使用SCSS变量管理宽度
-      :deep(.sidebar-logo) {
+      :deep(.logo) {
         flex-shrink: 0; // 防止Logo被压缩
         width: $sidebar-width; // 默认宽度：显示logo+文字
         height: $navbar-height;
@@ -91,14 +91,9 @@ const isLogoCollapsed = computed(() => width.value < 768);
           margin-right: 12px; // 减少右边距
         }
 
-        .sidebar-logo__link {
+        a {
           height: 100%;
         }
-
-        .logo {
-          width: 100%;
-          background-color: transparent;
-        }
       }
     }