From 9fb8e24be3fb615623c09e5d81629d0e0842614f Mon Sep 17 00:00:00 2001
From: shangfangjian <shangfangjian@bilidili.cn>
Date: Sun, 20 Sep 2026 23:44:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8E=E5=8F=B0=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E9=A1=B6=E9=83=A8=E6=94=B9=E4=B8=BA=E9=80=9A=E6=A0=8F?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: new-provider/LongCat-2.0 <<EMAIL>>
)
---
 frontend/src/admin/AdminLayout.tsx | 115 +++++++++++++++--------------
 1 file changed, 58 insertions(+), 57 deletions(-)

diff --git a/frontend/src/admin/AdminLayout.tsx b/frontend/src/admin/AdminLayout.tsx
index dfc6da9..ba4862e 100644
--- a/frontend/src/admin/AdminLayout.tsx
+++ b/frontend/src/admin/AdminLayout.tsx
@@ -147,7 +147,58 @@ export default function AdminLayout() {
   }
 
   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 && (
         <div
@@ -167,11 +218,8 @@ export default function AdminLayout() {
         `}
         aria-label="主导航"
       >
-        {/* 报头 */}
+        {/* 侧栏顶部 */}
         <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>
         </div>
 
@@ -237,58 +285,11 @@ export default function AdminLayout() {
       </aside>
 
       {/* ── 主内容区 ── */}
-      <div className="flex flex-1 flex-col overflow-hidden">
-        {/* 报眉:面包屑 + 日期 + 系统状态 */}
-        <header className="flex h-11 flex-shrink-0 items-center justify-between border-b border-ink-200 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>
-            {/* 面包屑 */}
-            <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>
+      <main className="flex-1 overflow-y-auto p-4 lg:p-8">
+        <div className="mx-auto max-w-6xl">
+          <Outlet />
+        </div>
+      </main>
       </div>
 
       {/* 命令面板(⌘K) */}