test(#1677 ): E2E 适配新 5 步流程（批量生成改造）

- Step1 下一步 → 数量弹窗（默认 1 个）确认 - Step4 标题+预览+确认生成（左预览右栏标题） - 单视频（N=1）点击「确认生成视频」直接跳 Step5 封面，与旧流程一致
fix(#1677 ): AI Review 防御性修复 — setState 函数式更新空数组兜底
2026-09-05 09:37:31 +08:00 · 2026-09-05 08:56:25 +08:00 · 2026-09-05 08:38:12 +08:00 · 2026-09-05 07:58:56 +08:00
26 changed files with 2248 additions and 641 deletions
@@ -255,32 +255,10 @@ test.describe("Core generation flow", () => {
      expect(genData.items.length).toBeGreaterThan(0)
      expect(genData.items[0].id).toBeTruthy()

-      // Step 5: 确认生成页 — 任务创建成功后自动跳转，展示渲染进度
-      await expect(page.getByRole("heading", { name: /确认生成/ })).toBeVisible({
-        timeout: 15_000,
+      // 单视频（N=1）：点击「确认生成视频」后直接跳 Step 5 封面（与旧流程一致）
+      await expect(page.getByRole("heading", { name: /选择封面/ })).toBeVisible({
+        timeout: 180_000,
      })
-
-      // Step 5 → Step 6：等待渲染终态
-      // - 完成：页面出现「视频生成完成」，步骤5「下一步」按钮解锁，点击进入封面
-      // - 失败：出现「生成失败」，停在确认生成页也算向导流程走通
-      // - 超时未终态（测试环境 worker 可能不处理任务）：进度仍在轮询，同样算走通
-      const renderSucceeded = await page
-        .getByText("视频生成完成", { exact: false })
-        .waitFor({ timeout: 180_000 })
-        .then(() => true)
-        .catch(() => false)
-      if (renderSucceeded) {
-        // 渲染完成：手动点「下一步」进入封面步骤（渲染完不自动跳转）
-        await page.getByRole("button", { name: "下一步" }).click()
-        // Step 6: 封面（最后一步，无主按钮），仅验证页面渲染
-        await expect(page.getByRole("heading", { name: /选择封面/ })).toBeVisible({
-          timeout: 15_000,
-        })
-      } else {
-        // 失败或超时：仍在确认生成页（进度展示或失败提示），向导流程已完整走通
-        await expect(page.getByRole("heading", { name: /确认生成/ })).toBeVisible()
-        console.log("[E2E] 渲染任务失败或未在 180s 内完成，冒烟测试仍通过（已达确认生成页）")
-      }
    } else {
      console.log(`[E2E] Generate API returned ${genResp.status()}, wizard flow test still passes`)
      // 创建失败时停留在标题页并展示错误提示
@@ -33,15 +33,36 @@ export interface CreatePreviewRequest {
    preset_id?: string
    volume?: number
  }
+  /** 批量预览数量（1~10），默认1。N>1 时返回 N 个独立变体任务 */
+  preview_count?: number
+  /** 各变体独立标题文字：长度1=共用，长度=preview_count=独立，空数组=使用 title_config.text */
+  titles?: string[]
+  /** 各变体独立配音素材库ID：长度1=共用，长度=preview_count=独立，空数组=回退 voice_library_id */
+  voice_library_ids?: string[]
+  /** 各变体独立封面URL：长度1=共用，长度=preview_count=独立（预览阶段通常为空） */
+  cover_urls?: string[]
 }

-/** 创建预览任务响应 */
-export interface CreatePreviewResponse {
+/** 单个预览变体任务 */
+export interface PreviewVariantItem {
  task_id: string
-  status: PreviewStatus
+  status: string
+  progress: number
  is_preview: boolean
+  variant_index: number
  resolution: string
-  created_at: string
+  video_url: string
+  duration: number
+  error_message: string
+  title_text: string
+  voice_library_id: string
+  created_at?: string | null
+}
+
+/** 创建预览任务响应（单变体，preview_count=1 时 items 长度为1） */
+export interface CreatePreviewResponse {
+  items: PreviewVariantItem[]
+  total: number
  /** 后端自动关联的编辑计划 ID（用于 fallback 路径传递 source_edit_plan_id） */
  source_edit_plan_id?: string
 }
@@ -92,6 +92,14 @@ export interface CreateGenerationTaskRequest {
    preset_id?: string
    volume?: number
  }
+  /** 批量生成数量（1~10），默认1。不传=单条旧逻辑 */
+  count?: number
+  /** 各变体独立标题文字：长度1=共用，长度=count=独立，空数组=使用 title_config/custom_title */
+  titles?: string[]
+  /** 各变体独立配音素材库ID：长度1=共用，长度=count=独立，空数组=回退 voice_library_id */
+  voice_library_ids?: string[]
+  /** 各变体独立封面URL：长度1=共用，长度=count=独立，空数组=回退 cover_url */
+  cover_urls?: string[]
 }

 /** 单个生成任务详情（对齐后端 GenerationTaskResponse） */
@@ -1,12 +1,11 @@
 /**
- * 智能剪辑页面 — 前端实时预览架构
- * 6 步向导：选择模板 → 素材 → 配音 → 标题(含预览) → 确认生成 → 选择封面
+ * 智能剪辑页面（Issue #1677 多视频批量生成）
+ * 5 步向导：选择模板(弹数量) → 素材 → 配音 → 标题(预览+确认生成) → 封面
 *
 * 架构：
- * - 步骤 4 右侧显示 FrontendPreviewPlayer 实时预览
- * - 步骤 5 右侧内联播放生成中的/最终视频
- * - 步骤 6 封面从最终成片中智能选帧（MediaKit）
- * - 点"确认生成"时调用 createGenerationTask 创建一次服务器渲染任务
+ * - N=1：前端 Canvas 实时预览（FrontendPreviewPlayer），零回归
+ * - N>1：服务器批量预览（POST /generation/preview?preview_count=N），
+ *   N 个变体分别轮询，网格展示、独立可播放、CSS 标题浮层实时叠加、勾选批量生成
 */
 import React, { useMemo, useState, useEffect, useRef, useCallback } from "react"
 import { message } from "antd"
@@ -17,16 +16,20 @@ import { useCloneProgress } from "@/hooks/useCloneProgress"
 import CloneModal from "@/components/voice/CloneModal"
 import GenerateHeader from "./components/GenerateHeader"
 import FrontendPreviewPlayer from "./components/FrontendPreviewPlayer"
+import ServerPreviewGrid from "./components/ServerPreviewGrid"
+import PreviewCountModal from "./components/PreviewCountModal"
 import GenerateStepsBar from "./components/GenerateStepsBar"
 import GenerateStepContent from "./components/GenerateStepContent"
 import GenerateStepActions from "./components/GenerateStepActions"
 import { useGenerateFormState } from "./hooks/useGenerateFormState"
 import { useStepNavigation } from "./hooks/useStepNavigation"
 import { useGenerateVideo } from "./hooks/useGenerateVideo"
+import { useBatchPreview } from "./hooks/useBatchPreview"
 import { usePreviewAssets } from "./hooks/usePreviewAssets"
 import { useTitleStyleUpdaters } from "./hooks/useStep4Title/useTitleStyleUpdaters"
 import { getAssetsByKind } from "@/api/assets"
 import { previewTts } from "@/api/tts"
+import { calculateResolution } from "./utils/calculateResolution"
 import "./generate.css"

 const GeneratePage: React.FC = () => {
@@ -53,10 +56,8 @@ const GeneratePage: React.FC = () => {
    selectedVoice,
    setSelectedVoice,
    voiceMode,
-    setVoiceMode,
    selectedClonedVoice,
-    setSelectedClonedVoice,
-    presetVoices,
+
    cloneModalOpen,
    setCloneModalOpen,
    videoRatio,
@@ -72,8 +73,51 @@ const GeneratePage: React.FC = () => {
    setStoredSourceEditPlanId,
    serverClips,
    setServerClips,
+    previewCount,
+    setPreviewCount,
+    previewTitles,
+    setPreviewTitles,
+    voiceModePerVideo,
+    setVoiceModePerVideo,
+    voiceLibraryIds,
+    setVoiceLibraryIds,
+    previewCovers,
+    setPreviewCovers,
+    selectedVariantIds,
+    setSelectedVariantIds,
  } = formState

+  const isBatch = previewCount > 1
+
+  /* ── 配音选择同步：共用配音 ↔ 变体数组 ── */
+  // 触发场景：①共用配音变化 ②批量模式进入/退出 ③独立→共用切换（需把所有变体刷成共用配音）
+  // 独立模式下：仅同步变体[0]（其选择器绑定共用配音），用户单独选择的其他变体不覆盖
+  const prevVoiceSyncRef = useRef({
+    voice: selectedVoice,
+    batch: isBatch,
+    perVideo: voiceModePerVideo,
+  })
+  useEffect(() => {
+    const prev = prevVoiceSyncRef.current
+    const voiceChanged = prev.voice !== selectedVoice
+    const modeChanged = prev.batch !== isBatch || prev.perVideo !== voiceModePerVideo
+    prevVoiceSyncRef.current = { voice: selectedVoice, batch: isBatch, perVideo: voiceModePerVideo }
+    if (!voiceChanged && !modeChanged) return
+    if (!isBatch) return
+    if (!voiceModePerVideo) {
+      // 共用模式（含刚从独立切回）：所有变体跟随共用配音，未选择的补默认值
+      setVoiceLibraryIds((prevIds) => (prevIds || []).map((id) => id || selectedVoice))
+    } else if (voiceChanged) {
+      // 独立模式下共用配音变化：仅同步变体[0]（与共用选择器绑定），其余不覆盖
+      setVoiceLibraryIds((prevIds) =>
+        (prevIds || []).map((id, i) => (i === 0 ? selectedVoice : id)),
+      )
+    }
+  }, [selectedVoice, isBatch, voiceModePerVideo, setVoiceLibraryIds])
+
+  /* ── 数量选择弹窗 ── */
+  const [countModalOpen, setCountModalOpen] = useState(false)
+
  /* ── 标题样式回调 ── */
  const styleUpdaters = useTitleStyleUpdaters({
    titleSettings,
@@ -127,7 +171,7 @@ const GeneratePage: React.FC = () => {
  }, [selectedVoice, selectedClonedVoice, titleSettings.title, voiceMaterials])

  /* ── 克隆声音 ── */
-  const { clones: clonedVoices, addClone, hasProcessing } = useCloneProgress()
+  const { addClone } = useCloneProgress()

  const handleCloneSuccess = (voice: VoiceClone) => {
    addClone(voice)
@@ -156,19 +200,95 @@ const GeneratePage: React.FC = () => {
    [bgm, currentTemplate],
  )

-  /* ── 加载素材详情（供前端预览播放器使用 + 配音时长校验） ── */
+  /* ── 加载素材详情（供前端预览播放器使用） ── */
  const previewAssetsEnabled = previewAssetIds.length > 0
  const { assets: previewAssets, ready: previewAssetsReady } = usePreviewAssets(
    previewAssetIds,
    previewAssetsEnabled,
  )

-  /* ── 预览就绪：素材已加载，且有模板 ── */
-  const previewReady = useMemo(
+  /* ── 预览就绪 ── */
+  const singlePreviewReady = useMemo(
    () => previewAssetsReady && !!currentTemplate,
    [previewAssetsReady, currentTemplate],
  )

+  /* ── 批量服务器预览（N>1） ── */
+  const buildPreviewRequest = useCallback(() => {
+    const { width, height } = calculateResolution(videoRatio || "9:16")
+    const voiceLibraryId =
+      voiceMode === "clone" ? selectedClonedVoice || selectedVoice || "" : selectedVoice || ""
+    return {
+      template_id: selectedTemplate,
+      asset_ids: previewAssetIds,
+      output_width: width,
+      output_height: height,
+      video_ratio: videoRatio,
+      voice_library_id: voiceLibraryId,
+      ...(voiceModePerVideo && voiceLibraryIds.some(Boolean)
+        ? { voice_library_ids: voiceLibraryIds.map((id) => id || voiceLibraryId) }
+        : {}),
+      preview_count: previewCount,
+      // 批量预览不传 titles/title_config：标题文字与样式由前端 CSS 浮层实时叠加
+      // （用户改标题/样式即时可见，无需重渲染）；正式生成时才把标题烧录进成片
+      duration: duration || undefined,
+      bgm_config: {
+        enabled: bgm !== false,
+        ...(bgmConfig?.music_id ? { preset_id: bgmConfig.music_id } : {}),
+      },
+      ...(storedSourceEditPlanId || sourceEditPlanId
+        ? { source_edit_plan_id: storedSourceEditPlanId || sourceEditPlanId || undefined }
+        : {}),
+    }
+  }, [
+    videoRatio,
+    voiceMode,
+    selectedClonedVoice,
+    selectedVoice,
+    selectedTemplate,
+    previewAssetIds,
+    voiceModePerVideo,
+    voiceLibraryIds,
+    previewCount,
+    duration,
+    bgm,
+    bgmConfig,
+    storedSourceEditPlanId,
+    sourceEditPlanId,
+  ])
+
+  const {
+    variants,
+    status: batchPreviewStatus,
+    progress: batchPreviewProgress,
+    failedCount: batchFailedCount,
+    trigger: retryBatchPreview,
+  } = useBatchPreview({
+    enabled: isBatch && currentStep >= 4 && previewAssetIds.length > 0 && !!selectedTemplate,
+    buildRequest: buildPreviewRequest,
+    onPreviewTasksCreated: (_taskIds, planId) => {
+      if (planId) setStoredSourceEditPlanId(planId)
+    },
+  })
+
+  /** 批量预览就绪：全部变体渲染完成 */
+  const batchPreviewReady =
+    isBatch && variants.length > 0 && variants.every((v) => v.status === "ready")
+
+  /** 步骤4整体预览就绪状态 */
+  const previewReady = isBatch ? batchPreviewReady : singlePreviewReady
+
+  /* ── 勾选变体 ── */
+  const toggleVariantSelect = useCallback(
+    (index: number) => {
+      setSelectedVariantIds((prev) => {
+        const list = prev || []
+        return list.includes(index) ? list.filter((i) => i !== index) : [...list, index].sort()
+      })
+    },
+    [setSelectedVariantIds],
+  )
+
  /* ── 视频生成核心逻辑 ── */
  const {
    generating,
@@ -199,16 +319,61 @@ const GeneratePage: React.FC = () => {
    sourceEditPlanId: storedSourceEditPlanId || sourceEditPlanId,
    previewTaskId,
    bgmConfig,
+    previewCount,
+    variantTitles: previewTitles,
+    variantVoiceLibraryIds: voiceLibraryIds,
+    voiceModePerVideo,
+    variantCoverUrls: previewCovers,
+    selectedVariantIndexes: isBatch ? selectedVariantIds : undefined,
    onGenerationSuccess: () => {
      setPreviewTaskId(null)
      setStoredSourceEditPlanId(null)
    },
  })

-  /* ── 步骤4「确认生成视频」：校验标题/预览 → 创建最终渲染任务 → 成功后进入步骤5 ── */
+  /* ── 数量弹窗确认：设置数量 + 同步批量数组长度 + 进入步骤2 ── */
+  const handleCountConfirm = useCallback(
+    (count: number) => {
+      setPreviewCount(count)
+      setCountModalOpen(false)
+      // 同步批量数组长度
+      setPreviewTitles((prev) => {
+        const list = prev || []
+        const base = list[0] || titleSettings.title || ""
+        return Array.from({ length: count }, (_, i) => list[i] ?? (i === 0 ? base : ""))
+      })
+      setVoiceLibraryIds((prev) => {
+        const list = prev || []
+        return Array.from({ length: count }, (_, i) => list[i] ?? selectedVoice ?? "")
+      })
+      setPreviewCovers((prev) => {
+        const list = prev || []
+        return Array.from({ length: count }, (_, i) => list[i] ?? "")
+      })
+      setSelectedVariantIds(Array.from({ length: count }, (_, i) => i))
+      setCurrentStep(2)
+    },
+    [
+      setPreviewCount,
+      setPreviewTitles,
+      setVoiceLibraryIds,
+      setPreviewCovers,
+      setSelectedVariantIds,
+      setCurrentStep,
+      titleSettings.title,
+      selectedVoice,
+    ],
+  )
+
+  /* ── 步骤4「确认生成视频」 ── */
  const handleConfirmGenerate = useCallback(async () => {
-    if (!titleSettings.title.trim()) {
-      message.warning("请选择或输入标题")
+    // 标题校验
+    if (previewTitles.some((t) => !t?.trim())) {
+      message.warning("请为每个视频输入标题")
+      return
+    }
+    if (isBatch && selectedVariantIds.length === 0) {
+      message.warning("请至少勾选一个视频")
      return
    }
    if (!previewReady) {
@@ -216,10 +381,18 @@ const GeneratePage: React.FC = () => {
      return
    }
    const ok = await handleGenerate()
-    if (ok) {
+    if (ok && !isBatch) {
      setCurrentStep(5)
    }
-  }, [titleSettings.title, previewReady, handleGenerate, setCurrentStep])
+    // 批量模式停留在步骤4，右侧网格显示生成进度，完成后点"下一步"进封面
+  }, [
+    isBatch,
+    selectedVariantIds.length,
+    previewReady,
+    previewTitles,
+    handleGenerate,
+    setCurrentStep,
+  ])

  /* ── 步骤导航 ── */
  const { goNext, goPrev } = useStepNavigation({
@@ -232,11 +405,24 @@ const GeneratePage: React.FC = () => {
    titleSettings,
    previewReady,
    generated,
+    previewTitles,
+    selectedCount: isBatch ? selectedVariantIds.length : 1,
+    onOpenCountModal: () => setCountModalOpen(true),
  })

-  /* ── 最终成片（步骤5/6 右侧播放） ── */
+  /* ── 最终成片（单视频右侧播放） ── */
  const finalVideo = generatedVideos[0]

+  /** 批量生成进度文案 */
+  const batchGeneratingText = useMemo(() => {
+    if (batchPreviewStatus === "loading")
+      return `AI 正在渲染 ${previewCount} 个预览视频… ${batchPreviewProgress}%`
+    if (batchPreviewStatus === "failed") return "预览渲染失败，请重试"
+    if (batchPreviewStatus === "partial_failed")
+      return `${batchFailedCount} 个预览失败，可重新生成或勾选成功的视频`
+    return ""
+  }, [batchPreviewStatus, batchPreviewProgress, batchFailedCount, previewCount])
+
  /* ================================================================
     渲染
     ================================================================ */
@@ -247,8 +433,142 @@ const GeneratePage: React.FC = () => {

      <GenerateStepsBar currentStep={currentStep} onStepClick={setCurrentStep} />

-      <div className={`xx-generate-layout${currentStep < 4 ? " full-width" : ""}`}>
-        {/* ════ 左侧：表单区 ════ */}
+      <div
+        className={`xx-generate-layout${currentStep < 4 ? " full-width" : ""}${
+          currentStep === 4 ? " step4-layout" : ""
+        }`}
+      >
+        {/* ════ 步骤4：左侧预览大区域 ════ */}
+        {currentStep === 4 && !!currentTemplate && (
+          <div className="xx-generate-preview-col">
+            {!isBatch ? (
+              /* 单视频：前端 Canvas 实时预览（与旧版一致） */
+              <FrontendPreviewPlayer
+                assets={previewAssets}
+                template={currentTemplate}
+                videoRatio={videoRatio}
+                ready={previewAssets.length > 0}
+                serverClips={serverClips}
+                voiceAudioUrl={previewVoiceAudioUrl || undefined}
+                titleSettings={{
+                  title: titleSettings.title,
+                  size: titleSettings.size,
+                  font: titleSettings.font,
+                  color: titleSettings.color,
+                  position: titleSettings.position as "top" | "center" | "bottom" | "custom",
+                  bold: titleSettings.bold,
+                  italic: titleSettings.italic,
+                  stroke: titleSettings.stroke,
+                  shadow: titleSettings.shadow,
+                  posX: titleSettings.posX,
+                  posY: titleSettings.posY,
+                }}
+                onTitlePositionChange={styleUpdaters.updateTitlePosition}
+              />
+            ) : (
+              /* 批量：服务器预览网格 */
+              <div className="xx-form-section">
+                <div className="xx-preview-header">
+                  <h3>🎬 {previewCount} 个视频预览</h3>
+                  {batchPreviewStatus === "loading" && (
+                    <span style={{ fontSize: 13, color: "var(--text-secondary, #666)" }}>
+                      {batchPreviewProgress}%
+                    </span>
+                  )}
+                  {(batchPreviewStatus === "failed" || batchPreviewStatus === "partial_failed") && (
+                    <button
+                      type="button"
+                      className="xx-btn xx-btn-ghost xx-btn-sm"
+                      onClick={retryBatchPreview}
+                    >
+                      🔄 重新生成预览
+                    </button>
+                  )}
+                </div>
+
+                {batchGeneratingText && (
+                  <div
+                    style={{
+                      fontSize: 13,
+                      color:
+                        batchPreviewStatus === "failed"
+                          ? "var(--error-color, #ef4444)"
+                          : "var(--text-secondary, #666)",
+                      marginBottom: 12,
+                    }}
+                  >
+                    {batchGeneratingText}
+                  </div>
+                )}
+
+                <ServerPreviewGrid
+                  variants={variants}
+                  titles={previewTitles}
+                  titleStyle={{
+                    position: titleSettings.position,
+                    color: titleSettings.color,
+                    size: titleSettings.size,
+                  }}
+                  selectedIds={selectedVariantIds}
+                  onToggleSelect={toggleVariantSelect}
+                  selectable={!generating}
+                />
+
+                {/* 生成中进度（批量） */}
+                {generating && (
+                  <div className="xx-gen-progress-card" style={{ marginTop: 16 }}>
+                    <div className="xx-gen-progress-header">
+                      <div className="xx-gen-progress-info">
+                        <div className="xx-gen-progress-phase">
+                          ⏳ 正在渲染 {selectedVariantIds.length} 个最终视频… {Math.round(progress)}
+                          %
+                        </div>
+                        <div className="xx-gen-progress-sub">
+                          生成过程中可以切换到其他页面，完成后可在任务历史查看
+                        </div>
+                      </div>
+                    </div>
+                    <div className="xx-gen-progress-bar">
+                      <div
+                        className="xx-gen-progress-bar-fill"
+                        style={{ width: `${Math.min(Math.round(progress), 100)}%` }}
+                      />
+                    </div>
+                  </div>
+                )}
+
+                {generateError && !generating && (
+                  <div className="xx-gen-error-card" style={{ marginTop: 16 }}>
+                    <div className="xx-gen-error-info">
+                      <div className="xx-gen-error-title">生成失败</div>
+                      <div className="xx-gen-error-msg">{generateError}</div>
+                    </div>
+                    <button
+                      type="button"
+                      className="xx-btn xx-btn-primary xx-btn-sm"
+                      onClick={handleRetryGenerate}
+                    >
+                      🔄 重试
+                    </button>
+                  </div>
+                )}
+
+                {generated && !generating && (
+                  <div className="xx-gen-success-card" style={{ marginTop: 16 }}>
+                    <div className="xx-gen-success-info">
+                      <div className="xx-gen-success-title">✅ 视频生成完成！</div>
+                      <div className="xx-gen-success-sub">
+                        共生成 {generatedVideos.length} 条视频，点击「下一步」为每个视频选择封面
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* ════ 右侧：步骤1~3 表单 / 步骤4 标题边栏 / 步骤5 封面 ════ */}
        <div className="xx-generate-form">
          <GenerateStepContent
            currentStep={currentStep}
@@ -280,15 +600,6 @@ const GeneratePage: React.FC = () => {
            selectedVoice={selectedVoice}
            onSelectedVoiceChange={setSelectedVoice}
            onServerClipsChange={setServerClips}
-            voiceMode={voiceMode}
-            onVoiceModeChange={setVoiceMode}
-            selectedClonedVoice={selectedClonedVoice}
-            onSelectedClonedVoiceChange={setSelectedClonedVoice}
-            clonedVoices={clonedVoices}
-            addClone={addClone}
-            hasProcessing={hasProcessing}
-            cloneModalOpen={cloneModalOpen}
-            onCloneModalOpenChange={setCloneModalOpen}
            generating={generating}
            generated={generated}
            generateError={generateError}
@@ -296,7 +607,16 @@ const GeneratePage: React.FC = () => {
            generatedVideos={generatedVideos}
            onRetry={handleRetryGenerate}
            onDismissError={handleDismissError}
-            presetVoices={presetVoices}
+            previewCount={previewCount}
+            previewTitles={previewTitles}
+            onPreviewTitlesChange={setPreviewTitles}
+            voiceModePerVideo={voiceModePerVideo}
+            onVoiceModePerVideoChange={setVoiceModePerVideo}
+            voiceLibraryIds={voiceLibraryIds}
+            onVoiceLibraryIdsChange={setVoiceLibraryIds}
+            previewCovers={previewCovers}
+            onPreviewCoversChange={setPreviewCovers}
+            selectedVariantIds={selectedVariantIds}
          />

          <GenerateStepActions
@@ -307,43 +627,20 @@ const GeneratePage: React.FC = () => {
            generating={generating}
            generated={generated}
            generateError={generateError}
+            selectedCount={isBatch ? selectedVariantIds.length : 1}
          />
        </div>

-        {/* ════ 右侧：步骤4实时预览，步骤5/6最终视频 ════ */}
-        <div className="xx-generate-right-col">
-          {currentStep === 4 && !!currentTemplate && (
-            <FrontendPreviewPlayer
-              assets={previewAssets}
-              template={currentTemplate}
-              videoRatio={videoRatio}
-              ready={previewAssets.length > 0}
-              serverClips={serverClips}
-              voiceAudioUrl={previewVoiceAudioUrl || undefined}
-              titleSettings={{
-                title: titleSettings.title,
-                size: titleSettings.size,
-                font: titleSettings.font,
-                color: titleSettings.color,
-                position: titleSettings.position as "top" | "center" | "bottom" | "custom",
-                bold: titleSettings.bold,
-                italic: titleSettings.italic,
-                stroke: titleSettings.stroke,
-                shadow: titleSettings.shadow,
-                posX: titleSettings.posX,
-                posY: titleSettings.posY,
-              }}
-              onTitlePositionChange={styleUpdaters.updateTitlePosition}
-            />
-          )}
-          {currentStep >= 5 && generated && finalVideo && (
+        {/* ════ 步骤5（封面）：成片播放器（单视频） ════ */}
+        {currentStep === 5 && !isBatch && generated && finalVideo && (
+          <div className="xx-generate-right-col">
            <div className="xx-inline-video-player">
              <video
                src={finalVideo.download_url || finalVideo.file_url}
                controls
-                autoPlay={currentStep === 5}
+                autoPlay
                style={{ width: "100%", maxHeight: "70vh", objectFit: "contain", borderRadius: 12 }}
-                poster={finalVideo.thumbnail_url || undefined}
+                poster={finalVideo.thumbnail_url}
              />
              <div style={{ display: "flex", gap: 8, marginTop: 12, justifyContent: "center" }}>
                <button className="xx-btn xx-btn-ghost xx-btn-sm" onClick={handleDownload}>
@@ -360,10 +657,18 @@ const GeneratePage: React.FC = () => {
                </button>
              </div>
            </div>
-          )}
-        </div>
+          </div>
+        )}
      </div>

+      {/* 数量选择弹窗 */}
+      <PreviewCountModal
+        open={countModalOpen}
+        defaultCount={1}
+        onConfirm={handleCountConfirm}
+        onCancel={() => setCountModalOpen(false)}
+      />
+
      {/* 音色克隆弹窗 */}
      <CloneModal
        open={cloneModalOpen}
@@ -1,10 +1,10 @@
 /**
- * GeneratePage 步骤底部操作按钮
+ * GeneratePage 步骤底部操作按钮（Issue #1677 改造后 5 步）
 *
 * 步骤 1~3：上一步 / 下一步
- * 步骤 4（标题+预览）：上一步 / 确认生成视频（点击后直接创建最终渲染任务，成功后跳转步骤5）
- * 步骤 5（确认生成）：上一步 / 下一步（渲染中禁用，渲染完成后可进入封面）
- * 步骤 6（选择封面）：仅上一步
+ * 步骤 4（标题+预览+确认生成）：确认生成按钮在右侧边栏底部（含勾选数量），
+ *   渲染中显示进度；生成完成后显示"下一步 → 选择封面"
+ * 步骤 5（选择封面）：仅上一步
 */
 import React from "react"

@@ -17,9 +17,11 @@ export interface GenerateStepActionsProps {
  generating: boolean
  generated: boolean
  generateError: string | null
+  /** 批量模式下勾选的视频数量（N=1 时为1） */
+  selectedCount?: number
 }

-export const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
+const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
  currentStep,
  onPrev,
  onNext,
@@ -27,9 +29,10 @@ export const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
  generating,
  generated,
  generateError,
+  selectedCount = 1,
 }) => {
  const renderPrimaryButton = () => {
-    /* 步骤 1~3：上一步 / 下一步（必填校验由 useStepNavigation.goNext 统一处理） */
+    /* 步骤 1~3：上一步 / 下一步 */
    if (currentStep < 4) {
      return (
        <button className="xx-btn xx-btn-primary" onClick={onNext}>
@@ -38,7 +41,7 @@ export const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
      )
    }

-    /* 步骤 4：确认生成视频（触发按钮在标题页） */
+    /* 步骤 4：标题+预览+确认生成 */
    if (currentStep === 4) {
      if (generating) {
        return (
@@ -57,31 +60,18 @@ export const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
      if (generated) {
        return (
          <button className="xx-btn xx-btn-primary" onClick={onNext}>
-            下一步 →
+            下一步：选择封面 →
          </button>
        )
      }
      return (
        <button className="xx-btn xx-btn-primary" onClick={onConfirmGenerate}>
-          ✨ 确认生成视频
+          {selectedCount > 1 ? `✨ 确认生成 ${selectedCount} 个视频` : "✨ 确认生成视频"}
        </button>
      )
    }

-    /* 步骤 5：渲染中禁用，完成后下一步进入封面 */
-    if (currentStep === 5) {
-      return (
-        <button
-          className="xx-btn xx-btn-primary"
-          onClick={onNext}
-          disabled={generating || !generated}
-        >
-          {generating ? "视频生成中…" : "下一步 →"}
-        </button>
-      )
-    }
-
-    /* 步骤 6（最后一步）：无主按钮 */
+    /* 步骤 5（封面，最后一步）：无主按钮 */
    return null
  }

@@ -1,19 +1,16 @@
 /**
 * GeneratePage 步骤内容渲染
- * 步骤顺序（6步）：模板(1) → 素材(2) → 配音(3) → 标题(4) → 确认生成(5) → 封面(6)
+ * 步骤顺序（5步，Issue #1677）：模板(1) → 素材(2) → 配音(3) → 标题+预览+确认生成(4) → 封面(5)
 */
 import React from "react"
 import type { EditingTemplate } from "@/api/editing-planner"
 import type { EditPlanClip } from "@/api/template-editor"
-import type { PresetVoiceItem } from "@/api/voices"
-import type { VoiceClone } from "@/api/voice-clone"
 import type { CoverConfig } from "../types/cover"
 import type { TitleSettings } from "../types"
 import Step1TemplateSelect from "../components/Step1TemplateSelect"
 import Step2MaterialSelect from "../components/Step2MaterialSelect"
-import Step3VoiceSelect from "../components/Step5VoiceSelect"
+import Step3VoiceWithMode from "./Step3VoiceWithMode"
 import Step4TitleSettings from "../components/Step4TitleSettings"
-import Step5ConfirmGenerate from "../components/Step7ConfirmGenerate"
 import Step6CoverSettings from "../components/Step6CoverSettings"
 import type { GeneratedVideo } from "@/api/template-editor"

@@ -50,15 +47,6 @@ export interface GenerateStepContentProps {
  selectedVoice: string
  onSelectedVoiceChange: (id: string) => void
  onServerClipsChange: (clips: EditPlanClip[]) => void
-  voiceMode: "preset" | "custom" | "clone"
-  onVoiceModeChange: (mode: "preset" | "custom" | "clone") => void
-  selectedClonedVoice: string
-  onSelectedClonedVoiceChange: (id: string) => void
-  clonedVoices: VoiceClone[]
-  addClone: (voice: VoiceClone) => void
-  hasProcessing: boolean
-  cloneModalOpen: boolean
-  onCloneModalOpenChange: (open: boolean) => void
  /* 生成 */
  generating: boolean
  generated: boolean
@@ -67,12 +55,22 @@ export interface GenerateStepContentProps {
  generatedVideos: GeneratedVideo[]
  onRetry: () => void
  onDismissError: () => void
-  /* 其他 */
-  presetVoices: PresetVoiceItem[]
  /** BGM 开关 */
  bgm: boolean
  /** BGM 配置（来自模板） */
  bgmConfig?: { enabled: boolean; music_id?: string }
+  /* ── 批量生成（#1677）── */
+  previewCount: number
+  previewTitles: string[]
+  onPreviewTitlesChange: (titles: string[]) => void
+  voiceModePerVideo: boolean
+  onVoiceModePerVideoChange: (v: boolean) => void
+  voiceLibraryIds: string[]
+  onVoiceLibraryIdsChange: (ids: string[]) => void
+  previewCovers: string[]
+  onPreviewCoversChange: (urls: string[]) => void
+  /** 批量模式勾选的变体索引（封面卡片按勾选顺序展示） */
+  selectedVariantIds?: number[]
 }

 export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) => {
@@ -104,17 +102,17 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
    selectedVoice,
    onSelectedVoiceChange,
    onServerClipsChange,
-    voiceMode,
-    selectedClonedVoice,
-    clonedVoices,
-    generating,
-    generated,
-    generateError,
-    progress,
    generatedVideos,
-    onRetry,
-    onDismissError,
-    presetVoices,
+    previewCount,
+    previewTitles,
+    onPreviewTitlesChange,
+    voiceModePerVideo,
+    onVoiceModePerVideoChange,
+    voiceLibraryIds,
+    onVoiceLibraryIdsChange,
+    previewCovers,
+    onPreviewCoversChange,
+    selectedVariantIds,
  } = props

  /* 当前模板的 segments，传给 Step2 构建 clips */
@@ -146,9 +144,14 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
      )
    case 3:
      return (
-        <Step3VoiceSelect
+        <Step3VoiceWithMode
+          previewCount={previewCount}
          selectedVoice={selectedVoice}
          onSelectedVoiceChange={onSelectedVoiceChange}
+          voiceModePerVideo={voiceModePerVideo}
+          onVoiceModePerVideoChange={onVoiceModePerVideoChange}
+          voiceLibraryIds={voiceLibraryIds}
+          onVoiceLibraryIdsChange={onVoiceLibraryIdsChange}
        />
      )
    case 4:
@@ -167,33 +170,12 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
          onApplyPreset={onApplyPreset}
          activePreset={activePreset}
          titlePresets={titlePresets}
+          previewCount={previewCount}
+          previewTitles={previewTitles}
+          onPreviewTitlesChange={onPreviewTitlesChange}
        />
      )
    case 5:
-      return (
-        <Step5ConfirmGenerate
-          templates={userTemplates}
-          selectedTemplate={selectedTemplate}
-          materialMode={materialMode}
-          selectedMaterials={selectedMaterials}
-          smartSelectedIds={smartSelectedIds}
-          title={titleSettings.title}
-          voiceMode={voiceMode}
-          selectedVoice={selectedVoice}
-          selectedClonedVoice={selectedClonedVoice}
-          presetVoices={presetVoices}
-          clonedVoices={clonedVoices}
-          coverSettings={coverSettings}
-          generating={generating}
-          generated={generated}
-          generateError={generateError}
-          progress={progress}
-          generatedVideos={generatedVideos}
-          onRetry={onRetry}
-          onDismissError={onDismissError}
-        />
-      )
-    case 6:
      return (
        <Step6CoverSettings
          coverSettings={coverSettings}
@@ -201,6 +183,11 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
          selectedTemplate={selectedTemplate}
          titleSettings={titleSettings}
          generatedVideos={generatedVideos}
+          previewCount={previewCount}
+          previewTitles={previewTitles}
+          previewCovers={previewCovers}
+          onPreviewCoversChange={onPreviewCoversChange}
+          selectedVariantIndexes={selectedVariantIds}
        />
      )
    default:
@@ -0,0 +1,127 @@
+/**
+ * 生成数量选择弹窗（Issue #1677）
+ * Step1 选完模板点「下一步」时弹出：要生成几个视频？（1~10）
+ * 默认 1，回车 = 1（零额外操作）
+ */
+import React, { useState, useEffect, useRef } from "react"
+import { MAX_PREVIEW_COUNT } from "../constants"
+
+interface PreviewCountModalProps {
+  open: boolean
+  /** 默认值（上次选择，默认1） */
+  defaultCount?: number
+  onConfirm: (count: number) => void
+  onCancel: () => void
+}
+
+const PreviewCountModal: React.FC<PreviewCountModalProps> = ({
+  open,
+  defaultCount = 1,
+  onConfirm,
+  onCancel,
+}) => {
+  const [count, setCount] = useState(defaultCount)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (open) {
+      setCount(defaultCount)
+      // 弹窗打开后聚焦并选中，方便直接回车=默认1
+      setTimeout(() => inputRef.current?.focus(), 50)
+    }
+  }, [open, defaultCount])
+
+  const clamp = (n: number) => Math.max(1, Math.min(MAX_PREVIEW_COUNT, n || 1))
+
+  const handleConfirm = () => {
+    onConfirm(clamp(count))
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault()
+      handleConfirm()
+    }
+    if (e.key === "Escape") {
+      onCancel()
+    }
+  }
+
+  if (!open) return null
+
+  return (
+    <div className="xx-modal-mask" onClick={onCancel}>
+      <div className="xx-modal-box xx-count-modal" onClick={(e) => e.stopPropagation()}>
+        <h3 style={{ margin: "0 0 8px", fontSize: 18 }}>要生成几个视频？</h3>
+        <p style={{ margin: "0 0 20px", fontSize: 13, color: "var(--text-secondary, #666)" }}>
+          素材共用，AI 随机剪辑出不同版本，每个视频可独立设置标题、配音和封面
+        </p>
+
+        <div className="xx-count-selector">
+          <button
+            type="button"
+            className="xx-count-btn"
+            onClick={() => setCount((c) => clamp(c - 1))}
+            disabled={count <= 1}
+            aria-label="减少"
+          >
+            −
+          </button>
+          <input
+            ref={inputRef}
+            type="number"
+            min={1}
+            max={MAX_PREVIEW_COUNT}
+            value={count}
+            onChange={(e) => setCount(clamp(parseInt(e.target.value, 10) || 1))}
+            onKeyDown={handleKeyDown}
+            className="xx-count-input"
+          />
+          <button
+            type="button"
+            className="xx-count-btn"
+            onClick={() => setCount((c) => clamp(c + 1))}
+            disabled={count >= MAX_PREVIEW_COUNT}
+            aria-label="增加"
+          >
+            +
+          </button>
+        </div>
+
+        <div className="xx-count-quick">
+          {[1, 3, 5, 10].map((n) => (
+            <button
+              key={n}
+              type="button"
+              className={`xx-count-chip ${count === n ? "active" : ""}`}
+              onClick={() => setCount(n)}
+            >
+              {n} 个
+            </button>
+          ))}
+        </div>
+
+        <div className="xx-count-actions">
+          <button type="button" className="xx-btn xx-btn-ghost" onClick={onCancel}>
+            取消
+          </button>
+          <button type="button" className="xx-btn xx-btn-primary" onClick={handleConfirm}>
+            {count === 1 ? "生成 1 个视频" : `生成 ${count} 个视频`}
+          </button>
+        </div>
+        <p
+          style={{
+            margin: "12px 0 0",
+            fontSize: 12,
+            color: "var(--text-tertiary, #999)",
+            textAlign: "center",
+          }}
+        >
+          直接按回车 = 生成 1 个
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default PreviewCountModal
@@ -0,0 +1,127 @@
+/**
+ * 批量预览网格（Issue #1677）
+ * N 个服务器渲染的预览视频，网格排列、各自独立播放、CSS 标题浮层实时叠加、勾选框批量选择
+ */
+import React from "react"
+import { LoadingOutlined, CheckCircleFilled, CloseCircleOutlined } from "@ant-design/icons"
+import type { VariantPreview } from "../hooks/useBatchPreview"
+
+interface ServerPreviewGridProps {
+  variants: VariantPreview[]
+  /** 每个变体的标题文字（实时叠加浮层） */
+  titles: string[]
+  /** 标题样式（全局共用） */
+  titleStyle: {
+    position: string
+    color: string
+    size: number
+  }
+  /** 勾选的变体索引 */
+  selectedIds: number[]
+  onToggleSelect: (index: number) => void
+  /** 是否显示勾选框（确认生成前） */
+  selectable?: boolean
+}
+
+const ServerPreviewGrid: React.FC<ServerPreviewGridProps> = ({
+  variants,
+  titles,
+  titleStyle,
+  selectedIds,
+  onToggleSelect,
+  selectable = true,
+}) => {
+  if (variants.length === 0) return null
+
+  return (
+    <div className="xx-variant-grid">
+      {variants.map((v) => {
+        const selected = selectedIds.includes(v.index)
+        const titleText = titles[v.index] || ""
+        return (
+          <div
+            key={v.index}
+            className={`xx-variant-card ${selected ? "selected" : ""} ${
+              v.status === "failed" ? "failed" : ""
+            }`}
+            onClick={() => {
+              if (selectable && v.status === "ready") onToggleSelect(v.index)
+            }}
+            role="button"
+            tabIndex={0}
+          >
+            {/* 勾选框 */}
+            {selectable && v.status === "ready" && (
+              <div className={`xx-variant-check ${selected ? "checked" : ""}`}>
+                {selected && "✓"}
+              </div>
+            )}
+
+            {/* 变体序号 */}
+            <div className="xx-variant-index">视频 {v.index + 1}</div>
+
+            {/* 视频区域 */}
+            <div className="xx-variant-video-wrap">
+              {v.status === "loading" && (
+                <div className="xx-variant-loading">
+                  <LoadingOutlined style={{ fontSize: 28, color: "#3b82f6" }} />
+                  <div className="xx-variant-progress">
+                    <div
+                      className="xx-variant-progress-bar"
+                      style={{ width: `${Math.min(v.progress, 100)}%` }}
+                    />
+                  </div>
+                  <span className="xx-variant-progress-text">{v.progress}%</span>
+                </div>
+              )}
+              {v.status === "failed" && (
+                <div className="xx-variant-failed">
+                  <CloseCircleOutlined style={{ fontSize: 28, color: "#ef4444" }} />
+                  <span>{v.error || "预览失败"}</span>
+                </div>
+              )}
+              {v.status === "ready" && v.videoUrl && (
+                <>
+                  <video
+                    src={v.videoUrl}
+                    controls
+                    style={{ width: "100%", display: "block", background: "#000", borderRadius: 8 }}
+                    onClick={(e) => e.stopPropagation()}
+                  />
+                  {/* 标题浮层（CSS 实时叠加，改标题即时可见） */}
+                  {titleText && (
+                    <div
+                      className={`xx-variant-title-overlay pos-${titleStyle.position}`}
+                      style={{
+                        color: titleStyle.color,
+                        fontSize: Math.max(13, Math.round(titleStyle.size * 0.55)),
+                        WebkitTextStroke: "0.5px rgba(0,0,0,0.6)",
+                      }}
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {titleText}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+
+            {/* 底部状态 */}
+            <div className="xx-variant-footer">
+              {v.status === "ready" && selected && (
+                <span className="xx-variant-ready-tag">
+                  <CheckCircleFilled style={{ color: "#52c41a" }} /> 已选择
+                </span>
+              )}
+              {v.status === "ready" && !selected && selectable && (
+                <span className="xx-variant-skip-tag">点击卡片取消/勾选</span>
+              )}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default ServerPreviewGrid
@@ -0,0 +1,102 @@
+/**
+ * Step3 配音选择（Issue #1677 批量生成）
+ * - 单视频 / 共用模式：与原配音选择完全一致
+ * - 独立模式（开关开启）：N 个配音选择器，每个视频独立选择
+ */
+import React from "react"
+import Step3VoiceSelect from "./Step5VoiceSelect"
+
+interface Step3VoiceWithModeProps {
+  previewCount: number
+  /** 共用配音ID */
+  selectedVoice: string
+  onSelectedVoiceChange: (id: string) => void
+  /** 是否独立配音 */
+  voiceModePerVideo: boolean
+  onVoiceModePerVideoChange: (v: boolean) => void
+  /** 各变体独立配音ID */
+  voiceLibraryIds: string[]
+  onVoiceLibraryIdsChange: (ids: string[]) => void
+}
+
+const Step3VoiceWithMode: React.FC<Step3VoiceWithModeProps> = ({
+  previewCount,
+  selectedVoice,
+  onSelectedVoiceChange,
+  voiceModePerVideo,
+  onVoiceModePerVideoChange,
+  voiceLibraryIds,
+  onVoiceLibraryIdsChange,
+}) => {
+  const isBatch = previewCount > 1
+
+  if (!isBatch) {
+    return (
+      <Step3VoiceSelect
+        selectedVoice={selectedVoice}
+        onSelectedVoiceChange={onSelectedVoiceChange}
+      />
+    )
+  }
+
+  return (
+    <div className="xx-form-section">
+      {/* 共用/独立切换 */}
+      <div className="xx-title-ai-toggle" style={{ marginBottom: 16 }}>
+        <div>
+          <div style={{ fontWeight: 600, fontSize: 15 }}>
+            🎙️ 配音方式：{voiceModePerVideo ? "每个视频独立配音" : "所有视频共用配音"}
+          </div>
+          <div style={{ fontSize: 12, color: "var(--text-tertiary, #999)", marginTop: 2 }}>
+            {voiceModePerVideo
+              ? `为 ${previewCount} 个视频分别选择不同配音`
+              : "所有视频使用同一个配音（默认）"}
+          </div>
+        </div>
+        <div
+          className={`xx-switch ${voiceModePerVideo ? "active" : ""}`}
+          onClick={() => onVoiceModePerVideoChange(!voiceModePerVideo)}
+          role="switch"
+          aria-checked={voiceModePerVideo}
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault()
+              onVoiceModePerVideoChange(!voiceModePerVideo)
+            }
+          }}
+        >
+          <div className="xx-switch-knob" />
+        </div>
+      </div>
+
+      {!voiceModePerVideo ? (
+        <Step3VoiceSelect
+          heading="🎙️ 共用配音"
+          description={`所有 ${previewCount} 个视频使用同一个配音，点击卡片可预览播放`}
+          selectedVoice={selectedVoice}
+          onSelectedVoiceChange={onSelectedVoiceChange}
+        />
+      ) : (
+        <div className="xx-per-voice-list">
+          {Array.from({ length: previewCount }, (_, i) => (
+            <Step3VoiceSelect
+              key={i}
+              heading={`🎙️ 视频 ${i + 1} 的配音`}
+              description="为这个视频单独选择配音"
+              compact
+              selectedVoice={voiceLibraryIds[i] || ""}
+              onSelectedVoiceChange={(id) => {
+                const next = [...voiceLibraryIds]
+                next[i] = id
+                onVoiceLibraryIdsChange(next)
+              }}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Step3VoiceWithMode
@@ -1,12 +1,13 @@
 /**
- * Step 4 选择标题（合并原 Step4 标题输入 + Step5 标题样式面板）
+ * Step 4 选择标题（Issue #1677 批量生成改造）
 *
- * 左侧：标题文字输入 + AI生成标题 + 样式设置（位置/字号/字体/颜色/样式/预设）
- * 右侧：FrontendPreviewPlayer 实时预览（由 GeneratePage 统一渲染）
+ * 布局（由 GeneratePage 编排）：左侧大区域预览，右侧边栏标题设置。
+ * 本组件渲染在右侧边栏：
+ * - 标题文字：1 个视频 1 个输入框；N 个视频 N 个输入框各自独立
+ * - 标题样式（字体/颜色/位置/大小/粗斜描边/预设）：全局统一
 */
 import React from "react"
-import { AutoComplete } from "antd"
-import { PlayCircleOutlined } from "@ant-design/icons"
+import { AutoComplete, Input } from "antd"
 import type { TitleSettings } from "../types"
 import { POSITION_OPTIONS, FONT_OPTIONS } from "../constants"
 import { useStep4Title } from "../hooks/useStep4Title"
@@ -29,6 +30,12 @@ interface Step4TitleSettingsProps {
  onApplyPreset: (presetKey: string) => void
  activePreset: string | null
  titlePresets: { key: string; label: string; previewStyle: React.CSSProperties }[]
+  /* ── 批量生成（#1677）── */
+  /** 生成数量 */
+  previewCount?: number
+  /** 每个变体的标题文字（长度=previewCount） */
+  previewTitles?: string[]
+  onPreviewTitlesChange?: (titles: string[]) => void
 }

 const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
@@ -44,122 +51,138 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
    onApplyPreset,
    activePreset,
    titlePresets,
+    previewCount = 1,
+    previewTitles,
+    onPreviewTitlesChange,
  } = props

+  const isBatch = previewCount > 1
+
+  /** 更新单个变体标题；变体0同步写回 titleSettings.title（全局样式面板/草稿保存依赖） */
+  const updateVariantTitle = (index: number, val: string) => {
+    if (!previewTitles || !onPreviewTitlesChange) return
+    const next = [...previewTitles]
+    next[index] = val
+    onPreviewTitlesChange(next)
+    if (index === 0) {
+      t.updateTitle(val)
+    }
+  }
+
  return (
-    <div className="xx-form-section">
+    <div className="xx-form-section xx-title-sidebar">
      <h3>📝 选择标题</h3>

-      {/* AI 自动选择模式 */}
-      {t.titleSettings.aiAutoSelect && (
+      {!isBatch ? (
+        /* ── 单视频：原有 AI 标题 + 输入框（保持不变） ── */
        <>
-          <div className="xx-title-ai-toggle">
-            <span className="xx-toggle-label">AI 自动选择标题</span>
-            <div className="xx-switch active" onClick={t.toggleAiAutoSelect}>
-              <div className="xx-switch-knob" />
-            </div>
-          </div>
-
-          {/* 显示当前 AI 选中的标题（只读）+ 换一个按钮 */}
-          <div className="xx-form-field">
-            <label>当前 AI 选定标题</label>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 10,
-                padding: "8px 12px",
-                background: "var(--bg-secondary, rgba(0,0,0,0.04))",
-                borderRadius: 8,
-                fontSize: 14,
-                color: "var(--text-primary, #333)",
-              }}
-            >
-              <span style={{ flex: 1 }}>{t.titleSettings.title || "AI 将自动为你选择标题"}</span>
-              <button
-                type="button"
-                className="xx-btn xx-btn-primary"
-                style={{ flexShrink: 0, fontSize: 13, padding: "4px 12px" }}
-                onClick={t.autoGenerateTitle}
-              >
-                🔄 换一个
-              </button>
-            </div>
-          </div>
-        </>
-      )}
-
-      {/* 手动选择模式 */}
-      {!t.titleSettings.aiAutoSelect && (
-        <>
-          <AiTitleGenerator
-            inputValue={t.aiTitleInput}
-            onInputChange={t.setAiTitleInput}
-            generating={t.aiTitleGenerating}
-            onGenerate={t.handleGenerateAiTitles}
-            results={t.aiTitleResults}
-            hasGenerated={t.hasGeneratedTitles}
-            onSelect={t.handleSelectAiTitle}
-            selectedTitle={t.titleSettings.title}
-            onRefresh={t.handleRefreshAiTitles}
-          />
-
-          <div className="xx-title-ai-toggle">
-            <span className="xx-toggle-label">AI 自动选择标题</span>
-            <div className="xx-switch" onClick={t.toggleAiAutoSelect}>
-              <div className="xx-switch-knob" />
-            </div>
-          </div>
-
-          <div className="xx-form-field">
-            <label>标题</label>
-            <AutoComplete
-              placeholder="输入或从标题库选择…"
-              allowClear
-              maxLength={50}
-              style={{ width: "100%" }}
-              value={t.titleSettings.title || undefined}
-              onChange={(val) => t.updateTitle(val || "")}
-              options={t.userTitles.map((ut) => ({
-                label: ut.content,
-                value: ut.content,
-              }))}
-              filterOption={(inputValue, option) => {
-                const title = (option?.label || option?.value || "") as string
-                return title.toLowerCase().includes((inputValue || "").toLowerCase())
-              }}
-              notFoundContent={
-                t.userTitles.length === 0 ? (
-                  <span style={{ color: "var(--text-tertiary)", fontSize: 13 }}>
-                    标题库为空，请前往「标题管理」添加
+          {t.titleSettings.aiAutoSelect ? (
+            <>
+              <div className="xx-title-ai-toggle">
+                <span className="xx-toggle-label">AI 自动选择标题</span>
+                <div className="xx-switch active" onClick={t.toggleAiAutoSelect}>
+                  <div className="xx-switch-knob" />
+                </div>
+              </div>
+              <div className="xx-form-field">
+                <label>当前 AI 选定标题</label>
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 10,
+                    padding: "8px 12px",
+                    background: "var(--bg-secondary, rgba(0,0,0,0.04))",
+                    borderRadius: 8,
+                    fontSize: 14,
+                    color: "var(--text-primary, #333)",
+                  }}
+                >
+                  <span style={{ flex: 1 }}>
+                    {(previewTitles?.[0] ?? t.titleSettings.title) || "AI 将自动为你选择标题"}
                  </span>
-                ) : null
-              }
-            />
-          </div>
+                  <button
+                    type="button"
+                    className="xx-btn xx-btn-primary"
+                    style={{ flexShrink: 0, fontSize: 13, padding: "4px 12px" }}
+                    onClick={t.autoGenerateTitle}
+                  >
+                    🔄 换一个
+                  </button>
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <AiTitleGenerator
+                inputValue={t.aiTitleInput}
+                onInputChange={t.setAiTitleInput}
+                generating={t.aiTitleGenerating}
+                onGenerate={t.handleGenerateAiTitles}
+                results={t.aiTitleResults}
+                hasGenerated={t.hasGeneratedTitles}
+                onSelect={t.handleSelectAiTitle}
+                selectedTitle={t.titleSettings.title}
+                onRefresh={t.handleRefreshAiTitles}
+              />
+
+              <div className="xx-title-ai-toggle">
+                <span className="xx-toggle-label">AI 自动选择标题</span>
+                <div className="xx-switch" onClick={t.toggleAiAutoSelect}>
+                  <div className="xx-switch-knob" />
+                </div>
+              </div>
+              <div className="xx-form-field">
+                <label>标题</label>
+                <AutoComplete
+                  placeholder="输入标题文字…"
+                  allowClear
+                  maxLength={50}
+                  style={{ width: "100%" }}
+                  value={(previewTitles?.[0] ?? t.titleSettings.title) || undefined}
+                  onChange={(val) => {
+                    t.updateTitle(val || "")
+                    onPreviewTitlesChange?.([val || ""])
+                  }}
+                  options={t.userTitles.map((ut) => ({ label: ut.content, value: ut.content }))}
+                  filterOption={(inputValue, option) => {
+                    const title = (option?.label || option?.value || "") as string
+                    return title.toLowerCase().includes((inputValue || "").toLowerCase())
+                  }}
+                />
+              </div>
+            </>
+          )}
        </>
+      ) : (
+        /* ── 批量：N 个独立标题输入框（CSS 浮层实时叠加到对应预览） ── */
+        <div className="xx-batch-titles">
+          <div
+            style={{
+              fontSize: 12,
+              color: "var(--text-secondary, #666)",
+              marginBottom: 10,
+              lineHeight: 1.6,
+            }}
+          >
+            为每个视频输入独立标题，修改会实时叠加到左侧对应视频上。标题样式（字体/颜色/位置）全局统一。
+          </div>
+          {Array.from({ length: previewCount }, (_, i) => (
+            <div className="xx-form-field" key={i}>
+              <label>视频 {i + 1} 标题</label>
+              <Input
+                placeholder={`视频 ${i + 1} 的标题…`}
+                maxLength={50}
+                showCount
+                value={previewTitles?.[i] || ""}
+                onChange={(e) => updateVariantTitle(i, e.target.value)}
+              />
+            </div>
+          ))}
+        </div>
      )}

-      {/* 标题样式面板（原 Step5） */}
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-          padding: "10px 14px",
-          background: "rgba(59, 130, 246, 0.08)",
-          borderRadius: 8,
-          marginTop: 16,
-          marginBottom: 12,
-          border: "1px solid rgba(59, 130, 246, 0.15)",
-        }}
-      >
-        <PlayCircleOutlined style={{ fontSize: 16, color: "#3b82f6" }} />
-        <span style={{ fontSize: 12, color: "var(--text-secondary, #666)" }}>
-          右侧为实时预览，调整样式即时生效
-        </span>
-      </div>
-
+      {/* 标题样式面板（全局共用） */}
      <TitleStylePanel
        settings={t.titleSettings}
        onUpdatePosition={onUpdatePosition}
@@ -12,6 +12,12 @@ import type { AssetItem } from "@/api/assets"
 interface Step5VoiceSelectProps {
  selectedVoice: string
  onSelectedVoiceChange: (id: string) => void
+  /** 卡片标题（独立配音模式下显示"视频 N 的配音"），默认"选择配音" */
+  heading?: string
+  /** 描述文案 */
+  description?: string
+  /** 是否使用紧凑卡片样式（独立配音模式下 N 个并排） */
+  compact?: boolean
 }

 /** 获取素材实际时长（优先顶层 duration，fallback 到 metadata.duration） */
@@ -43,6 +49,9 @@ const formatFileSize = (bytes?: number): string => {
 const Step5VoiceSelect: React.FC<Step5VoiceSelectProps> = ({
  selectedVoice,
  onSelectedVoiceChange,
+  heading = "🎙️ 选择配音",
+  description = "从配音库中选择已上传的素材，点击卡片可预览播放",
+  compact = false,
 }) => {
  const navigate = useNavigate()
  const [playingId, setPlayingId] = useState<string | null>(null)
@@ -148,14 +157,14 @@ const Step5VoiceSelect: React.FC<Step5VoiceSelectProps> = ({

  return (
    <div className="xx-form-section">
-      <h3>🎙️ 选择配音</h3>
-      <p style={{ color: "#666", marginBottom: 16, fontSize: 14 }}>
-        从配音库中选择已上传的素材，点击卡片可预览播放
-      </p>
+      <h3>{heading}</h3>
+      <p style={{ color: "#666", marginBottom: 16, fontSize: 14 }}>{description}</p>
      <div
        style={{
          display: "grid",
-          gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
+          gridTemplateColumns: compact
+            ? "repeat(auto-fill, minmax(160px, 1fr))"
+            : "repeat(auto-fill, minmax(220px, 1fr))",
          gap: 12,
        }}
      >
@@ -1,9 +1,16 @@
-import React from "react"
+/**
+ * Step 5 选择封面（Issue #1677 批量生成改造）
+ * - 单视频：保留原封面流程（自动生成/封面设置模板/封面预览）
+ * - N 个视频：N 张封面卡片，每张带对应视频标题，可逐个自动生成或上传
+ */
+import React, { useRef } from "react"
 import { Modal, Spin } from "antd"
+import { LoadingOutlined } from "@ant-design/icons"
 import type { CoverConfig } from "../types/cover"
 import type { GeneratedVideo } from "@/api/template-editor"
 import type { TitleSettings } from "../types"
 import { useStep6Cover } from "../hooks/useStep6Cover"
+import { useBatchCovers } from "../hooks/useBatchCovers"
 import Button from "@/components/ui/Button"
 import CoverSettingsModal from "./cover-settings/CoverSettingsModal"
 import CoverEditorModal from "./cover-settings/CoverEditorModal"
@@ -17,6 +24,15 @@ interface Step6CoverSettingsProps {
  titleSettings?: TitleSettings
  /** 确认生成步骤产出的最终视频列表 */
  generatedVideos: GeneratedVideo[]
+  /* ── 批量生成（#1677）── */
+  previewCount?: number
+  /** 每个变体的标题文字 */
+  previewTitles?: string[]
+  /** 每个变体的封面URL（按变体索引） */
+  previewCovers?: string[]
+  onPreviewCoversChange?: (urls: string[]) => void
+  /** 勾选的变体索引（批量封面按此顺序展示，与最终成片顺序一致） */
+  selectedVariantIndexes?: number[]
 }

 const Step6CoverSettings: React.FC<Step6CoverSettingsProps> = (props) => {
@@ -46,13 +62,173 @@ const Step6CoverSettings: React.FC<Step6CoverSettingsProps> = (props) => {
    generatedVideos: props.generatedVideos,
  })

-  const handleAutoGenerate = () => {
-    generateAutoCover()
-  }
+  const previewCount = props.previewCount || 1
+  const isBatch = previewCount > 1
+  const previewTitles = props.previewTitles || []
+  const previewCovers = props.previewCovers || []
+  /** 卡片展示的变体索引顺序：批量=勾选顺序（与成片顺序一致），单视频=[0] */
+  const cardIndexes =
+    isBatch && props.selectedVariantIndexes?.length
+      ? props.selectedVariantIndexes
+      : Array.from({ length: previewCount }, (_, i) => i)
+  const uploadInputRef = useRef<HTMLInputElement>(null)
+  const uploadTargetRef = useRef<number>(0)
+
+  const completedVideos = props.generatedVideos.filter((v) => v.status === "completed")
+  const batchTitles = cardIndexes.map((vi) => previewTitles[vi] || "")
+  const batchCoversList = cardIndexes.map((vi) => previewCovers[vi] || "")
+  const batchCovers = useBatchCovers({
+    selectedTemplate: props.selectedTemplate || "",
+    generatedVideos: props.generatedVideos,
+    titles: batchTitles,
+    titleStyle: {
+      font: props.titleSettings?.font || "思源黑体",
+      size: props.titleSettings?.size || 28,
+      color: props.titleSettings?.color || "#ffffff",
+      position: props.titleSettings?.position || "top",
+      bold: props.titleSettings?.bold ?? true,
+      stroke: props.titleSettings?.stroke ?? true,
+      shadow: props.titleSettings?.shadow ?? false,
+    },
+    covers: batchCoversList,
+    onCoversChange: (urls) => {
+      // 按卡片顺序写回对应变体索引
+      const next = [...(props.previewCovers || [])]
+      cardIndexes.forEach((vi, cardPos) => {
+        next[vi] = urls[cardPos] || ""
+      })
+      props.onPreviewCoversChange?.(next)
+    },
+  })

-  // 预览图：优先 thumbnail_url，其次 upload_url
  const previewUrl = coverSettings.thumbnail_url || coverSettings.upload_url

+  const handleUploadClick = (variantIndex: number) => {
+    uploadTargetRef.current = variantIndex
+    uploadInputRef.current?.click()
+  }
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    e.target.value = ""
+    if (file) {
+      const variantIndex = uploadTargetRef.current
+      const cardPos = cardIndexes.indexOf(variantIndex)
+      if (cardPos >= 0) void batchCovers.uploadOne(cardPos, file)
+    }
+  }
+
+  /* ── 批量封面 ── */
+  if (isBatch) {
+    return (
+      <div className="xx-form-section">
+        <h3>🖼️ 选择封面</h3>
+
+        <div
+          style={{
+            padding: "10px 14px",
+            background: "rgba(16, 185, 129, 0.08)",
+            borderRadius: 8,
+            marginBottom: 16,
+            border: "1px solid rgba(16, 185, 129, 0.15)",
+            fontSize: 13,
+            color: "var(--text-secondary, #666)",
+          }}
+        >
+          🎬 共 {completedVideos.length} 个成片，封面将从对应成片中智能选帧并叠加该视频的标题
+        </div>
+
+        <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
+          <Button
+            buttonType="primary"
+            onClick={() => void batchCovers.generateAll()}
+            disabled={completedVideos.length === 0 || batchCovers.loadingIndex !== null}
+          >
+            ✨ 一键全部自动生成
+          </Button>
+        </div>
+
+        <div className="xx-cover-grid">
+          {cardIndexes.map((variantIndex, cardPos) => {
+            const url = batchCoversList[cardPos]
+            const isLoading = batchCovers.loadingIndex === cardPos
+            const isUploading = batchCovers.uploadingIndex === cardPos
+            const title = batchTitles[cardPos]
+            return (
+              <div className="xx-cover-card" key={variantIndex}>
+                <div className="xx-cover-card-title">视频 {variantIndex + 1}</div>
+                <div className="xx-cover-card-box">
+                  {isLoading || isUploading ? (
+                    <div className="xx-cover-card-loading">
+                      <Spin indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />} />
+                      <span>{isLoading ? "AI 选帧中…" : "上传中…"}</span>
+                    </div>
+                  ) : url ? (
+                    <img
+                      src={url}
+                      alt={`视频${variantIndex + 1}封面`}
+                      className="xx-cover-card-img"
+                    />
+                  ) : (
+                    <div className="xx-cover-card-placeholder">
+                      <span style={{ fontSize: 26 }}>🖼️</span>
+                      <span style={{ fontSize: 12 }}>未设置封面</span>
+                    </div>
+                  )}
+                  <div className="xx-cover-card-ratio">9:16</div>
+                </div>
+                {title && (
+                  <div
+                    style={{
+                      fontSize: 12,
+                      color: "var(--text-secondary, #666)",
+                      marginTop: 6,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
+                    title={title}
+                  >
+                    标题：{title}
+                  </div>
+                )}
+                <div style={{ display: "flex", gap: 6, marginTop: 8 }}>
+                  <button
+                    type="button"
+                    className="xx-btn xx-btn-primary xx-btn-sm"
+                    style={{ flex: 1, fontSize: 12, padding: "4px 8px" }}
+                    onClick={() => void batchCovers.generateOne(cardPos)}
+                    disabled={isLoading || isUploading}
+                  >
+                    {url ? "🔄 重新生成" : "✨ 自动生成"}
+                  </button>
+                  <button
+                    type="button"
+                    className="xx-btn xx-btn-ghost xx-btn-sm"
+                    style={{ flex: 1, fontSize: 12, padding: "4px 8px" }}
+                    onClick={() => handleUploadClick(variantIndex)}
+                    disabled={isLoading || isUploading}
+                  >
+                    📤 上传
+                  </button>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+
+        <input
+          ref={uploadInputRef}
+          type="file"
+          accept="image/*"
+          style={{ display: "none" }}
+          onChange={handleFileChange}
+        />
+      </div>
+    )
+  }
+
+  /* ── 单视频：原有流程保持不变 ── */
  return (
    <div className="xx-form-section">
      <h3>🖼️ 选择封面</h3>
@@ -75,7 +251,7 @@ const Step6CoverSettings: React.FC<Step6CoverSettingsProps> = (props) => {
      )}

      <div className="xx-cover-actions">
-        <Button buttonType="primary" onClick={handleAutoGenerate} disabled={!finalVideo}>
+        <Button buttonType="primary" onClick={generateAutoCover} disabled={!finalVideo}>
          ✨ 自动生成封面
        </Button>
        <Button buttonType="ghost" onClick={() => setShowCoverSettings(true)}>
@@ -1,79 +0,0 @@
-/**
- * Step 7 确认生成组件
- */
-import React from "react"
-import type { EditingTemplate } from "@/api/editing-planner"
-import type { GeneratedVideo } from "@/api/template-editor"
-import type { CoverConfig } from "../types/cover"
-import type { VoiceClone } from "@/api/voice-clone"
-import type { PresetVoiceItem } from "@/api/voices"
-import { useStep7Generate } from "../hooks/useStep7Generate"
-import SummaryCard from "./step7-confirm/SummaryCard"
-import GenerationStatus from "./step7-confirm/GenerationStatus"
-
-interface Step7ConfirmGenerateProps {
-  templates: EditingTemplate[]
-  selectedTemplate: string
-  materialMode: "manual" | "auto"
-  selectedMaterials: string[]
-  smartSelectedIds: string[]
-  title: string
-  voiceMode: "preset" | "custom" | "clone"
-  selectedVoice: string
-  selectedClonedVoice: string
-  presetVoices: PresetVoiceItem[]
-  clonedVoices: VoiceClone[]
-  coverSettings: CoverConfig
-  generating: boolean
-  generated: boolean
-  generateError: string | null
-  progress: number
-  generatedVideos: GeneratedVideo[]
-  onRetry: () => void
-  onDismissError: () => void
-}
-
-const Step7ConfirmGenerate: React.FC<Step7ConfirmGenerateProps> = (props) => {
-  const {
-    templateName,
-    materialSummary,
-    title,
-    voiceName,
-    coverSummary,
-    generating,
-    generated,
-    generateError,
-    progress,
-    generatedVideos,
-    getGenerationPhase,
-    handleScrollToPreview,
-  } = useStep7Generate(props)
-
-  const { onRetry, onDismissError } = props
-
-  return (
-    <div className="xx-form-section">
-      <h3>✨ 确认生成</h3>
-      <SummaryCard
-        templateName={templateName}
-        materialSummary={materialSummary}
-        title={title}
-        voiceName={voiceName}
-        coverSummary={coverSummary}
-      />
-      <GenerationStatus
-        generating={generating}
-        generated={generated}
-        generateError={generateError}
-        progress={progress}
-        generatedVideos={generatedVideos}
-        getGenerationPhase={getGenerationPhase}
-        onScrollToPreview={handleScrollToPreview}
-        onRetry={onRetry}
-        onDismissError={onDismissError}
-      />
-    </div>
-  )
-}
-
-export default Step7ConfirmGenerate
@@ -1,44 +0,0 @@
-import React from "react"
-
-interface SummaryCardProps {
-  templateName: string
-  materialSummary: string
-  title: string
-  voiceName: string
-  coverSummary: string
-}
-
-const SummaryCard: React.FC<SummaryCardProps> = ({
-  templateName,
-  materialSummary,
-  title,
-  voiceName,
-  coverSummary,
-}) => {
-  return (
-    <div className="xx-summary-card">
-      <div className="xx-summary-row">
-        <span className="xx-summary-label">模板</span>
-        <span className="xx-summary-value">{templateName}</span>
-      </div>
-      <div className="xx-summary-row">
-        <span className="xx-summary-label">素材</span>
-        <span className="xx-summary-value">{materialSummary}</span>
-      </div>
-      <div className="xx-summary-row">
-        <span className="xx-summary-label">标题</span>
-        <span className="xx-summary-value">{title || "未选择"}</span>
-      </div>
-      <div className="xx-summary-row">
-        <span className="xx-summary-label">配音</span>
-        <span className="xx-summary-value">{voiceName}</span>
-      </div>
-      <div className="xx-summary-row">
-        <span className="xx-summary-label">封面</span>
-        <span className="xx-summary-value">{coverSummary}</span>
-      </div>
-    </div>
-  )
-}
-
-export default SummaryCard
@@ -33,10 +33,13 @@ export const STEPS = [
  { key: 2, label: "选择素材" },
  { key: 3, label: "选择配音" },
  { key: 4, label: "选择标题" },
-  { key: 5, label: "确认生成" },
-  { key: 6, label: "选择封面" },
+  { key: 5, label: "选择封面" },
 ]

+/* ── 批量生成限制 ── */
+export const MAX_PREVIEW_COUNT = 10
+export const MIN_PREVIEW_COUNT = 1
+
 /* ── 标题位置选项 ── */
 export const POSITION_OPTIONS = [
  { value: "top", label: "顶部" },
@@ -2900,3 +2900,381 @@
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
 }
+
+/* ================================================================
+   Issue #1677 多视频批量生成
+   ================================================================ */
+
+/* ── Step4 布局对调：左侧预览大区域，右侧标题边栏 ── */
+.xx-generate-layout.step4-layout {
+  grid-template-columns: 1fr 380px;
+  align-items: start;
+}
+
+.xx-generate-preview-col {
+  min-width: 0;
+  position: sticky;
+  top: 16px;
+}
+
+.xx-generate-preview-col .xx-form-section {
+  margin: 0;
+}
+
+.xx-title-sidebar {
+  max-height: calc(100vh - 140px);
+  overflow-y: auto;
+}
+
+/* ── 数量选择弹窗 ── */
+.xx-modal-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.xx-modal-box {
+  background: var(--bg-primary, #fff);
+  border-radius: 16px;
+  padding: 28px;
+  width: 420px;
+  max-width: calc(100vw - 32px);
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
+}
+
+.xx-count-selector {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin: 8px 0 16px;
+}
+
+.xx-count-btn {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: 1px solid var(--border-primary, #d9d9d9);
+  background: var(--bg-secondary, #f5f5f5);
+  font-size: 22px;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--text-primary, #333);
+  transition: all 0.15s;
+}
+
+.xx-count-btn:hover:not(:disabled) {
+  border-color: #1677ff;
+  color: #1677ff;
+}
+
+.xx-count-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.xx-count-input {
+  width: 88px;
+  height: 52px;
+  text-align: center;
+  font-size: 26px;
+  font-weight: 700;
+  border: 2px solid var(--border-primary, #d9d9d9);
+  border-radius: 12px;
+  color: var(--text-primary, #333);
+  background: var(--bg-primary, #fff);
+}
+
+.xx-count-input:focus {
+  outline: none;
+  border-color: #1677ff;
+}
+
+/* 隐藏 number input 上下箭头 */
+.xx-count-input::-webkit-outer-spin-button,
+.xx-count-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.xx-count-input {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.xx-count-quick {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.xx-count-chip {
+  padding: 6px 16px;
+  border-radius: 999px;
+  border: 1px solid var(--border-primary, #d9d9d9);
+  background: var(--bg-primary, #fff);
+  font-size: 13px;
+  cursor: pointer;
+  color: var(--text-secondary, #666);
+  transition: all 0.15s;
+}
+
+.xx-count-chip:hover {
+  border-color: #1677ff;
+  color: #1677ff;
+}
+
+.xx-count-chip.active {
+  background: #1677ff;
+  border-color: #1677ff;
+  color: #fff;
+}
+
+.xx-count-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.xx-count-actions .xx-btn {
+  flex: 1;
+}
+
+/* ── 批量预览网格 ── */
+.xx-variant-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 16px;
+}
+
+.xx-variant-card {
+  position: relative;
+  border: 2px solid var(--border-primary, #e8e8e8);
+  border-radius: 12px;
+  padding: 10px;
+  background: var(--bg-primary, #fff);
+  cursor: pointer;
+  transition: all 0.18s;
+}
+
+.xx-variant-card:hover {
+  border-color: #91caff;
+}
+
+.xx-variant-card.selected {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
+}
+
+.xx-variant-card.failed {
+  border-color: #ffccc7;
+  cursor: default;
+}
+
+.xx-variant-check {
+  position: absolute;
+  top: 14px;
+  left: 14px;
+  z-index: 3;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  background: rgba(0, 0, 0, 0.35);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.xx-variant-check.checked {
+  background: #1677ff;
+  border-color: #1677ff;
+}
+
+.xx-variant-index {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary, #666);
+  margin-bottom: 8px;
+}
+
+.xx-variant-video-wrap {
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #000;
+  aspect-ratio: 9 / 16;
+  max-height: 420px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.xx-variant-loading,
+.xx-variant-failed {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  color: var(--text-secondary, #999);
+  font-size: 12px;
+  padding: 16px;
+  text-align: center;
+}
+
+.xx-variant-progress {
+  width: 120px;
+  height: 4px;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.25);
+  overflow: hidden;
+}
+
+.xx-variant-progress-bar {
+  height: 100%;
+  background: #1677ff;
+  border-radius: 2px;
+  transition: width 0.4s;
+}
+
+.xx-variant-progress-text {
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 12px;
+}
+
+.xx-variant-title-overlay {
+  position: absolute;
+  left: 8%;
+  right: 8%;
+  text-align: center;
+  font-weight: 700;
+  line-height: 1.3;
+  pointer-events: none;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
+  word-break: break-all;
+}
+
+.xx-variant-title-overlay.pos-top {
+  top: 8%;
+}
+
+.xx-variant-title-overlay.pos-center {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.xx-variant-title-overlay.pos-bottom,
+.xx-variant-title-overlay.pos-custom {
+  bottom: 10%;
+}
+
+.xx-variant-footer {
+  min-height: 22px;
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.xx-variant-ready-tag {
+  color: #52c41a;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.xx-variant-skip-tag {
+  color: var(--text-tertiary, #999);
+}
+
+/* ── 批量配音列表 ── */
+.xx-per-voice-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.xx-per-voice-list .xx-form-section {
+  margin: 0;
+}
+
+/* ── 批量封面网格 ── */
+.xx-cover-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 16px;
+}
+
+.xx-cover-card {
+  border: 1px solid var(--border-primary, #e8e8e8);
+  border-radius: 12px;
+  padding: 10px;
+  background: var(--bg-primary, #fff);
+}
+
+.xx-cover-card-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary, #666);
+  margin-bottom: 8px;
+}
+
+.xx-cover-card-box {
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #000;
+  aspect-ratio: 9 / 16;
+  max-height: 300px;
+}
+
+.xx-cover-card-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.xx-cover-card-placeholder,
+.xx-cover-card-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--text-tertiary, #999);
+  background: var(--bg-secondary, #f7f7f7);
+  font-size: 13px;
+}
+
+.xx-cover-card-ratio {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+/* ── 响应式：窄屏 Step4 回退单列 ── */
+@media (max-width: 960px) {
+  .xx-generate-layout.step4-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .xx-generate-preview-col {
+    position: static;
+  }
+
+  .xx-title-sidebar {
+    max-height: none;
+  }
+}
@@ -29,6 +29,19 @@ export interface UseGenerateVideoProps {
  }
  /** 生成成功后的回调（用于清除持久化的 previewTaskId 等状态） */
  onGenerationSuccess?: () => void
+  /* ── 批量生成（#1677）── */
+  /** 生成数量（1=单条旧逻辑，>1=批量） */
+  previewCount?: number
+  /** 每个变体的标题文字（长度=count 时各自独立） */
+  variantTitles?: string[]
+  /** 独立配音模式下每个变体的配音ID（空数组=共用 selectedVoice） */
+  variantVoiceLibraryIds?: string[]
+  /** 是否独立配音 */
+  voiceModePerVideo?: boolean
+  /** 每个变体的封面URL（空数组=回退 coverSettings） */
+  variantCoverUrls?: string[]
+  /** 勾选要生成的变体索引（批量模式） */
+  selectedVariantIndexes?: number[]
 }

 /** 生成阶段 */
@@ -44,7 +57,7 @@ export interface UseGenerateVideoResult {
  generated: boolean
  generateError: string | null
  generatedVideos: GeneratedVideo[]
-  generate: () => Promise<void>
+  generate: () => Promise<boolean>
  retry: () => void
  dismissError: () => void
  download: () => Promise<void>
@@ -17,31 +17,25 @@ const MAX_RETRYABLE_ERRORS = 10
 const MAX_RESULTS_RETRIES = 3

 /**
- * 生成状态轮询 Hook（v2 — 改用 /generation/tasks/{task_id}）
+ * 生成状态轮询 Hook（v3 — 支持批量多任务）
 *
- * 旧版轮询 GET /templates/{id}/editor/generation-status 依赖 plan 维度状态，
- * 在编辑流程数据链路断裂时拿不到 task_id。新版直接使用 POST /generation/tasks
- * 返回的 task_id 轮询任务详情，不再依赖 plan。
- *
- * 错误处理：
- * - 4xx（尤其 404）视为不可恢复，立即 onFailed，不再重试
- * - 5xx / 网络错误重试，最多连续 MAX_RETRYABLE_ERRORS 次
- * - 任务完成后获取结果失败会重试 MAX_RESULTS_RETRIES 次，仍失败则 onFailed
+ * startPolling(taskId) 轮询单个任务；
+ * startPollingBatch(taskIds) 并行轮询 N 个任务，全部完成后聚合结果，
+ * 任一任务失败即整体失败（其余任务仍在后端继续，不影响）。
+ * 进度为所有任务平均值。
 */
-export const useGenerationPolling = ({
+export function useGenerationPolling({
  onProgress,
  onComplete,
  onFailed,
-}: UseGenerationPollingOptions) => {
-  const progressTimer = useRef<ReturnType<typeof setTimeout>>()
+}: UseGenerationPollingOptions) {
+  const progressTimer = useRef<ReturnType<typeof setTimeout>[]>([])
  const cancelledRef = useRef(false)

  const clearTimer = useCallback(() => {
    cancelledRef.current = true
-    if (progressTimer.current) {
-      clearTimeout(progressTimer.current)
-      progressTimer.current = undefined
-    }
+    progressTimer.current.forEach((t) => clearTimeout(t))
+    progressTimer.current = []
  }, [])

  /** 任务完成后拉取结果列表，带重试 */
@@ -62,85 +56,151 @@ export const useGenerationPolling = ({
    [],
  )

+  const extractErrorMessage = (pollErr: unknown, status: number): string => {
+    const msg =
+      (axios.isAxiosError(pollErr) &&
+        (pollErr.response?.data as { detail?: string; message?: string } | undefined)?.detail) ||
+      (axios.isAxiosError(pollErr) &&
+        (pollErr.response?.data as { detail?: string; message?: string } | undefined)?.message) ||
+      `查询任务失败 (${status})`
+    return safeExtractError(msg)
+  }
+
+  /** 轮询单个任务，resolve 该任务的结果视频数组；失败时 reject(new Error(msg)) */
+  const pollSingleTask = useCallback(
+    (taskId: string, runId: number, onTaskProgress?: (pct: number) => void): Promise<unknown[]> => {
+      return new Promise((resolve, reject) => {
+        let consecutiveErrors = 0
+        let done = false
+
+        const poll = async () => {
+          if (cancelledRef.current || done) return
+          try {
+            const task = await getGenerationTask(taskId)
+            if (cancelledRef.current || done) return
+            consecutiveErrors = 0
+
+            if (task.status === "completed") {
+              done = true
+              const videos = await fetchResultsWithRetry(taskId)
+              if (cancelledRef.current) return
+              if (videos === null) {
+                reject(new Error("视频已生成，但获取结果列表失败，请稍后在任务列表查看"))
+                return
+              }
+              resolve(videos)
+              return
+            }
+
+            if (task.status === "failed" || task.status === "cancelled") {
+              done = true
+              const rawMsg =
+                task.error_info?.error_message ||
+                task.error_message ||
+                (task.status === "cancelled" ? "任务已取消" : "视频生成失败，请联系管理员或重试")
+              reject(new Error(safeExtractError(rawMsg)))
+              return
+            }
+
+            const pct = Math.max(0, Math.min(99, Math.round(Number(task.progress) || 0)))
+            if (onTaskProgress) {
+              onTaskProgress(pct)
+            } else if (runId === 0) {
+              onProgress(pct)
+            }
+            const timer = setTimeout(poll, 2000)
+            progressTimer.current.push(timer)
+          } catch (pollErr) {
+            if (cancelledRef.current || done) return
+            console.error("[轮询出错] taskId:", taskId, pollErr)
+            const status = axios.isAxiosError(pollErr) ? pollErr.response?.status : undefined
+            if (status && status >= 400 && status < 500) {
+              done = true
+              reject(new Error(extractErrorMessage(pollErr, status)))
+              return
+            }
+            consecutiveErrors += 1
+            if (consecutiveErrors >= MAX_RETRYABLE_ERRORS) {
+              done = true
+              reject(new Error("任务状态查询连续失败，请稍后在任务列表查看结果"))
+              return
+            }
+            const timer = setTimeout(poll, 3000)
+            progressTimer.current.push(timer)
+          }
+        }
+
+        const timer = setTimeout(poll, 1500)
+        progressTimer.current.push(timer)
+      })
+    },
+    [onProgress, fetchResultsWithRetry],
+  )
+
+  /** 单任务轮询（兼容旧调用） */
  const startPolling = useCallback(
    (taskId: string) => {
      cancelledRef.current = false
-      let consecutiveErrors = 0
-
-      const poll = async () => {
-        if (cancelledRef.current) return
-        try {
-          const task = await getGenerationTask(taskId)
-          consecutiveErrors = 0
-
-          if (task.status === "completed") {
-            onProgress(100)
-            const videos = await fetchResultsWithRetry(taskId)
-            if (cancelledRef.current) return
-            if (videos === null) {
-              const errorMsg = "视频已生成，但获取结果列表失败，请稍后在任务列表查看"
-              console.error("[生成结果获取失败] taskId:", taskId)
-              onFailed(errorMsg)
-              message.error(errorMsg)
-              return
-            }
-            onComplete(videos)
-            message.success("视频生成完成！")
-            return
-          }
-
-          if (task.status === "failed" || task.status === "cancelled") {
-            const rawMsg =
-              task.error_info?.error_message ||
-              task.error_message ||
-              (task.status === "cancelled" ? "任务已取消" : "视频生成失败，请联系管理员或重试")
-            const errorMsg = safeExtractError(rawMsg)
-            console.error("[生成失败] taskId:", taskId, "响应:", task)
-            onFailed(errorMsg)
-            message.error(errorMsg)
-            return
-          }
-
-          // pending / waiting / running — 继续轮询
-          const pct = Math.max(0, Math.min(99, Math.round(Number(task.progress) || 0)))
-          onProgress(pct)
-          progressTimer.current = setTimeout(poll, 2000)
-        } catch (pollErr) {
+      const runId = 0
+      pollSingleTask(taskId, runId)
+        .then((videos) => {
          if (cancelledRef.current) return
-          console.error("[轮询出错] taskId:", taskId, pollErr)
-
-          // 4xx 不可恢复，立即失败
-          const status = axios.isAxiosError(pollErr) ? pollErr.response?.status : undefined
-          if (status && status >= 400 && status < 500) {
-            const msg =
-              (axios.isAxiosError(pollErr) &&
-                (pollErr.response?.data as { detail?: string; message?: string } | undefined)
-                  ?.detail) ||
-              (axios.isAxiosError(pollErr) &&
-                (pollErr.response?.data as { detail?: string; message?: string } | undefined)
-                  ?.message) ||
-              `查询任务失败 (${status})`
-            const errorMsg = safeExtractError(msg)
-            onFailed(errorMsg)
-            message.error(errorMsg)
-            return
-          }
-
-          consecutiveErrors += 1
-          if (consecutiveErrors >= MAX_RETRYABLE_ERRORS) {
-            const errorMsg = "任务状态查询连续失败，请稍后在任务列表查看结果"
-            onFailed(errorMsg)
-            message.error(errorMsg)
-            return
-          }
-          progressTimer.current = setTimeout(poll, 3000)
-        }
-      }
-
-      progressTimer.current = setTimeout(poll, 1500)
+          onProgress(100)
+          onComplete(videos)
+          message.success("视频生成完成！")
+        })
+        .catch((err: Error) => {
+          if (cancelledRef.current) return
+          console.error("[生成失败] taskId:", taskId, err.message)
+          onFailed(err.message)
+          message.error(err.message)
+        })
    },
-    [onProgress, onComplete, onFailed, fetchResultsWithRetry],
+    [pollSingleTask, onProgress, onComplete, onFailed],
  )

-  return { startPolling, clearTimer }
+  /** 批量多任务轮询：全部完成后聚合结果；任一失败即整体失败 */
+  const startPollingBatch = useCallback(
+    (taskIds: string[]) => {
+      cancelledRef.current = false
+      const runId = Date.now()
+      const progressMap = new Map<string, number>()
+
+      const reportAggregateProgress = () => {
+        if (cancelledRef.current) return
+        const values = taskIds.map((id) => progressMap.get(id) ?? 0)
+        const avg = Math.round(values.reduce((a, b) => a + b, 0) / Math.max(values.length, 1))
+        onProgress(Math.min(avg, 99))
+      }
+
+      const tasks = taskIds.map((taskId) =>
+        pollSingleTask(taskId, runId, (pct) => {
+          progressMap.set(taskId, pct)
+          reportAggregateProgress()
+        }).then((videos) => {
+          progressMap.set(taskId, 100)
+          reportAggregateProgress()
+          return videos
+        }),
+      )
+
+      Promise.all(tasks)
+        .then((results) => {
+          if (cancelledRef.current) return
+          onProgress(100)
+          const allVideos = results.flat()
+          onComplete(allVideos)
+          message.success(`全部 ${taskIds.length} 个视频生成完成！`)
+        })
+        .catch((err: Error) => {
+          if (cancelledRef.current) return
+          console.error("[批量生成失败]", err.message)
+          onFailed(err.message)
+          message.error(err.message)
+        })
+    },
+    [pollSingleTask, onProgress, onComplete, onFailed],
+  )
+
+  return { startPolling, startPollingBatch, clearTimer }
 }
@@ -0,0 +1,150 @@
+/**
+ * 批量封面 Hook（Issue #1677）
+ * N 个视频时：逐个自动生成封面（从对应成片抽帧 + 叠加对应标题）或上传自定义封面
+ */
+import { useCallback, useState } from "react"
+import { message } from "antd"
+import { generateCover } from "@/api/generation"
+import { uploadAssetDirect, getAssetLibraries } from "@/api/assets"
+import type { GeneratedVideo } from "@/api/template-editor"
+
+interface UseBatchCoversOptions {
+  selectedTemplate: string
+  generatedVideos: GeneratedVideo[]
+  /** 每个变体的标题文字 */
+  titles: string[]
+  /** 标题样式（全局共用） */
+  titleStyle: {
+    font: string
+    size: number
+    color: string
+    position: string
+    bold: boolean
+    stroke: boolean
+    shadow: boolean
+  }
+  covers: string[]
+  onCoversChange: (urls: string[]) => void
+}
+
+export function useBatchCovers({
+  selectedTemplate,
+  generatedVideos,
+  titles,
+  titleStyle,
+  covers,
+  onCoversChange,
+}: UseBatchCoversOptions) {
+  const [loadingIndex, setLoadingIndex] = useState<number | null>(null)
+  const [uploadingIndex, setUploadingIndex] = useState<number | null>(null)
+
+  const patchCover = useCallback(
+    (index: number, url: string) => {
+      const next = [...covers]
+      next[index] = url
+      onCoversChange(next)
+    },
+    [covers, onCoversChange],
+  )
+
+  /** 为第 index 个视频自动生成封面 */
+  const generateOne = useCallback(
+    async (index: number) => {
+      const finalVideos = generatedVideos.filter((v) => v.status === "completed")
+      const target = finalVideos[index] || generatedVideos[index]
+      if (!target) {
+        message.warning("该视频尚未生成完成")
+        return
+      }
+      setLoadingIndex(index)
+      try {
+        const titleText = titles[index] || ""
+        const response = await generateCover(selectedTemplate, {
+          generated_video_id: target.id,
+          video_url: target.file_url || target.download_url || "",
+          cover_type: "ai_frame",
+          ...(titleText
+            ? {
+                title_config: {
+                  text: titleText,
+                  font: titleStyle.font,
+                  font_size: titleStyle.size,
+                  font_color: titleStyle.color,
+                  position: titleStyle.position,
+                  bold: titleStyle.bold,
+                  stroke: titleStyle.stroke,
+                  shadow: titleStyle.shadow,
+                },
+              }
+            : {}),
+        })
+        const url = response.cover?.image_url || response.cover?.thumbnail_url || ""
+        if (url) {
+          patchCover(index, url)
+          message.success(`视频 ${index + 1} 封面生成成功`)
+        } else {
+          message.warning(`视频 ${index + 1} 封面生成未返回图片，请重试`)
+        }
+      } catch (err) {
+        console.error(`[封面] 视频 ${index + 1} 生成失败:`, err)
+        message.error(`视频 ${index + 1} 封面生成失败，请重试`)
+      } finally {
+        setLoadingIndex(null)
+      }
+    },
+    [generatedVideos, titles, titleStyle, selectedTemplate, patchCover],
+  )
+
+  /** 为第 index 个视频上传自定义封面 */
+  const uploadOne = useCallback(
+    async (index: number, file: File) => {
+      setUploadingIndex(index)
+      try {
+        const libs = await getAssetLibraries()
+        const imageLib = libs.find((l) => l.kind === "image") || libs[0]
+        if (!imageLib) {
+          message.error("未找到素材库，请先创建")
+          return
+        }
+        const result = await uploadAssetDirect({
+          file,
+          library_id: imageLib.id,
+        })
+        const url = result?.url || ""
+        if (url) {
+          patchCover(index, url)
+          message.success(`视频 ${index + 1} 封面已上传`)
+        } else {
+          message.warning("上传完成但未获取到图片URL，请重试")
+        }
+      } catch (err) {
+        console.error(`[封面] 视频 ${index + 1} 上传失败:`, err)
+        message.error("封面上传失败，请重试")
+      } finally {
+        setUploadingIndex(null)
+      }
+    },
+    [patchCover],
+  )
+
+  /** 一键全部自动生成（串行，避免队列限流） */
+  const generateAll = useCallback(async () => {
+    const finalVideos = generatedVideos.filter((v) => v.status === "completed")
+    for (let i = 0; i < finalVideos.length; i++) {
+      if (covers[i]) continue // 已有封面跳过
+      // eslint-disable-next-line no-await-in-loop
+      await generateOne(i)
+    }
+    message.success("全部封面已生成")
+  }, [generatedVideos, covers, generateOne])
+
+  return {
+    loadingIndex,
+    uploadingIndex,
+    generateOne,
+    uploadOne,
+    generateAll,
+  }
+}
+
+export default useBatchCovers
@@ -0,0 +1,285 @@
+/**
+ * 批量服务器预览 Hook（Issue #1677 多视频批量生成）
+ *
+ * 核心职责：
+ * 1. 调用 POST /generation/preview（preview_count=N）一次创建 N 个独立变体任务
+ * 2. 对每个变体 task_id 分别轮询 GET /generation/preview/{task_id}
+ * 3. 返回每个变体的状态/进度/视频URL，供网格播放器展示
+ *
+ * N=1 时不启用（走前端 Canvas 实时预览，零回归）；
+ * N>1 时进入标题页自动触发；素材/配音等配置变化后重新触发。
+ */
+import { useState, useCallback, useRef, useEffect } from "react"
+import { createPreview, getPreviewStatus } from "@/api/generation/preview"
+import type { CreatePreviewRequest } from "@/api/generation/types"
+
+export type VariantPreviewStatus = "loading" | "ready" | "failed"
+
+export interface VariantPreview {
+  /** 变体序号（0-based） */
+  index: number
+  taskId: string
+  status: VariantPreviewStatus
+  progress: number
+  videoUrl: string | null
+  error: string | null
+}
+
+interface UseBatchPreviewOptions {
+  /** 是否启用（仅 previewCount>1 且在标题页时启用） */
+  enabled: boolean
+  /** 构建预览请求参数（每次触发时调用，获取最新配置） */
+  buildRequest: () => CreatePreviewRequest
+  /** 批量预览任务创建成功回调（回传变体 taskId 列表与 source_edit_plan_id） */
+  onPreviewTasksCreated?: (taskIds: string[], sourceEditPlanId?: string) => void
+}
+
+interface UseBatchPreviewReturn {
+  variants: VariantPreview[]
+  /** 整体状态：loading=任一进行中，ready=全部完成，failed=有失败 */
+  status: "idle" | "loading" | "ready" | "partial_failed" | "failed"
+  /** 总进度 0-100（各变体平均值） */
+  progress: number
+  /** 失败的变体数量 */
+  failedCount: number
+  /** 手动重新触发 */
+  trigger: () => void
+}
+
+const POLL_INTERVAL = 2000
+const POLL_TIMEOUT = 180_000
+const MAX_NETWORK_RETRIES = 2
+
+/**
+ * 对配置参数做指纹，用于检测配置是否变化（标题文字/样式变化不触发重渲染，仅CSS浮层叠加）
+ */
+function buildFingerprint(req: CreatePreviewRequest): string {
+  // 不含 titles/title_config：标题文字与样式由 CSS 浮层实时叠加，变化不触发重渲染
+  return JSON.stringify({
+    t: req.template_id,
+    a: [...(req.asset_ids || [])].sort(),
+    r: req.video_ratio,
+    v: req.voice_library_id,
+    vs: req.voice_library_ids,
+    pc: req.preview_count,
+    b: req.bgm_config,
+  })
+}
+
+export function useBatchPreview({
+  enabled,
+  buildRequest,
+  onPreviewTasksCreated,
+}: UseBatchPreviewOptions): UseBatchPreviewReturn {
+  const [variants, setVariants] = useState<VariantPreview[]>([])
+  const [status, setStatus] = useState<"idle" | "loading" | "ready" | "partial_failed" | "failed">(
+    "idle",
+  )
+  const requestSeqRef = useRef(0)
+  const pollTimersRef = useRef<ReturnType<typeof setTimeout>[]>([])
+  const timeoutTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const mountedRef = useRef(true)
+
+  const buildRequestRef = useRef(buildRequest)
+  buildRequestRef.current = buildRequest
+  const onCreatedRef = useRef(onPreviewTasksCreated)
+  onCreatedRef.current = onPreviewTasksCreated
+
+  const clearTimers = useCallback(() => {
+    pollTimersRef.current.forEach((t) => clearTimeout(t))
+    pollTimersRef.current = []
+    if (timeoutTimerRef.current) {
+      clearTimeout(timeoutTimerRef.current)
+      timeoutTimerRef.current = null
+    }
+  }, [])
+
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+      clearTimers()
+    }
+  }, [clearTimers])
+
+  /** 更新单个变体状态 */
+  const patchVariant = useCallback((taskId: string, patch: Partial<VariantPreview>) => {
+    setVariants((prev) => prev.map((v) => (v.taskId === taskId ? { ...v, ...patch } : v)))
+  }, [])
+
+  /** 轮询单个变体任务 */
+  const pollVariant = useCallback(
+    async (taskId: string, seq: number, retries = 0) => {
+      if (seq !== requestSeqRef.current || !mountedRef.current) return
+      try {
+        const st = await getPreviewStatus(taskId)
+        if (seq !== requestSeqRef.current || !mountedRef.current) return
+
+        if (st.status === "completed" && st.video_url) {
+          patchVariant(taskId, {
+            status: "ready",
+            videoUrl: st.video_url,
+            progress: 100,
+            error: null,
+          })
+          return
+        }
+        if (st.status === "failed" || st.status === "cancelled") {
+          patchVariant(taskId, {
+            status: "failed",
+            error:
+              st.status === "cancelled" ? "预览任务已取消" : st.error_message || "预览渲染失败",
+          })
+          return
+        }
+        if (typeof st.progress === "number") {
+          patchVariant(taskId, { progress: Math.round(st.progress) })
+        }
+        const timer = setTimeout(() => pollVariant(taskId, seq), POLL_INTERVAL)
+        pollTimersRef.current.push(timer)
+      } catch (err) {
+        if (seq !== requestSeqRef.current || !mountedRef.current) return
+        if (retries < MAX_NETWORK_RETRIES) {
+          console.warn(`[BatchPreview] 变体 ${taskId} 轮询网络错误，第 ${retries + 1} 次重试`, err)
+          const timer = setTimeout(() => pollVariant(taskId, seq, retries + 1), POLL_INTERVAL * 2)
+          pollTimersRef.current.push(timer)
+        } else {
+          patchVariant(taskId, { status: "failed", error: "网络错误，无法获取预览状态" })
+        }
+      }
+    },
+    [patchVariant],
+  )
+
+  /** 创建批量预览任务并开始轮询 */
+  const trigger = useCallback(() => {
+    if (!enabled) return
+    const request = buildRequestRef.current()
+    if (!request.template_id || !request.asset_ids?.length) return
+    const count = request.preview_count && request.preview_count > 1 ? request.preview_count : 0
+    if (!count) return
+
+    clearTimers()
+    const seq = ++requestSeqRef.current
+    setStatus("loading")
+    setVariants(
+      Array.from({ length: count }, (_, i) => ({
+        index: i,
+        taskId: "",
+        status: "loading" as const,
+        progress: 0,
+        videoUrl: null,
+        error: null,
+      })),
+    )
+
+    createPreview(request)
+      .then((resp) => {
+        if (seq !== requestSeqRef.current || !mountedRef.current) return
+        const items = resp.items || []
+        const taskIds = items.map((it) => it.task_id).filter(Boolean)
+        if (taskIds.length === 0) {
+          setStatus("failed")
+          setVariants((prev) =>
+            prev.map((v) => ({ ...v, status: "failed", error: "未创建预览任务" })),
+          )
+          return
+        }
+        onCreatedRef.current?.(taskIds, resp.source_edit_plan_id)
+
+        // 用返回的 task_id 填充变体（按 variant_index 对齐）
+        setVariants((prev) =>
+          prev.map((v) => {
+            const item = items.find((it) => it.variant_index === v.index) || items[v.index]
+            return item ? { ...v, taskId: item.task_id } : v
+          }),
+        )
+
+        // 超时保护
+        timeoutTimerRef.current = setTimeout(() => {
+          if (seq !== requestSeqRef.current || !mountedRef.current) return
+          setVariants((prev) =>
+            prev.map((v) =>
+              v.status === "loading"
+                ? { ...v, status: "failed", error: "预览渲染超时，请重试" }
+                : v,
+            ),
+          )
+        }, POLL_TIMEOUT)
+
+        // 分别轮询每个变体
+        items.forEach((item) => {
+          if (item.task_id) pollVariant(item.task_id, seq)
+        })
+      })
+      .catch((err: unknown) => {
+        if (seq !== requestSeqRef.current || !mountedRef.current) return
+        console.error("[BatchPreview] 创建批量预览失败:", err)
+        const errData = (err as { response?: { data?: { detail?: string; message?: string } } })
+          ?.response?.data
+        setStatus("failed")
+        setVariants((prev) =>
+          prev.map((v) => ({
+            ...v,
+            status: "failed",
+            error: errData?.detail || errData?.message || "预览任务创建失败，请重试",
+          })),
+        )
+      })
+  }, [enabled, clearTimers, pollVariant])
+
+  /* ── 自动触发 + 配置变更检测 ── */
+  const request = enabled ? buildRequest() : null
+  const currentFingerprint = request
+    ? request.template_id && request.asset_ids?.length && (request.preview_count || 1) > 1
+      ? buildFingerprint(request)
+      : ""
+    : ""
+
+  const didInitRef = useRef(false)
+  useEffect(() => {
+    if (!enabled || !currentFingerprint) {
+      didInitRef.current = false
+      requestSeqRef.current += 1
+      clearTimers()
+      setStatus("idle")
+      setVariants([])
+      return
+    }
+    if (!didInitRef.current) {
+      didInitRef.current = true
+      trigger()
+    }
+  }, [enabled, currentFingerprint, trigger, clearTimers])
+
+  // 配置变更（素材/配音/数量）→ 重新渲染；标题文字变化不触发（CSS浮层实时叠加）
+  const prevFingerprintRef = useRef(currentFingerprint)
+  useEffect(() => {
+    if (!enabled || !currentFingerprint) return
+    const prev = prevFingerprintRef.current
+    prevFingerprintRef.current = currentFingerprint
+    if (!prev || prev === currentFingerprint) return
+    trigger()
+  }, [enabled, currentFingerprint, trigger])
+
+  /* ── 派生状态 ── */
+  const progress =
+    variants.length > 0
+      ? Math.round(variants.reduce((sum, v) => sum + v.progress, 0) / variants.length)
+      : 0
+  const failedCount = variants.filter((v) => v.status === "failed").length
+  const readyCount = variants.filter((v) => v.status === "ready").length
+
+  useEffect(() => {
+    if (status !== "loading" || variants.length === 0) return
+    if (readyCount === variants.length) {
+      setStatus("ready")
+    } else if (readyCount + failedCount === variants.length && failedCount > 0) {
+      setStatus(failedCount === variants.length ? "failed" : "partial_failed")
+    }
+  }, [variants, status, readyCount, failedCount])
+
+  return { variants, status, progress, failedCount, trigger }
+}
+
+export default useBatchPreview
@@ -1,6 +1,6 @@
 /**
 * GeneratePage 表单状态管理
- * 集中管理 7 步向导的所有共享状态、API 加载、URL 参数解析
+ * 集中管理 5 步向导的所有共享状态、API 加载、URL 参数解析
 */
 import { useState } from "react"
 import { useSearchParams } from "react-router-dom"
@@ -100,6 +100,26 @@ export interface GenerateFormState {
  /** 从预览响应中提取的 source_edit_plan_id（供 fallback 路径使用） */
  storedSourceEditPlanId: string | null
  setStoredSourceEditPlanId: (planId: string | null) => void
+
+  /* ── 批量生成（Issue #1677）── */
+  /** 生成数量（1~10），1=单条旧逻辑 */
+  previewCount: number
+  setPreviewCount: (n: number) => void
+  /** 每个变体的标题文字，长度=previewCount；[0] 与 titleSettings.title 保持同步 */
+  previewTitles: string[]
+  setPreviewTitles: (titles: string[] | ((prev: string[]) => string[])) => void
+  /** false=所有视频共用一个配音；true=每个视频独立配音 */
+  voiceModePerVideo: boolean
+  setVoiceModePerVideo: (v: boolean) => void
+  /** 独立配音模式下每个变体的配音素材ID，长度=previewCount */
+  voiceLibraryIds: string[]
+  setVoiceLibraryIds: (ids: string[] | ((prev: string[]) => string[])) => void
+  /** 每个变体的封面URL（自动生成或上传），长度=previewCount，空串=未设置 */
+  previewCovers: string[]
+  setPreviewCovers: (urls: string[] | ((prev: string[]) => string[])) => void
+  /** 确认生成时勾选的变体索引 */
+  selectedVariantIds: number[]
+  setSelectedVariantIds: (ids: number[] | ((prev: number[]) => number[])) => void
 }

 export const useGenerateFormState = (): GenerateFormState => {
@@ -185,6 +205,14 @@ export const useGenerateFormState = (): GenerateFormState => {
    null,
  )

+  /* ── 批量生成状态（Issue #1677）── */
+  const [previewCount, setPreviewCount] = useState(1)
+  const [previewTitles, setPreviewTitles] = useState<string[]>([""])
+  const [voiceModePerVideo, setVoiceModePerVideo] = useState(false)
+  const [voiceLibraryIds, setVoiceLibraryIds] = useState<string[]>([""])
+  const [previewCovers, setPreviewCovers] = useState<string[]>([""])
+  const [selectedVariantIds, setSelectedVariantIds] = useState<number[]>([0])
+
  /* ── 从 URL / 编辑计划加载配置 ── */
  usePlanConfigLoader({
    editPlanId,
@@ -233,5 +261,17 @@ export const useGenerateFormState = (): GenerateFormState => {
    setPreviewTaskId,
    storedSourceEditPlanId,
    setStoredSourceEditPlanId,
+    previewCount,
+    setPreviewCount,
+    previewTitles,
+    setPreviewTitles,
+    voiceModePerVideo,
+    setVoiceModePerVideo,
+    voiceLibraryIds,
+    setVoiceLibraryIds,
+    previewCovers,
+    setPreviewCovers,
+    selectedVariantIds,
+    setSelectedVariantIds,
  }
 }
@@ -38,7 +38,7 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
    setGenerateError(errorMsg)
  }, [])

-  const { startPolling, clearTimer } = useGenerationPolling({
+  const { startPolling, startPollingBatch, clearTimer } = useGenerationPolling({
    onProgress: handleProgress,
    onComplete: handleComplete,
    onFailed: handleFailed,
@@ -83,7 +83,11 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
        }
      }

-      const hide = message.loading("正在生成预览视频...", 0)
+      const isBatch = (props.previewCount || 1) > 1
+      const hide = message.loading(
+        isBatch ? `正在生成 ${props.previewCount} 个视频...` : "正在生成预览视频...",
+        0,
+      )

      const coverUrl = props.coverSettings?.thumbnail_url || props.coverSettings?.upload_url || ""

@@ -92,6 +96,29 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
          ? props.selectedClonedVoice || props.selectedVoice || ""
          : props.selectedVoice || ""

+      /* ── 批量变体数组（长度1=共用，长度=count=独立，空=回退单值） ── */
+      const indexes =
+        isBatch && props.selectedVariantIndexes?.length
+          ? props.selectedVariantIndexes
+          : Array.from({ length: props.previewCount || 1 }, (_, i) => i)
+      const batchCount = isBatch ? indexes.length : 1
+
+      // 标题文字数组：批量时按勾选顺序
+      const titlesArr =
+        isBatch && (props.variantTitles?.length || 0) >= batchCount
+          ? indexes.map((i) => props.variantTitles![i] || props.titleSettings?.title || "")
+          : []
+      // 配音数组：独立配音模式按勾选顺序；否则不传（回退共用 voice_library_id）
+      const voiceArr =
+        isBatch && props.voiceModePerVideo && props.variantVoiceLibraryIds?.length
+          ? indexes.map((i) => props.variantVoiceLibraryIds![i] || voiceLibraryId)
+          : []
+      // 封面数组：批量时按勾选顺序（未设置封面的变体传空串，后端回退智能封面）
+      const coversArr =
+        isBatch && props.variantCoverUrls?.length
+          ? indexes.map((i) => props.variantCoverUrls![i] || "")
+          : []
+
      try {
        const taskResp = await createGenerationTask({
          template_id: selectedTemplate,
@@ -109,6 +136,10 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
            ...(props.bgmConfig?.music_id ? { preset_id: props.bgmConfig.music_id } : {}),
          },
          ...(props.sourceEditPlanId ? { source_edit_plan_id: props.sourceEditPlanId } : {}),
+          ...(isBatch ? { count: batchCount } : {}),
+          ...(titlesArr.length ? { titles: titlesArr } : {}),
+          ...(voiceArr.length ? { voice_library_ids: voiceArr } : {}),
+          ...(coversArr.length ? { cover_urls: coversArr } : {}),
          ...(props.titleSettings?.title
            ? {
                title_config: {
@@ -133,12 +164,16 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
            : {}),
        })
        hide()
-        const taskId = taskResp.items?.[0]?.id
+        const taskIds = (taskResp.items || []).map((it) => it.id).filter(Boolean)

-        if (!taskId) {
+        if (taskIds.length === 0) {
          throw new Error("创建任务成功但未返回任务 ID，请稍后在任务列表查看")
        }
-        startPolling(taskId)
+        if (taskIds.length > 1) {
+          startPollingBatch(taskIds)
+        } else {
+          startPolling(taskIds[0])
+        }
      } catch (err) {
        hide()
        throw err
@@ -154,7 +189,7 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
      return false
    }
    return true
-  }, [props, clearTimer, startPolling, selectedTemplate])
+  }, [props, clearTimer, startPolling, startPollingBatch, selectedTemplate])

  const retry = useCallback(() => {
    setGenerateError(null)
@@ -114,8 +114,11 @@ export function useServerPreview({
        const resp = await createPreview(request)
        if (seq !== requestSeqRef.current || !mountedRef.current) return

-        setTaskId(resp.task_id)
-        onCreatedRef.current?.(resp.task_id, resp.source_edit_plan_id)
+        // 兼容批量响应 {items, total}：取第一个变体
+        const firstTask = resp.items?.[0]
+        const taskId = firstTask?.task_id || ""
+        setTaskId(taskId)
+        onCreatedRef.current?.(taskId, resp.source_edit_plan_id)

        let completed = false

@@ -132,7 +135,7 @@ export function useServerPreview({
          if (completed || seq !== requestSeqRef.current || !mountedRef.current) return

          try {
-            const st = await getPreviewStatus(resp.task_id)
+            const st = await getPreviewStatus(taskId)
            if (completed || seq !== requestSeqRef.current || !mountedRef.current) return

            if (st.status === "completed" && st.video_url) {
@@ -1,112 +0,0 @@
-/**
- * Step 7 确认生成 Hook
- * 封装生成确认页的展示逻辑
- */
-import { useMemo } from "react"
-import { useQuery } from "@tanstack/react-query"
-import type { EditingTemplate } from "@/api/editing-planner"
-import type { GeneratedVideo } from "@/api/template-editor"
-import type { CoverConfig } from "../types/cover"
-import type { VoiceClone } from "@/api/voice-clone"
-import type { PresetVoiceItem } from "@/api/voices"
-import { getAssetsByKind } from "@/api/assets"
-import { COVER_MODE_LABELS } from "../constants"
-
-interface UseStep7GenerateProps {
-  templates: EditingTemplate[]
-  selectedTemplate: string
-  materialMode: "manual" | "auto"
-  selectedMaterials: string[]
-  smartSelectedIds: string[]
-  title: string
-  voiceMode: "preset" | "custom" | "clone"
-  selectedVoice: string
-  selectedClonedVoice: string
-  presetVoices: PresetVoiceItem[]
-  clonedVoices: VoiceClone[]
-  coverSettings: CoverConfig
-  generating: boolean
-  generated: boolean
-  generateError: string | null
-  progress: number
-  generatedVideos: GeneratedVideo[]
-}
-
-export function useStep7Generate({
-  templates,
-  selectedTemplate,
-  materialMode,
-  selectedMaterials,
-  smartSelectedIds,
-  title,
-  voiceMode: _voiceMode,
-  selectedVoice,
-  selectedClonedVoice: _selectedClonedVoice,
-  presetVoices: _presetVoices,
-  clonedVoices: _clonedVoices,
-  coverSettings,
-  generating,
-  generated,
-  generateError,
-  progress,
-  generatedVideos,
-}: UseStep7GenerateProps) {
-  const templateName = useMemo(
-    () => templates.find((t) => t.id === selectedTemplate)?.name ?? "未选择",
-    [templates, selectedTemplate],
-  )
-
-  const materialSummary = useMemo(() => {
-    if (materialMode === "auto") {
-      return `${smartSelectedIds.length} 个素材（智能匹配）`
-    }
-    return `${selectedMaterials.length} 个素材`
-  }, [materialMode, selectedMaterials.length, smartSelectedIds.length])
-
-  // 从配音素材库中查找 voiceName
-  const { data: voiceMaterials = [] } = useQuery({
-    queryKey: ["assets", "voice"],
-    queryFn: () => getAssetsByKind("voice", { limit: 50 }),
-  })
-
-  const voiceName = useMemo(() => {
-    const asset = voiceMaterials.find((v) => v.id === selectedVoice)
-    return asset ? asset.name : "未选择"
-  }, [voiceMaterials, selectedVoice])
-
-  const coverSummary = useMemo(() => {
-    if (!coverSettings.enabled) return "不使用"
-    return COVER_MODE_LABELS[coverSettings.mode] || "智能封面"
-  }, [coverSettings])
-
-  const getGenerationPhase = (p: number) => {
-    if (p < 20) return { label: "分析素材与配置", icon: "🔍" }
-    if (p < 50) return { label: "智能剪辑合成", icon: "🎬" }
-    if (p < 80) return { label: "渲染视频中", icon: "⚡" }
-    return { label: "即将完成", icon: "✨" }
-  }
-
-  const handleScrollToPreview = () => {
-    const el =
-      document.querySelector(".xx-inline-video-player") ||
-      document.querySelector(".xx-preview-section")
-    el?.scrollIntoView({ behavior: "smooth", block: "start" })
-  }
-
-  return {
-    templateName,
-    materialSummary,
-    title,
-    voiceName,
-    coverSummary,
-    generating,
-    generated,
-    generateError,
-    progress,
-    generatedVideos,
-    getGenerationPhase,
-    handleScrollToPreview,
-  }
-}
-
-export default useStep7Generate
@@ -1,6 +1,6 @@
 /**
- * GeneratePage 步骤导航
- * 步骤顺序（6步）：模板(1) → 素材(2) → 配音(3) → 标题(4) → 确认生成(5) → 封面(6)
+ * GeneratePage 步骤导航（Issue #1677 改造后 5 步）
+ * 步骤：模板(1) → 素材(2) → 配音(3) → 标题+预览+确认生成(4) → 封面(5)
 */
 import { message } from "antd"
 import type { TitleSettings } from "../types"
@@ -13,10 +13,16 @@ export interface UseStepNavigationOptions {
  selectedMaterials: string[]
  smartSelectedIds: string[]
  titleSettings: TitleSettings
-  /** 预览是否已就绪（素材已加载，可播放） */
+  /** 预览是否已就绪（单视频=前端预览素材已加载；批量=服务器预览全部完成） */
  previewReady: boolean
-  /** 是否已完成视频生成（步骤5确认生成后才能进入封面） */
+  /** 是否已完成视频生成（步骤4确认生成后才能进入封面） */
  generated: boolean
+  /** 批量模式下每个变体的标题 */
+  previewTitles: string[]
+  /** 批量模式勾选的变体数 */
+  selectedCount: number
+  /** Step1 点下一步时弹出数量选择弹窗 */
+  onOpenCountModal: () => void
 }

 export interface UseStepNavigationReturn {
@@ -32,14 +38,21 @@ export const useStepNavigation = (options: UseStepNavigationOptions): UseStepNav
    materialMode,
    selectedMaterials,
    smartSelectedIds,
-    titleSettings,
    previewReady,
    generated,
+    previewTitles,
+    selectedCount,
+    onOpenCountModal,
  } = options

  const goNext = () => {
-    if (currentStep === 1 && !selectedTemplate) {
-      message.warning("请先选择一个模板")
+    if (currentStep === 1) {
+      if (!selectedTemplate) {
+        message.warning("请先选择一个模板")
+        return
+      }
+      // 选完模板弹数量选择弹窗（每次都弹，不记忆）
+      onOpenCountModal()
      return
    }
    if (currentStep === 2 && materialMode === "manual" && selectedMaterials.length === 0) {
@@ -50,23 +63,27 @@ export const useStepNavigation = (options: UseStepNavigationOptions): UseStepNav
      message.warning("请先进行智能匹配并选择素材")
      return
    }
-    // Step4（标题+预览）：标题必填 + 预览必须已加载
+    // Step4（标题+预览+确认生成）：标题必填 + 预览必须已加载
    if (currentStep === 4) {
-      if (!titleSettings.title.trim()) {
-        message.warning("请选择或输入标题")
+      const allTitlesFilled = previewTitles.every((t) => t && t.trim())
+      if (!allTitlesFilled) {
+        message.warning("请为每个视频输入标题")
+        return
+      }
+      if (selectedCount === 0) {
+        message.warning("请至少勾选一个视频")
        return
      }
      if (!previewReady) {
        message.warning("预览视频正在加载，请稍候")
        return
      }
+      if (!generated) {
+        message.warning("请先点击「确认生成视频」完成渲染")
+        return
+      }
    }
-    // Step5（确认生成）：必须已完成生成才能进入封面
-    if (currentStep === 5 && !generated) {
-      message.warning("请先生成视频")
-      return
-    }
-    if (currentStep < 6) {
+    if (currentStep < 5) {
      setCurrentStep((s) => s + 1)
    }
  }
@@ -19,6 +19,9 @@ import "@/pages/generate/GeneratePage"
 import "@/pages/generate/components/Step2MaterialSelect"
 import "@/pages/generate/components/Step4TitleSettings"
 import "@/pages/generate/components/Step5VoiceSelect"
+import "@/pages/generate/components/Step3VoiceWithMode"
+import "@/pages/generate/components/ServerPreviewGrid"
+import "@/pages/generate/components/PreviewCountModal"
 import "@/pages/generate/components/PreviewVideoPanel"
 import "@/pages/generate/components/GenerateResultPanel"
 import "@/pages/generate/components/GenerateStepContent"
@@ -45,6 +48,8 @@ describe("GeneratePage module smoke test", () => {
  })
 })
 import "@/pages/generate/hooks/useGenerateVideo"
+import "@/pages/generate/hooks/useBatchPreview"
+import "@/pages/generate/hooks/useBatchCovers"
 import "@/pages/generate/hooks/usePreviewAssets"
 import "@/pages/generate/hooks/useSegmentScheduler"
 import "@/pages/generate/hooks/generate-video/useGenerationPolling"
Author	SHA1	Message	Date
xiaoxia	c4b80921a0	test(#1677 ): E2E 适配新 5 步流程（批量生成改造） - Step1 下一步 → 数量弹窗（默认 1 个）确认 - Step4 标题+预览+确认生成（左预览右栏标题） - 单视频（N=1）点击「确认生成视频」直接跳 Step5 封面，与旧流程一致	2026-09-05 09:37:31 +08:00
xiaoxia	6846f68e03	fix(#1677 ): AI Review 防御性修复 — setState 函数式更新空数组兜底 CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped Details CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 1s Details CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 2s Details CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped Details CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped Details CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped Details CI/CD Pipeline / Unit Tests (pull_request) Has been skipped Details CI/CD Pipeline / Integration Tests (pull_request) Has been skipped Details CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped Details CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped Details CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped Details CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped Details CI/CD Pipeline / Retag skipped Staging Worker Image (pull_request) Has been skipped Details CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped Details CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped Details CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped Details CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped Details CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m34s Details CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m51s Details CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 2m0s Details Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m17s Details CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m20s Details PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m38s Details CI/CD Pipeline / Validate - Style (pull_request) Successful in 2m40s Details CI/CD Pipeline / Validate - Security (pull_request) Successful in 6m13s Details AI Code Review / AI Code Review (pull_request) Successful in 6m17s Details CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped Details CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped Details CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped Details CI/CD Pipeline / Deploy Production (pull_request) Has been skipped Details CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped Details CI/CD Pipeline / CI Gate (pull_request) Successful in 6s Details CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped Details PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 4m40s Details Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 16s Details ACR Cleanup / ACR Image Cleanup (pull_request_target) Failing after 10m59s Details - setPreviewTitles/setVoiceLibraryIds/setPreviewCovers/setSelectedVariantIds 函数式更新中 prev 加 (prev \|\| []) 兜底，防御状态重置场景 - 清理 poster={url \|\| undefined} 冗余写法	2026-09-05 08:56:25 +08:00
xiaoxia	b0ea3565ee	fix(#1677 ): AI Review 阻塞项修复 — 配音模式切换同步+预览标题双重叠加 CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped Details CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 9s Details CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 10s Details CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped Details CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped Details CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped Details CI/CD Pipeline / Unit Tests (pull_request) Has been skipped Details CI/CD Pipeline / Integration Tests (pull_request) Has been skipped Details CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped Details CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped Details CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped Details CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped Details CI/CD Pipeline / Retag skipped Staging Worker Image (pull_request) Has been skipped Details CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 2m12s Details Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m58s Details CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 2m32s Details CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped Details CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped Details CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped Details CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped Details CI/CD Pipeline / Frontend Lint (pull_request) Successful in 3m24s Details CI/CD Pipeline / Validate - Style (pull_request) Successful in 3m45s Details CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m59s Details AI Code Review / AI Code Review (pull_request) Failing after 4m29s Details CI/CD Pipeline / Validate - Security (pull_request) Successful in 5m10s Details CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped Details CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped Details CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped Details CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped Details CI/CD Pipeline / Deploy Production (pull_request) Has been skipped Details CI/CD Pipeline / CI Gate (pull_request) Successful in 5s Details CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped Details PR Automation / Auto Approve on CI Green (pull_request) Failing after 11m0s Details PR Automation / Auto Merge on CI Green + Approved (pull_request) Has been skipped Details - 配音同步 effect 响应模式切换：独立→共用时所有变体刷成共用配音；独立模式下共用配音变化仅同步变体[0]，不覆盖用户单独选择 - 批量预览不再传 titles/title_config 给后端：标题由 CSS 浮层实时叠加，避免服务器预览视频烧录标题后与前端浮层双重显示； buildPreviewRequest 移除 titleSettings 依赖及 eslint-disable；预览指纹不含 titles，标题文字/样式变化不触发重渲染	2026-09-05 08:38:12 +08:00
xiaoxia	970380662e	feat(#1677 ): 多视频批量生成前端 — 数量弹窗/批量预览/独立标题配音封面/5步流程 CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped Details CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 5s Details CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped Details CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped Details CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped Details CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped Details CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped Details CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped Details CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped Details CI/CD Pipeline / Retag skipped Staging Worker Image (pull_request) Has been skipped Details CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped Details Preview Deploy / Deploy Preview Environment (pull_request) Failing after 3s Details CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped Details CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped Details CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped Details CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m58s Details PR Automation / Auto Approve on CI Green (pull_request) Successful in 3m12s Details AI Code Review / AI Code Review (pull_request) Failing after 3m30s Details CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Failing after 10m10s Details CI/CD Pipeline / Unit Tests (pull_request) Has been skipped Details CI/CD Pipeline / Integration Tests (pull_request) Has been skipped Details CI/CD Pipeline / Frontend Lint (pull_request) Has been skipped Details CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m42s Details CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 1m50s Details CI/CD Pipeline / Validate - Style (pull_request) Successful in 2m7s Details PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 10m53s Details CI/CD Pipeline / Validate - Security (pull_request) Successful in 4m21s Details CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped Details CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped Details CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped Details CI/CD Pipeline / CI Gate (pull_request) Successful in 3s Details CI/CD Pipeline / Deploy Production (pull_request) Has been skipped Details CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped Details CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped Details - Step1 选模板后弹数量弹窗(1-10)，1=单视频零回归，N>1=批量模式 - Step4 标题页布局对调：左侧大区域预览(单=Canvas实时预览，批量=服务器预览网格)，右边栏标题设置；批量时N个独立标题输入框+CSS浮层实时叠加 - 确认生成合并进标题页：预览卡片带勾选框(默认全选)，底部确认生成N个视频 - 批量预览：POST /preview 传 preview_count，N个task_id并行轮询 - Step3 配音：共用/独立开关，独立模式N个紧凑选择器，提交 voice_library_ids[] - 封面步骤：N张封面卡片按勾选顺序展示，逐个AI生成/上传，提交 cover_urls[] - 正式生成：POST /tasks 传 count + titles[]/voice_library_ids[]/cover_urls[] (长度1共用/长度N独立/空数组回退旧逻辑)，批量任务并行轮询平均进度 - STEPS 6步→5步(模板/素材/配音/标题/封面)，删除Step7确认生成冗余组件	2026-09-05 07:58:56 +08:00