fix: 商品详情视频项目卡片可打开并展示主图

This commit is contained in:
hh
2026-07-13 13:52:59 +08:00
parent 5d2b70c3a2
commit f803948143
+24 -6
View File
@@ -597,6 +597,8 @@ function pdProjStatusLabel(project: Project) {
return ({ draft: "脚本待生成", scripting: "脚本生成中", asseting: "基础资产生成中", storyboarding: "故事板生成中", videoing: "视频片段生成中", exporting: "导出中", completed: "已完成", failed: "失败" } as Record<string, string>)[project.status] || "进行中";
}
function pdProjPillClass(project: Project) { return project.status === "completed" ? "ok" : project.status === "failed" ? "err" : "info"; }
// 商品详情中的项目卡封面与项目总列表一致:复用后端随项目列表返回的商品主图。
const pdProjectCoverStyle = (url: string): CSSProperties => ({ ["--mock-media-url"]: `url(${url})` } as CSSProperties);
export function ProductDetailPage({ product, projects, initialTab = "assets", navigate, onUpdate, onUploadImage, onDeleteImage, onGenerateImages, onAdoptTriView }: {
product: Product;
@@ -1223,12 +1225,28 @@ export function ProductDetailPage({ product, projects, initialTab = "assets", na
</div>
<div className="asset-grid">
{videoProjects.map((project) => (
<div className="asset-card" data-proj-status={pdProjBucket(project)} key={project.id}>
<div className="thumb placeholder" style={{ aspectRatio: "9/16" }}><span className="type-pill"> · 9:16</span><span className="ph-frame">{project.name}</span></div>
<div className="meta"><span className={`pill ${pdProjPillClass(project)}`}><span className="dot"></span>{pdProjStatusLabel(project)}</span><span className="date">{(project.updated_at || "").slice(0, 10)}</span></div>
</div>
))}
{videoProjects.map((project) => {
const cover = project.cover_preview_url || "";
return (
<div
className="asset-card"
data-proj-status={pdProjBucket(project)}
key={project.id}
role="button"
tabIndex={0}
onClick={() => navigate("pipeline", { projectId: project.id })}
onKeyDown={(event) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
navigate("pipeline", { projectId: project.id });
}
}}
>
<div className={`thumb placeholder${cover ? " has-mock-media" : ""}`} style={cover ? { aspectRatio: "9/16", ...pdProjectCoverStyle(cover) } : { aspectRatio: "9/16" }}><span className="type-pill"> · 9:16</span><span className="ph-frame">{project.name}</span></div>
<div className="meta"><span className={`pill ${pdProjPillClass(project)}`}><span className="dot"></span>{pdProjStatusLabel(project)}</span><span className="date">{(project.updated_at || "").slice(0, 10)}</span></div>
</div>
);
})}
</div>
</div>