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);
}
}
}