优化脚本

2026-08-25 16:40:22 +08:00
parent e2ec2d14af
commit df6784b90c
22 changed files with 893 additions and 156 deletions
@@ -5,10 +5,12 @@ import {
  FolderKanban,
  Replace,
  ScanSearch,
+  Trash2,
  WandSparkles,
 } from "lucide-react";
 import type { BillingSummary, Product, Project } from "../types";
 import type { NavigateFn, Page } from "./route-config";
+import { ConfirmModal } from "../components/overlays";

 type DashTab = "all" | "wip" | "done";
 type EntryTone = "primary" | "subtle";
@@ -100,6 +102,7 @@ export function Dashboard({
  userName,
  loading: _loading = false,
  navigate,
+  onDelete,
 }: {
  products: Product[];
  projects: Project[];
@@ -109,8 +112,10 @@ export function Dashboard({
  userName?: string;
  loading?: boolean;
  navigate: NavigateFn;
+  onDelete: (projectId: string) => Promise<unknown> | void;
 }) {
  const [tab, setTab] = useState<DashTab>("all");
+  const [deleteTarget, setDeleteTarget] = useState<Project | null>(null);
  const projCount = projectTotal ?? projects.length;
  const completed = projects.filter((project) => project.status === "completed").length;
  const running = projects.filter((project) => !["completed", "failed"].includes(project.status)).length;
@@ -253,13 +258,24 @@ export function Dashboard({
                      ))}
                    </div>
                  </div>
-                  <button
-                    className="continue-button"
-                    type="button"
-                    onClick={(event) => { event.stopPropagation(); openProject(); }}
-                  >
-                    {project.status === "completed" ? "查看" : "继续"}
-                  </button>
+                  <div className="project-actions">
+                    <button
+                      className="project-del"
+                      type="button"
+                      title="删除项目"
+                      aria-label={`删除「${project.name}」`}
+                      onClick={(event) => { event.stopPropagation(); setDeleteTarget(project); }}
+                    >
+                      <Trash2 />
+                    </button>
+                    <button
+                      className="continue-button"
+                      type="button"
+                      onClick={(event) => { event.stopPropagation(); openProject(); }}
+                    >
+                      {project.status === "completed" ? "查看" : "继续"}
+                    </button>
+                  </div>
                </article>
              );
            })}
@@ -267,6 +283,20 @@ export function Dashboard({
        )}
      </section>
      </div>
+
+      <ConfirmModal
+        open={Boolean(deleteTarget)}
+        title="删除项目"
+        icon={<Trash2 size={16} />}
+        detail={`确定删除「${deleteTarget?.name || ""}」?将移至「垃圾桶」,可在垃圾桶里恢复或彻底删除。`}
+        confirmText="删除"
+        onCancel={() => setDeleteTarget(null)}
+        onConfirm={async () => {
+          if (!deleteTarget) return;
+          await onDelete(deleteTarget.id);
+          setDeleteTarget(null);
+        }}
+      />
    </section>
  );
 }
@@ -440,20 +440,7 @@ export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled, onBack }
    }
  }, [refs, mode, model, ratio, resolution, duration, seed, doSubmit, notify]);

-  const handleRetry = useCallback((task: FreeVideoTask) => {
-    void doSubmit({
-      prompt: task.prompt,
-      mode: task.mode,
-      model: task.model,
-      aspect_ratio: task.aspect_ratio,
-      resolution: task.resolution,
-      duration: task.duration,
-      seed: task.seed,
-      references: task.references
-    });
-  }, [doSubmit]);
-
-  // 再次生成:参数 + 素材 + 提示词(含 mention chip)全部回填输入条
+  // 失败重试 / 再次生成:不立刻再跑同一条任务,把提示词+参数+素材回填到底部操作区,用户改完再点生成
  const handleReuse = useCallback((task: FreeVideoTask) => {
    setDetailId(null);
    setMode(task.mode);
@@ -463,7 +450,11 @@ export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled, onBack }
    setDuration(task.duration);
    setSeed(task.seed ?? -1);
    setRefs(task.references.map((r) => ({ ...r, key: nextRefKey() })));
-    window.setTimeout(() => promptRef.current?.setContent(task.prompt, task.references), 0);
+    window.setTimeout(() => {
+      promptRef.current?.setContent(task.prompt, task.references);
+      promptRef.current?.focus();
+      document.querySelector(".fc-composer")?.scrollIntoView({ behavior: "smooth", block: "end" });
+    }, 0);
    notify("info", "已回填参数,可修改后重新生成");
  }, [notify]);

