后台管理页面顶部改为通栏样式

- 顶部报眉通栏显示:先知(毛笔字) + 面包屑 + 日期 + 系统状态 + 登出
- 移动端汉堡按钮移至顶部通栏,用于切换侧边栏
- 侧边栏不再重复显示先知标题,仅保留 ADMIN 标识
- 布局从 sidebar+main 横向排列改为 header 通栏 + sidebar/main 下方排列

Co-Authored-By: new-provider/LongCat-2.0 <<EMAIL>>
)
This commit is contained in:
shangfangjian
2026-09-20 23:44:21 +08:00
parent 81b1f48382
commit 9fb8e24be3
+58 -57
View File
@@ -147,7 +147,58 @@ export default function AdminLayout() {
} }
return ( return (
<div className="flex h-screen overflow-hidden bg-paper-50 text-ink-800"> <div className="flex h-screen flex-col overflow-hidden bg-paper-50 text-ink-800">
{/* ── 通栏顶部报眉 ── */}
<header className="flex h-11 flex-shrink-0 items-center justify-between border-b border-ink-200 bg-paper-50 px-4 lg:px-6">
<div className="flex items-center gap-4">
{/* 移动端汉堡按钮 */}
<button
onClick={() => setSidebarOpen(true)}
className="-ml-1 p-2 text-ink-500 hover:text-ink-900 lg:hidden"
aria-label="打开菜单"
>
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<h1 className="font-brush text-xl text-ink-900">
</h1>
{/* 面包屑 */}
<nav className="hidden items-center gap-1.5 text-2xs text-ink-400 sm:flex" aria-label="面包屑">
<a href="/admin" className="hover:text-ink-700"></a>
{location.pathname !== '/admin' && (
<>
<span aria-hidden="true">/</span>
<span className="text-ink-600">{ROUTE_LABELS[location.pathname] ?? '未知页面'}</span>
</>
)}
</nav>
<span className="hidden text-2xs text-ink-500 sm:inline">{dateLine()}</span>
</div>
<div className="flex items-center gap-4 text-2xs">
<span className="inline-flex items-center gap-1.5 text-ink-500">
<span
className={`inline-block h-1.5 w-1.5 ${
healthOk === null ? 'bg-ink-300' : healthOk ? 'bg-ink-900' : 'bg-press'
}`}
aria-hidden="true"
/>
{healthOk === null ? '检测中' : healthOk ? '系统正常' : '系统异常'}
</span>
<button
onClick={handleLogout}
className="text-ink-500 transition-colors hover:text-press"
title="退出登录"
>
</button>
</div>
</header>
{/* ── 主体:侧边栏 + 内容 ── */}
<div className="flex flex-1 overflow-hidden">
{/* ── 移动端遮罩层 ── */} {/* ── 移动端遮罩层 ── */}
{sidebarOpen && ( {sidebarOpen && (
<div <div
@@ -167,11 +218,8 @@ export default function AdminLayout() {
`} `}
aria-label="主导航" aria-label="主导航"
> >
{/* 报头 */} {/* 侧栏顶部 */}
<div className="flex items-center justify-between border-b border-ink-900 px-5 py-4"> <div className="flex items-center justify-between border-b border-ink-900 px-5 py-4">
<h1 className="font-brush text-xl text-ink-900">
</h1>
<span className="text-2xs tracking-[0.25em] text-ink-400">ADMIN</span> <span className="text-2xs tracking-[0.25em] text-ink-400">ADMIN</span>
</div> </div>
@@ -237,58 +285,11 @@ export default function AdminLayout() {
</aside> </aside>
{/* ── 主内容区 ── */} {/* ── 主内容区 ── */}
<div className="flex flex-1 flex-col overflow-hidden"> <main className="flex-1 overflow-y-auto p-4 lg:p-8">
{/* 报眉:面包屑 + 日期 + 系统状态 */} <div className="mx-auto max-w-6xl">
<header className="flex h-11 flex-shrink-0 items-center justify-between border-b border-ink-200 px-4 lg:px-6"> <Outlet />
<div className="flex items-center gap-4"> </div>
<button </main>
onClick={() => setSidebarOpen(true)}
className="-ml-1 p-2 text-ink-500 hover:text-ink-900 lg:hidden"
aria-label="打开菜单"
>
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
{/* 面包屑 */}
<nav className="hidden items-center gap-1.5 text-2xs text-ink-400 sm:flex" aria-label="面包屑">
<a href="/admin" className="hover:text-ink-700"></a>
{location.pathname !== '/admin' && (
<>
<span aria-hidden="true">/</span>
<span className="text-ink-600">{ROUTE_LABELS[location.pathname] ?? '未知页面'}</span>
</>
)}
</nav>
<span className="hidden text-2xs text-ink-500 sm:inline">{dateLine()}</span>
</div>
<div className="flex items-center gap-4 text-2xs">
<span className="inline-flex items-center gap-1.5 text-ink-500">
<span
className={`inline-block h-1.5 w-1.5 ${
healthOk === null ? 'bg-ink-300' : healthOk ? 'bg-ink-900' : 'bg-press'
}`}
aria-hidden="true"
/>
{healthOk === null ? '检测中' : healthOk ? '系统正常' : '系统异常'}
</span>
<button
onClick={handleLogout}
className="text-ink-500 transition-colors hover:text-press"
title="退出登录"
>
</button>
</div>
</header>
{/* 页面内容 */}
<main className="flex-1 overflow-y-auto p-4 lg:p-8">
<div className="mx-auto max-w-6xl">
<Outlet />
</div>
</main>
</div> </div>
{/* 命令面板(⌘K) */} {/* 命令面板(⌘K) */}