From f803948143427b1d320af88d8a418c2f08cc6dae Mon Sep 17 00:00:00 2001
From: hh <2587203630@qq.com>
Date: Mon, 13 Jul 2026 13:52:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91=E9=A1=B9=E7=9B=AE=E5=8D=A1=E7=89=87=E5=8F=AF?=
 =?UTF-8?q?=E6=89=93=E5=BC=80=E5=B9=B6=E5=B1=95=E7=A4=BA=E4=B8=BB=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/frontend/src/routes/products.tsx | 30 +++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/core/frontend/src/routes/products.tsx b/core/frontend/src/routes/products.tsx
index 9d903bd..e9e9e17 100644
--- a/core/frontend/src/routes/products.tsx
+++ b/core/frontend/src/routes/products.tsx
@@ -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>