Jelajahi Sumber

feat(web-v3): 5 个面板 tab 上提到顶栏中部,去掉独立 tab 行——顶部 175→120px(累计 231→120,-48%)

- AppShell 新增 centerNav 槽,渲染在顶栏中部(此前是空白留白区)
- run 工作台把 PanelNav 传入 centerNav,删掉概览带下的独立 tab 行
- 顶栏三区:返回/品牌(左)· 5 tab(中)· 平台/耗时/时间线/配置(右);1120~1366 实测无溢出、固定 46px 高
- 内容(路径树)起始位从 231px 抬到 120px,正文区显著变大

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sam Lee 1 hari lalu
induk
melakukan
f0d414b65e

+ 16 - 0
web/app/globals.css

@@ -55,6 +55,22 @@ a {
   gap: 12px;
 }
 
+.topbar-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+}
+
+/* tab 上提到顶栏中部:去掉独立成行的下边距 */
+.topbar-center .panel-nav {
+  margin-bottom: 0;
+  flex-wrap: nowrap;
+}
+.topbar-center .panel-nav-tab {
+  padding: 6px 13px;
+}
+
 .brand {
   display: inline-flex;
   align-items: center;

+ 4 - 1
web/components/layout/AppShell.tsx

@@ -5,12 +5,14 @@ export function AppShell({
   children,
   onRefresh,
   showBack,
-  toolbarLeading
+  toolbarLeading,
+  centerNav
 }: {
   children: React.ReactNode;
   onRefresh?: () => void;
   showBack?: boolean;
   toolbarLeading?: React.ReactNode;
+  centerNav?: React.ReactNode;
 }) {
   return (
     <main className="app-shell">
@@ -27,6 +29,7 @@ export function AppShell({
               <strong>ContentFindAgent</strong>
             </Link>
           </div>
+          {centerNav ? <div className="topbar-center">{centerNav}</div> : null}
           <div className="toolbar">
             {toolbarLeading}
             <Link className="back-link" href="/config">

+ 5 - 1
web/features/runs/RunDashboardPage.tsx

@@ -110,6 +110,11 @@ export function RunDashboardPage({ runId }: { runId: string }) {
     <AppShell
       onRefresh={load}
       showBack
+      centerNav={
+        data ? (
+          <PanelNav stages={data.dashboard.stage_conclusions} activeStage={activeStage} onSelect={setActiveStage} />
+        ) : null
+      }
       toolbarLeading={
         data ? (
           <>
@@ -146,7 +151,6 @@ export function RunDashboardPage({ runId }: { runId: string }) {
           <div className="run-overview">
             <FunnelStrip dashboard={data.dashboard} stages={data.dashboard.stage_conclusions} onSelect={setActiveStage} />
           </div>
-          <PanelNav stages={data.dashboard.stage_conclusions} activeStage={activeStage} onSelect={setActiveStage} />
           <StagePanel
             activeStage={activeStage}
             data={data}