改造一键流式优化首页

src/app/globals.css

@@ -121,9 +121,10 @@ h3 {
 }
 
 .workflow-grid {
+  align-items: start;
   display: grid;
   gap: 1rem;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: minmax(22rem, 0.86fr) minmax(0, 1.14fr);
 }
 
 .panel {
@@ -134,6 +135,19 @@ h3 {
   padding: 1rem;
 }
 
+.compact-panel {
+  min-height: auto;
+  padding: 0.85rem;
+}
+
+.input-panel {
+  grid-row: span 2;
+}
+
+.fact-card-panel {
+  gap: 0.7rem;
+}
+
 .stack {
   display: grid;
   align-content: start;
@@ -158,8 +172,16 @@ h3 {
   font-weight: 800;
 }
 
+.panel-actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
 .body-input {
-  min-height: 14rem;
+  min-height: 20rem;
 }
 
 .two-col {
@@ -256,6 +278,141 @@ h3 {
   padding: 0.25rem 0.55rem;
 }
 
+.warn-tag {
+  background: #fff7e6;
+  border-color: #f0c978;
+  color: #7b560b;
+}
+
+.fact-summary-grid {
+  display: grid;
+  gap: 0.55rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.fact-summary-grid div {
+  background: #f4faf8;
+  border: 1px solid #d9ebe6;
+  border-radius: 6px;
+  display: grid;
+  gap: 0.22rem;
+  min-width: 0;
+  padding: 0.55rem;
+}
+
+.fact-summary-grid span {
+  color: #667085;
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+
+.fact-summary-grid strong {
+  color: #172033;
+  font-size: 0.9rem;
+  overflow-wrap: anywhere;
+}
+
+.fact-compact-list,
+.fact-edit-grid {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.fact-edit-grid {
+  border-top: 1px solid #e5e9f0;
+  padding-top: 0.7rem;
+}
+
+.optimized-panel {
+  min-height: 24rem;
+  overflow: hidden;
+  position: relative;
+}
+
+.optimized-panel.is-streaming {
+  border-color: #91cdbf;
+  box-shadow: 0 0 0 3px rgba(38, 138, 116, 0.08);
+}
+
+.stream-status {
+  align-items: center;
+  color: #0d6b58;
+  display: inline-flex;
+  font-size: 0.78rem;
+  font-weight: 800;
+  gap: 0.45rem;
+}
+
+.stream-cursor {
+  animation: stream-spin 0.8s linear infinite;
+  border: 2px solid #b7ddd5;
+  border-radius: 999px;
+  border-top-color: #0d6b58;
+  display: inline-block;
+  height: 1rem;
+  width: 1rem;
+}
+
+.streaming-preview {
+  border-left-color: #20846d;
+}
+
+.streaming-preview pre {
+  animation: preview-breathe 1.8s ease-in-out infinite;
+  background: #f4fbf8;
+  border: 1px solid #d6eee8;
+}
+
+.stream-placeholder {
+  display: grid;
+  gap: 0.7rem;
+}
+
+.preview-pulse-line,
+.preview-pulse-block {
+  animation: preview-breathe 1.6s ease-in-out infinite;
+  background: linear-gradient(90deg, #edf5f2, #dceee8, #edf5f2);
+  border-radius: 6px;
+}
+
+.preview-pulse-line {
+  height: 1rem;
+  width: 82%;
+}
+
+.preview-pulse-line.title-line {
+  height: 1.5rem;
+  width: 54%;
+}
+
+.preview-pulse-line.short-line {
+  width: 66%;
+}
+
+.preview-pulse-block {
+  height: 12rem;
+  width: 100%;
+}
+
+.stream-word-row {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  min-height: 1.8rem;
+}
+
+.stream-word {
+  animation: word-pop 0.46s ease both;
+  background: #e9f6f2;
+  border: 1px solid #b7ddd5;
+  border-radius: 999px;
+  color: #0d6b58;
+  font-size: 0.78rem;
+  font-weight: 800;
+  padding: 0.22rem 0.5rem;
+}
+
 .qa-list {
   display: grid;
   gap: 0.7rem;
@@ -348,12 +505,46 @@ h3 {
 @media (max-width: 900px) {
   .workflow-grid,
   .two-col,
+  .fact-summary-grid,
   .calibration-metrics {
     grid-template-columns: 1fr;
   }
 
+  .input-panel {
+    grid-row: auto;
+  }
+
   .topbar {
     align-items: stretch;
     flex-direction: column;
   }
 }
+
+@keyframes stream-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes preview-breathe {
+  0%,
+  100% {
+    opacity: 0.72;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes word-pop {
+  0% {
+    opacity: 0;
+    transform: translateY(0.4rem) scale(0.9);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

src/app/page.tsx

@@ -6,20 +6,21 @@ import {
   ArticleInputForm,
   type ArticleInputPayload,
 } from "../components/article-input-form";
-import {
+import { FactCardEditor } from "../components/fact-card-editor";
-  FactCardEditor,
-  toConfirmedFactCard,
-} from "../components/fact-card-editor";
 import { OptimizedPreview } from "../components/optimized-preview";
 import { PerformanceCalibrationPanel } from "../components/performance-calibration-panel";
 import { ProgressPanel } from "../components/progress-panel";
 import { QaReportPanel } from "../components/qa-report-panel";
 import type {
-  CandidateFactCard,
+  OptimizationFactCard,
   OptimizedArticle,
   QaReport,
 } from "../lib/domain/types";
 import type { ProgressAction } from "../lib/progress/progress";
+import {
+  parseOptimizationStreamChunk,
+  type OptimizationStreamEvent,
+} from "../lib/workflow/stream-events";
 
 const initialInput: ArticleInputPayload = {
   title: "",
@@ -31,7 +32,6 @@ const initialInput: ArticleInputPayload = {
 
 interface ApiErrorResponse {
   error?: string;
-  timing?: TimingSummary;
 }
 
 interface TimingStep {
@@ -44,42 +44,11 @@ interface TimingSummary {
   steps: TimingStep[];
 }
 
-interface ProgressStep {
-  label: string;
-  status: "running" | "completed" | "failed";
-  duration_ms?: number;
-}
-
-interface WorkflowProgress {
-  current_step: string | null;
-  status: "idle" | "running" | "completed" | "failed";
-  steps: ProgressStep[];
-}
-
-interface ProgressResponse extends ApiErrorResponse {
-  progress: WorkflowProgress;
-}
-
-interface CreateJobResponse extends ApiErrorResponse {
-  job: { id: string };
-  candidateFactCard: CandidateFactCard;
-  timing?: TimingSummary;
-}
-
-interface ConfirmFactCardResponse extends ApiErrorResponse {
-  factCard: CandidateFactCard;
-}
-
-interface OptimizeJobResponse extends ApiErrorResponse {
-  optimizedArticle: OptimizedArticle;
-  qaReport: QaReport;
-  timing?: TimingSummary;
-}
-
 export default function Home() {
   const [input, setInput] = useState(initialInput);
   const [jobId, setJobId] = useState<string | null>(null);
-  const [factCard, setFactCard] = useState<CandidateFactCard | null>(null);
+  const [factCard, setFactCard] = useState<OptimizationFactCard | null>(null);
+  const [draftArticle, setDraftArticle] = useState<OptimizedArticle | null>(null);
   const [optimizedArticle, setOptimizedArticle] =
     useState<OptimizedArticle | null>(null);
   const [qaReport, setQaReport] = useState<QaReport | null>(null);
@@ -88,10 +57,7 @@ export default function Home() {
   const [apiAccessKey, setApiAccessKey] = useState("");
   const [elapsedSeconds, setElapsedSeconds] = useState(0);
   const [lastTiming, setLastTiming] = useState<TimingSummary | null>(null);
-  const [liveProgress, setLiveProgress] = useState<WorkflowProgress | null>(null);
+  const [streamActivity, setStreamActivity] = useState("");
-
-  const canOptimize =
-    Boolean(jobId) && Boolean(factCard) && factCard?.uncertain_items.length === 0;
 
   useEffect(() => {
     if (!busyAction) return;
@@ -102,127 +68,98 @@ export default function Home() {
     return () => window.clearInterval(timer);
   }, [busyAction]);
 
-  useEffect(() => {
-    if (busyAction !== "optimize" || !jobId) return;
-    let cancelled = false;
-
-    async function pollProgress() {
-      try {
-        const response = await fetch(`/api/jobs/${jobId}/progress`, {
-          headers: apiHeaders(apiAccessKey),
-        });
-        const body = (await response.json()) as ProgressResponse;
-        if (!cancelled && response.ok) {
-          setLiveProgress(body.progress);
-        }
-      } catch {
-        // The main optimization request still owns user-facing errors.
-      }
-    }
-
-    void pollProgress();
-    const timer = window.setInterval(pollProgress, 2000);
-    return () => {
-      cancelled = true;
-      window.clearInterval(timer);
-    };
-  }, [apiAccessKey, busyAction, jobId]);
-
   function startBusyAction(action: ProgressAction) {
     setElapsedSeconds(0);
     setBusyAction(action);
   }
 
-  async function analyze() {
-    startBusyAction("analyze");
-    setMessage("");
-    setLastTiming(null);
-    setLiveProgress(null);
-    setOptimizedArticle(null);
-    setQaReport(null);
-    try {
-      const response = await fetch("/api/jobs", {
-        method: "POST",
-        headers: apiHeaders(apiAccessKey),
-        body: JSON.stringify(input),
-      });
-      const body = (await response.json()) as CreateJobResponse;
-      if (!response.ok) throw new ApiResponseError(body.error ?? "分析失败", body.timing);
-      setJobId(body.job.id);
-      setFactCard(body.candidateFactCard);
-      setLastTiming(body.timing ?? null);
-      setMessage(
-        body.timing
-          ? `候选事实卡已生成，用时 ${formatTiming(body.timing.total_ms)}。`
-          : "候选事实卡已生成。",
-      );
-    } catch (error) {
-      if (error instanceof ApiResponseError) {
-        setLastTiming(error.timing ?? null);
-      }
-      setMessage(error instanceof Error ? error.message : "分析失败");
-    } finally {
-      setBusyAction(null);
-    }
-  }
-
-  async function confirmFactCard() {
-    if (!jobId || !factCard) return;
-    startBusyAction("confirm");
-    setMessage("");
-    setLastTiming(null);
-    try {
-      const response = await fetch(`/api/jobs/${jobId}/confirm-fact-card`, {
-        method: "POST",
-        headers: apiHeaders(apiAccessKey),
-        body: JSON.stringify(toConfirmedFactCard(factCard)),
-      });
-      const body = (await response.json()) as ConfirmFactCardResponse;
-      if (!response.ok) throw new Error(body.error ?? "确认失败");
-      setFactCard(body.factCard);
-      setMessage("事实卡已确认。");
-    } catch (error) {
-      setMessage(error instanceof Error ? error.message : "确认失败");
-    } finally {
-      setBusyAction(null);
-    }
-  }
-
   async function optimize() {
-    if (!jobId) return;
     startBusyAction("optimize");
     setMessage("");
     setLastTiming(null);
-    setLiveProgress(null);
+    setDraftArticle(null);
+    setOptimizedArticle(null);
+    setQaReport(null);
+    setStreamActivity("正在创建任务");
+
     try {
-      const response = await fetch(`/api/jobs/${jobId}/optimize`, {
+      const payload: ArticleInputPayload & {
+        fact_card?: OptimizationFactCard;
+      } = {
+        ...input,
+        title: "",
+      };
+      if (factCard) {
+        payload.fact_card = factCard;
+      }
+
+      const response = await fetch("/api/jobs/optimize-stream", {
         method: "POST",
         headers: apiHeaders(apiAccessKey),
+        body: JSON.stringify(payload),
       });
-      const body = (await response.json()) as OptimizeJobResponse;
+
-      if (!response.ok) throw new ApiResponseError(body.error ?? "优化失败", body.timing);
+      if (!response.ok) {
-      setOptimizedArticle(body.optimizedArticle);
+        const body = (await response.json()) as ApiErrorResponse;
-      setQaReport(body.qaReport);
+        throw new Error(body.error ?? "优化失败");
-      setLastTiming(body.timing ?? null);
-      setLiveProgress(null);
-      const timingText = body.timing
-        ? `用时 ${formatTiming(body.timing.total_ms)}。`
-        : "";
-      setMessage(
-        body.qaReport.overall_status === "fail"
-          ? `质检发现需要复核的问题，已保留导出文件。${timingText}`
-          : `优化完成。${timingText}`,
-      );
-    } catch (error) {
-      if (error instanceof ApiResponseError) {
-        setLastTiming(error.timing ?? null);
       }
+
+      await readOptimizationStream(response, handleStreamEvent);
+    } catch (error) {
       setMessage(error instanceof Error ? error.message : "优化失败");
     } finally {
       setBusyAction(null);
     }
   }
 
+  function handleStreamEvent(event: OptimizationStreamEvent) {
+    switch (event.type) {
+      case "job_created":
+        setJobId(event.job.id);
+        setStreamActivity("任务已创建");
+        break;
+      case "fact_card_ready":
+        setFactCard(event.fact_card);
+        setStreamActivity("事实卡已就绪");
+        break;
+      case "draft_started":
+        setStreamActivity(event.message);
+        break;
+      case "draft_ready":
+        setDraftArticle(event.article);
+        setStreamActivity("草稿已生成");
+        break;
+      case "qa_started":
+        setStreamActivity(event.message);
+        break;
+      case "qa_ready":
+        setQaReport(event.qa_report);
+        setStreamActivity("质量检查完成");
+        break;
+      case "rewrite_started":
+        setStreamActivity(`正在修复第 ${event.round} 轮`);
+        break;
+      case "rewrite_ready":
+        setDraftArticle(event.article);
+        setStreamActivity(`第 ${event.round} 轮修复完成`);
+        break;
+      case "final_ready":
+        setOptimizedArticle(event.optimized_article);
+        setDraftArticle(null);
+        setQaReport(event.qa_report);
+        setStreamActivity("终稿已生成");
+        setMessage(
+          event.qa_report.overall_status === "fail"
+            ? "优化完成，质检发现需要复核的问题。"
+            : "优化完成。",
+        );
+        break;
+      case "failed":
+        setStreamActivity("优化失败");
+        throw new Error(event.error);
+    }
+  }
+
   return (
     <main className="app-shell">
       <header className="topbar">
@@ -239,35 +176,30 @@ export default function Home() {
             value={apiAccessKey}
           />
         </label>
-        <button
-          disabled={!canOptimize || busyAction === "optimize"}
-          onClick={optimize}
-          type="button"
-        >
-          {busyAction === "optimize" ? "优化中..." : "开始优化"}
-        </button>
       </header>
       <ProgressPanel
         action={busyAction}
         elapsedSeconds={elapsedSeconds}
         lastTiming={lastTiming}
-        liveProgress={liveProgress}
+        liveProgress={null}
       />
       <div className="workflow-grid">
         <ArticleInputForm
-          isSubmitting={busyAction === "analyze"}
+          isSubmitting={busyAction === "optimize"}
           value={input}
           onChange={setInput}
-          onSubmit={analyze}
+          onSubmit={optimize}
         />
         <FactCardEditor
           factCard={factCard}
-          isSaving={busyAction === "confirm"}
+          isSaving={busyAction === "optimize"}
           onChange={setFactCard}
-          onConfirm={confirmFactCard}
         />
         <OptimizedPreview
+          activityText={streamActivity}
           article={optimizedArticle}
+          draftArticle={draftArticle}
+          isStreaming={busyAction === "optimize"}
           jobId={jobId}
         />
         <QaReportPanel report={qaReport} />
@@ -282,6 +214,42 @@ export default function Home() {
   );
 }
 
+async function readOptimizationStream(
+  response: Response,
+  onEvent: (event: OptimizationStreamEvent) => void,
+) {
+  if (!response.body) {
+    throw new Error("当前浏览器不支持流式响应");
+  }
+
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let remainder = "";
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+
+    const parsed = parseOptimizationStreamChunk(
+      remainder,
+      decoder.decode(value, { stream: true }),
+    );
+    remainder = parsed.remainder;
+    parsed.events.forEach(onEvent);
+  }
+
+  const finalText = decoder.decode();
+  if (finalText) {
+    const parsed = parseOptimizationStreamChunk(remainder, finalText);
+    remainder = parsed.remainder;
+    parsed.events.forEach(onEvent);
+  }
+
+  if (remainder.trim().length > 0) {
+    onEvent(JSON.parse(remainder) as OptimizationStreamEvent);
+  }
+}
+
 function apiHeaders(apiAccessKey: string) {
   const headers: Record<string, string> = { "content-type": "application/json" };
   if (apiAccessKey) {
@@ -289,21 +257,3 @@ function apiHeaders(apiAccessKey: string) {
   }
   return headers;
 }
-
-function formatTiming(milliseconds: number) {
-  const seconds = Math.round(milliseconds / 1000);
-  if (seconds < 60) return `${seconds} 秒`;
-  const minutes = Math.floor(seconds / 60);
-  const remainingSeconds = seconds % 60;
-  return `${minutes} 分 ${remainingSeconds} 秒`;
-}
-
-class ApiResponseError extends Error {
-  constructor(
-    message: string,
-    public readonly timing?: TimingSummary,
-  ) {
-    super(message);
-    this.name = "ApiResponseError";
-  }
-}

src/components/article-input-form.tsx

@@ -45,23 +45,15 @@ export function ArticleInputForm({
   }
 
   return (
-    <form className="panel stack" onSubmit={handleSubmit}>
+    <form className="panel stack input-panel" onSubmit={handleSubmit}>
       <div className="panel-heading">
         <span>文章输入</span>
-        <button disabled={isSubmitting} type="submit">
+        <button disabled={isSubmitting || value.body.trim().length === 0} type="submit">
-          {isSubmitting ? "分析中..." : "分析文章"}
+          {isSubmitting ? "优化中..." : "开始优化"}
         </button>
       </div>
       <label>
-        <span>标题</span>
+        <span>文章内容</span>
-        <input
-          required
-          value={value.title}
-          onChange={(event) => update("title", event.target.value)}
-        />
-      </label>
-      <label>
-        <span>正文</span>
         <textarea
           required
           className="body-input"

src/components/fact-card-editor.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import type { CandidateFactCard, ConfirmedFactCard } from "../lib/domain/types";
+import { useState } from "react";
+
+import type { CandidateFactCard, OptimizationFactCard } from "../lib/domain/types";
 
 interface FactCardEditorProps {
-  factCard: CandidateFactCard | null;
+  factCard: OptimizationFactCard | null;
   isSaving: boolean;
-  onChange: (factCard: CandidateFactCard) => void;
+  onChange: (factCard: OptimizationFactCard) => void;
-  onConfirm: () => void;
 }
 
 const listFields = [
@@ -47,30 +48,35 @@ export function FactCardEditor({
   factCard,
   isSaving,
   onChange,
-  onConfirm,
 }: FactCardEditorProps) {
+  const [isEditing, setIsEditing] = useState(false);
+
   if (!factCard) {
     return (
-      <section className="panel empty-panel">
+      <section className="panel compact-panel fact-card-panel empty-panel">
-        <div className="panel-heading">事实卡</div>
+        <div className="panel-heading">
+          <span>事实卡</span>
+          <span className="status-pill warn">待生成</span>
+        </div>
       </section>
     );
   }
 
-  const currentFactCard = factCard;
+  const hasUncertainItems = factCard.uncertain_items.length > 0;
-  const canOptimize = currentFactCard.uncertain_items.length === 0;
 
-  function update<K extends keyof CandidateFactCard>(
+  function update<K extends keyof OptimizationFactCard>(
     key: K,
-    value: CandidateFactCard[K],
+    value: OptimizationFactCard[K],
   ) {
+    if (!factCard) return;
     onChange({
-      ...currentFactCard,
+      ...factCard,
       [key]: value,
+      confirmed_by_user: false,
       is_ready_for_optimization:
         key === "uncertain_items"
           ? (value as string[]).length === 0
-          : currentFactCard.uncertain_items.length === 0,
+          : factCard.uncertain_items.length === 0,
     });
   }
 
@@ -78,43 +84,116 @@ export function FactCardEditor({
     itemIndex: number,
     target: UncertainItemResolutionTarget,
   ) {
-    onChange(resolveUncertainItem(currentFactCard, itemIndex, target));
+    if (!factCard) return;
+    onChange(resolveUncertainItem(factCard, itemIndex, target));
   }
 
   return (
-    <section className="panel stack">
+    <section className="panel compact-panel fact-card-panel stack">
       <div className="panel-heading">
         <span>事实卡</span>
-        <button disabled={!canOptimize || isSaving} onClick={onConfirm} type="button">
+        <div className="panel-actions">
-          {isSaving ? "保存中..." : "确认事实卡"}
+          <span className={`status-pill ${hasUncertainItems ? "warn" : "pass"}`}>
+            {hasUncertainItems ? "待复核" : "可用"}
+          </span>
+          <button
+            className="secondary-button"
+            disabled={isSaving}
+            onClick={() => setIsEditing((editing) => !editing)}
+            type="button"
+          >
+            {isEditing ? "收起编辑" : "编辑事实卡"}
           </button>
         </div>
+      </div>
+
+      <div className="fact-summary-grid">
+        <div>
+          <span>公司</span>
+          <strong>{factCard.company_full_name || "待补充"}</strong>
+        </div>
+        <div>
+          <span>行业</span>
+          <strong>{factCard.target_industry || "待补充"}</strong>
+        </div>
+        <div>
+          <span>受众</span>
+          <strong>{factCard.target_audience || "待补充"}</strong>
+        </div>
+        <div>
+          <span>经验</span>
+          <strong>
+            {factCard.experience_years === null
+              ? "待补充"
+              : `${factCard.experience_years} 年`}
+          </strong>
+        </div>
+      </div>
+
+      {factCard.core_claims.length > 0 && (
+        <div className="fact-compact-list">
+          <span className="field-label">核心事实</span>
+          <div className="tag-row">
+            {factCard.core_claims.slice(0, 4).map((claim) => (
+              <span className="tag" key={claim}>
+                {claim}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {hasUncertainItems && (
+        <div className="fact-compact-list">
+          <span className="field-label">待确认事项</span>
+          <div className="tag-row">
+            {factCard.uncertain_items.slice(0, 4).map((item) => (
+              <span className="tag warn-tag" key={item}>
+                {item}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {isEditing && (
+        <div className="fact-edit-grid">
           <label>
             <span>公司全称</span>
             <input
+              disabled={isSaving}
               value={factCard.company_full_name}
-          onChange={(event) => update("company_full_name", event.target.value)}
+              onChange={(event) =>
+                update("company_full_name", event.target.value)
+              }
             />
           </label>
           <div className="two-col">
             <label>
               <span>目标行业</span>
               <input
+                disabled={isSaving}
                 value={factCard.target_industry}
-            onChange={(event) => update("target_industry", event.target.value)}
+                onChange={(event) =>
+                  update("target_industry", event.target.value)
+                }
               />
             </label>
             <label>
               <span>目标受众</span>
               <input
+                disabled={isSaving}
                 value={factCard.target_audience}
-            onChange={(event) => update("target_audience", event.target.value)}
+                onChange={(event) =>
+                  update("target_audience", event.target.value)
+                }
               />
             </label>
           </div>
           <label>
             <span>经验年限</span>
             <input
+              disabled={isSaving}
               min="0"
               type="number"
               value={factCard.experience_years ?? ""}
@@ -130,6 +209,7 @@ export function FactCardEditor({
             <label key={field}>
               <span>{fieldLabels[field]}</span>
               <textarea
+                disabled={isSaving}
                 value={factCard[field].join("\n")}
                 onChange={(event) =>
                   update(
@@ -137,7 +217,7 @@ export function FactCardEditor({
                     event.target.value
                       .split(/\r?\n/)
                       .map((line) => line.trim())
-                  .filter(Boolean) as CandidateFactCard[typeof field],
+                      .filter(Boolean) as OptimizationFactCard[typeof field],
                   )
                 }
               />
@@ -154,6 +234,7 @@ export function FactCardEditor({
                       {uncertainItemActions.map((action) => (
                         <button
                           className="secondary-button"
+                          disabled={isSaving}
                           key={action.target}
                           onClick={() => resolveItem(index, action.target)}
                           type="button"
@@ -169,31 +250,17 @@ export function FactCardEditor({
               <p className="status-text pass">待确认事项已处理。</p>
             )}
           </div>
-      {!canOptimize && (
+        </div>
-        <p className="status-text fail">
-          请先处理待确认事项，再开始优化。
-        </p>
       )}
     </section>
   );
 }
 
-export function toConfirmedFactCard(
+export function resolveUncertainItem<T extends CandidateFactCard>(
-  factCard: CandidateFactCard,
+  factCard: T,
-): ConfirmedFactCard {
-  return {
-    ...factCard,
-    uncertain_items: [],
-    is_ready_for_optimization: true,
-    confirmed_by_user: true,
-  };
-}
-
-export function resolveUncertainItem(
-  factCard: CandidateFactCard,
   itemIndex: number,
   target: UncertainItemResolutionTarget,
-): CandidateFactCard {
+): T {
   const item = factCard.uncertain_items[itemIndex]?.trim();
   if (!item) return factCard;
 

src/components/optimized-preview.tsx

@@ -1,64 +1,133 @@
 "use client";
 
+import { useEffect, useState } from "react";
+
 import type { OptimizedArticle } from "../lib/domain/types";
 
 interface OptimizedPreviewProps {
   article: OptimizedArticle | null;
+  draftArticle?: OptimizedArticle | null;
   jobId: string | null;
+  isStreaming?: boolean;
+  activityText?: string;
 }
 
 const exportFiles = ["optimized.md", "optimized.docx", "qa_report.json"];
+const streamWords = ["事实", "标题", "结构", "语气", "检索", "改写", "终稿"];
 
 export function OptimizedPreview({
   article,
+  draftArticle = null,
   jobId,
+  isStreaming = false,
+  activityText = "",
 }: OptimizedPreviewProps) {
-  if (!article) {
+  const [streamTick, setStreamTick] = useState(0);
+  const visibleArticle = article ?? draftArticle;
+  const visibleWordCount = isStreaming ? Math.min(streamTick, 6) : 0;
+  const visibleWords = Array.from({ length: visibleWordCount }, (_, offset) => {
+    const index = streamTick - visibleWordCount + offset;
+    return streamWords[index % streamWords.length];
+  });
+
+  useEffect(() => {
+    if (!isStreaming) return;
+
+    const timer = window.setInterval(() => {
+      setStreamTick((tick) => tick + 1);
+    }, 850);
+
+    return () => window.clearInterval(timer);
+  }, [isStreaming]);
+
+  if (!visibleArticle && !isStreaming) {
     return (
-      <section className="panel empty-panel">
+      <section className="panel empty-panel optimized-panel">
         <div className="panel-heading">优化结果</div>
       </section>
     );
   }
 
   return (
-    <section className="panel stack">
+    <section
-      <div className="panel-heading">优化结果</div>
+      aria-live="polite"
-      <article className="preview">
+      className={`panel stack optimized-panel ${isStreaming ? "is-streaming" : ""}`}
-        <h2>{article.title}</h2>
+    >
-        <p>{article.summary}</p>
+      <div className="panel-heading">
-        <pre>{article.body_markdown}</pre>
+        <span>优化结果</span>
+        {isStreaming && (
+          <span className="stream-status">
+            <span className="stream-cursor" aria-hidden="true" />
+            {activityText || "正在优化"}
+          </span>
+        )}
+      </div>
+
+      {visibleArticle ? (
+        <article className={`preview ${isStreaming ? "streaming-preview" : ""}`}>
+          <h2>{visibleArticle.title}</h2>
+          <p>{visibleArticle.summary}</p>
+          <pre>{visibleArticle.body_markdown}</pre>
         </article>
+      ) : (
+        <div className="preview stream-placeholder">
+          <div className="preview-pulse-line title-line" />
+          <div className="preview-pulse-line" />
+          <div className="preview-pulse-line short-line" />
+          <div className="preview-pulse-block" />
+        </div>
+      )}
+
+      {isStreaming && visibleWords.length > 0 && (
+        <div className="stream-word-row" aria-hidden="true">
+          {visibleWords.map((word, index) => (
+            <span className="stream-word" key={`${word}-${streamTick}-${index}`}>
+              {word}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {visibleArticle && (
+        <>
           <div>
             <h3>图片建议</h3>
+            {visibleArticle.image_suggestions.length > 0 ? (
               <ul>
-          {article.image_suggestions.map((item) => (
+                {visibleArticle.image_suggestions.map((item) => (
                   <li key={item.source}>
                     <strong>{item.source}</strong>: {item.suggestion}
                   </li>
                 ))}
               </ul>
+            ) : (
+              <p className="empty-panel">暂无图片建议。</p>
+            )}
           </div>
           <div>
             <h3>修改位置</h3>
             <div className="tag-row">
-          {article.changed_sections.map((section) => (
+              {visibleArticle.changed_sections.map((section) => (
                 <span className="tag" key={section}>
                   {section}
                 </span>
               ))}
             </div>
           </div>
-      {article.requires_user_confirmation.length > 0 && (
+          {visibleArticle.requires_user_confirmation.length > 0 && (
             <div>
               <h3>需要人工确认</h3>
               <ul>
-            {article.requires_user_confirmation.map((item) => (
+                {visibleArticle.requires_user_confirmation.map((item) => (
                   <li key={item}>{item}</li>
                 ))}
               </ul>
             </div>
           )}
+        </>
+      )}
+
+      {article && (
         <div className="export-row">
           {exportFiles.map((fileName) =>
             jobId ? (
@@ -76,6 +145,7 @@ export function OptimizedPreview({
             ),
           )}
         </div>
+      )}
     </section>
   );
 }