NewLife/cube-front

feat(layout): MainLayout 与 TopMenu 导航栏样式统一

- MainLayout/Navbar 对齐 CyberLayout 风格
- TopMenu/Topnav 对齐 CyberLayout 风格
笑笑 authored at 2026-05-17 09:41:20
8338859
Tree
1 Parent(s) 106d51f
Summary: 2 changed files with 16 additions and 28 deletions.
Modified +2 -2
Modified +14 -26
Modified +2 -2
diff --git a/core/layouts/MainLayout/Navbar/index.vue b/core/layouts/MainLayout/Navbar/index.vue
index 48aad1d..4fb96c8 100644
--- a/core/layouts/MainLayout/Navbar/index.vue
+++ b/core/layouts/MainLayout/Navbar/index.vue
@@ -3,7 +3,7 @@ import ModeSwitcher from 'cube-front/core/components/ModeSwitcher.vue';
 import ThemeSwitcher from 'cube-front/core/components/ThemeSwitcher.vue';
 import LayoutSwitcher from 'cube-front/core/components/LayoutSwitcher.vue';
 import LogoBrand from 'cube-front/core/components/LogoBrand.vue';
-import UserMenu from 'cube-front/core/components/UserMenu.vue';
+import UserProfile from 'cube-front/core/components/UserProfile.vue';
 </script>
 
 <template>
@@ -27,7 +27,7 @@ import UserMenu from 'cube-front/core/components/UserMenu.vue';
       <!-- 布局切换 -->
       <LayoutSwitcher />
 
-      <UserMenu />
+      <UserProfile variant="navbar" />
     </div>
   </header>
 </template>
Modified +14 -26
diff --git a/core/layouts/TopMenu/Topnav/index.vue b/core/layouts/TopMenu/Topnav/index.vue
index 749b3e0..6ba1195 100644
--- a/core/layouts/TopMenu/Topnav/index.vue
+++ b/core/layouts/TopMenu/Topnav/index.vue
@@ -8,7 +8,8 @@ import ThemeSwitcher from 'cube-front/core/components/ThemeSwitcher.vue';
 import LayoutSwitcher from 'cube-front/core/components/LayoutSwitcher.vue';
 import ModeSwitcher from 'cube-front/core/components/ModeSwitcher.vue';
 import NotificationBell from 'cube-front/core/components/NotificationBell.vue';
-import UserMenu from 'cube-front/core/components/UserMenu.vue';
+import SearchBar from 'cube-front/core/components/SearchBar.vue';
+import UserProfile from 'cube-front/core/components/UserProfile.vue';
 
 const menuStore = useMenuStore();
 const { treeMenus, topLevelActiveMenu } = storeToRefs(menuStore);
@@ -148,20 +149,8 @@ const handleMegaMouseLeave = () => {
 
     <!-- 右侧操作区 -->
     <div class="tn-acts">
-      <!-- 搜索按钮(最左边) -->
-      <button class="tn-btn" title="全局搜索">
-        <svg
-          width="14"
-          height="14"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-        >
-          <circle cx="11" cy="11" r="8" />
-          <path d="m21 21-4.35-4.35" />
-        </svg>
-      </button>
+      <!-- 搜索按钮 -->
+      <SearchBar mode="icon" />
 
       <div class="tn-dvd"></div>
 
@@ -175,7 +164,7 @@ const handleMegaMouseLeave = () => {
       <LayoutSwitcher />
 
       <NotificationBell />
-      <UserMenu />
+      <UserProfile variant="navbar" />
     </div>
   </header>
 
@@ -187,7 +176,6 @@ const handleMegaMouseLeave = () => {
 $tn-h: 60px;
 
 .topnav {
-  --navbar-bg: var(--tn, #1a3328);
   --navbar-border: var(--tn-b, #224538);
   --navbar-text: var(--tn-t, #74b898);
   --navbar-text-hover: var(--tn-ac, #4ec685);
@@ -318,7 +306,7 @@ $tn-h: 60px;
   left: 0;
   right: 0;
   top: $tn-h;
-  background: #fff;
+  background: var(--bg-elevated, #fff);
   border-top: 2px solid var(--tn-ac, #4ec685);
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
   padding: 22px 28px 24px;
@@ -378,7 +366,7 @@ $tn-h: 60px;
 
 .mega-col-sep {
   width: 1px;
-  background: #e0e6da;
+  background: var(--border-subtle);
   margin: 0 10px 14px;
   flex-shrink: 0;
   align-self: stretch;
@@ -389,10 +377,10 @@ $tn-h: 60px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  color: #87a080;
+  color: var(--text-muted);
   margin-bottom: 9px;
   padding-bottom: 7px;
-  border-bottom: 1px solid #e0e6da;
+  border-bottom: 1px solid var(--border-subtle);
 }
 
 .mc-item {
@@ -401,7 +389,7 @@ $tn-h: 60px;
   gap: 7px;
   padding: 5px 8px;
   border-radius: 5px;
-  color: #4a604a;
+  color: var(--text-secondary);
   font-size: 13px;
   cursor: pointer;
   transition:
@@ -414,17 +402,17 @@ $tn-h: 60px;
     width: 4px;
     height: 4px;
     border-radius: 50%;
-    background: #e0e6da;
+    background: var(--border-subtle);
     flex-shrink: 0;
     transition: background 0.12s;
   }
 
   &:hover {
-    background: #e8f5ee;
-    color: #1d7040;
+    background: var(--accent-muted);
+    color: var(--accent);
 
     &::before {
-      background: #1d7040;
+      background: var(--accent);
     }
   }
 }