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>