添加视频复刻和优化脚本旁白

2026-08-24 10:48:01 +08:00
parent 368586d33e
commit 2f5b7304b0
33 changed files with 1172 additions and 109 deletions
@@ -36,7 +36,7 @@ const CREATE_GROUPS: Array<{
    label: "从参考视频开始",
    hint: "复用成熟视频的镜头表达与节奏",
    cards: [
-      { title: "视频复刻", desc: "拆解参考视频并提炼可编辑提示词", tone: "subtle", page: "freeCreate", icon: "scan" },
+      { title: "视频复刻", desc: "拆解参考视频并提炼可编辑提示词", tone: "subtle", page: "videoRemix", icon: "scan" },
      { title: "商品替换", desc: "保留原片表达，替换为自己的商品", tone: "subtle", page: "freeCreate", icon: "replace" },
    ],
  },
@@ -27,10 +27,47 @@ import { PlatformLibraryModal } from "../components/free-create/platform-library
 import type { PromptInputHandle } from "../components/free-create/prompt-input";
 import { SystemLoading } from "../components/loading";
 import { ConfirmModal } from "../components/overlays";
+import { REMIX_PROMPT_KEY } from "./video-remix";

 const PAGE_SIZE = 20;
 const PROGRESS_KEY = "fc-progress";

+type FeedFilter = "all" | "inflight" | "succeeded" | "failed";
+
+const FEED_FILTERS: Array<{ key: FeedFilter; label: string }> = [
+  { key: "all", label: "全部" },
+  { key: "inflight", label: "生成中" },
+  { key: "succeeded", label: "已完成" },
+  { key: "failed", label: "失败" }
+];
+
+const GROUP_LABEL: Record<"today" | "yesterday" | "earlier", string> = {
+  today: "今天",
+  yesterday: "昨天",
+  earlier: "更早"
+};
+
+function chinaDay(iso: string | null) {
+  if (!iso) return "";
+  return new Intl.DateTimeFormat("en-CA", { timeZone: "Asia/Shanghai", year: "numeric", month: "2-digit", day: "2-digit" }).format(new Date(iso));
+}
+
+function dayBucket(iso: string | null): "today" | "yesterday" | "earlier" {
+  const day = chinaDay(iso);
+  if (!day) return "earlier";
+  const today = chinaDay(new Date().toISOString());
+  if (day === today) return "today";
+  const yesterday = chinaDay(new Date(Date.now() - 86400000).toISOString());
+  return day === yesterday ? "yesterday" : "earlier";
+}
+
+function matchesFeedFilter(task: FreeVideoTask, filter: FeedFilter) {
+  if (filter === "all") return true;
+  if (filter === "inflight") return isInFlight(task.status);
+  if (filter === "succeeded") return task.status === "succeeded";
+  return task.status === "failed" || task.status === "cancelled";
+}
+
 function loadProgress(): Record<string, number> {
  try {
    return JSON.parse(sessionStorage.getItem(PROGRESS_KEY) || "{}") as Record<string, number>;
@@ -97,12 +134,21 @@ export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled, onBack }
  const [submitting, setSubmitting] = useState(false);
  const promptRef = useRef<PromptInputHandle | null>(null);

+  useEffect(() => {
+    const draft = sessionStorage.getItem(REMIX_PROMPT_KEY);
+    if (!draft) return;
+    sessionStorage.removeItem(REMIX_PROMPT_KEY);
+    window.setTimeout(() => promptRef.current?.setContent(draft, []), 0);
+    notify("info", "已填入复刻提示词，可改完再生成");
+  }, [notify]);
+
  // —— 弹窗 ——
  const [detailId, setDetailId] = useState<string | null>(null);
  const [libraryOpen, setLibraryOpen] = useState(false);
  const [platformOpen, setPlatformOpen] = useState(false);
  const [libraryTargetRole, setLibraryTargetRole] = useState<"first_frame" | "last_frame" | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<FreeVideoTask | null>(null);
+  const [feedFilter, setFeedFilter] = useState<FeedFilter>("all");

  // —— 轮询/进度 ——
  const pollTimersRef = useRef(new Map<string, number>());
@@ -522,6 +568,26 @@ export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled, onBack }
    setRefs([]);
  }, []);

