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",
                       }}
                     />
                   )}

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,