refactor: 精简Step5预览网格 - 移除重复视频播放器，改为轻量状态卡片 (#1380)

- 移除网格中每个格子的 <video> 播放器（右侧 PreviewVideoPanel 已有完整播放器）
- 移除底部时长/片段数信息行（PreviewVideoPanel 已展示）
- 替换为轻量卡片：深色背景 #1a1a2e + 中心大号预览编号
- 状态指示：generating/pending/ready/error 各对应不同图标和颜色
- 保留多预览选择功能和点击切换逻辑

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>
             )
           })}