From bd9623fd20bbc6a883b5c4f26bd97d918d514b81 Mon Sep 17 00:00:00 2001
From: Frontend Agent <agent@xiaoxiajianji.com>
Date: Sat, 8 Aug 2026 00:25:15 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD4?=
 =?UTF-8?q?=E9=A1=B9=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 预览数量输入改造：保留1/2/3快捷按钮，新增InputNumber数字输入框(1~10)
2. 前端并发创建预览任务：for循环串行await改为Promise.all并行请求
3. 预览卡片视频播放修复：添加controls autoPlay muted loop属性
4. 预览卡片视频填充修复：objectFit从contain改为cover，裁切填充不留白
---
 .../components/Step4GeneratePreview.tsx        | 18 ++++++++++++++++--
 .../pages/generate/hooks/useStep4Preview.ts    |  7 ++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/pages/generate/components/Step4GeneratePreview.tsx b/apps/web/src/pages/generate/components/Step4GeneratePreview.tsx
index 7a9ec190f..1b04ee2db 100644
--- a/apps/web/src/pages/generate/components/Step4GeneratePreview.tsx
+++ b/apps/web/src/pages/generate/components/Step4GeneratePreview.tsx
@@ -11,6 +11,7 @@ import {
   ExclamationCircleFilled,
   ClockCircleOutlined,
 } from "@ant-design/icons"
+import { InputNumber } from "antd"
 import type { PreviewItem, PreviewStatus } from "../hooks/useStep4Preview"
 
 interface Step4GeneratePreviewProps {
@@ -65,7 +66,7 @@ const Step4GeneratePreview: React.FC<Step4GeneratePreviewProps> = ({
       {isIdle && (
         <div style={{ marginBottom: 16, display: "flex", alignItems: "center", gap: 12 }}>
           <span style={{ fontSize: 14, color: "#666" }}>预览数量：</span>
-          <div style={{ display: "flex", gap: 8 }}>
+          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
             {PREVIEW_COUNT_OPTIONS.map((opt) => (
               <button
                 key={opt.value}
@@ -85,6 +86,15 @@ const Step4GeneratePreview: React.FC<Step4GeneratePreviewProps> = ({
                 {opt.label}
               </button>
             ))}
+            <InputNumber
+              min={1}
+              max={10}
+              value={previewCount}
+              onChange={(val) => val && onPreviewCountChange(val)}
+              style={{ width: 70 }}
+              placeholder="自定义"
+            />
+            <span style={{ fontSize: 12, color: "#999", marginLeft: 4 }}>（1~10）</span>
           </div>
           {previewCount > 1 && (
             <span style={{ fontSize: 12, color: "#999" }}>生成多个预览可对比不同剪辑效果</span>
@@ -163,11 +173,15 @@ const Step4GeneratePreview: React.FC<Step4GeneratePreviewProps> = ({
                   {item.status === "ready" && item.result && (
                     <video
                       src={item.result.videoUrl}
+                      controls
+                      autoPlay
+                      muted
+                      loop
                       preload="metadata"
                       style={{
                         width: "100%",
                         height: "100%",
-                        objectFit: "contain",
+                        objectFit: "cover",
                       }}
                     />
                   )}
diff --git a/apps/web/src/pages/generate/hooks/useStep4Preview.ts b/apps/web/src/pages/generate/hooks/useStep4Preview.ts
index 116e7b2e0..4460035b4 100644
--- a/apps/web/src/pages/generate/hooks/useStep4Preview.ts
+++ b/apps/web/src/pages/generate/hooks/useStep4Preview.ts
@@ -323,8 +323,8 @@ export function useStep4Preview({
 
     const assetIds = materialMode === "auto" ? smartSelectedIds : selectedMaterials
 
-    // 并发创建所有预览任务
-    for (let i = 0; i < previewCount; i++) {
+    // 并发创建所有预览任务（Promise.all 并行请求，减少串行等待）
+    const createTasks = Array.from({ length: previewCount }, async (_, i) => {
       try {
         const response = await createPreview({
           template_id: selectedTemplate,
@@ -344,7 +344,8 @@ export function useStep4Preview({
           prev.map((it) => (it.index === i ? { ...it, status: "error", error: errMsg } : it)),
         )
       }
-    }
+    })
+    await Promise.all(createTasks)
   }, [
     selectedTemplate,
     materialTotal,