810 lines
39 KiB
TypeScript
810 lines
39 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
|
import type { FormEvent } from "react";
|
|
import { ArrowLeft, ArrowRight, ArrowUpRight, Check, ChevronDown, ChevronRight, Grid2X2, Info, List, PackagePlus, Play, Route, Search, Settings2, Trash2, VideoOff } from "lucide-react";
|
|
import type { Asset, Product, Project, ScriptTemplate } from "../types";
|
|
import { api } from "../api";
|
|
import type { Page } from "./route-config";
|
|
import { ConfirmModal, MediaLightbox } from "../components/overlays";
|
|
import { CustomSelect } from "../components/custom-select";
|
|
import { ProductCreateDrawer, type ProductCreatePayload } from "../components/product-create-drawer";
|
|
import { isLocalLife } from "../product-business";
|
|
import { Pager } from "../components/pager";
|
|
import { SkeletonRows } from "../components/loading";
|
|
import { useViewMode } from "../components/use-view-mode";
|
|
import { hasQuickCreateSuffix, isQuickCreateBusy } from "../quick-create-lock";
|
|
import "../project-wizard-page.css";
|
|
|
|
const PROJ_PAGE_SIZE = 8; // 4 列网格两行
|
|
|
|
// 创建页只保留商品与项目名；时长在脚本阶段统一落定，避免前置参数脱钩。
|
|
const WIZ_PAGE_SIZE = 7; // 4 列 × 2 行 = 8 格,首格为「创建新商品」→ 每页 7 商品
|
|
const WIZ_RAIL = [
|
|
{ n: "01", title: "选择商品", desc: "确定本次内容生产的商品主体" },
|
|
{ n: "02", title: "脚本创建", desc: "生成并确认镜头脚本" },
|
|
{ n: "03", title: "资产选择", desc: "准备商品、角色与场景资产" },
|
|
{ n: "04", title: "视频生成", desc: "按脚本的秒级分镜直接生成视频" },
|
|
];
|
|
|
|
export function ProjectWizardPage({ products, projects = [], preselectProductId, onBack, onCreate, onCreateProduct, onUploadImage }: {
|
|
products: Product[];
|
|
projects?: Project[];
|
|
// 从商品详情页「立即生成」进入时,预勾选该商品(而非默认第一个/耳机);id 不存在则回落默认。
|
|
preselectProductId?: string;
|
|
onBack: () => void;
|
|
onCreate: (payload: { name: string; product: string; metadata?: Record<string, unknown> }) => Promise<unknown> | void;
|
|
// 「创建新商品」抽屉提交时调用 → 落库到商品库;返回新建商品(含 id)以便自动选中。可选,未接线时抽屉退化为「去商品库」。
|
|
onCreateProduct?: (payload: ProductCreatePayload) => Promise<Product | null | undefined> | void;
|
|
// 新建商品的主图随商品一起持久化(与商品库新建商品同一流程)
|
|
onUploadImage?: (productId: string, formData: FormData) => Promise<unknown> | void;
|
|
}) {
|
|
// 预选 id 命中商品库时用它,否则默认第一个商品
|
|
const initialProductId =
|
|
(preselectProductId && products.some((p) => p.id === preselectProductId) && preselectProductId) ||
|
|
products[0]?.id || "";
|
|
const [productId, setProductId] = useState(initialProductId);
|
|
const product = products.find((item) => item.id === productId) || products[0];
|
|
// 默认项目名跟随所选商品+脚本风格,版本号按已有同名项目自动递增(避免连建多个同名 v1);
|
|
// 用户手动改过名字后不再覆盖。
|
|
const [name, setName] = useState("");
|
|
const [nameTouched, setNameTouched] = useState(false);
|
|
|
|
// Step 1 · 商品选择器本地交互态
|
|
const [pickSearch, setPickSearch] = useState("");
|
|
const [pickCat, setPickCat] = useState("全部");
|
|
const [catOpen, setCatOpen] = useState(false);
|
|
const [pickPage, setPickPage] = useState(1);
|
|
|
|
// 新建商品 · 右侧抽屉开关(抽屉实现与商品库共用 ProductCreateDrawer,保证同一流程)
|
|
const [npOpen, setNpOpen] = useState(false);
|
|
|
|
// Step 2 · 配置(基础配置只保留项目名；脚本风格/人物设定与时长都在流水线第 1 步统一落定)
|
|
const [points, setPoints] = useState<Record<string, boolean>>({});
|
|
|
|
// Step 2 · 5.2 换商品重跑:选一个团队套路模板,新项目沿用它的镜序与节奏(文案仍按新商品重写)。
|
|
// 只传 template_id,套路参数由后端按库里的模板回填,前后端不留两份真相。
|
|
const [templates, setTemplates] = useState<ScriptTemplate[]>([]);
|
|
const [templateId, setTemplateId] = useState("");
|
|
useEffect(() => {
|
|
void api.listScriptTemplates()
|
|
.then((page) => setTemplates(page.results || []))
|
|
.catch(() => setTemplates([]));
|
|
}, []);
|
|
const template = templates.find((t) => t.id === templateId);
|
|
|
|
useEffect(() => {
|
|
if (!productId && products[0]) setProductId(products[0].id);
|
|
}, [productId, products]);
|
|
|
|
// 卖点胶囊跟随当前选中商品初始化(默认全不勾选)。初始挂载时(含预选商品)即填充,
|
|
// 修复「默认选中商品却不显示卖点,要切走再切回才出现」的初始化时机 bug。
|
|
useEffect(() => {
|
|
const p = products.find((item) => item.id === productId);
|
|
const seed: Record<string, boolean> = {};
|
|
(p?.selling_points || []).forEach((sp) => { seed[sp.id || sp.title] = false; });
|
|
setPoints(seed);
|
|
}, [productId, products]);
|
|
|
|
useEffect(() => {
|
|
if (nameTouched) return;
|
|
const base = `${(product?.title || "商品").split(" ")[0]} · 短视频`;
|
|
let version = 1;
|
|
while (projects.some((p) => p.name === `${base} · v${version}`)) version += 1;
|
|
setName(`${base} · v${version}`);
|
|
}, [nameTouched, product, projects]);
|
|
|
|
// 分类清单
|
|
const cats = useMemo(
|
|
() => ["全部", ...Array.from(new Set(products.map((p) => p.category || "未分类")))],
|
|
[products]
|
|
);
|
|
useEffect(() => {
|
|
if (!catOpen) return;
|
|
const close = (event: MouseEvent) => {
|
|
if (!(event.target as HTMLElement).closest(".nw-select")) setCatOpen(false);
|
|
};
|
|
document.addEventListener("click", close);
|
|
return () => document.removeEventListener("click", close);
|
|
}, [catOpen]);
|
|
|
|
// 筛选 + 排序后的商品
|
|
const filtered = useMemo(() => {
|
|
const q = pickSearch.trim().toLowerCase();
|
|
return products.filter((p) => {
|
|
const cat = p.category || "未分类";
|
|
if (pickCat !== "全部" && cat !== pickCat) return false;
|
|
if (q) {
|
|
const blob = `${p.title} ${cat} ${(p.selling_points || []).map((s) => s.title).join(" ")}`.toLowerCase();
|
|
if (!blob.includes(q)) return false;
|
|
}
|
|
return true;
|
|
});
|
|
}, [products, pickSearch, pickCat]);
|
|
|
|
const hasFilter = !!pickSearch || pickCat !== "全部";
|
|
const total = filtered.length;
|
|
const totalPages = Math.max(1, Math.ceil(total / WIZ_PAGE_SIZE));
|
|
const cur = Math.min(pickPage, totalPages);
|
|
const pageList = filtered.slice((cur - 1) * WIZ_PAGE_SIZE, cur * WIZ_PAGE_SIZE);
|
|
|
|
function selectProduct(id: string) {
|
|
// 卖点种子由 productId useEffect 统一初始化,这里只切换选中商品
|
|
setProductId(id);
|
|
}
|
|
|
|
function clearPickFilters() {
|
|
setPickSearch("");
|
|
setPickCat("全部");
|
|
setPickPage(1);
|
|
}
|
|
|
|
// 点击「创建新商品」:有 onCreateProduct 接线则开右侧抽屉,否则回落到旧行为(返回去商品库)
|
|
function openCreateProduct() {
|
|
if (!onCreateProduct) { onBack(); return; }
|
|
setNpOpen(true);
|
|
}
|
|
|
|
const product1Done = !!productId;
|
|
// 项目创建只要求选商品 + 输入项目名；时长在脚本阶段确认，避免阶段前置参数脱钩
|
|
const config2Done = name.trim().length >= 2;
|
|
const canStart = product1Done && config2Done;
|
|
|
|
// 提交中状态:创建项目后 App 端全量刷新需数秒,按钮要给「创建中…」反馈,避免用户以为没点上
|
|
const [starting, setStarting] = useState(false);
|
|
async function submit(event: FormEvent) {
|
|
event.preventDefault();
|
|
if (!canStart || !product || starting) return;
|
|
// 向导选项(成片时长档 / 选中卖点)随项目一起持久化进 metadata,Stage 1 生成脚本时可用
|
|
const selectedPoints = Object.entries(points).filter(([, on]) => on).map(([id]) => id);
|
|
setStarting(true);
|
|
try {
|
|
await onCreate({
|
|
name: name.trim() || `${product.title} · 短视频`,
|
|
product: product.id,
|
|
metadata: {
|
|
wizard: {
|
|
selling_point_ids: selectedPoints,
|
|
...(templateId ? { template_id: templateId } : {})
|
|
}
|
|
}
|
|
});
|
|
} finally {
|
|
setStarting(false);
|
|
}
|
|
}
|
|
|
|
const productCoverUrl = (p: Product): string => {
|
|
const sorted = [...(p.images || [])].sort((a, b) => a.sort_order - b.sort_order);
|
|
const primary = p.images?.find((img) => img.is_primary) || sorted[0];
|
|
return p.cover_preview_url || primary?.preview_url || "";
|
|
};
|
|
const imageCount = (p: Product) => p.images?.length || (p.cover_preview_url ? 1 : 0);
|
|
const pointCount = (p: Product) => p.selling_points?.length || 0;
|
|
const createdLabel = (iso: string) => {
|
|
if (!iso) return "";
|
|
const d = new Date(iso);
|
|
if (Number.isNaN(d.getTime())) return iso.slice(0, 10);
|
|
const now = new Date();
|
|
const pad = (n: number) => String(n).padStart(2, "0");
|
|
if (d.toDateString() === now.toDateString()) return "今天创建";
|
|
const yest = new Date(now);
|
|
yest.setDate(now.getDate() - 1);
|
|
if (d.toDateString() === yest.toDateString()) return "昨天创建";
|
|
return `${pad(d.getMonth() + 1)}.${pad(d.getDate())} 创建`;
|
|
};
|
|
const selectedCover = product ? productCoverUrl(product) : "";
|
|
const selectedMeta = product
|
|
? `${isLocalLife(product) ? "本地生活" : (product.category || "未分类")} · ${imageCount(product)} 张参考图`
|
|
: "尚未选择商品";
|
|
|
|
return (
|
|
<section className="project-wizard-page">
|
|
<header className="nw-head">
|
|
<div className="nw-title">
|
|
<button className="nw-back" type="button" onClick={onBack} aria-label="返回">
|
|
<ArrowLeft />
|
|
</button>
|
|
<div>
|
|
<h1>新建项目</h1>
|
|
<p>先选择本次项目使用的商品，下一步再配置内容方向与生成规格</p>
|
|
</div>
|
|
</div>
|
|
<div className="nw-status"><strong>选择商品</strong><span>· 新建项目</span></div>
|
|
</header>
|
|
|
|
<form className="nw-shell" onSubmit={submit}>
|
|
<aside className="nw-rail" aria-label="项目进度">
|
|
<header className="nw-rail-head">
|
|
<span className="nw-rail-icon"><Route /></span>
|
|
<div>
|
|
<h2>项目进度</h2>
|
|
<p>按步骤完成项目创建流程</p>
|
|
</div>
|
|
</header>
|
|
<div className="nw-rail-summary">
|
|
<span>已解锁 1 / 5 · 当前第 1 步</span>
|
|
<div className="nw-rail-track"><span style={{ width: "20%" }} /></div>
|
|
</div>
|
|
<div className="nw-rail-steps">
|
|
{WIZ_RAIL.map((step, index) => (
|
|
<div className={`nw-step${index === 0 ? " current" : ""}`} key={step.n} hidden={index > 0}>
|
|
<span className="nw-step-mark">{index === 0 ? <Check /> : step.n}</span>
|
|
<span className="nw-step-copy">
|
|
<strong>{step.title}</strong>
|
|
<span>{step.desc}</span>
|
|
</span>
|
|
<ChevronRight className="nw-step-chev" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="nw-picked">
|
|
<span>本项目商品</span>
|
|
<div className="nw-picked-card">
|
|
{selectedCover ? <img src={selectedCover} alt="" /> : <span className="nw-picked-ph" />}
|
|
<div>
|
|
<strong>{product?.title || "未选择"}</strong>
|
|
<small>{selectedMeta}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<section className="nw-surface" aria-labelledby="nwSelectTitle">
|
|
<div className="nw-select-head">
|
|
<div>
|
|
<h2 id="nwSelectTitle">选择商品</h2>
|
|
<p>从商品库选择一个 SKU。商品主图、卖点和参考资产将用于后续脚本、分镜与视觉生成。</p>
|
|
</div>
|
|
<span className="nw-count">{total} 个商品可选</span>
|
|
</div>
|
|
|
|
<div className="nw-toolbar">
|
|
<label className="nw-search">
|
|
<Search size={16} />
|
|
<input placeholder="搜索商品名称、分类或标签" value={pickSearch} onChange={(event) => { setPickSearch(event.target.value); setPickPage(1); }} onKeyDown={(event) => { if (event.key === "Enter") event.preventDefault(); }} />
|
|
</label>
|
|
<div className={`nw-select${catOpen ? " open" : ""}`}>
|
|
<button className="nw-select-trigger" type="button" aria-haspopup="listbox" aria-expanded={catOpen} onClick={() => setCatOpen((open) => !open)}>
|
|
<span>{pickCat === "全部" ? "全部分类" : pickCat}</span>
|
|
<ChevronDown size={15} />
|
|
</button>
|
|
<div className="nw-select-menu" role="listbox">
|
|
{cats.map((cat) => (
|
|
<button className={`nw-select-option${pickCat === cat ? " selected" : ""}`} type="button" key={cat} onClick={() => { setPickCat(cat); setPickPage(1); setCatOpen(false); }}>
|
|
{cat === "全部" ? "全部分类" : cat}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="nw-grid">
|
|
<button className="nw-card nw-create" type="button" onClick={openCreateProduct}>
|
|
<span className="nw-create-icon"><PackagePlus /></span>
|
|
<strong>创建新商品</strong>
|
|
<span>商品库中没有合适商品时，在这里补充一个新 SKU</span>
|
|
</button>
|
|
{total === 0 ? (
|
|
<div className="nw-empty" role="status">
|
|
<strong>{products.length === 0 ? "还没有商品" : "没有符合条件的商品"}</strong>
|
|
<span>{products.length === 0 ? "先创建一个商品，再回来开项目" : "请调整分类或搜索关键词后重试"}</span>
|
|
{hasFilter && <button className="nw-empty-reset" type="button" onClick={clearPickFilters}>清空筛选</button>}
|
|
{products.length === 0 && <button className="nw-empty-reset" type="button" onClick={openCreateProduct}>去创建商品</button>}
|
|
</div>
|
|
) : pageList.map((item) => {
|
|
const cover = productCoverUrl(item);
|
|
const cat = isLocalLife(item) ? `本地生活${item.category ? " · " + item.category : ""}` : (item.category || "未分类");
|
|
return (
|
|
<button className={`nw-card${productId === item.id ? " active" : ""}`} type="button" key={item.id} onClick={() => selectProduct(item.id)}>
|
|
<span className="nw-check"><Check /></span>
|
|
<span className="nw-cover">{cover ? <img src={cover} alt="" loading="lazy" /> : null}</span>
|
|
<span className="nw-meta">
|
|
<h3>{item.title}</h3>
|
|
<p>{cat} · {pointCount(item)} 个核心卖点</p>
|
|
<span className="nw-tags">
|
|
<span>{imageCount(item)} 张参考图</span>
|
|
<span>{createdLabel(item.created_at)}</span>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{total > WIZ_PAGE_SIZE && (
|
|
<Pager page={cur} total={total} pageSize={WIZ_PAGE_SIZE} onChange={setPickPage} />
|
|
)}
|
|
|
|
<div className="nw-config">
|
|
<div className="nw-config-h">
|
|
<h2>项目配置</h2>
|
|
<p>基础配置只保留项目名与可选套路模板；脚本来源、风格和时长在下一步由脚本助手落定。</p>
|
|
</div>
|
|
<label className="nw-field">
|
|
<span>项目名称<small>必填</small></span>
|
|
<input value={name} onChange={(event) => { setName(event.target.value); setNameTouched(true); }} />
|
|
</label>
|
|
{templates.length > 0 && (
|
|
<label className="nw-field">
|
|
<span>套路模板<small>可选</small></span>
|
|
<CustomSelect
|
|
fill
|
|
value={templateId}
|
|
onChange={setTemplateId}
|
|
placeholder="不套用 · 让 AI 按这个商品从头设计"
|
|
options={[
|
|
{ value: "", label: "不套用 · 让 AI 按这个商品从头设计" },
|
|
...templates.map((item) => ({
|
|
value: item.id,
|
|
label: `${item.name} · ${item.total_duration}s${item.usage_count ? ` · 用过 ${item.usage_count} 次` : ""}`,
|
|
})),
|
|
]}
|
|
/>
|
|
{template && (
|
|
<div className="nw-tpl">
|
|
<strong>同套路重出</strong>
|
|
<p>沿用「{template.name}」的镜数、每镜作用和节奏。文案、画面与模特都会按 {product?.title || "所选商品"} 重新生成。</p>
|
|
{template.outline_text ? <pre>{template.outline_text}</pre> : null}
|
|
</div>
|
|
)}
|
|
</label>
|
|
)}
|
|
{Object.keys(points).length > 0 && (
|
|
<div className="nw-field">
|
|
<span>关键卖点<small>可勾选要重点突出的</small></span>
|
|
<div className="nw-pills">
|
|
{Object.entries(points).map(([key, on]) => {
|
|
const label = product?.selling_points?.find((sp) => (sp.id || sp.title) === key)?.title || key;
|
|
return (
|
|
<button className={`nw-pill${on ? " on" : ""}`} type="button" key={key} aria-pressed={on} onClick={() => setPoints((prev) => ({ ...prev, [key]: !prev[key] }))}>
|
|
{on && <Check size={13} />}
|
|
<span>{label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="nw-actions">
|
|
<span className="nw-tip">
|
|
<Info />
|
|
<span>找不到需要的商品？可先创建新商品，完善后会自动返回本流程。</span>
|
|
</span>
|
|
<button className="nw-next" type="submit" disabled={!canStart || starting}>
|
|
<span>{starting ? "创建中…" : "确认商品并创建项目"}</span>
|
|
<ArrowRight />
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</form>
|
|
|
|
{/* 新建商品 · 右侧抽屉 · 与商品库新建商品共用同一组件 → 落库到商品库,同一流程 */}
|
|
{onCreateProduct && (
|
|
<ProductCreateDrawer
|
|
open={npOpen}
|
|
close={() => setNpOpen(false)}
|
|
onCreate={onCreateProduct}
|
|
onUploadImage={onUploadImage}
|
|
// 新建成功 → 自动选中该商品进入第 1 步选中态
|
|
onCreated={(created) => setProductId(created.id)}
|
|
/>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// 对齐 api-bridge / pipeline:阶段编号 / 状态分桶 / 友好标签 / pill 类
|
|
// 故事板已下线;V1 又雪藏「拼接导出」→ 流程现为 3 步,export 归并到第 3(视频),
|
|
// 已完成项目落到第 3 阶段。(与 pipeline.tsx PIPELINE_RAIL / projectStage 对齐)
|
|
// storyboard 保留映射,只为老项目的历史 current_stage 兜底。
|
|
const PROJ_STAGE_TOTAL = 3;
|
|
const PROJ_STAGE_NO: Record<string, number> = { script: 1, base_assets: 2, storyboard: 2, video: 3, export: 3 };
|
|
function projStageNo(project: Project) { return project.status === "completed" ? PROJ_STAGE_TOTAL : (PROJ_STAGE_NO[project.current_stage] || 1); }
|
|
function projBucket(project: Project) {
|
|
if (project.status === "completed") return "done";
|
|
if (project.status === "failed") return "fail";
|
|
if (project.status === "draft") return "draft";
|
|
return "wip";
|
|
}
|
|
// 当前脚本版本:优先已采用,否则取第一版(轻量列表序列化可能不含 segments,故全程可选链)
|
|
function projScript(project: Project) {
|
|
const list = project.script_versions || [];
|
|
return list.find((v) => v.is_adopted) || list[0];
|
|
}
|
|
// 真实镜数:优先后端片段计数 / 片段数组长度;均缺时回落脚本片段数,再回落 0(不造假)
|
|
function projShots(project: Project): number {
|
|
return project.video_segment_count ?? project.video_segments?.length ?? projScript(project)?.segments?.length ?? 0;
|
|
}
|
|
// 真实成片时长档:① 向导选的时长 id("0-15"→"0-15s") ② 脚本各镜时长求和("0-{n}s") ③ 视频片段目标时长求和 ④ 缺则空串(副标题只显示「N 镜」,不硬编码 0-60s)
|
|
function projDurationLabel(project: Project): string {
|
|
const wiz = project.metadata?.wizard?.duration;
|
|
if (wiz) return /s$/i.test(wiz) ? wiz : `${wiz}s`;
|
|
const scriptSecs = (projScript(project)?.segments || []).reduce((sum, s) => sum + (s.duration_seconds || 0), 0);
|
|
if (scriptSecs > 0) return `0-${Math.round(scriptSecs)}s`;
|
|
const videoSecs = (project.video_segments || []).reduce((sum, s) => sum + (s.target_duration_seconds || 0), 0);
|
|
if (videoSecs > 0) return `0-${Math.round(videoSecs)}s`;
|
|
return "";
|
|
}
|
|
// 副标题:N 镜[ · 时长档](真实数据,缺时长档则只显示镜数)
|
|
function projShotMeta(project: Project): string {
|
|
const shots = projShots(project);
|
|
const dur = projDurationLabel(project);
|
|
return dur ? `${shots} 镜 · ${dur}` : `${shots} 镜`;
|
|
}
|
|
// 项目卡封面 = 该项目商品的主图(后端 cover_preview_url,取商品 cover_asset)。无图 → 占位。
|
|
// (原先按项目名关键词映射静态 mock 假图,与真实数据脱节,已废弃。)
|
|
const PROJ_TABS: Array<{ filter: "all" | "draft" | "wip" | "done" | "fail"; label: string }> = [
|
|
{ filter: "all", label: "全部" },
|
|
{ filter: "draft", label: "草稿" },
|
|
{ filter: "wip", label: "生成中" },
|
|
{ filter: "done", label: "已完成" },
|
|
{ filter: "fail", label: "失败" },
|
|
];
|
|
type ProjTab = (typeof PROJ_TABS)[number]["filter"];
|
|
|
|
const VIDEO_MAKE: Array<{ title: string; desc: string; page: Page; image: string; primary?: boolean }> = [
|
|
{ title: "一键成片", desc: "输入商品名称并上传图片，自动完成脚本、场景与视频生成。", page: "quickCreate", image: "/assets/prototype/video-oneclick-film-v3.png", primary: true },
|
|
{ title: "专业创作", desc: "逐步控制脚本结构、商品与人物资产和最终视频。", page: "projectWizard", image: "/assets/prototype/photo-1485846234645-a62644f84728.jpg", primary: true },
|
|
];
|
|
const VIDEO_TOOLS: Array<{ title: string; desc: string; page: Page; image: string; style?: React.CSSProperties }> = [
|
|
{ title: "自由生成", desc: "使用提示词、参考图片与素材库，自由控制画面和生成参数。", page: "freeCreate", image: "/assets/prototype/video-free-film-v3.png" },
|
|
{ title: "提炼提示词", desc: "从参考视频中提炼可编辑的视频生成提示词。", page: "videoRemix", image: "/assets/prototype/video-prompt-extract-film-v3.png" },
|
|
{ title: "视频复刻", desc: "保留参考视频的人物、场景与节奏，复刻出自己的带货内容。", page: "videoReplace", image: "/assets/prototype/video-remix-film-v3.png", style: { objectPosition: "center 58%" } },
|
|
];
|
|
|
|
function isQuickCreateProject(project: Project) {
|
|
if (project.quick_create) return true;
|
|
if (project.metadata?.quick_create) return true;
|
|
return hasQuickCreateSuffix(project.name);
|
|
}
|
|
|
|
function projectModeLabel(project: Project) {
|
|
if (isQuickCreateBusy(project)) return "一键成片生成中";
|
|
return isQuickCreateProject(project) ? "一键成片" : "专业创作";
|
|
}
|
|
|
|
function projCardSub(project: Project, productTitle: string): string {
|
|
if (project.status === "failed") return project.failure_reason || "生成失败，可重新拍摄";
|
|
const mode = projectModeLabel(project);
|
|
const shots = projShotMeta(project);
|
|
const stage = projStageLabel(project);
|
|
if (project.status === "completed") return `${mode} · ${productTitle} · ${shots}`;
|
|
const no = projStageNo(project);
|
|
return `${mode} · ${stage} · ${no} / ${PROJ_STAGE_TOTAL}`;
|
|
}
|
|
function projStageLabel(project: Project): string {
|
|
if (project.status === "failed") return "失败";
|
|
const map: Record<string, string> = {
|
|
script: "脚本",
|
|
base_assets: "资产创建",
|
|
storyboard: "资产创建",
|
|
video: "视频生成",
|
|
export: "视频生成",
|
|
};
|
|
return map[project.current_stage] || "视频生成";
|
|
}
|
|
|
|
export function ProjectsPage({ products, projects, loading = false, navigate, openPipeline, onDelete, initialTab }: {
|
|
products: Product[];
|
|
projects: Project[];
|
|
loading?: boolean;
|
|
navigate: (page: Page) => void;
|
|
onCreate: (payload: { name: string; product: string }) => Promise<unknown> | void;
|
|
openPipeline: (projectId: string) => void;
|
|
onDelete: (projectId: string) => Promise<unknown> | void;
|
|
// 工作台统计块点击带入的初始 tab(all/wip/done/fail);变化时覆盖当前 tab。
|
|
initialTab?: string;
|
|
}) {
|
|
const [view, setView] = useViewMode<"list" | "grid">("viewmode:projects", "grid");
|
|
const [tab, setTab] = useState<ProjTab>("all");
|
|
// initialTab 从工作台统计块带入时同步到本地 tab(仅识别合法值)。
|
|
useEffect(() => {
|
|
if (initialTab && ["all", "draft", "wip", "done", "fail"].includes(initialTab)) {
|
|
setTab(initialTab as ProjTab);
|
|
}
|
|
}, [initialTab]);
|
|
const [query, setQuery] = useState("");
|
|
const [editMode, setEditMode] = useState(false);
|
|
const [deleteTarget, setDeleteTarget] = useState<Project | null>(null);
|
|
// 批量管理:编辑态多选集合 + 批量删除确认开关。退出编辑态自动清空选择。
|
|
const [selected, setSelected] = useState<Set<string>>(new Set());
|
|
const [bulkDeleting, setBulkDeleting] = useState(false);
|
|
const [bulkConfirm, setBulkConfirm] = useState(false);
|
|
useEffect(() => { if (!editMode) setSelected(new Set()); }, [editMode]);
|
|
const exitEdit = () => { setEditMode(false); setSelected(new Set()); };
|
|
function toggleSelect(id: string) {
|
|
setSelected((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) next.delete(id); else next.add(id);
|
|
return next;
|
|
});
|
|
}
|
|
// 成片播放:合成过的项目点播放键直接弹窗播成片,不再跳去视频生成页
|
|
const [playing, setPlaying] = useState<Project | null>(null);
|
|
const [openChip, setOpenChip] = useState<"" | "product" | "time">("");
|
|
const [catFilter, setCatFilter] = useState("");
|
|
const [timeFilter, setTimeFilter] = useState<"all" | "7" | "30" | "90">("all");
|
|
const productTitle = (id: string) => products.find((product) => product.id === id)?.title || "商品";
|
|
const productCat = (id: string) => products.find((product) => product.id === id)?.category || "";
|
|
|
|
// 筛选选项(全部来自真实数据)
|
|
const projectCategories = Array.from(new Set(projects.map((p) => productCat(p.product)).filter(Boolean))) as string[];
|
|
const TIME_OPTS: Array<{ value: "all" | "7" | "30" | "90"; label: string }> = [
|
|
{ value: "all", label: "全部时间" },
|
|
{ value: "7", label: "近 7 天" },
|
|
{ value: "30", label: "近 30 天" },
|
|
{ value: "90", label: "近 90 天" }
|
|
];
|
|
const timeLabel = TIME_OPTS.find((o) => o.value === timeFilter)?.label || "全部时间";
|
|
|
|
useEffect(() => {
|
|
if (!openChip) return;
|
|
const close = (event: MouseEvent) => {
|
|
if (!(event.target as HTMLElement).closest(".vc-select")) setOpenChip("");
|
|
};
|
|
document.addEventListener("click", close);
|
|
return () => document.removeEventListener("click", close);
|
|
}, [openChip]);
|
|
|
|
const filtered = projects.filter((project) => {
|
|
if (tab !== "all" && projBucket(project) !== tab) return false;
|
|
if (!`${project.name} ${productTitle(project.product)}`.toLowerCase().includes(query.toLowerCase())) return false;
|
|
if (catFilter && productCat(project.product) !== catFilter) return false;
|
|
if (timeFilter !== "all" && project.created_at) {
|
|
const days = (Date.now() - new Date(project.created_at).getTime()) / 86400000;
|
|
if (days > Number(timeFilter)) return false;
|
|
}
|
|
return true;
|
|
}).sort((a, b) => {
|
|
// 倒序排列:新创建的项目排最前;created_at 缺失时回退 updated_at,再回退 id 字典序
|
|
const ta = a.created_at || a.updated_at || a.id;
|
|
const tb = b.created_at || b.updated_at || b.id;
|
|
return ta < tb ? 1 : ta > tb ? -1 : 0;
|
|
});
|
|
// 分页:每页 10 个,切 tab / 搜索 / 筛选回第 1 页(列表与网格共用)
|
|
const [page, setPage] = useState(1);
|
|
useEffect(() => { setPage(1); }, [tab, query, catFilter, timeFilter]);
|
|
const totalPages = Math.max(1, Math.ceil(filtered.length / PROJ_PAGE_SIZE));
|
|
const curPage = Math.min(page, totalPages);
|
|
const pageItems = filtered.slice((curPage - 1) * PROJ_PAGE_SIZE, curPage * PROJ_PAGE_SIZE);
|
|
|
|
async function confirmDelete() {
|
|
if (!deleteTarget) return;
|
|
await onDelete(deleteTarget.id);
|
|
setDeleteTarget(null);
|
|
}
|
|
|
|
// 批量删除选中项目:逐个调 onDelete(App 端每删一项做一次刷新),完成后清空选择并关确认框
|
|
async function confirmBulkDelete() {
|
|
if (selected.size === 0 || bulkDeleting) return;
|
|
setBulkDeleting(true);
|
|
try {
|
|
for (const id of Array.from(selected)) await onDelete(id);
|
|
setSelected(new Set());
|
|
setBulkConfirm(false);
|
|
} finally {
|
|
setBulkDeleting(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className={`projects-page${editMode ? " manage-mode" : ""}`}>
|
|
<div className="projects-inner">
|
|
<header className="vc-head">
|
|
<h1>视频创作</h1>
|
|
</header>
|
|
|
|
<section className="vc-sec">
|
|
<div className="vc-sec-h">
|
|
<h2>商品视频生产</h2>
|
|
</div>
|
|
<div className="vc-tools two">
|
|
{VIDEO_MAKE.map((card) => (
|
|
<button className={`vc-tool${card.primary ? " primary" : ""}`} type="button" key={card.title} onClick={() => navigate(card.page)}>
|
|
<div className="vc-tool-cover"><img src={card.image} alt="" /></div>
|
|
<div className="vc-tool-body">
|
|
<div className="vc-tool-title">
|
|
<h3>{card.title}</h3>
|
|
<ArrowUpRight size={21} />
|
|
</div>
|
|
<p>{card.desc}</p>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="vc-sec">
|
|
<div className="vc-sec-h">
|
|
<h2>AI 视频工具</h2>
|
|
</div>
|
|
<div className="vc-tools three">
|
|
{VIDEO_TOOLS.map((card) => (
|
|
<button className="vc-tool" type="button" key={card.title} onClick={() => navigate(card.page)}>
|
|
<div className="vc-tool-cover"><img src={card.image} alt="" style={card.style} /></div>
|
|
<div className="vc-tool-body">
|
|
<div className="vc-tool-title">
|
|
<h3>{card.title}</h3>
|
|
<ArrowUpRight size={21} />
|
|
</div>
|
|
<p>{card.desc}</p>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<div className="vc-sec-h vc-list-h">
|
|
<div>
|
|
<h2>视频项目</h2>
|
|
</div>
|
|
<button className={`vc-ghost${editMode ? " is-on" : ""}`} type="button" onClick={() => (editMode ? exitEdit() : setEditMode(true))}>
|
|
<Settings2 />
|
|
<span>{editMode ? "完成" : "管理项目"}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="vc-toolbar">
|
|
<div className="vc-seg" role="tablist" aria-label="项目状态">
|
|
{PROJ_TABS.map((t) => (
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={tab === t.filter}
|
|
className={`vc-seg-btn${tab === t.filter ? " active" : ""}`}
|
|
key={t.filter}
|
|
onClick={() => setTab(t.filter)}
|
|
>
|
|
{t.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="vc-toolbar-right">
|
|
<label className="vc-search">
|
|
<Search size={16} />
|
|
<input placeholder="搜索视频项目" value={query} onChange={(event) => setQuery(event.target.value)} />
|
|
</label>
|
|
<div className={`vc-select${openChip === "time" ? " open" : ""}`} data-key="time">
|
|
<button className="vc-select-trigger" type="button" aria-haspopup="listbox" aria-expanded={openChip === "time"} onClick={() => setOpenChip((c) => (c === "time" ? "" : "time"))}>
|
|
<span>{timeLabel}</span>
|
|
<ChevronDown size={15} />
|
|
</button>
|
|
<div className="vc-select-menu" role="listbox">
|
|
{TIME_OPTS.map((opt) => (
|
|
<button className={`vc-select-option${timeFilter === opt.value ? " selected" : ""}`} type="button" key={opt.value} onClick={() => { setTimeFilter(opt.value); setOpenChip(""); }}>{opt.label}</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className={`vc-select${openChip === "product" ? " open" : ""}`} data-key="product">
|
|
<button className="vc-select-trigger" type="button" aria-haspopup="listbox" aria-expanded={openChip === "product"} onClick={() => setOpenChip((c) => (c === "product" ? "" : "product"))}>
|
|
<span>{catFilter || "商品分类"}</span>
|
|
<ChevronDown size={15} />
|
|
</button>
|
|
<div className="vc-select-menu" role="listbox">
|
|
<button className={`vc-select-option${!catFilter ? " selected" : ""}`} type="button" onClick={() => { setCatFilter(""); setOpenChip(""); }}>全部分类</button>
|
|
{projectCategories.map((cat) => (
|
|
<button className={`vc-select-option${catFilter === cat ? " selected" : ""}`} type="button" key={cat} onClick={() => { setCatFilter(cat); setOpenChip(""); }}>{cat}</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="vc-view">
|
|
<button type="button" className={`vc-view-btn${view === "grid" ? " active" : ""}`} aria-label="网格显示" onClick={() => setView("grid")}>
|
|
<Grid2X2 size={16} />
|
|
</button>
|
|
<button type="button" className={`vc-view-btn${view === "list" ? " active" : ""}`} aria-label="列表显示" onClick={() => setView("list")}>
|
|
<List size={16} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{loading && projects.length === 0 ? (
|
|
<SkeletonRows count={6} />
|
|
) : filtered.length === 0 ? (
|
|
<div className="vc-empty" role="status">
|
|
<VideoOff />
|
|
<strong>{projects.length === 0 ? "还没有视频项目" : "没有符合条件的视频项目"}</strong>
|
|
<span>{projects.length === 0 ? "从上方入口开始生成" : "请调整状态、时间、分类或搜索关键词后重试"}</span>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className={`vc-grid${view === "list" ? " list" : ""}`}>
|
|
{pageItems.map((project) => {
|
|
const cover = project.cover_preview_url || "";
|
|
const isSel = selected.has(project.id);
|
|
const bucket = projBucket(project);
|
|
const no = projStageNo(project);
|
|
const openProject = () => {
|
|
if (editMode) toggleSelect(project.id);
|
|
else openPipeline(project.id);
|
|
};
|
|
const statusLabel = bucket === "fail" ? "失败" : bucket === "done" ? "已完成" : bucket === "draft" ? "草稿" : "生成中";
|
|
return (
|
|
<article
|
|
className={`vc-card project-card${isSel ? " selected" : ""}`}
|
|
key={project.id}
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={openProject}
|
|
onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); openProject(); } }}
|
|
>
|
|
<span className="vc-check" aria-hidden="true"><Check /></span>
|
|
<button
|
|
className="card-del-btn"
|
|
type="button"
|
|
title="删除项目"
|
|
onClick={(event) => { event.stopPropagation(); setDeleteTarget(project); }}
|
|
>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18" /><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2" /><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6" /></svg>
|
|
</button>
|
|
<div className="vc-thumb">
|
|
{cover ? <img src={cover} alt="" loading="lazy" decoding="async" /> : null}
|
|
{!editMode && project.final_video_url ? (
|
|
<button
|
|
className="vc-play"
|
|
type="button"
|
|
aria-label={`播放「${project.name}」成片`}
|
|
onClick={(event) => { event.stopPropagation(); setPlaying(project); }}
|
|
>
|
|
<Play />
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
<div className="vc-meta">
|
|
<h3>{project.name}</h3>
|
|
<p>{projCardSub(project, productTitle(project.product))}</p>
|
|
<div className="vc-line">
|
|
<span className={`vc-tag ${bucket}`}>{statusLabel}</span>
|
|
<span className="vc-tag type">{projectModeLabel(project)}</span>
|
|
</div>
|
|
{bucket === "wip" && (
|
|
<div className="vc-progress" aria-hidden="true"><span style={{ width: `${Math.round((no / PROJ_STAGE_TOTAL) * 100)}%` }} /></div>
|
|
)}
|
|
</div>
|
|
</article>
|
|
);
|
|
})}
|
|
</div>
|
|
<Pager page={curPage} total={filtered.length} pageSize={PROJ_PAGE_SIZE} onChange={setPage} />
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div className={`vc-sel-bar${editMode ? " active" : ""}`} role="toolbar" aria-label="批量操作">
|
|
<div className="vc-sel-copy">
|
|
<strong>已选择 {selected.size} 个项目</strong>
|
|
<span>删除后可在垃圾桶中恢复</span>
|
|
</div>
|
|
<div className="vc-sel-actions">
|
|
<button className="vc-sel-cancel" type="button" onClick={exitEdit}>取消</button>
|
|
<button className="vc-sel-confirm" type="button" disabled={selected.size === 0 || bulkDeleting} onClick={() => selected.size && setBulkConfirm(true)}>
|
|
{bulkDeleting ? "删除中…" : "确认删除"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<MediaLightbox open={Boolean(playing)} src={playing?.final_video_url || ""} kind="video" name={`${playing?.name || ""} · 成片`} close={() => setPlaying(null)} />
|
|
|
|
<ConfirmModal
|
|
open={Boolean(deleteTarget)}
|
|
title="删除项目"
|
|
icon={<Trash2 size={16} />}
|
|
detail={`确定删除「${deleteTarget?.name || ""}」?将移至「垃圾桶」,可在垃圾桶里恢复或彻底删除。`}
|
|
confirmText="删除"
|
|
onCancel={() => setDeleteTarget(null)}
|
|
onConfirm={confirmDelete}
|
|
/>
|
|
<ConfirmModal
|
|
open={bulkConfirm}
|
|
title="删除项目"
|
|
icon={<Trash2 size={16} />}
|
|
detail={`确定删除选中的 ${selected.size} 个项目?将移至「垃圾桶」,可在垃圾桶里恢复或彻底删除。`}
|
|
confirmText="删除"
|
|
onCancel={() => setBulkConfirm(false)}
|
|
onConfirm={confirmBulkDelete}
|
|
/>
|
|
</section>
|
|
);
|
|
}
|