From c6a6ad6bbf1d1d38e56c5d2127d0ad9b37842070 Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Sat, 15 Aug 2026 17:41:14 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=B2=BE=E7=AE=80Step5=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E7=BD=91=E6=A0=BC=20-=20=E7=A7=BB=E9=99=A4=E9=87=8D?=
 =?UTF-8?q?=E5=A4=8D=E8=A7=86=E9=A2=91=E6=92=AD=E6=94=BE=E5=99=A8=EF=BC=8C?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E8=BD=BB=E9=87=8F=E7=8A=B6=E6=80=81=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除网格中每个格子的 <video> 播放器（右侧 PreviewVideoPanel 已有完整播放器）
- 移除底部时长/片段数信息行（PreviewVideoPanel 已展示）
- 替换为轻量卡片：深色背景 #1a1a2e + 中心大号预览编号
- 状态指示：generating(LoadingOutlined+百分比)、pending(ClockCircleOutlined)、
  ready(CheckCircleFilled 绿色)、error(ExclamationCircleFilled 红色)
- 选中状态：border 2px #1677ff + 右上角角标
- 保留多预览选择功能和点击切换逻辑
---
 .../components/Step5GeneratePreview.tsx       | 89 ++++++++-----------
 1 file changed, 38 insertions(+), 51 deletions(-)

diff --git a/apps/web/src/pages/generate/components/Step5GeneratePreview.tsx b/apps/web/src/pages/generate/components/Step5GeneratePreview.tsx
index f43a8909b..ee2e28247 100644
--- a/apps/web/src/pages/generate/components/Step5GeneratePreview.tsx
+++ b/apps/web/src/pages/generate/components/Step5GeneratePreview.tsx
@@ -161,54 +161,57 @@ const Step5GeneratePreview: React.FC<Step5GeneratePreviewProps> = ({
                   transition: "all 0.2s",
                 }}
               >
-                {/* 缩略图/状态区域 */}
+                {/* 轻量卡片：深色背景 + 状态指示 */}
                 <div
                   style={{
                     aspectRatio,
-                    background: "#000",
+                    background: "#1a1a2e",
                     display: "flex",
+                    flexDirection: "column",
                     alignItems: "center",
                     justifyContent: "center",
                     position: "relative",
+                    gap: 8,
                   }}
                 >
-                  {item.status === "ready" && item.result && (
-                    <video
-                      src={item.result.videoUrl}
-                      controls
-                      autoPlay
-                      muted
-                      loop
-                      preload="metadata"
-                      style={{
-                        width: "100%",
-                        height: "100%",
-                        objectFit: "cover",
-                      }}
-                    />
-                  )}
-                  {(item.status === "pending" || item.status === "generating") && (
-                    <div style={{ textAlign: "center" }}>
-                      <LoadingOutlined style={{ fontSize: 24, color: "#fff" }} spin />
-                      <p style={{ color: "rgba(255,255,255,0.8)", fontSize: 12, marginTop: 8 }}>
-                        {item.status === "pending" ? "排队中..." : `生成中 ${item.progress}%`}
-                      </p>
+                  {/* 中心：预览编号 */}
+                  <span
+                    style={{
+                      fontSize: 24,
+                      fontWeight: 700,
+                      color: "#fff",
+                      opacity: 0.9,
+                    }}
+                  >
+                    预览 #{item.index + 1}
+                  </span>
+
+                  {/* 状态指示 */}
+                  {item.status === "generating" && (
+                    <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                      <LoadingOutlined style={{ fontSize: 14, color: "#fff" }} spin />
+                      <span style={{ color: "rgba(255,255,255,0.8)", fontSize: 12 }}>
+                        生成中 {item.progress}%
+                      </span>
                     </div>
                   )}
+                  {item.status === "pending" && (
+                    <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                      <ClockCircleOutlined
+                        style={{ fontSize: 14, color: "rgba(255,255,255,0.6)" }}
+                      />
+                      <span style={{ color: "rgba(255,255,255,0.6)", fontSize: 12 }}>
+                        排队中...
+                      </span>
+                    </div>
+                  )}
+                  {item.status === "ready" && (
+                    <CheckCircleFilled style={{ fontSize: 18, color: "#52c41a" }} />
+                  )}
                   {item.status === "error" && (
-                    <div style={{ textAlign: "center", padding: 8 }}>
-                      <ExclamationCircleFilled style={{ fontSize: 20, color: "#ef4444" }} />
-                      <p
-                        style={{
-                          color: "rgba(255,255,255,0.7)",
-                          fontSize: 11,
-                          marginTop: 4,
-                        }}
-                      >
-                        生成失败
-                      </p>
-                    </div>
+                    <ExclamationCircleFilled style={{ fontSize: 18, color: "#ef4444" }} />
                   )}
+
                   {/* 选中角标 */}
                   {isSelected && item.status === "ready" && (
                     <div
@@ -227,22 +230,6 @@ const Step5GeneratePreview: React.FC<Step5GeneratePreviewProps> = ({
                     </div>
                   )}
                 </div>
-                {/* 底部信息 */}
-                {item.status === "ready" && item.result && (
-                  <div
-                    style={{
-                      padding: "6px 8px",
-                      background: "#fafafa",
-                      fontSize: 11,
-                      color: "#666",
-                      display: "flex",
-                      justifyContent: "space-between",
-                    }}
-                  >
-                    <span>{item.result.duration.toFixed(1)}秒</span>
-                    <span>{item.result.clipCount}段</span>
-                  </div>
-                )}
               </div>
             )
           })}
-- 
2.54.0