Align header with crypto_monitor: brand above nav, shared page width.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-29 17:45:04 +08:00
parent f49365b4d4
commit 6081fb7e48
3 changed files with 182 additions and 152 deletions
+46 -41
View File
@@ -24,48 +24,53 @@ function Shell({ children }: { children: ReactNode }) {
const user = getUsername();
return (
<div className="app-shell">
<header className="topnav">
<div className="topnav-side left">
<div className="brand">
<img
className="brand-mark"
src="/icons/brand.png"
alt=""
width={28}
height={28}
/>
<span className="brand-full"></span>
<span className="brand-short"></span>
<div className="app-container">
<header className="app-header-block">
<div className="brand-row">
<div className="brand">
<img
className="brand-mark"
src="/icons/brand.png"
alt=""
width={28}
height={28}
/>
<span className="brand-full"></span>
<span className="brand-short"></span>
</div>
<div className="brand-actions">
<span className="meta mono topnav-user">{user}</span>
<button
className="btn ghost topnav-logout"
type="button"
onClick={() => {
clearSession();
window.location.href = "/login";
}}
>
退
</button>
</div>
</div>
</div>
<nav className="topnav-center" aria-label="主导航">
{NAV.map((item) => (
<NavLink
key={item.to}
to={item.to}
className={({ isActive }) => (isActive ? "active" : "")}
>
<span className="nav-label-full">{item.full}</span>
<span className="nav-label-short">{item.label}</span>
</NavLink>
))}
</nav>
<div className="topnav-side right">
<span className="meta mono topnav-user">{user}</span>
<button
className="btn ghost topnav-logout"
type="button"
onClick={() => {
clearSession();
window.location.href = "/login";
}}
>
退
</button>
</div>
</header>
<FundsBar />
<main className="page">{children}</main>
<nav className="top-nav" aria-label="主导航">
{NAV.map((item) => (
<NavLink
key={item.to}
to={item.to}
className={({ isActive }) => (isActive ? "active" : "")}
>
<span className="nav-label-full">{item.full}</span>
<span className="nav-label-short">{item.label}</span>
</NavLink>
))}
</nav>
</header>
<FundsBar />
<main className="page">{children}</main>
</div>
<nav className="bottom-nav" aria-label="手机导航">
{NAV.map((item) => (
<NavLink