From e2d10dd357eec799d13f22df6fec9ef0adb8d8e2 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Mon, 17 Aug 2026 15:56:32 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=20Step5=20?=
 =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E9=A2=84=E8=A7=88=E7=BD=91=E6=A0=BC=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=20(#1391)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: xiaoxia <dev@xiaoxiajianji.com>
Co-committed-by: xiaoxia <dev@xiaoxiajianji.com>
---
 apps/web/src/pages/generate/GeneratePage.tsx  |   3 -
 .../components/GenerateStepContent.tsx        |   9 --
 .../components/Step5GeneratePreview.tsx       | 117 +-----------------
 3 files changed, 4 insertions(+), 125 deletions(-)

diff --git a/apps/web/src/pages/generate/GeneratePage.tsx b/apps/web/src/pages/generate/GeneratePage.tsx
index cd881a9db..ed61d4205 100644
--- a/apps/web/src/pages/generate/GeneratePage.tsx
+++ b/apps/web/src/pages/generate/GeneratePage.tsx
@@ -207,13 +207,10 @@ const GeneratePage: React.FC = () => {
             onRetry={handleRetryGenerate}
             onDismissError={handleDismissError}
             presetVoices={presetVoices}
-            videoRatio={videoRatio}
             /* Step5 多预览 */
             previewCount={previewCount}
             onPreviewCountChange={setPreviewCount}
             previewItems={step5Preview.items}
-            previewSelectedIndex={step5Preview.selectedIndex}
-            onSelectPreview={step5Preview.setSelectedIndex}
             previewOverallStatus={step5Preview.previewStatus}
             previewOverallError={step5Preview.previewError}
             previewOverallProgress={step5Preview.progress}
diff --git a/apps/web/src/pages/generate/components/GenerateStepContent.tsx b/apps/web/src/pages/generate/components/GenerateStepContent.tsx
index e2964d97e..e32ab7ad9 100644
--- a/apps/web/src/pages/generate/components/GenerateStepContent.tsx
+++ b/apps/web/src/pages/generate/components/GenerateStepContent.tsx
@@ -63,13 +63,10 @@ export interface GenerateStepContentProps {
   onDismissError: () => void
   /* 其他 */
   presetVoices: PresetVoiceItem[]
-  videoRatio: string
   /* Step4 预览（多预览） */
   previewCount: number
   onPreviewCountChange: (count: number) => void
   previewItems: PreviewItem[]
-  previewSelectedIndex: number
-  onSelectPreview: (index: number) => void
   previewOverallStatus: PreviewStatus
   previewOverallError: string
   previewOverallProgress: number
@@ -110,12 +107,9 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
     onRetry,
     onDismissError,
     presetVoices,
-    videoRatio,
     previewCount,
     onPreviewCountChange,
     previewItems,
-    previewSelectedIndex,
-    onSelectPreview,
     previewOverallStatus,
     previewOverallError,
     previewOverallProgress,
@@ -161,12 +155,9 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
     case 5:
       return (
         <Step5GeneratePreview
-          videoRatio={videoRatio}
           previewCount={previewCount}
           onPreviewCountChange={onPreviewCountChange}
           items={previewItems}
-          selectedIndex={previewSelectedIndex}
-          onSelectPreview={onSelectPreview}
           overallStatus={previewOverallStatus}
           overallError={previewOverallError}
           overallProgress={previewOverallProgress}
diff --git a/apps/web/src/pages/generate/components/Step5GeneratePreview.tsx b/apps/web/src/pages/generate/components/Step5GeneratePreview.tsx
index 75c0e417b..598e1b770 100644
--- a/apps/web/src/pages/generate/components/Step5GeneratePreview.tsx
+++ b/apps/web/src/pages/generate/components/Step5GeneratePreview.tsx
@@ -1,11 +1,11 @@
 /**
  * Step 5 生成预览组件（支持多预览）
- * 调用后端预览生成接口，展示多个真实视频预览（网格布局）
+ * 调用后端预览生成接口，展示预览生成状态
+ * 预览视频由右侧 PreviewVideoPanel 展示，本组件不重复显示预览网格
  */
 import React from "react"
 import {
   CheckCircleFilled,
-  LoadingOutlined,
   ReloadOutlined,
   PlayCircleOutlined,
   ExclamationCircleFilled,
@@ -15,12 +15,9 @@ import { InputNumber } from "antd"
 import type { PreviewItem, PreviewStatus } from "../hooks/useStep5Preview"
 
 interface Step5GeneratePreviewProps {
-  videoRatio: string
   previewCount: number
   onPreviewCountChange: (count: number) => void
   items: PreviewItem[]
-  selectedIndex: number
-  onSelectPreview: (index: number) => void
   overallStatus: PreviewStatus
   overallError: string
   overallProgress: number
@@ -37,12 +34,9 @@ const PREVIEW_COUNT_OPTIONS = [
 ]
 
 const Step5GeneratePreview: React.FC<Step5GeneratePreviewProps> = ({
-  videoRatio,
   previewCount,
   onPreviewCountChange,
   items,
-  selectedIndex,
-  onSelectPreview,
   overallStatus,
   overallError,
   overallProgress,
@@ -50,7 +44,6 @@ const Step5GeneratePreview: React.FC<Step5GeneratePreviewProps> = ({
   onGeneratePreview,
   onRegeneratePreview,
 }) => {
-  const aspectRatio = (videoRatio || "16:9").replace(":", "/") // "9:16" → "9/16", "16:9" → "16/9"
   const isIdle = overallStatus === "idle"
   const isError = overallStatus === "error" && !items.some((it) => it.status === "ready")
 
@@ -127,109 +120,7 @@ const Step5GeneratePreview: React.FC<Step5GeneratePreviewProps> = ({
         </div>
       )}
 
-      {/* 多预览网格（生成中/完成/部分完成） */}
-      {(anyGenerating || overallStatus === "ready") && items.length > 0 && (
-        <div
-          className="xx-preview-grid"
-          style={{
-            display: "grid",
-            gridTemplateColumns: `repeat(${Math.min(items.length, 3)}, 1fr)`,
-            gap: 12,
-            maxWidth: `${Math.min(items.length, 3) * 280 + (Math.min(items.length, 3) - 1) * 12}px`,
-            margin: "0 auto 16px",
-          }}
-        >
-          {items.map((item) => {
-            const isSelected = item.index === selectedIndex
-            return (
-              <div
-                key={item.index}
-                onClick={() => {
-                  if (item.status === "ready") onSelectPreview(item.index)
-                }}
-                style={{
-                  borderRadius: 8,
-                  border: isSelected ? "2px solid #1677ff" : "1px solid #e8e8e8",
-                  overflow: "hidden",
-                  cursor: item.status === "ready" ? "pointer" : "default",
-                  opacity: item.status === "error" ? 0.6 : 1,
-                  transition: "all 0.2s",
-                }}
-              >
-                {/* 轻量卡片：深色背景 + 状态指示 */}
-                <div
-                  style={{
-                    aspectRatio,
-                    background: "#1a1a2e",
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    position: "relative",
-                    gap: 8,
-                  }}
-                >
-                  {/* 中心：预览编号 */}
-                  <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" && (
-                    <ExclamationCircleFilled style={{ fontSize: 18, color: "#ef4444" }} />
-                  )}
-
-                  {/* 选中角标 */}
-                  {isSelected && item.status === "ready" && (
-                    <div
-                      style={{
-                        position: "absolute",
-                        top: 4,
-                        right: 4,
-                        background: "#1677ff",
-                        color: "#fff",
-                        fontSize: 10,
-                        padding: "2px 6px",
-                        borderRadius: 4,
-                      }}
-                    >
-                      预览 #{item.index + 1}
-                    </div>
-                  )}
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      )}
+      {/* 预览网格已移除 — 右侧 PreviewVideoPanel 已展示实际预览视频，左侧不再重复显示 */}
 
       {/* 整体进度条（多预览生成中） */}
       {anyGenerating && (
@@ -244,7 +135,7 @@ const Step5GeneratePreview: React.FC<Step5GeneratePreviewProps> = ({
           <CheckCircleFilled style={{ color: "#52c41a", marginRight: 8 }} />
           <span>
             {items.filter((it) => it.status === "ready").length} 个预览生成成功
-            {items.length > 1 ? "，点击选择要查看的版本" : "，确认效果后进入下一步"}
+            "，请在右侧预览面板查看效果"
           </span>
           <button
             className="xx-preview-regenerate-btn"