@@ -665,7 +656,7 @@ export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled, onBack }
                    task={task}
                    progress={progress[task.id] || 3}
                    onOpen={() => setDetailId(task.id)}
-                    onRetry={() => handleRetry(task)}
+                    onRetry={() => handleReuse(task)}
                    onToggleFavorite={() => handleFavorite(task)}
                    onDelete={() => setDeleteTarget(task)}
                    onDownload={() => void handleDownload(task)}
@@ -8,7 +8,8 @@ import { isHiddenFromScriptPicker, publicModelDisplayName } from "../model-displ
 import { isPublicGenerationError, presentGenerationError } from "../generation-error";
 import type { Notice, Page } from "./route-config";
 import { stageOrder, statusPill } from "./stage-config";
-import { MediaLightbox, TeamModal, useBodyScrollLock } from "../components/overlays";
+import { ConfirmModal, MediaLightbox, TeamModal, useBodyScrollLock } from "../components/overlays";
+import { DEFAULT_BILLING_RATES, estimateCost } from "../components/free-create/constants";
 import { ModelLibrary } from "../components/model-library";
 import { ReviewBadge, type ReviewStatus } from "../components/review-badge";
 import {
@@ -517,6 +518,7 @@ export function PipelinePage(props: {
  onNotify?: (type: "success" | "error", text: string) => void;
  scriptModelName: string;
  textModels?: ModelConfig[];
+  videoModels?: ModelConfig[];
  onAdoptScript: (scriptId: string) => void | Promise<unknown>;
  onUpdateShot: (payload: { segment_id: string; narration?: string; visual_prompt?: string; duration_seconds?: number }) => Promise<unknown>;
  onAddShot: (afterSegmentId: string, content?: { narration?: string; visual_prompt?: string }) => Promise<unknown>;
@@ -560,17 +562,22 @@ export function PipelinePage(props: {
 }) {
  const {
    project, loading, navigate, products, assets, onNotify,
-    textModels, onAdoptScript, onUpdateShot, onAddShot, onDeleteShot, onRerunShot, onSaveProjectMeta, onAdoptVideoVersion, onGenerateVoiceover,
+    textModels, videoModels, onAdoptScript, onUpdateShot, onAddShot, onDeleteShot, onRerunShot, onSaveProjectMeta, onAdoptVideoVersion, onGenerateVoiceover,
    onGenerateBaseAsset, onAdoptBaseAsset, onSetAdoptState, onDeleteBaseAsset, onAttachBaseAsset, onGenerateModel, onUploadModel, onGenerateTriview, onRenameModel, onGenerateStoryboard, onRerunStoryboardShot, onAdoptStoryboardShotVersion, onPollStoryboardQuiet, onSkipStoryboard,
    onSubmitVideo, onSubmitAllVideos, onPollVideosQuiet, exportResult, onRefreshExport, onRefreshProject, onRefreshBilling,
    onUploadVideoSegment, onUploadBgm, onSaveTimeline, onSubmitExport
  } = props;

  // ── 团队价格系数(差异化调价):页面各处「N 积分/次」文案按团队系数动态显示,拉不到按标准价 1 ──
-  const [priceMultiplier, setPriceMultiplier] = useState(1);
+  const [billingRates, setBillingRates] = useState(DEFAULT_BILLING_RATES);
  useEffect(() => {
-    void api.billingConfig().then((cfg) => setPriceMultiplier(Number(cfg.team_price_multiplier) || 1)).catch(() => undefined);
+    void api.billingConfig().then((cfg) => setBillingRates({
+      margin: Number(cfg.video_margin_multiplier) || DEFAULT_BILLING_RATES.margin,
+      rate: Number(cfg.points_per_yuan) || DEFAULT_BILLING_RATES.rate,
+      multiplier: Number(cfg.team_price_multiplier) || 1,
+    })).catch(() => undefined);
  }, []);
+  const priceMultiplier = billingRates.multiplier;
  // 与后端 apply_team_price 逐字对齐:挂牌整数积分 × 系数 → HALF_UP 最低 1(toFixed(6) 只吸浮点噪声)
  const pts = (base: number) => (priceMultiplier === 1 ? base : Math.max(1, Math.round(Number((base * priceMultiplier).toFixed(6)))));

@@ -827,10 +834,13 @@ export function PipelinePage(props: {
  async function genBaseAsset(kind: "product" | "person" | "scene", prompt: string, label: string | undefined, busyKey: string, referenceAssetId?: string): Promise<GenResult> {
    if (genBusy.has(busyKey)) return null; // 同一按钮防连点(不同按钮可并发)
    addBusy(busyKey);
+    const triKey = kind === "person" ? `${busyKey}:tri` : "";
+    if (triKey) addBusy(triKey);
    try {
      return (await onGenerateBaseAsset(kind, prompt, label, referenceAssetId)) as GenResult;
    } finally {
      delBusy(busyKey);
+      if (triKey) delBusy(triKey);
    }
  }
  // 据某一版立绘资产生成它配套的三视图(loading 用 busyKey)
@@ -843,7 +853,7 @@ export function PipelinePage(props: {
      delBusy(busyKey);
    }
  }
-  // 流程步骤4 · 生成人物立绘；三视图只在角色详情里手动生成。
+  // 流程步骤4 · 生成人物立绘(App 层自动接力三视图)
  async function genPersonPortrait(prompt: string, label: string | undefined, busyKey: string) {
    return await genBaseAsset("person", prompt, label, busyKey);
  }
@@ -855,16 +865,16 @@ export function PipelinePage(props: {
  const extractPollRef = useRef(0);       // 提取轮询定时器句柄
  const extractStartedRef = useRef(false); // 是否已有一条轮询在跑(防认领与手点双轮询)
  type ExtractEntity = { id: string; type: "character" | "scene"; name: string; visual_prompt: string; ref_index: number };
-  // 提取完成后(mode≠only)按返回实体循环出参考图(立绘/场景图；三视图手动生成)
+  // 提取完成后(mode≠only)按返回实体循环出参考图(角色=立绘+三视图,场景=场景图)
  async function runGenForEntities(entities: ExtractEntity[], mode: "gen" | "full") {
    setExtractMsg("已认出角色 / 场景,正在生成参考图…");
    for (const e of entities) {
      const bk = `seed:${e.type === "character" ? "person" : "scene"}:${e.name}`;
      if (e.type === "character") {
-        if (mode === "full") await genPersonPortrait(e.visual_prompt, e.name, bk); // 立绘；三视图手动生成
-        else await genBaseAsset("person", e.visual_prompt, e.name, bk);            // 立绘
+        if (mode === "full") await genPersonPortrait(e.visual_prompt, e.name, bk);
+        else await genBaseAsset("person", e.visual_prompt, e.name, bk);
      } else {
-        await genBaseAsset("scene", e.visual_prompt, e.name, bk);                  // 场景图
+        await genBaseAsset("scene", e.visual_prompt, e.name, bk);
      }
    }
    await onRefreshProject();
@@ -1121,6 +1131,27 @@ export function PipelinePage(props: {
  const segments = [...(project.video_segments ?? [])].sort((a, b) => a.sort_order - b.sort_order);
  const segDone = segments.filter((s) => ["succeeded", "completed", "done"].includes(s.status)).length;
  const segTotalSec = segments.reduce((sum, s) => sum + (s.target_duration_seconds || 0), 0);
+  const videoAnyStarted = segments.some((s) => ["running", "succeeded", "queued", "completed", "done"].includes(s.status));
+  const [chargeConfirm, setChargeConfirm] = useState<"storyboard" | "video" | null>(null);
+  const sbChargeShots = shots.length || sbExpectedShots;
+  const sbChargePoints = sbChargeShots * pts(20);
+  const defaultVideoModel = (videoModels ?? []).find((m) => m.status === "active") || (videoModels ?? [])[0];
+  const videoChargeDurations = segments.length
+    ? segments.map((s) => s.target_duration_seconds || 15)
+    : shots.map((s) => shotSeconds(s));
+  const videoChargeShots = videoChargeDurations.length;
+  const videoChargePoints = videoChargeDurations.reduce(
+    (sum, duration) => sum + estimateCost(defaultVideoModel, { ratio: "9:16", resolution: "720p", duration, refs: [] }, billingRates).points,
+    0,
+  );
+  const sbNextLabel = sbAnyImage || sbAnyGenerating
+    ? "进入故事板"
+    : `生成故事板 · ${sbChargeShots > 0 ? `${sbChargePoints} 积分` : `${pts(20)} 积分/镜`}`;
+  const videoNextLabel = videoAnyStarted
+    ? "进入视频"
+    : videoChargePoints > 0
+      ? `生成视频 · ${videoChargePoints} 积分`
+      : "生成视频";
  // Stage 4 · 视频详情弹窗:选中段 + 查看的版本 + 可编辑的重跑提示词
  const [vdSegId, setVdSegId] = useState<string | null>(null);
  const [vdVerId, setVdVerId] = useState<string | null>(null);
@@ -1897,6 +1928,10 @@ export function PipelinePage(props: {
  // 整张风格提示词:项目级(原 StoryboardVersion.prompt 的去处),重跑时生效
  const sbSavedPrompt = (project.metadata as Record<string, unknown> | undefined)?.storyboard_prompt as string | undefined;
  const [storyboardPrompt, setStoryboardPrompt] = useState(sbSavedPrompt || SB_PROMPT_DEFAULT);
+  const startStoryboardGeneration = () => {
+    setSbGenerating(true);
+    void Promise.resolve(onGenerateStoryboard(storyboardPrompt || SB_PROMPT_DEFAULT)).finally(() => setSbGenerating(false));
+  };
  const videoPrompt = "竖屏电商短视频,镜头稳定,商品露出清晰,节奏有转化感";
  const canExport = project.video_segments.length > 0 && project.video_segments.every((segment) => Boolean(segment.adopted_version));

@@ -3649,8 +3684,19 @@ export function PipelinePage(props: {
                  <span><Info />确认后将使用以上资产创建故事板，后续仍可替换。提取 {pts(10)} / 人物 {pts(20)} / 场景 {pts(20)} · 失败不扣</span>
                  <div>
                    <button className="pl-ghost" type="button" onClick={() => goStage(1)}><ArrowLeft /><span>返回脚本</span></button>
-                    <button className="pl-next" type="button" onClick={() => guardGen(shots, () => goStage(3))}>
-                      <span>确认资产，进入故事板</span>
+                    <button
+                      className="pl-next"
+                      type="button"
+                      disabled={sbGenerating && !sbAnyImage && !sbAnyGenerating}
+                      onClick={() => {
+                        if (sbAnyImage || sbAnyGenerating) {
+                          goStage(3);
+                          return;
+                        }
+                        guardGen(shots, () => setChargeConfirm("storyboard"));
+                      }}
+                    >
+                      <span>{sbNextLabel}</span>
                      <ArrowRight />
                    </button>
                  </div>
@@ -3757,10 +3803,6 @@ export function PipelinePage(props: {
                      onChange={(v) => setStoryboardPrompt(v.trim())}
                    />
                    <div className="sb-stage-actions">
-                      <button className="pill-cta heat" type="button" id="sb-rerun-btn" disabled={sbAnyGenerating} onClick={() => guardGen(shots, () => { setSbGenerating(true); void Promise.resolve(onGenerateStoryboard(storyboardPrompt || SB_PROMPT_DEFAULT)).finally(() => setSbGenerating(false)); })}>
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12a8 8 0 0 1 14-5.5L21 9" /><path d="M21 4v5h-5" /><path d="M20 12a8 8 0 0 1-14 5.5L3 15" /><path d="M3 20v-5h5" /></svg>
-                        {sbAnyImage ? "全部重跑" : "开始生成故事板"}
-                      </button>
                      {sbActiveShot && (
                        <button className="btn btn-sm" type="button" disabled={activeBusy} title="只重出当前这一场(新增一条该场历史版本)" onClick={() => guardGen(shots.filter((s) => s.sort_order === sbActiveShot.sort_order), () => rerunStoryboardShotOptimistic(sbActiveShot.id))}>
                          {activeBusy ? <><span className="spinner btn-spin" aria-hidden="true" />生成中…</> : `↻ 重跑本场`}
@@ -3819,10 +3861,25 @@ export function PipelinePage(props: {
                          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 9v4M12 17h.01" /><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /></svg>
                          故事板还没出齐
                        </span>
-                        <span className="pop-body">请先点上方 <b>开始生成故事板</b>,每场都出片后再确认进入视频生成。</span>
+                        <span className="pop-body">请先等每场故事板都出片,再点 <b>生成视频</b>。</span>
                      </div>
                    )}
-                    <button className="btn btn-primary btn-lg" type="button" disabled={loading} onClick={() => { if (!sbAllDone) { setSbConfirmHint(true); return; } goStage(4); }}>确认故事板,开始生成视频 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7" /></svg></button>
+                    <button
+                      className="btn btn-primary btn-lg"
+                      type="button"
+                      disabled={loading}
+                      onClick={() => {
+                        if (!sbAllDone) { setSbConfirmHint(true); return; }
+                        if (videoAnyStarted) {
+                          goStage(4);
+                          return;
+                        }
+                        guardVideoGen(shots, null, () => setChargeConfirm("video"));
+                      }}
+                    >
+                      {videoNextLabel}
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
+                    </button>
                  </div>
                </div>
              </div>
@@ -3832,7 +3889,6 @@ export function PipelinePage(props: {
          {/* ============= STAGE 4 · 视频(video_segments,adopted_asset 缩略 + 状态 + 时长)============= */}
          {viewStage === 4 && (() => {
            const pct = segments.length ? Math.round((segDone / segments.length) * 100) : 0;
-            const anyStarted = segments.some((s) => ["running", "succeeded", "queued"].includes(s.status));
            const segSeconds = segments.map((s) => s.target_duration_seconds).filter((n) => n > 0);
            const segMin = segSeconds.length ? Math.min(...segSeconds) : 0;
            const segMax = segSeconds.length ? Math.max(...segSeconds) : 0;
@@ -3864,7 +3920,6 @@ export function PipelinePage(props: {
                </div>
                <div className="bar-wrap"><span style={{ width: `${pct}%` }}></span></div>
                <span className="muted mono" style={{ fontSize: "12px" }}>{pct}%</span>
-                <button className="btn btn-sm btn-primary" type="button" disabled={loading || !segments.length || activeVideoCount > 0} onClick={() => guardVideoGen(shots, null, submitAllVideosOptimistic)}>{loading ? <><span className="spinner btn-spin" aria-hidden="true" />提交中…</> : anyStarted ? "↻ 全部重跑" : "▶ 开始生成视频"}</button>
                {/* 导出全部:把所有已完成片段打包成 zip 一次性下载 */}
                <button className="btn btn-sm" type="button" disabled={exporting || segDone === 0} title={exportErr || "把所有已完成视频片段打包下载"} onClick={() => void exportAllVideos()}>
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "4px" }}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><path d="M7 10l5 5 5-5" /><path d="M12 15V3" /></svg>
@@ -4460,7 +4515,10 @@ export function PipelinePage(props: {
            )}
            <div className="rg-actions">
              <button type="button" className="btn btn-primary" onClick={() => { setRefGate(null); goStage(2); }}>去基础资产页补齐</button>
-              <button type="button" className="btn btn-ghost rg-force" onClick={() => { const go = refGate.proceed; setRefGate(null); go(); }}>仍要继续 <span className="rg-warn">可能跟角色对不上</span></button>
+              <button type="button" className="btn btn-ghost rg-force" onClick={() => { const go = refGate.proceed; setRefGate(null); go(); }}>
+                <span>仍要继续</span>
+                <span className="rg-warn">可能跟角色对不上</span>
+              </button>
            </div>
          </div>
        </div>,
@@ -4549,7 +4607,7 @@ export function PipelinePage(props: {
        const busyTri = isBusy(`addet-tri:${entity.key}`) || isBusy(`${pBK}:tri`);
        async function regenPortrait() {
          const prompt = adPrompt.trim() || grp.prompt || `${entity!.name},9:16 竖屏`;
-          // 重跑立绘 → 只追加新立绘候选并采用;三视图改手动(用「生成三视图」按钮),不再链式自动出。
+          // 重跑立绘 → 追加新立绘并自动接力该版三视图。
          // 角色重跑:若该角色已有当前立绘,传它作参考图 → 后端走 image_edit 参考立绘+提示词,保持同一人物一致(不重抽随机人)。
          const ref = isPerson && viewPortraitAsset ? viewPortraitAsset : undefined;
          await genBaseAsset(isPerson ? "person" : "scene", prompt, entity!.name, pBK, ref);
@@ -4788,6 +4846,42 @@ export function PipelinePage(props: {
          </p>
        </div>
      </TeamModal>
+      <ConfirmModal
+        open={chargeConfirm !== null}
+        title={chargeConfirm === "video" ? "确认生成视频" : "确认生成故事板"}
+        subtitle="// 失败不扣 · 成功后结算"
+        icon={<Sparkles size={16} />}
+        detail={chargeConfirm === "video"
+          ? (
+            <>
+              将按故事板生成 <b>{videoChargeShots || "多"} 段</b>视频，预估扣除 <b>{videoChargePoints > 0 ? `${videoChargePoints} 积分` : "按实际用量结算"}</b>
+              {videoChargeShots > 0 && videoChargePoints > 0 ? `（约 ${Math.round(videoChargePoints / videoChargeShots)} 积分/段）` : ""}。
+              确认后进入视频页并开始生成。
+            </>
+          )
+          : (
+            <>
+              将按脚本生成 <b>{sbChargeShots || "多"} 场</b>分镜图，预估扣除 <b>{sbChargePoints > 0 ? `${sbChargePoints} 积分` : "按实际用量结算"}</b>
+              {sbChargeShots > 0 ? `（${pts(20)} 积分/镜 × ${sbChargeShots} 场）` : ""}。
+              确认后进入故事板并开始生成。
+            </>
+          )}
+        confirmText={chargeConfirm === "video"
+          ? (videoChargePoints > 0 ? `确认生成 · ${videoChargePoints} 积分` : "确认生成")
+          : (sbChargePoints > 0 ? `确认生成 · ${sbChargePoints} 积分` : "确认生成")}
+        onCancel={() => setChargeConfirm(null)}
+        onConfirm={() => {
+          const kind = chargeConfirm;
+          setChargeConfirm(null);
+          if (kind === "storyboard") {
+            goStage(3);
+            startStoryboardGeneration();
+          } else if (kind === "video") {
+            goStage(4);
+            submitAllVideosOptimistic();
+          }
+        }}
+      />
    </section>
  );
 }
@@ -2,17 +2,17 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import {
  AlertCircle,
  ArrowLeft,
+  Boxes,
  Clapperboard,
  Download,
  ImagePlus,
+  LayoutPanelTop,
  RefreshCw,
-  ScanSearch,
  ScrollText,
  SlidersHorizontal,
  Sparkles,
  Play,
  Upload,
-  UsersRound,
  WandSparkles,
  X,
  Columns2,
@@ -31,10 +31,10 @@ import type { NavigateFn } from "./route-config";

 const QUICK_JOB_KEY = "airshelf:quick-create-job";
 const PROGRESS_STEPS = [
-  { label: "识别商品与卖点", icon: ScanSearch },
-  { label: "推荐脚本方向", icon: ScrollText },
-  { label: "匹配模特与场景", icon: UsersRound },
-  { label: "生成故事板与视频", icon: Clapperboard },
+  { label: "脚本", icon: ScrollText },
+  { label: "资产", icon: Boxes },
+  { label: "故事板", icon: LayoutPanelTop },
+  { label: "视频", icon: Clapperboard },
 ];
 const QUICK_RATIOS = [
  { value: "9:16", label: "9:16 竖屏" },
@@ -70,6 +70,14 @@ function historyTitle(item: QuickCreateJob) {
  return (item.title || item.product_name || "极速成片").replace(/ · 极速成片$/, "");
 }

+function historyBadge(item: QuickCreateJob) {
+  if (item.status === "cancelled") return "已取消";
+  if (item.status === "succeeded" || item.result?.video_url || item.result?.video_segments?.some((clip) => clip.video_url)) {
+    return "已完成";
+  }
+  return "未完成";
+}
+
 function savedJobId() {
  try {
    return localStorage.getItem(QUICK_JOB_KEY) || "";
@@ -298,6 +306,33 @@ export function QuickCreatePage({
    setImages([]);
  }

+  async function retryGeneration() {
+    if (job?.id && job.status === "failed") {
+      setSubmitting(true);
+      setServiceUnavailable(false);
+      setUnavailableMessage("");
+      cancelRequestedRef.current = false;
+      try {
+        const next = await api.retryQuickCreate(job.id);
+        setJob(next);
+        setJobId(next.id);
+        try {
+          localStorage.setItem(QUICK_JOB_KEY, next.id);
+        } catch {
+          /* ignore */
+        }
+        onNotify?.("success", "已从上次进度继续生成");
+        onProjectCreated?.();
+      } catch (error) {
+        onNotify?.("error", error instanceof Error ? error.message : "继续生成失败");
+      } finally {
+        setSubmitting(false);
+      }
+      return;
+    }
+    await startGeneration();
+  }
+
  async function startGeneration() {
    if (!name.trim() || (!images.length && !savedImages.length)) {
      onNotify?.("info", "请先填写商品名称并上传商品图片");
@@ -401,11 +436,11 @@ export function QuickCreatePage({
  const isGenerating = submitting || job?.status === "queued" || job?.status === "running";
  const isComplete = job?.status === "succeeded";
  const isCancelled = job?.status === "cancelled";
-  const isFailed = job?.status === "failed" || isCancelled || serviceUnavailable;
+  const isFailed = !isGenerating && (job?.status === "failed" || isCancelled || serviceUnavailable);
  const displayUrls = [...savedImages.map((image) => image.url), ...imagePreviews];
  const imageCount = savedImages.length + images.length;
  const canRetry = Boolean(name.trim() && imageCount && selectedVideoModel);
-  const activePhase = submitting ? 0 : Math.max(0, Math.min(3, job?.phase_index ?? 0));
+  const activePhase = submitting ? 0 : Math.max(0, Math.min(4, job?.phase_index ?? 0));
  const result = job?.result;
  const videoClips = result?.video_segments?.length
    ? result.video_segments
@@ -434,7 +469,6 @@ export function QuickCreatePage({
          <button type="button" className="image-back-button" onClick={onBack} aria-label={backLabel}><ArrowLeft /></button>
          <div><h1>极速成片</h1></div>
        </div>
-        <div className="project-builder-status"><strong>AI 自动编排</strong><span>· 无需逐步配置</span></div>
      </header>

      <div className={shellClass} id="quickCreateShell">
@@ -534,7 +568,7 @@ export function QuickCreatePage({
              {PROGRESS_STEPS.map((step, index) => {
                const Icon = step.icon;
                const done = index < activePhase;
-                const active = isGenerating && index === activePhase;
+                const active = isGenerating && index === activePhase && activePhase < 4;
                return <div key={step.label} className={`quick-progress-node${active ? " active" : ""}${done ? " done" : ""}`}><span className="quick-progress-dot"><Icon /></span><strong>{step.label}</strong></div>;
              })}
            </div>
@@ -575,10 +609,10 @@ export function QuickCreatePage({
          <div className="quick-state quick-state-failed">
            <span className="quick-failed-icon"><AlertCircle /></span>
            <h2>{serviceUnavailable ? "极速成片暂不可用" : isCancelled ? "已取消本次生成" : "本次生成未完成"}</h2>
-            <p>{serviceUnavailable ? (unavailableMessage || "后台生成服务未就绪，请确认 Celery worker 已启动后再试。") : job?.error_message || "生成过程中遇到问题，可以重试或重新开始。"}</p>
+            <p>{serviceUnavailable ? (unavailableMessage || "后台生成服务未就绪，请确认 Celery worker 已启动后再试。") : job?.error_message || "生成还没走完。点重试会从上次进度继续，已生成的故事板不会重做。"}</p>
            <div className="quick-failed-actions">
              {canRetry && !serviceUnavailable ? (
-                <button type="button" className="primary-action" onClick={() => void startGeneration()}><RefreshCw />重试</button>
+                <button type="button" className="primary-action" onClick={() => void retryGeneration()}><RefreshCw />重试</button>
              ) : null}
              <button type="button" className={canRetry && !serviceUnavailable ? "secondary-action" : "primary-action"} onClick={resetResult}>
                <RefreshCw />重新开始
@@ -605,6 +639,7 @@ export function QuickCreatePage({
              const videoUrl = item.result?.video_url || item.result?.video_segments?.[0]?.video_url || "";
              const duration = item.result?.duration_seconds || item.settings?.total_duration || 15;
              const scenes = item.result?.video_segments?.length || Math.max(1, Math.round(duration / 15));
+              const badge = historyBadge(item);
              return (
                <article key={item.id} className="quick-history-card">
                  <button
@@ -617,7 +652,7 @@ export function QuickCreatePage({
                    <small>{formatClock(duration)}</small>
                  </button>
                  <div className="quick-history-copy">
-                    <span className="quick-history-badge">已完成</span>
+                    <span className={`quick-history-badge${badge === "已完成" ? "" : " is-wait"}`}>{badge}</span>
                    <h3>{historyTitle(item)}</h3>
                    <p>极速成片 · {scenes}场 · {item.result?.aspect_ratio || item.settings?.aspect_ratio || "9:16"} · {(item.result?.resolution || item.settings?.resolution || "720p").toUpperCase()} · {item.result?.video_model || item.settings?.video_model_label || "智能模型"}</p>
                  </div>