fix: 商品详情视频项目卡片可打开并展示主图
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user