Просмотр исходного кода

Move ledger summary into header

Sam Lee 3 недель назад
Родитель
Сommit
11d2d6a504
3 измененных файлов с 34 добавлено и 22 удалено
  1. 13 0
      web2/app/globals.css
  2. 3 0
      web2/components/AppShell.tsx
  3. 18 22
      web2/features/LedgerPage.tsx

+ 13 - 0
web2/app/globals.css

@@ -92,6 +92,7 @@ a:focus-visible {
 .header-left {
   gap: 10px;
   min-width: 0;
+  flex-wrap: wrap;
 }
 
 .toolbar {
@@ -114,6 +115,18 @@ a:focus-visible {
   overflow-wrap: anywhere;
 }
 
+.header-summary-chips {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.header-summary-chips .chip {
+  margin: 0;
+}
+
 .toolbar-button,
 .icon-button,
 .mini-button {

+ 3 - 0
web2/components/AppShell.tsx

@@ -6,6 +6,7 @@ import { ArrowLeft, Database, RefreshCw } from "lucide-react";
 export function AppShell({
   children,
   title = "运营流程账本",
+  titleExtra,
   subtitle,
   runId,
   showBack,
@@ -14,6 +15,7 @@ export function AppShell({
 }: {
   children: React.ReactNode;
   title?: string;
+  titleExtra?: React.ReactNode;
   subtitle?: string;
   runId?: string;
   showBack?: boolean;
@@ -35,6 +37,7 @@ export function AppShell({
               <Database size={16} />
               <span>{title}</span>
             </Link>
+            {titleExtra}
             {subtitle ? <span className="header-subtitle">{subtitle}</span> : null}
           </div>
           <div className="toolbar">

+ 18 - 22
web2/features/LedgerPage.tsx

@@ -2,7 +2,6 @@
 
 import Link from "next/link";
 import { GitBranch, ListVideo } from "lucide-react";
-import { useMemo } from "react";
 import { AppShell } from "@/components/AppShell";
 import { EmptyState, ErrorState, LoadingState } from "@/components/StateBlocks";
 import {
@@ -19,36 +18,21 @@ import type { FlowLedgerRow, VideoRef } from "@/lib/flow-ledger/types";
 import { useFlowLedger } from "./useFlowLedger";
 
 export function LedgerPage({ runId }: { runId: string }) {
-  const { ledger, input, loading, error, reload } = useFlowLedger(runId);
+  const { ledger, loading, error, reload } = useFlowLedger(runId);
 
   const rows = ledger?.rows || [];
 
-  const headerSubtitle = useMemo(() => {
-    if (!input) return "查看搜索词如何一路产生内容";
-    const firstRound = Number(input.summary.first_round_query_count || rows.length);
-    const extension = Number(input.summary.extension_query_count || 0);
-    const videoCount = rows.reduce((sum, row) => sum + row.firstRoundVideoTotal, 0);
-    return `首轮 ${firstRound} 个搜索词,继续扩展 ${extension} 个搜索词,首轮找到 ${videoCount} 条视频`;
-  }, [input, rows]);
-
   return (
-    <AppShell title="流程账本" subtitle={headerSubtitle} onRefresh={reload}>
+    <AppShell
+      title="本次流程摘要"
+      titleExtra={ledger ? <HeaderSummaryChips rows={rows} dataOriginLabel={ledger.dataOriginLabel} /> : null}
+      onRefresh={reload}
+    >
       {loading ? <LoadingState /> : null}
       {error ? <ErrorState message={error} /> : null}
       {!loading && !error && !rows.length ? <EmptyState label="没有可展示的搜索流程记录" /> : null}
       {ledger ? (
         <>
-          <details className="source-block" open>
-            <summary>本次流程摘要</summary>
-            <div className="source-body">
-              <span className="chip blue">搜索词 {rows.length}</span>
-              <span className="chip green">首轮视频 {rows.reduce((sum, row) => sum + row.firstRoundVideoTotal, 0)}</span>
-              <span className="chip yellow">待复看 {rows.reduce((sum, row) => sum + row.ruleSummary.reviewCount, 0)}</span>
-              <span className="chip">入池 {rows.reduce((sum, row) => sum + row.finalAssets.assetCount, 0)}</span>
-              <span className="chip blue">{ledger.dataOriginLabel}</span>
-            </div>
-          </details>
-
           <section className="table-wrap">
             <table className="ledger-table">
               <thead>
@@ -79,6 +63,18 @@ export function LedgerPage({ runId }: { runId: string }) {
   );
 }
 
+function HeaderSummaryChips({ rows, dataOriginLabel }: { rows: FlowLedgerRow[]; dataOriginLabel: string }) {
+  return (
+    <div className="header-summary-chips">
+      <span className="chip blue">搜索词 {rows.length}</span>
+      <span className="chip green">首轮视频 {rows.reduce((sum, row) => sum + row.firstRoundVideoTotal, 0)}</span>
+      <span className="chip yellow">待复看 {rows.reduce((sum, row) => sum + row.ruleSummary.reviewCount, 0)}</span>
+      <span className="chip">入池 {rows.reduce((sum, row) => sum + row.finalAssets.assetCount, 0)}</span>
+      <span className="chip blue">{dataOriginLabel}</span>
+    </div>
+  );
+}
+
 function SourceCell({ row }: { row: FlowLedgerRow }) {
   const details = row.source.details.length ? row.source.details : [sourceEvidence(row)];
   return (