wip: 临时提交

src/layouts/components/NavBar/components/NavbarActions.vue

@@ -66,6 +66,7 @@ import defaultSettings from "@/settings";
 import { DeviceEnum } from "@/enums/settings/device.enum";
 import { useAppStore, useSettingsStore, useUserStore } from "@/store";
 import { SidebarColor, ThemeMode } from "@/enums/settings/theme.enum";
+import { LayoutMode } from "@/enums";
 
 const { t } = useI18n();
 const appStore = useAppStore();
@@ -96,18 +97,29 @@ const navbarActionsClass = computed(() => {
 
   // 明亮主题下
   if (theme === ThemeMode.LIGHT) {
-    // 顶部布局和混合布局的顶部区域使用深色背景，需要白色文字
-    if (layout === "top" || layout === "mix") {
+    // 顶部布局和混合布局的顶部区域：
+    // - 如果侧边栏是经典蓝色，使用白色文字
+    // - 如果侧边栏是极简白色，使用深色文字
+    if (layout === LayoutMode.TOP || layout === LayoutMode.MIX) {
+      if (sidebarColorScheme === SidebarColor.CLASSIC_BLUE) {
+        return "navbar-actions--white-text";
+      } else {
+        return "navbar-actions--dark-text";
+      }
+    }
+
+    // 左侧布局下，如果侧边栏是经典蓝色，顶部导航栏使用白色文字
+    if (layout === "left" && sidebarColorScheme === SidebarColor.CLASSIC_BLUE) {
       return "navbar-actions--white-text";
     }
 
-    // 左侧布局下，如果侧边栏是经典蓝色，顶部导航栏仍使用默认颜色
-    if (layout === "left" && sidebarColorScheme === SidebarColor.CLASSIC_BLUE) {
-      return ""; // 使用默认的深色文字
+    // 左侧布局下的其他情况（包括极简白），使用默认深色文字
+    if (layout === "left") {
+      return "navbar-actions--dark-text";
     }
   }
 
-  return "";
+  return "navbar-actions--dark-text";
 });
 
 /**
@@ -196,17 +208,17 @@ function logout() {
     padding: 0 8px;
 
     &__avatar {
+      flex-shrink: 0;
       width: 28px;
       height: 28px;
       border-radius: 50%;
-      flex-shrink: 0;
     }
 
     &__name {
       margin-left: 8px;
       color: var(--el-text-color-regular);
-      transition: color 0.3s;
       white-space: nowrap;
+      transition: color 0.3s;
     }
   }
 }
@@ -232,6 +244,27 @@ function logout() {
   }
 }
 
+// 深色文字样式（用于浅色背景：明亮主题下的左侧布局）
+.navbar-actions--dark-text {
+  .navbar-actions__item {
+    :deep([class^="i-svg:"]) {
+      color: var(--el-text-color-regular) !important;
+    }
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+
+      :deep([class^="i-svg:"]) {
+        color: var(--el-color-primary) !important;
+      }
+    }
+  }
+
+  .user-profile__name {
+    color: var(--el-text-color-regular) !important;
+  }
+}
+
 // 确保下拉菜单中的图标不受影响
 :deep(.el-dropdown-menu) {
   [class^="i-svg:"] {

src/layouts/views/MixLayout.vue

@@ -35,10 +35,10 @@
             :active-text-color="variables['menu-active-text']"
           >
             <MenuItem
-              v-for="route in sideMenuRoutes"
-              :key="route.path"
-              :item="route"
-              :base-path="resolvePath(route.path)"
+              v-for="item in sideMenuRoutes"
+              :key="item.path"
+              :item="item"
+              :base-path="resolvePath(item.path)"
             />
           </el-menu>
         </el-scrollbar>
@@ -121,16 +121,16 @@ console.log("🎨 MixLayout rendered");
       display: flex;
       align-items: center;
       height: 100%;
-      padding: 0 16px;
+      padding: 0;
     }
 
     &-logo {
-      flex-shrink: 0;
-      width: 200px;
-      height: 100%;
       display: flex;
+      flex-shrink: 0;
       align-items: center;
       justify-content: center;
+      width: $sidebar-width;
+      height: 100%;
 
       :deep(.logo) {
         height: 100%;
@@ -142,17 +142,17 @@ console.log("🎨 MixLayout rendered");
     }
 
     &-menu {
-      flex: 1;
-      height: 100%;
       display: flex;
+      flex: 1;
       align-items: center;
+      height: 100%;
       margin: 0 16px;
       overflow: hidden;
 
       :deep(.el-menu) {
         height: 100%;
-        border: none;
         background-color: transparent;
+        border: none;
       }
 
       :deep(.el-menu--horizontal) {
@@ -178,10 +178,11 @@ console.log("🎨 MixLayout rendered");
     }
 
     &-actions {
-      flex-shrink: 0;
       display: flex;
+      flex-shrink: 0;
       align-items: center;
       height: 100%;
+      padding: 0 16px;
     }
   }
 

src/layouts/views/TopLayout.vue

@@ -46,23 +46,22 @@ const { routes } = useLayoutMenu();
     top: 0;
     z-index: 999;
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     width: 100%;
     height: $navbar-height;
-    padding: 0 20px;
     background-color: $menu-background;
     box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
     &-left {
       display: flex;
+      flex: 1;
       align-items: center;
       height: 100%;
-      flex: 1;
 
       // Logo 样式
       :deep(.sidebar-logo) {
-        width: 200px;
+        width: $sidebar-width;
         height: $navbar-height;
         padding: 0;
         margin-right: 20px;
@@ -90,20 +89,18 @@ const { routes } = useLayoutMenu();
       flex: 1;
       height: $navbar-height;
       line-height: $navbar-height;
-      border: none;
       background-color: transparent;
+      border: none;
 
       .el-menu-item {
         height: $navbar-height;
         line-height: $navbar-height;
-        padding: 0 20px;
       }
 
       .el-sub-menu {
         .el-sub-menu__title {
           height: $navbar-height;
           line-height: $navbar-height;
-          padding: 0 20px;
         }
       }