+  const filterCounts = useMemo(() => ({
+    all: tasks.length,
+    inflight: tasks.filter((t) => isInFlight(t.status)).length,
+    succeeded: tasks.filter((t) => t.status === "succeeded").length,
+    failed: tasks.filter((t) => t.status === "failed" || t.status === "cancelled").length
+  }), [tasks]);
+
+  const feedGroups = useMemo(() => {
+    const visible = tasks.filter((t) => matchesFeedFilter(t, feedFilter));
+    const groups: Array<{ key: "today" | "yesterday" | "earlier"; items: FreeVideoTask[] }> = [
+      { key: "today", items: [] },
+      { key: "yesterday", items: [] },
+      { key: "earlier", items: [] }
+    ];
+    visible.forEach((task) => {
+      groups.find((g) => g.key === dayBucket(task.created_at))?.items.push(task);
+    });
+    return groups.filter((g) => g.items.length > 0);
+  }, [tasks, feedFilter]);
+
  // 详情弹窗的上一条/下一条(只在已完成的任务间切换)
  const doneTasks = tasks.filter((t) => t.status === "succeeded" && t.video_url);
  const detailTask = detailId ? tasks.find((t) => t.id === detailId) || null : null;
@@ -554,6 +620,22 @@ export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled, onBack }
        </div>
      </header>

+      {tasks.length > 0 && (
+        <div className="fc-feedbar">
+          {FEED_FILTERS.map((item) => (
+            <button
+              key={item.key}
+              type="button"
+              className={`fc-filter${feedFilter === item.key ? " active" : ""}`}
+              onClick={() => setFeedFilter(item.key)}
+            >
+              {item.label}
+              <span>{filterCounts[item.key]}</span>
+            </button>
+          ))}
+        </div>
+      )}
+
      <div className="fc-stage" ref={stageRef}>
        {loading ? (
          <SystemLoading title="正在加载作品" description="正在同步最新数据，请稍候。" icon="film" />
@@ -563,21 +645,35 @@ export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled, onBack }
            <strong>准备生成新视频</strong>
            <p>在下方输入提示词，或从素材库引用参考素材</p>
          </div>
-        ) : (
-          <div className="fc-feed">
-            {tasks.map((task) => (
-              <GenerationCard
-                key={task.id}
-                task={task}
-                progress={progress[task.id] || 3}
-                onOpen={() => setDetailId(task.id)}
-                onRetry={() => handleRetry(task)}
-                onToggleFavorite={() => handleFavorite(task)}
-                onDelete={() => setDeleteTarget(task)}
-                onDownload={() => void handleDownload(task)}
-              />
-            ))}
+        ) : feedGroups.length === 0 ? (
+          <div className={`fc-empty${hasMore ? " is-soft" : ""}`}>
+            <div className="fc-empty-icon"><Clapperboard /></div>
+            <strong>没有符合条件的视频</strong>
+            <p>{hasMore ? "当前已加载的记录里没有，下滑可继续查找" : "换一个状态筛选，或继续在下方生成新视频"}</p>
          </div>
+        ) : (
+          feedGroups.map((group) => (
+            <section className="fc-group" key={group.key}>
+              <div className="fc-group-h">
+                {GROUP_LABEL[group.key]}
+                <span>{group.items.length}</span>
+              </div>
+              <div className="fc-feed">
+                {group.items.map((task) => (
+                  <GenerationCard
+                    key={task.id}
+                    task={task}
+                    progress={progress[task.id] || 3}
+                    onOpen={() => setDetailId(task.id)}
+                    onRetry={() => handleRetry(task)}
+                    onToggleFavorite={() => handleFavorite(task)}
+                    onDelete={() => setDeleteTarget(task)}
+                    onDownload={() => void handleDownload(task)}
+                  />
+                ))}
+              </div>
+            </section>
+          ))
        )}
        {hasMore && <div ref={sentinelRef} className="fc-sentinel">下滑加载更多</div>}
      </div>
@@ -11,4 +11,5 @@ export { TeamPage } from "./team";
 export { MessagesPage } from "./messages";
 export { AssetFactoryPage, ImageWorkbenchPage, ModelPhotoDemoPage } from "./ai-tools";
 export { FreeCreatePage } from "./free-create";
+export { VideoRemixPage } from "./video-remix";
 export { SettingsPage } from "./settings";
