From b5b766487cfa2b4c9b7e511ccd84c3aa51281487 Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Fri, 23 May 2025 13:16:56 +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

---
 .../NavBar/components/NavbarActions.vue       |  73 ++++++---
 src/layout/components/NavBar/index.vue        |   3 +
 .../Sidebar/components/SidebarMixTopMenu.vue  |  92 ++++++-----
 .../components/LeftSideLayout/index.vue       |  30 ++--
 .../components/MixMenuLayout/index.vue        | 143 ++++++++++++++++--
 src/layouts/composables/useLayout.ts          |  17 ++-
 6 files changed, 274 insertions(+), 84 deletions(-)

diff --git a/src/layout/components/NavBar/components/NavbarActions.vue b/src/layout/components/NavBar/components/NavbarActions.vue
index aa06f578..e22cc39b 100644
--- a/src/layout/components/NavBar/components/NavbarActions.vue
+++ b/src/layout/components/NavBar/components/NavbarActions.vue
@@ -88,15 +88,27 @@ function handleProfileClick() {
 
 // 根据主题和侧边栏配色方案选择样式类
 const navbarActionsClass = computed(() => {
-  // 暗黑主题
-  if (settingStore.theme === ThemeMode.DARK) {
+  const { theme, sidebarColorScheme, layout } = settingStore;
+
+  // 暗黑主题下，所有布局都使用白色文字
+  if (theme === ThemeMode.DARK) {
     return "navbar-actions--white-text";
   }
 
-  // 经典蓝侧边栏
-  if (settingStore.sidebarColorScheme === SidebarColor.CLASSIC_BLUE) {
-    return "navbar-actions--white-text";
+  // 明亮主题下
+  if (theme === ThemeMode.LIGHT) {
+    // 顶部布局和混合布局的顶部区域使用深色背景，需要白色文字
+    if (layout === "top" || layout === "mix") {
+      return "navbar-actions--white-text";
+    }
+
+    // 左侧布局下，如果侧边栏是经典蓝色，顶部导航栏仍使用默认颜色
+    if (layout === "left" && sidebarColorScheme === SidebarColor.CLASSIC_BLUE) {
+      return ""; // 使用默认的深色文字
+    }
   }
+
+  return "";
 });
 
 /**
@@ -130,18 +142,21 @@ function logout() {
     height: $navbar-height;
     text-align: center;
     cursor: pointer;
+    transition: all 0.3s;
 
+    // 默认图标样式（明亮模式 + 左侧布局）
     :deep([class^="i-svg:"]) {
-      color: var(--el-text-color);
-
-      &:hover {
-        color: var(--el-text-color-primary);
-      }
+      font-size: 18px;
+      color: var(--el-text-color-regular);
+      transition: color 0.3s;
     }
 
     &:hover {
-      color: var(--el-text-color-primary);
-      background: rgb(0 0 0 / 10%);
+      background: rgba(0, 0, 0, 0.04);
+
+      :deep([class^="i-svg:"]) {
+        color: var(--el-color-primary);
+      }
     }
   }
 
@@ -160,19 +175,41 @@ function logout() {
 
     &__name {
       margin-left: 10px;
+      color: var(--el-text-color-regular);
+      transition: color 0.3s;
     }
   }
 }
 
-.layout-top,
-.layout-mix {
+// 白色文字样式（用于深色背景：暗黑主题、顶部布局、混合布局）
+.navbar-actions--white-text {
+  .navbar-actions__item {
+    :deep([class^="i-svg:"]) {
+      color: rgba(255, 255, 255, 0.85);
+    }
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+
+      :deep([class^="i-svg:"]) {
+        color: #fff;
+      }
+    }
+  }
+
   .user-profile__name {
-    color: #fff !important;
+    color: rgba(255, 255, 255, 0.85);
   }
 }
 
-.layout-top .navbar-actions--white-text :deep([class^="i-svg:"]),
-.layout-mix .navbar-actions--white-text :deep([class^="i-svg:"]) {
-  color: #fff !important;
+// 确保下拉菜单中的图标不受影响
+:deep(.el-dropdown-menu) {
+  [class^="i-svg:"] {
+    color: var(--el-text-color-regular) !important;
+
+    &:hover {
+      color: var(--el-color-primary) !important;
+    }
+  }
 }
 </style>
diff --git a/src/layout/components/NavBar/index.vue b/src/layout/components/NavBar/index.vue
index d4d32c5b..b7b952f3 100644
--- a/src/layout/components/NavBar/index.vue
+++ b/src/layout/components/NavBar/index.vue
@@ -26,7 +26,10 @@ const isSidebarOpened = computed(() => appStore.sidebar.opened);
 
 // 切换侧边栏展开/折叠状态
 function toggleSideBar() {
+  console.log("🔄 Hamburger clicked! Current state:", isSidebarOpened.value);
+  console.log("🔄 Device type:", appStore.device);
   appStore.toggleSidebar();
+  console.log("🔄 New state:", appStore.sidebar.opened);
 }
 </script>
 
diff --git a/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue b/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
index 2fd657d1..643d719e 100644
--- a/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
+++ b/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
@@ -1,42 +1,40 @@
 <!-- 混合布局顶部菜单 -->
 <template>
-  <el-scrollbar>
-    <el-menu
-      mode="horizontal"
-      :default-active="activePath"
-      :background-color="
-        theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
-          ? variables['menu-background']
-          : undefined
-      "
-      :text-color="
-        theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
-          ? variables['menu-text']
-          : undefined
-      "
-      :active-text-color="
-        theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
-          ? variables['menu-active-text']
-          : undefined
-      "
-      @select="handleMenuSelect"
-    >
-      <el-menu-item v-for="route in topMenus" :key="route.path" :index="route.path">
-        <template #title>
-          <template v-if="route.meta && route.meta.icon">
-            <el-icon v-if="route.meta.icon.startsWith('el-icon')" class="sub-el-icon">
-              <component :is="route.meta.icon.replace('el-icon-', '')" />
-            </el-icon>
-            <div v-else :class="`i-svg:${route.meta.icon}`" />
-          </template>
-          <span v-if="route.path === '/'">首页</span>
-          <span v-else-if="route.meta && route.meta.title" class="ml-1">
-            {{ translateRouteTitle(route.meta.title) }}
-          </span>
+  <el-menu
+    mode="horizontal"
+    :default-active="activePath"
+    :background-color="
+      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
+        ? variables['menu-background']
+        : undefined
+    "
+    :text-color="
+      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
+        ? variables['menu-text']
+        : undefined
+    "
+    :active-text-color="
+      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
+        ? variables['menu-active-text']
+        : undefined
+    "
+    @select="handleMenuSelect"
+  >
+    <el-menu-item v-for="route in topMenus" :key="route.path" :index="route.path">
+      <template #title>
+        <template v-if="route.meta && route.meta.icon">
+          <el-icon v-if="route.meta.icon.startsWith('el-icon')" class="sub-el-icon">
+            <component :is="route.meta.icon.replace('el-icon-', '')" />
+          </el-icon>
+          <div v-else :class="`i-svg:${route.meta.icon}`" />
         </template>
-      </el-menu-item>
-    </el-menu>
-  </el-scrollbar>
+        <span v-if="route.path === '/'">首页</span>
+        <span v-else-if="route.meta && route.meta.title" class="ml-1">
+          {{ translateRouteTitle(route.meta.title) }}
+        </span>
+      </template>
+    </el-menu-item>
+  </el-menu>
 </template>
 
 <script lang="ts" setup>
@@ -117,3 +115,25 @@ onMounted(() => {
   topMenus.value = permissionStore.routes.filter((item) => !item.meta || !item.meta.hidden);
 });
 </script>
+
+<style lang="scss" scoped>
+.el-menu {
+  width: 100%;
+  height: 100%;
+
+  &--horizontal {
+    height: $navbar-height !important;
+
+    // 确保菜单项垂直居中
+    :deep(.el-menu-item) {
+      height: 100%;
+      line-height: $navbar-height;
+    }
+
+    // 移除默认的底部边框
+    &:after {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/LeftSideLayout/index.vue b/src/layouts/components/LeftSideLayout/index.vue
index 429f9eb6..fee1ebcf 100644
--- a/src/layouts/components/LeftSideLayout/index.vue
+++ b/src/layouts/components/LeftSideLayout/index.vue
@@ -35,10 +35,14 @@ import AppMain from "@/layout/components/AppMain/index.vue";
 import SidebarMenu from "../LayoutMenu.vue";
 
 // 布局相关参数
-const { isShowTagsView, isShowLogo, isSidebarOpen } = useLayout();
+const { isShowTagsView, isShowLogo, isSidebarOpen, isMobile } = useLayout();
 
 // 菜单相关
 const { routes } = useLayoutMenu();
+
+// 添加调试日志
+console.log("🔍 LeftSideLayout - isSidebarOpen:", isSidebarOpen.value);
+console.log("🔍 LeftSideLayout - isMobile:", isMobile.value);
 </script>
 
 <style lang="scss" scoped>
@@ -78,32 +82,34 @@ const { routes } = useLayoutMenu();
   }
 }
 
-/* 移动端样式 */
-:deep(.mobile) {
+/* 移动端样式 - 注意这里需要正确应用到父元素 */
+.mobile {
   .layout__sidebar {
-    position: fixed;
-    left: 0;
-    transition: transform 0.28s;
+    width: $sidebar-width !important;
+    transition:
+      transform 0.28s,
+      width 0s;
   }
 
   &.hideSidebar {
     .layout__sidebar {
-      width: $sidebar-width !important;
       transform: translateX(-$sidebar-width);
     }
+  }
 
-    .layout__main {
-      margin-left: 0 !important;
+  &.openSidebar {
+    .layout__sidebar {
+      transform: translateX(0);
     }
   }
 
   .layout__main {
-    margin-left: 0;
+    margin-left: 0 !important;
   }
 }
 
-:deep(.hasTagsView) {
-  .app-main {
+.hasTagsView {
+  :deep(.app-main) {
     height: calc(100vh - $navbar-height - $tags-view-height) !important;
   }
 }
diff --git a/src/layouts/components/MixMenuLayout/index.vue b/src/layouts/components/MixMenuLayout/index.vue
index aa78e9a2..30f16b39 100644
--- a/src/layouts/components/MixMenuLayout/index.vue
+++ b/src/layouts/components/MixMenuLayout/index.vue
@@ -2,10 +2,22 @@
   <LayoutBase>
     <!-- 顶部菜单栏 -->
     <div class="layout__header">
-      <LayoutSidebar :show-logo="isShowLogo" :is-collapsed="false">
-        <SidebarMixTopMenu />
-        <NavbarActions />
-      </LayoutSidebar>
+      <div class="layout__header-content">
+        <!-- Logo区域 -->
+        <div v-if="isShowLogo" class="layout__header-logo">
+          <SidebarLogo :collapse="false" />
+        </div>
+
+        <!-- 顶部菜单区域 -->
+        <div class="layout__header-menu">
+          <SidebarMixTopMenu />
+        </div>
+
+        <!-- 右侧操作区域 -->
+        <div class="layout__header-actions">
+          <NavbarActions />
+        </div>
+      </div>
     </div>
 
     <!-- 主内容区容器 -->
@@ -13,7 +25,22 @@
       <!-- 左侧菜单栏 -->
       <div class="layout__sidebar--left" :class="{ 'layout__sidebar--collapsed': !isSidebarOpen }">
         <el-scrollbar>
-          <SidebarMenu :data="sideMenuRoutes" :base-path="activeTopMenuPath" />
+          <el-menu
+            :default-active="activeMenu"
+            :collapse="!isSidebarOpen"
+            :collapse-transition="false"
+            :unique-opened="false"
+            :background-color="variables['menu-background']"
+            :text-color="variables['menu-text']"
+            :active-text-color="variables['menu-active-text']"
+          >
+            <SidebarMenuItem
+              v-for="route in sideMenuRoutes"
+              :key="route.path"
+              :item="route"
+              :base-path="resolvePath(route.path)"
+            />
+          </el-menu>
         </el-scrollbar>
         <!-- 侧边栏切换按钮 -->
         <div class="layout__sidebar-toggle">
@@ -31,22 +58,52 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
+import { useRoute } from "vue-router";
 import { useLayout } from "../../composables/useLayout";
 import { useLayoutMenu } from "../../composables/useLayoutMenu";
 import LayoutBase from "../LayoutBase.vue";
-import LayoutSidebar from "../common/LayoutSidebar.vue";
+import SidebarLogo from "@/layout/components/Sidebar/components/SidebarLogo.vue";
 import SidebarMixTopMenu from "@/layout/components/Sidebar/components/SidebarMixTopMenu.vue";
 import NavbarActions from "@/layout/components/NavBar/components/NavbarActions.vue";
 import TagsView from "@/layout/components/TagsView/index.vue";
 import AppMain from "@/layout/components/AppMain/index.vue";
-import SidebarMenu from "../LayoutMenu.vue";
+import SidebarMenuItem from "@/layout/components/Sidebar/components/SidebarMenuItem.vue";
 import Hamburger from "@/components/Hamburger/index.vue";
+import variables from "@/styles/variables.module.scss";
+
+const route = useRoute();
 
 // 布局相关参数
 const { isShowTagsView, isShowLogo, isSidebarOpen, toggleSidebar } = useLayout();
 
 // 菜单相关
 const { sideMenuRoutes, activeTopMenuPath } = useLayoutMenu();
+
+// 当前激活的菜单
+const activeMenu = computed(() => {
+  const { meta, path } = route;
+  // 如果设置了activeMenu，则使用
+  if (meta?.activeMenu && typeof meta.activeMenu === "string") {
+    return meta.activeMenu;
+  }
+  return path;
+});
+
+/**
+ * 解析路径 - 混合模式下，左侧菜单是从顶级菜单下的子菜单开始的
+ * 所以需要拼接顶级菜单路径
+ */
+function resolvePath(routePath: string) {
+  // 如果已经是绝对路径，直接返回
+  if (routePath.startsWith("/")) {
+    return activeTopMenuPath.value + routePath;
+  }
+  // 否则拼接
+  return `${activeTopMenuPath.value}/${routePath}`;
+}
+
+console.log("🎨 MixMenuLayout rendered");
 </script>
 
 <style lang="scss" scoped>
@@ -57,12 +114,74 @@ const { sideMenuRoutes, activeTopMenuPath } = useLayoutMenu();
     z-index: 999;
     width: 100%;
     height: $navbar-height;
-    background-color: $menu-background;
+    background-color: var(--menu-background);
+    border-bottom: 1px solid var(--el-border-color-lighter);
 
-    :deep(.layout-sidebar) {
+    &-content {
       display: flex;
-      width: 100% !important;
-      height: $navbar-height;
+      align-items: center;
+      height: 100%;
+      padding: 0 16px;
+    }
+
+    &-logo {
+      flex-shrink: 0;
+      width: 200px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      :deep(.logo) {
+        height: 100%;
+
+        a {
+          height: 100%;
+        }
+      }
+    }
+
+    &-menu {
+      flex: 1;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      margin: 0 16px;
+      overflow: hidden;
+
+      :deep(.el-menu) {
+        height: 100%;
+        border: none;
+        background-color: transparent;
+      }
+
+      :deep(.el-menu--horizontal) {
+        display: flex;
+        align-items: center;
+        height: 100%;
+
+        .el-menu-item {
+          height: 100%;
+          line-height: $navbar-height;
+          border-bottom: none;
+
+          &: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);
+          }
+        }
+      }
+    }
+
+    &-actions {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      height: 100%;
     }
   }
 
@@ -78,7 +197,7 @@ const { sideMenuRoutes, activeTopMenuPath } = useLayoutMenu();
       background-color: var(--menu-background);
       transition: width 0.28s;
 
-      &--collapsed {
+      &.layout__sidebar--collapsed {
         width: $sidebar-width-collapsed !important;
       }
 
diff --git a/src/layouts/composables/useLayout.ts b/src/layouts/composables/useLayout.ts
index 9fec35dd..07dfe373 100644
--- a/src/layouts/composables/useLayout.ts
+++ b/src/layouts/composables/useLayout.ts
@@ -1,4 +1,4 @@
-import { computed, watchEffect } from "vue";
+import { computed } from "vue";
 import { useAppStore, useSettingsStore } from "@/store";
 import defaultSettings from "@/settings";
 
@@ -24,6 +24,9 @@ export function useLayout() {
   // 是否显示Logo
   const isShowLogo = computed(() => settingsStore.sidebarLogo);
 
+  // 是否移动设备
+  const isMobile = computed(() => appStore.device === "mobile");
+
   // 布局CSS类
   const layoutClass = computed(() => ({
     hideSidebar: !appStore.sidebar.opened,
@@ -46,12 +49,13 @@ export function useLayout() {
     appStore.closeSideBar();
   }
 
+  // 暂时注释掉这个逻辑，避免影响手动操作
   // 监听路由变化，在移动端自动关闭侧边栏
-  watchEffect(() => {
-    if (appStore.device === "mobile" && appStore.sidebar.opened) {
-      appStore.closeSideBar();
-    }
-  });
+  // watchEffect(() => {
+  //   if (appStore.device === "mobile" && appStore.sidebar.opened) {
+  //     appStore.closeSideBar();
+  //   }
+  // });
 
   return {
     currentLayout,
@@ -59,6 +63,7 @@ export function useLayout() {
     isShowTagsView,
     isShowSettings,
     isShowLogo,
+    isMobile,
     layoutClass,
     toggleSidebar,
     closeSidebar,