后台管理页面顶部改为通栏样式
- 顶部报眉通栏显示:先知(毛笔字) + 面包屑 + 日期 + 系统状态 + 登出 - 移动端汉堡按钮移至顶部通栏,用于切换侧边栏 - 侧边栏不再重复显示先知标题,仅保留 ADMIN 标识 - 布局从 sidebar+main 横向排列改为 header 通栏 + sidebar/main 下方排列 Co-Authored-By: new-provider/LongCat-2.0 <<EMAIL>> )
This commit is contained in:
@@ -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) */}
|
||||||
|
|||||||
Reference in New Issue
Block a user