@@ -34,7 +34,7 @@ import {
 import { isLocalLife } from "../product-business";

 // 真实资产缩略图注入:与全站一致用 --mock-media-url(.placeholder.has-mock-media 负责 cover 裁切 + 8px 圆角)
-const mediaStyle = (url: string): CSSProperties => ({ ["--mock-media-url"]: `url(${url})` } as CSSProperties);
+const mediaStyle = (url: string): CSSProperties => ({ ["--mock-media-url"]: `url("${url.replace(/"/g, "")}")` } as CSSProperties);
 // 基础资产组 kind → 中文区块名(期3:视频项目资产趴「人物」→「角色」,可引用模特库的可复用形象)
 const KIND_LABEL: Record<string, string> = { product: "商品", person: "角色", scene: "场景" };
 // 脚本来源 → 「来源」brief pill 文案
@@ -1773,6 +1773,7 @@ export function PipelinePage(props: {
    try {
      const fd = new FormData();
      fd.append("file", file);
+      if (activeScriptModelId) fd.append("model_config_id", activeScriptModelId);
      const digest = await api.extractScriptVideo(project.id, fd);
      const text = digest.text.trim();
      setChatText((prev) => (prev ? `${prev}\n${text}` : text));
@@ -440,7 +440,7 @@ const VIDEO_MAKE: Array<{ title: string; desc: string; page: Page; image: string
 ];
 const VIDEO_TOOLS: Array<{ title: string; desc: string; page: Page; image: string }> = [
  { title: "自由生成", desc: "使用提示词、参考图片与素材库，自由控制画面和生成参数。", page: "freeCreate", image: "/assets/yz/video-free.jpg" },
-  { title: "视频复刻", desc: "上传参考视频，拆解镜头、动作和节奏，生成可编辑复刻提示词。", page: "freeCreate", image: "/assets/yz/video-remix.jpg" },
+  { title: "视频复刻", desc: "上传参考视频，拆解镜头、动作和节奏，生成可编辑复刻提示词。", page: "videoRemix", image: "/assets/yz/video-remix.jpg" },
  { title: "商品替换", desc: "保留参考视频的人物、场景与节奏，将原商品替换为自己的商品。", page: "freeCreate", image: "/assets/yz/video-replace.jpg" },
 ];

@@ -28,6 +28,7 @@ export type Page =
  | "messages"
  | "assetFactory"
  | "freeCreate"
+  | "videoRemix"
  | "imageOptimize"
  | "modelPhoto"
  | "modelPhotoDemoA"
@@ -101,6 +102,7 @@ export const routeLabels: Record<Page, string> = {
  messages: "消息",
  assetFactory: "图片工具",
  freeCreate: "自由创作",
+  videoRemix: "视频复刻",
  imageOptimize: "图片创作",
  modelPhoto: "模特上身图",
  modelPhotoDemoA: "模特图方案 A",
@@ -118,7 +120,7 @@ export function isPage(value: string): value is Page {

 export function parentPage(page: Page): Page {
  if (["productDetail", "productCreateUpload"].includes(page)) return "products";
-  if (["projectWizard", "freeCreate", "pipeline"].includes(page)) return "projects";
+  if (["projectWizard", "freeCreate", "videoRemix", "pipeline"].includes(page)) return "projects";
  if (["imageOptimize", "modelPhoto", "modelPhotoDemoA", "modelPhotoDemoB", "platformCover"].includes(page)) {
    return "assetFactory";
  }
@@ -161,6 +163,7 @@ export function resolveRoute(): ResolvedRoute {
  if (path === "/messages") return { page: "messages", authMode: "login", hash };
  if (path === "/asset-factory") return { page: "assetFactory", authMode: "login", hash };
  if (path === "/free-create") return { page: "freeCreate", authMode: "login", hash };
+  if (path === "/video-remix") return { page: "videoRemix", authMode: "login", hash };
  if (path === "/image-optimize") {
    return { page: "imageOptimize", authMode: "login", productId: search.get("product_id") || undefined, hash };
  }
@@ -204,6 +207,8 @@ export function pathForPage(page: Page, options: NavigateOptions = {}) {
      return "/asset-factory";
    case "freeCreate":
      return "/free-create";
+    case "videoRemix":
+      return "/video-remix";
    case "imageOptimize":
      return options.productId ? `/image-optimize?product_id=${encodeURIComponent(options.productId)}` : "/image-optimize";
    case "modelPhoto":
@@ -0,0 +1,324 @@
+// 视频复刻 · 上传参考视频 → 视频提炼接口 → 可编辑提示词。
+// 拆解跟生成脚本同一套接口口径:模型下拉 + Gemini 3.1 Pro 官转看图。
+import { useEffect, useMemo, useState } from "react";
+import { ArrowLeft, ArrowRight, FileVideo, Save, ScanLine, ScanSearch } from "lucide-react";
+import { api } from "../api";
+import { publicModelDisplayName } from "../model-display";
+import type { ModelConfig } from "../types";
+import type { NavigateFn } from "./route-config";
+
+export const REMIX_PROMPT_KEY = "fc-remix-prompt";
+const REMIX_DRAFT_KEY = "vr-digest-draft";
+
+type RemixDraft = {
+  prompt: string;
+  duration: number;
+  shots: number;
+  rhythm: string;
+  fileName: string;
+  fileSize: number;
+  modelId: string;
+};
+
+function loadDraft(): RemixDraft | null {
+  try {
+    const raw = localStorage.getItem(REMIX_DRAFT_KEY);
+    if (!raw) return null;
+    const draft = JSON.parse(raw) as RemixDraft;
+    if (typeof draft.prompt !== "string" || !draft.prompt.trim()) return null;
+    return draft;
+  } catch {
+    return null;
+  }
+}
+
+function saveDraft(draft: RemixDraft) {
+  try {
+    localStorage.setItem(REMIX_DRAFT_KEY, JSON.stringify(draft));
+    localStorage.setItem(REMIX_PROMPT_KEY, draft.prompt);
+  } catch {
+    /* 隐私模式写满时静默,内存态仍可用 */
+  }
+}
+
+const VIDEO_DIGEST_MAX_BYTES = 200 * 1024 * 1024;
+
+function formatSize(bytes: number) {
+  if (bytes < 1024 * 1024) return `${Math.max(1, Math.round(bytes / 1024))} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function shotCount(text: string, frames: number) {
+  const marks = text.match(/【第\s*\d+\s*镜】/g);
+  return marks?.length || frames || 0;
+}
+
+function rhythmCopy(text: string) {
+  if (/快节奏|紧凑/.test(text)) return "快节奏种草";
+  if (/慢节奏|舒缓/.test(text)) return "慢节奏展示";
+  const form = text.match(/形式[：:]\s*([^\n]+)/);
+  if (form?.[1]) return form[1].trim().slice(0, 12);
+  return "按参考片节奏";
+}
+
+function isGemini31(model: ModelConfig) {
+  const blob = `${model.name} ${model.display_name}`.toLowerCase();
+  return blob.includes("gemini-3.1") || blob.includes("gemini 3.1") || model.name === "gemini-3.1-pro-preview";
+}
+
+function pickDigestModel(models: ModelConfig[]) {
+  const active = models.filter((model) => model.status === "active" && isGemini31(model));
+  return (
+    active.find((model) => /官转/.test(model.display_name))
+    || active.find((model) => model.name === "gemini-3.1-pro-preview")
+    || active[0]
+    || null
+  );
+}
+
+export function VideoRemixPage({ textModels = [], onNotify, onBack, navigate }: {
+  textModels?: ModelConfig[];
+  onNotify: (type: "success" | "error" | "info", text: string) => void;
+  onBack: () => void;
+  navigate: NavigateFn;
+}) {
+  const [file, setFile] = useState<File | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [draft] = useState(loadDraft);
+  const [prompt, setPrompt] = useState(draft?.prompt || "");
+  const [duration, setDuration] = useState(draft?.duration || 0);
+  const [shots, setShots] = useState(draft?.shots || 0);
+  const [rhythm, setRhythm] = useState(draft?.rhythm || "");
+  const [fileName, setFileName] = useState(draft?.fileName || "");
+  const [fileSize, setFileSize] = useState(draft?.fileSize || 0);
+  const [modelId, setModelId] = useState(draft?.modelId || "");
+  const [modelMenuOpen, setModelMenuOpen] = useState(false);
+  const done = prompt.length > 0;
+
+  const digestModels = useMemo(
+    () => textModels.filter((model) => model.status === "active" && isGemini31(model)),
+    [textModels]
+  );
+  const defaultModel = useMemo(() => pickDigestModel(digestModels), [digestModels]);
+  const activeModelId = modelId || defaultModel?.id || "";
+  const activeModel = digestModels.find((model) => model.id === activeModelId) || defaultModel;
+  const activeModelName = publicModelDisplayName(activeModel, "Gemini 3.1 Pro 官转");
+  const estimatedPoints = Math.round(Number(activeModel?.unit_price || 0));
+
+  useEffect(() => {
+    if (!modelMenuOpen) return;
+    const close = (event: MouseEvent) => {
+      if (!(event.target as HTMLElement).closest(".vr-model-pick")) setModelMenuOpen(false);
+    };
+    document.addEventListener("click", close);
+    return () => document.removeEventListener("click", close);
+  }, [modelMenuOpen]);
+
+  useEffect(() => {
+    if (!prompt.trim()) return;
+    saveDraft({
+      prompt,
+      duration,
+      shots,
+      rhythm,
+      fileName: file?.name || fileName,
+      fileSize: file?.size || fileSize,
+      modelId: activeModelId,
+    });
+  }, [prompt, duration, shots, rhythm, file, fileName, fileSize, activeModelId]);
+
+  const pickFile = (next: File | null) => {
+    if (!next) return;
+    if (!/\.(mp4|mov|m4v|webm)$/i.test(next.name)) {
+      onNotify("error", "只支持 mp4 / mov / m4v / webm 四种视频格式");
+      return;
+    }
+    if (next.size > VIDEO_DIGEST_MAX_BYTES) {
+      onNotify("error", "视频不能超过 200MB,请压缩后再传");
+      return;
+    }
+    setFile(next);
+    setFileName(next.name);
+    setFileSize(next.size);
+  };
+
+  const analyze = async () => {
+    if (!file || busy) return;
+    setBusy(true);
+    try {
+      const fd = new FormData();
+      fd.append("file", file);
+      if (activeModelId) fd.append("model_config_id", activeModelId);
+      const digest = await api.extractVideoDigest(fd);
+      const text = digest.text.trim();
+      setPrompt(text);
+      setDuration(digest.duration);
+      setShots(shotCount(text, digest.frames));
+      setRhythm(rhythmCopy(text));
+      setFileName(file.name);
+      setFileSize(file.size);
+      onNotify("success", `已拆出 ${digest.duration} 秒 · 取了 ${digest.frames} 帧,请先逐镜核对`);
+    } catch (error) {
+      onNotify("error", error instanceof Error && error.message ? error.message : "视频拆解失败，请重试");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const savePrompt = async () => {
+    const text = prompt.trim();
+    if (!text) return;
+    sessionStorage.setItem(REMIX_PROMPT_KEY, text);
+    try {
+      await navigator.clipboard.writeText(text);
+      onNotify("success", "提示词已保存，可继续生成或直接粘贴");
+    } catch {
+      onNotify("success", "提示词已保存，可继续生成视频");
+    }
+  };
+
+  const continueGenerate = () => {
+    const text = prompt.trim();
+    if (!text) return;
+    sessionStorage.setItem(REMIX_PROMPT_KEY, text);
+    navigate("freeCreate");
+  };
+
+  return (
+    <div className="vr-page">
+      <div className="vr-inner">
+        <header className="page-head">
+          <div className="vr-title-row">
+            <button type="button" className="btn btn-ghost vr-back" aria-label="返回上一入口页面" onClick={onBack}>
+              <ArrowLeft />
+            </button>
+            <div>
+              <h1>视频复刻</h1>
+              <div className="sub">
+                上传参考视频，拆解镜头、动作、运镜和节奏，生成可编辑提示词
+                <span className="mono">[ /remix ]</span>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        <div className="vr-grid">
+          <section className="vr-panel">
+            <div className="section-h">
+              <h2>上传参考视频</h2>
+              <span className="more">// 视频提炼</span>
+            </div>
+            <p className="vr-lead">建议使用主体清晰、镜头完整的电商短视频。拆解稿会落在右侧，先逐镜改完再去生成。</p>
+            <div className="vr-step">
+              <div className="vr-step-h">
+                <strong>参考视频</strong>
+                <span>MP4 / MOV · 最长 3 分钟 · 200MB</span>
+              </div>
+              <label className={`vr-upload${file ? " has-file" : ""}`}>
+                <input
+                  type="file"
+                  accept="video/mp4,video/quicktime,.mp4,.mov,.m4v,.webm"
+                  hidden
+                  onChange={(event) => {
+                    pickFile(event.target.files?.[0] || null);
+                    event.target.value = "";
+                  }}
+                />
+                <span>
+                  <FileVideo />
+                  <strong>{file?.name || fileName || "点击上传参考视频"}</strong>
+                  <small>
+                    {file
+                      ? `${formatSize(file.size)} · 视频已就绪，可开始拆解`
+                      : fileName
+                        ? `${formatSize(fileSize)} · 上次拆解还在，刷新不会丢。要重拆请再选一次文件`
+                        : "上传后抽帧拆解镜头结构与节奏"}
+                  </small>
+                </span>
+              </label>
+            </div>
+            <div className="vr-actions">
+              <div className="vr-meta">
+                {digestModels.length > 0 ? (
+                  <div className={`chip-wrap vr-model-pick${modelMenuOpen ? " open" : ""}`}>
+                    <button type="button" className="chip" title="选择视频提炼模型" onClick={() => setModelMenuOpen((open) => !open)}>
+                      {activeModelName}
+                      <svg className="caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6" /></svg>
+                    </button>
+                    <div className="chip-menu">
+                      {digestModels.map((model) => (
+                        <div
+                          key={model.id}
+                          className={`mi${model.id === activeModelId ? " selected" : ""}`}
+                          role="menuitemradio"
+                          aria-checked={model.id === activeModelId}
+                          tabIndex={0}
+                          onClick={() => { setModelId(model.id); setModelMenuOpen(false); }}
+                          onKeyDown={(event) => {
+                            if (event.key === "Enter" || event.key === " ") {
+                              event.preventDefault();
+                              setModelId(model.id);
+                              setModelMenuOpen(false);
+                            }
+                          }}
+                        >
+                          {publicModelDisplayName(model)}
+                          <svg className="mi-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                ) : null}
+                <span>{estimatedPoints > 0 ? `视频解析预计消耗 ${estimatedPoints} 积分` : "视频解析按一次文本模型计费"}</span>
+              </div>
+              <button type="button" className="btn btn-primary" disabled={!file || busy} onClick={() => void analyze()}>
+                {busy ? <span className="spinner" aria-hidden="true" /> : <ScanSearch />}
+                <span>{busy ? "正在拆解…" : done ? "重新拆解" : "开始拆解"}</span>
+              </button>
+            </div>
+          </section>
+
+          <aside className={`vr-result${done ? " has-result" : ""}`}>
+            {!done ? (
+              <div className="vr-placeholder">
+                <div>
+                  <ScanLine />
+                  <strong>{busy ? "正在抽帧拆解这条视频" : "等待视频解析"}</strong>
+                  <span>{busy ? "大约需要半分钟。拆解稿会落在这里，请先逐镜核对再去生成。" : "完成后将在这里展示镜头摘要和复刻提示词"}</span>
+                </div>
+              </div>
+            ) : (
+              <div className="vr-analysis">
+                <div className="section-h">
+                  <h2>视频拆解完成</h2>
+                  <span className="more">[ {shots} SHOTS ]</span>
+                </div>
+                <p className="vr-lead">已识别 {shots} 个镜头。拆解必然有错，先改「拆解存疑」再继续生成。</p>
+                <div className="vr-summary">
+                  <span>视频时长<strong>{duration} 秒</strong></span>
+                  <span>镜头数量<strong>{shots} 镜</strong></span>
+                  <span>内容节奏<strong>{rhythm}</strong></span>
+                </div>
+                <textarea
+                  className="textarea vr-prompt"
+                  value={prompt}
+                  onChange={(event) => setPrompt(event.target.value)}
+                />
+                <div className="vr-actions">
+                  <button type="button" className="btn" onClick={() => void savePrompt()}>
+                    <Save />
+                    保存提示词
+                  </button>
+                  <button type="button" className="btn btn-primary" onClick={continueGenerate}>
+                    <span>继续生成视频</span>
+                    <ArrowRight />
+                  </button>
+                </div>
+              </div>
+            )}
+          </aside>
+        </div>
+      </div>
+    </div>
+  );
+}