= (props) => {
>
为每个视频输入独立标题，修改会实时叠加到左侧对应视频上。标题样式（字体/颜色/位置）全局统一。
+
+ {/* 批量 AI 标题 */}
+
+ {
+ setBatchAiTopic(e.target.value)
+ t.setAiTitleInput(e.target.value)
+ }}
+ maxLength={30}
+ size="small"
+ style={{ flex: 1 }}
+ />
+
+
+
+
{Array.from({ length: previewCount }, (_, i) => (
))}
diff --git a/apps/web/src/pages/generate/constants.ts b/apps/web/src/pages/generate/constants.ts
index a63fb827d..c0c37d3bc 100644
--- a/apps/web/src/pages/generate/constants.ts
+++ b/apps/web/src/pages/generate/constants.ts
@@ -33,7 +33,8 @@ export const STEPS = [
{ key: 2, label: "选择素材" },
{ key: 3, label: "选择配音" },
{ key: 4, label: "选择标题" },
- { key: 5, label: "选择封面" },
+ { key: 5, label: "确认生成" },
+ { key: 6, label: "选择封面" },
]
/* ── 批量生成限制 ── */
diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css
index 192755553..08e17899b 100644
--- a/apps/web/src/pages/generate/generate.css
+++ b/apps/web/src/pages/generate/generate.css
@@ -3278,3 +3278,167 @@
max-height: none;
}
}
+
+/* ============================================================
+ 批量前端 Canvas 预览网格（Issue #1677 修正：纯前端实时预览）
+ ============================================================ */
+.xx-canvas-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 16px;
+}
+
+.xx-canvas-grid-card {
+ border: 2px solid var(--border-primary, #e2e8f0);
+ border-radius: 12px;
+ overflow: hidden;
+ background: #000;
+ transition: border-color 0.2s ease;
+ min-width: 0;
+}
+
+.xx-canvas-grid-card.selected {
+ border-color: var(--primary-color, #1677ff);
+ box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.15);
+}
+
+.xx-canvas-grid-card-bar {
+ position: relative;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ padding: 6px 10px;
+ background: var(--bg-surface, #fff);
+ border-bottom: 1px solid var(--border-primary, #e2e8f0);
+}
+
+.xx-canvas-grid-check {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--text-primary, #1a1a1a);
+ cursor: pointer;
+ user-select: none;
+}
+
+.xx-canvas-grid-check input[type="checkbox"] {
+ width: 15px;
+ height: 15px;
+ cursor: pointer;
+ accent-color: var(--primary-color, #1677ff);
+}
+
+/* ============================================================
+ 批量标题：AI 一键生成行（Issue #1677）
+ ============================================================ */
+.xx-batch-ai-row {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 12px;
+ margin-bottom: 12px;
+ background: var(--bg-secondary, #f7f8fa);
+ border: 1px dashed var(--border-primary, #d9d9d9);
+ border-radius: 10px;
+}
+
+.xx-batch-ai-row .xx-form-field {
+ margin: 0;
+ flex: 1;
+ min-width: 140px;
+}
+
+.xx-batch-titles {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+/* ============================================================
+ 第5步确认生成：批量渲染进度网格（Issue #1677）
+ ============================================================ */
+.xx-batch-gen-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 16px;
+}
+
+.xx-batch-gen-card {
+ border: 1px solid var(--border-primary, #e2e8f0);
+ border-radius: 12px;
+ padding: 14px;
+ background: var(--bg-surface, #fff);
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ min-width: 0;
+}
+
+.xx-batch-gen-card.status-completed {
+ border-color: rgba(82, 196, 26, 0.4);
+ background: rgba(82, 196, 26, 0.04);
+}
+
+.xx-batch-gen-card.status-failed {
+ border-color: rgba(239, 68, 68, 0.4);
+ background: rgba(239, 68, 68, 0.04);
+}
+
+.xx-batch-gen-card-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+}
+
+.xx-batch-gen-card-title {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--text-primary, #1a1a1a);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.xx-batch-gen-card-body {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.xx-batch-gen-card-pct {
+ font-size: 13px;
+ color: var(--text-secondary, #666);
+ text-align: right;
+}
+
+.xx-batch-gen-card-done {
+ font-size: 13px;
+ color: var(--success-color, #52c41a);
+ padding: 8px 0;
+}
+
+.xx-batch-gen-card-failed {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: flex-start;
+}
+
+.xx-batch-gen-card-err {
+ font-size: 13px;
+ color: var(--error-color, #ef4444);
+ line-height: 1.5;
+ word-break: break-word;
+}
+
+/* ── 响应式：窄屏批量网格回退单列 ── */
+@media (max-width: 960px) {
+ .xx-canvas-grid,
+ .xx-batch-gen-grid {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/apps/web/src/pages/generate/hooks/generate-video/useGenerationPolling.ts b/apps/web/src/pages/generate/hooks/generate-video/useGenerationPolling.ts
index 1661d9f81..cfa5be4fb 100644
--- a/apps/web/src/pages/generate/hooks/generate-video/useGenerationPolling.ts
+++ b/apps/web/src/pages/generate/hooks/generate-video/useGenerationPolling.ts
@@ -1,14 +1,28 @@
-import { useRef, useCallback } from "react"
+import { useRef, useCallback, useState } from "react"
import { message } from "antd"
import axios from "axios"
-import { getGenerationTask } from "@/api/tasks/tasks"
+import { getGenerationTask, retryTask as retryGenerationTaskApi } from "@/api/tasks/tasks"
import { getGenerationTaskResults } from "@/api/template-editor"
import { safeExtractError } from "./errorUtils"
+/** 批量生成时单个任务的实时状态（Issue #1677 第5步确认生成页） */
+export interface BatchTaskState {
+ taskId: string
+ /** 变体序号（0-based，与标题/封面数组对齐） */
+ variantIndex: number
+ status: "running" | "completed" | "failed"
+ progress: number
+ error: string | null
+ /** 完成后的成片视频 */
+ videos: unknown[]
+}
+
interface UseGenerationPollingOptions {
onProgress: (progress: number) => void
onComplete: (videos: unknown[]) => void
onFailed: (errorMsg: string) => void
+ /** 批量：单任务状态变化（第5步逐卡片展示） */
+ onBatchTaskUpdate?: (taskId: string, patch: Partial
) => void
}
/** 最大连续错误次数（仅对可重试错误），超过后终止轮询 */
@@ -17,20 +31,25 @@ const MAX_RETRYABLE_ERRORS = 10
const MAX_RESULTS_RETRIES = 3
/**
- * 生成状态轮询 Hook（v3 — 支持批量多任务）
+ * 生成状态轮询 Hook（v4 — 批量任务独立状态 + 单任务重试）
*
* startPolling(taskId) 轮询单个任务；
- * startPollingBatch(taskIds) 并行轮询 N 个任务，全部完成后聚合结果，
- * 任一任务失败即整体失败（其余任务仍在后端继续，不影响）。
- * 进度为所有任务平均值。
+ * startPollingBatch(tasks) 并行轮询 N 个任务：
+ * - 每个任务独立进度/状态/失败，通过 onBatchTaskUpdate 实时回传
+ * - 全部成功才 onComplete（聚合视频按变体顺序）；任一失败不影响其他任务继续
+ * - retryTask(taskId) 单独重试失败任务（重新轮询，后端任务仍在跑则直接接续）
*/
export function useGenerationPolling({
onProgress,
onComplete,
onFailed,
+ onBatchTaskUpdate,
}: UseGenerationPollingOptions) {
const progressTimer = useRef[]>([])
const cancelledRef = useRef(false)
+ /** 批量任务上下文：taskId → 变体序号 */
+ const batchContextRef = useRef>(new Map())
+ const [, forceTick] = useState(0)
const clearTimer = useCallback(() => {
cancelledRef.current = true
@@ -66,9 +85,21 @@ export function useGenerationPolling({
return safeExtractError(msg)
}
- /** 轮询单个任务，resolve 该任务的结果视频数组；失败时 reject(new Error(msg)) */
+ /**
+ * 轮询单个任务。
+ * - isBatch=true：状态变化通过 onBatchTaskUpdate 回传，不触发整体 onProgress/onComplete
+ * - resolve(videos) 成功；reject(Error) 失败
+ */
const pollSingleTask = useCallback(
- (taskId: string, runId: number, onTaskProgress?: (pct: number) => void): Promise => {
+ (
+ taskId: string,
+ runId: number,
+ callbacks?: {
+ onTaskProgress?: (pct: number) => void
+ onTaskCompleted?: (videos: unknown[]) => void
+ onTaskFailed?: (msg: string) => void
+ },
+ ): Promise => {
return new Promise((resolve, reject) => {
let consecutiveErrors = 0
let done = false
@@ -85,9 +116,12 @@ export function useGenerationPolling({
const videos = await fetchResultsWithRetry(taskId)
if (cancelledRef.current) return
if (videos === null) {
- reject(new Error("视频已生成，但获取结果列表失败，请稍后在任务列表查看"))
+ const msg = "视频已生成，但获取结果列表失败，请稍后在任务列表查看"
+ callbacks?.onTaskFailed?.(msg)
+ reject(new Error(msg))
return
}
+ callbacks?.onTaskCompleted?.(videos)
resolve(videos)
return
}
@@ -98,14 +132,15 @@ export function useGenerationPolling({
task.error_info?.error_message ||
task.error_message ||
(task.status === "cancelled" ? "任务已取消" : "视频生成失败，请联系管理员或重试")
- reject(new Error(safeExtractError(rawMsg)))
+ const msg = safeExtractError(rawMsg)
+ callbacks?.onTaskFailed?.(msg)
+ reject(new Error(msg))
return
}
const pct = Math.max(0, Math.min(99, Math.round(Number(task.progress) || 0)))
- if (onTaskProgress) {
- onTaskProgress(pct)
- } else if (runId === 0) {
+ callbacks?.onTaskProgress?.(pct)
+ if (!callbacks && runId === 0) {
onProgress(pct)
}
const timer = setTimeout(poll, 2000)
@@ -116,13 +151,17 @@ export function useGenerationPolling({
const status = axios.isAxiosError(pollErr) ? pollErr.response?.status : undefined
if (status && status >= 400 && status < 500) {
done = true
- reject(new Error(extractErrorMessage(pollErr, status)))
+ const msg = extractErrorMessage(pollErr, status)
+ callbacks?.onTaskFailed?.(msg)
+ reject(new Error(msg))
return
}
consecutiveErrors += 1
if (consecutiveErrors >= MAX_RETRYABLE_ERRORS) {
done = true
- reject(new Error("任务状态查询连续失败，请稍后在任务列表查看结果"))
+ const msg = "任务状态查询连续失败，请稍后在任务列表查看结果"
+ callbacks?.onTaskFailed?.(msg)
+ reject(new Error(msg))
return
}
const timer = setTimeout(poll, 3000)
@@ -137,12 +176,12 @@ export function useGenerationPolling({
[onProgress, fetchResultsWithRetry],
)
- /** 单任务轮询（兼容旧调用） */
+ /** 单任务轮询（单视频，兼容旧调用） */
const startPolling = useCallback(
(taskId: string) => {
cancelledRef.current = false
- const runId = 0
- pollSingleTask(taskId, runId)
+ batchContextRef.current.clear()
+ pollSingleTask(taskId, 0)
.then((videos) => {
if (cancelledRef.current) return
onProgress(100)
@@ -159,48 +198,114 @@ export function useGenerationPolling({
[pollSingleTask, onProgress, onComplete, onFailed],
)
- /** 批量多任务轮询：全部完成后聚合结果；任一失败即整体失败 */
+ /**
+ * 批量多任务轮询：
+ * - 每个任务独立进度/状态回传 onBatchTaskUpdate
+ * * 全部完成后按变体顺序聚合视频 onComplete
+ * - 部分失败：整体不 onFailed（第5步逐卡片展示失败+重试按钮）；全部失败才 onFailed
+ */
const startPollingBatch = useCallback(
- (taskIds: string[]) => {
+ (tasks: { taskId: string; variantIndex: number }[]) => {
cancelledRef.current = false
const runId = Date.now()
const progressMap = new Map()
+ const resultMap = new Map()
+ const failureMap = new Map()
+ batchContextRef.current = new Map(tasks.map((t) => [t.taskId, t.variantIndex]))
const reportAggregateProgress = () => {
if (cancelledRef.current) return
- const values = taskIds.map((id) => progressMap.get(id) ?? 0)
+ const values = tasks.map((t) => progressMap.get(t.taskId) ?? 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
+ const checkAllSettled = () => {
+ if (resultMap.size + failureMap.size < tasks.length) return
+ if (resultMap.size === tasks.length) {
onProgress(100)
- const allVideos = results.flat()
- onComplete(allVideos)
- message.success(`全部 ${taskIds.length} 个视频生成完成！`)
+ const ordered = tasks.map((t) => resultMap.get(t.taskId) || []).flat()
+ onComplete(ordered)
+ message.success(`全部 ${tasks.length} 个视频生成完成！`)
+ } else if (resultMap.size > 0) {
+ // 部分失败：成功的视频聚合进成片列表（可进封面），失败卡片带重试按钮
+ onProgress(100)
+ const ordered = tasks
+ .filter((t) => resultMap.has(t.taskId))
+ .map((t) => resultMap.get(t.taskId) || [])
+ .flat()
+ onComplete(ordered)
+ message.warning(
+ `${failureMap.size} 个视频生成失败，可点击卡片上的「重试此视频」，成功的视频可先进入下一步`,
+ )
+ } else {
+ const firstMsg = failureMap.get(tasks[0].taskId) || "全部视频生成失败"
+ onFailed(firstMsg)
+ }
+ }
+
+ tasks.forEach(({ taskId, variantIndex }) => {
+ onBatchTaskUpdate?.(taskId, {
+ taskId,
+ variantIndex,
+ status: "running",
+ progress: 0,
+ error: null,
+ videos: [],
})
- .catch((err: Error) => {
- if (cancelledRef.current) return
- console.error("[批量生成失败]", err.message)
- onFailed(err.message)
- message.error(err.message)
+ pollSingleTask(taskId, runId, {
+ onTaskProgress: (pct) => {
+ progressMap.set(taskId, pct)
+ onBatchTaskUpdate?.(taskId, { status: "running", progress: pct })
+ reportAggregateProgress()
+ },
+ onTaskCompleted: (videos) => {
+ progressMap.set(taskId, 100)
+ resultMap.set(taskId, videos)
+ onBatchTaskUpdate?.(taskId, { status: "completed", progress: 100, videos })
+ reportAggregateProgress()
+ checkAllSettled()
+ },
+ onTaskFailed: (msg) => {
+ failureMap.set(taskId, msg)
+ onBatchTaskUpdate?.(taskId, { status: "failed", error: msg })
+ checkAllSettled()
+ },
+ }).catch(() => {
+ // 失败已在 onTaskFailed 处理，这里吞掉 Promise rejection
})
+ })
},
- [pollSingleTask, onProgress, onComplete, onFailed],
+ [pollSingleTask, onProgress, onComplete, onFailed, onBatchTaskUpdate],
)
- return { startPolling, startPollingBatch, clearTimer }
+ /** 单独重试失败任务（第5步卡片「重试此视频」）：先调后端重试接口，再轮询 */
+ const retryTask = useCallback(
+ async (taskId: string) => {
+ if (cancelledRef.current) cancelledRef.current = false
+ const variantIndex = batchContextRef.current.get(taskId) ?? 0
+ onBatchTaskUpdate?.(taskId, { status: "running", progress: 0, error: null, videos: [] })
+ try {
+ await retryGenerationTaskApi(taskId)
+ } catch (err) {
+ // 后端不支持重试或任务不可重试：直接重新轮询（任务可能已被自动恢复）
+ console.warn("[重试任务接口调用失败，改为直接轮询]", err)
+ }
+ pollSingleTask(taskId, Date.now(), {
+ onTaskProgress: (pct) => onBatchTaskUpdate?.(taskId, { status: "running", progress: pct }),
+ onTaskCompleted: (videos) => {
+ onBatchTaskUpdate?.(taskId, { status: "completed", progress: 100, videos })
+ message.success(`视频 ${variantIndex + 1} 重试成功`)
+ },
+ onTaskFailed: (msg) => onBatchTaskUpdate?.(taskId, { status: "failed", error: msg }),
+ }).catch(() => {
+ /* 失败已在回调处理 */
+ })
+ forceTick((n) => n + 1)
+ return variantIndex
+ },
+ [pollSingleTask, onBatchTaskUpdate],
+ )
+
+ return { startPolling, startPollingBatch, retryTask, clearTimer }
}
diff --git a/apps/web/src/pages/generate/hooks/useBatchPreview.ts b/apps/web/src/pages/generate/hooks/useBatchPreview.ts
deleted file mode 100644
index e8aacae52..000000000
--- a/apps/web/src/pages/generate/hooks/useBatchPreview.ts
+++ /dev/null
@@ -1,285 +0,0 @@
-/**
- * 批量服务器预览 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([])
- const [status, setStatus] = useState<"idle" | "loading" | "ready" | "partial_failed" | "failed">(
- "idle",
- )
- const requestSeqRef = useRef(0)
- const pollTimersRef = useRef[]>([])
- const timeoutTimerRef = useRef | 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) => {
- 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
diff --git a/apps/web/src/pages/generate/hooks/useGenerateVideo.ts b/apps/web/src/pages/generate/hooks/useGenerateVideo.ts
index 6f77188ee..2d7a6d0d9 100755
--- a/apps/web/src/pages/generate/hooks/useGenerateVideo.ts
+++ b/apps/web/src/pages/generate/hooks/useGenerateVideo.ts
@@ -2,13 +2,13 @@
* 视频生成 Hook
* 封装视频生成的核心逻辑、状态管理、轮询等
*/
-import { useState, useCallback } from "react"
+import { useState, useCallback, useEffect } from "react"
import { message } from "antd"
import { type GeneratedVideo, getEditPlanClips, createClipsFromAssets } from "@/api/template-editor"
import { createGenerationTask } from "@/api/tasks/tasks"
import type { UseGenerateVideoProps } from "./generate-video/types"
import { getGenerationPhase } from "./generate-video/phase"
-import { useGenerationPolling } from "./generate-video/useGenerationPolling"
+import { useGenerationPolling, type BatchTaskState } from "./generate-video/useGenerationPolling"
import { validateGenerateInputs } from "./generate-video/buildPayload"
import { calculateResolution } from "../utils/calculateResolution"
import { extractBackendError, translateError } from "./generate-video/errorUtils"
@@ -22,6 +22,32 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
const [generated, setGenerated] = useState(false)
const [generateError, setGenerateError] = useState(null)
const [generatedVideos, setGeneratedVideos] = useState([])
+ /** 批量模式：每个正式生成任务的独立状态（第5步逐卡片展示） */
+ const [batchTasks, setBatchTasks] = useState([])
+
+ const handleBatchTaskUpdate = useCallback((taskId: string, patch: Partial) => {
+ setBatchTasks((prev) => {
+ const list = prev || []
+ const idx = list.findIndex((t) => t.taskId === taskId)
+ if (idx === -1) {
+ return [
+ ...list,
+ {
+ taskId,
+ variantIndex: patch.variantIndex ?? 0,
+ status: "running",
+ progress: 0,
+ error: null,
+ videos: [],
+ ...patch,
+ },
+ ]
+ }
+ const next = [...list]
+ next[idx] = { ...next[idx], ...patch }
+ return next
+ })
+ }, [])
const handleProgress = useCallback((p: number) => setProgress(p), [])
const handleComplete = useCallback(
@@ -29,6 +55,19 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
setGenerating(false)
setGenerated(true)
setGeneratedVideos(videos as GeneratedVideo[])
+ // 批量：成功任务的 videos 已通过 onBatchTaskUpdate 写入，这里同步兜底
+ setBatchTasks((prev) =>
+ (prev || []).map((t) =>
+ t.status === "completed" && t.videos.length === 0
+ ? {
+ ...t,
+ videos: (videos as GeneratedVideo[]).filter(
+ (v) => v.generation_task_id === t.taskId,
+ ),
+ }
+ : t,
+ ),
+ )
onGenerationSuccess?.()
},
[onGenerationSuccess],
@@ -38,10 +77,30 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
setGenerateError(errorMsg)
}, [])
- const { startPolling, startPollingBatch, clearTimer } = useGenerationPolling({
+ /* 批量：任务状态变化时聚合已完成成片（含失败重试成功后补入），
+ 按变体索引排序，供步骤6封面按勾选顺序逐个取视频 */
+ useEffect(() => {
+ if (batchTasks.length === 0) return
+ const byVariant = new Map()
+ batchTasks.forEach((t) => {
+ if (t.status === "completed" && t.videos && t.videos.length > 0) {
+ byVariant.set(t.variantIndex, t.videos[0] as GeneratedVideo)
+ }
+ })
+ const ordered = [...byVariant.entries()].sort((a, b) => a[0] - b[0]).map(([, v]) => v)
+ setGeneratedVideos((prev) => {
+ if (prev.length === ordered.length && prev.every((v, i) => v.id === ordered[i].id)) {
+ return prev
+ }
+ return ordered
+ })
+ }, [batchTasks])
+
+ const { startPolling, startPollingBatch, retryTask, clearTimer } = useGenerationPolling({
onProgress: handleProgress,
onComplete: handleComplete,
onFailed: handleFailed,
+ onBatchTaskUpdate: handleBatchTaskUpdate,
})
/* ── 生成视频 ──
@@ -57,6 +116,7 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
setProgress(0)
setGenerated(false)
setGenerateError(null)
+ setBatchTasks([])
clearTimer()
try {
@@ -170,7 +230,8 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
throw new Error("创建任务成功但未返回任务 ID，请稍后在任务列表查看")
}
if (taskIds.length > 1) {
- startPollingBatch(taskIds)
+ // 批量：任务按创建顺序与勾选变体一一对应（后端按 count 顺序创建）
+ startPollingBatch(taskIds.map((taskId, i) => ({ taskId, variantIndex: indexes[i] ?? i })))
} else {
startPolling(taskIds[0])
}
@@ -196,6 +257,14 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
generate()
}, [generate])
+ /** 第5步：单独重试某个失败任务 */
+ const retryBatchTask = useCallback(
+ (taskId: string) => {
+ retryTask(taskId)
+ },
+ [retryTask],
+ )
+
const dismissError = useCallback(() => {
setGenerateError(null)
}, [])
@@ -240,6 +309,8 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
generatedVideos,
generate,
retry,
+ retryBatchTask,
+ batchTasks,
dismissError,
download,
share,
diff --git a/apps/web/src/pages/generate/hooks/useStepNavigation.ts b/apps/web/src/pages/generate/hooks/useStepNavigation.ts
index d7e59bd58..12e8c51fd 100644
--- a/apps/web/src/pages/generate/hooks/useStepNavigation.ts
+++ b/apps/web/src/pages/generate/hooks/useStepNavigation.ts
@@ -1,6 +1,11 @@
/**
- * GeneratePage 步骤导航（Issue #1677 改造后 5 步）
- * 步骤：模板(1) → 素材(2) → 配音(3) → 标题+预览+确认生成(4) → 封面(5)
+ * GeneratePage 步骤导航（Issue #1677 修正：固定 6 步，单视频与批量一致）
+ * 步骤：模板(1) → 素材(2) → 配音(3) → 标题(4) → 确认生成(5) → 封面(6)
+ *
+ * - 步骤4底部按钮是「确认生成视频/确认生成 N 个视频」（由 GenerateStepActions 调
+ * onConfirmGenerate），创建成功后跳转步骤5；本 hook 的 goNext 只负责 1→2→3→4
+ * 和 5→6 的「下一步」。
+ * - 步骤5（确认生成进度页）：渲染全部完成（generated）后「下一步」解锁进封面。
*/
import { message } from "antd"
import type { TitleSettings } from "../types"
@@ -13,14 +18,8 @@ export interface UseStepNavigationOptions {
selectedMaterials: string[]
smartSelectedIds: string[]
titleSettings: TitleSettings
- /** 预览是否已就绪（单视频=前端预览素材已加载；批量=服务器预览全部完成） */
- previewReady: boolean
- /** 是否已完成视频生成（步骤4确认生成后才能进入封面） */
+ /** 是否已完成视频生成（步骤5全部渲染完成后才能进入封面） */
generated: boolean
- /** 批量模式下每个变体的标题 */
- previewTitles: string[]
- /** 批量模式勾选的变体数 */
- selectedCount: number
/** Step1 点下一步时弹出数量选择弹窗 */
onOpenCountModal: () => void
}
@@ -38,10 +37,7 @@ export const useStepNavigation = (options: UseStepNavigationOptions): UseStepNav
materialMode,
selectedMaterials,
smartSelectedIds,
- previewReady,
generated,
- previewTitles,
- selectedCount,
onOpenCountModal,
} = options
@@ -63,27 +59,14 @@ export const useStepNavigation = (options: UseStepNavigationOptions): UseStepNav
message.warning("请先进行智能匹配并选择素材")
return
}
- // Step4（标题+预览+确认生成）：标题必填 + 预览必须已加载
- if (currentStep === 4) {
- const allTitlesFilled = previewTitles.every((t) => t && t.trim())
- if (!allTitlesFilled) {
- message.warning("请为每个视频输入标题")
- return
- }
- if (selectedCount === 0) {
- message.warning("请至少勾选一个视频")
- return
- }
- if (!previewReady) {
- message.warning("预览视频正在加载，请稍候")
- return
- }
+ // 步骤5（确认生成）：全部渲染完成后才能下一步进封面
+ if (currentStep === 5) {
if (!generated) {
- message.warning("请先点击「确认生成视频」完成渲染")
+ message.warning("视频还在渲染中，请等待生成完成")
return
}
}
- if (currentStep < 5) {
+ if (currentStep < 6) {
setCurrentStep((s) => s + 1)
}
}
diff --git a/apps/web/src/test/pages/generate/smoke.test.tsx b/apps/web/src/test/pages/generate/smoke.test.tsx
index 90da8ddc3..9e58e0c6b 100755
--- a/apps/web/src/test/pages/generate/smoke.test.tsx
+++ b/apps/web/src/test/pages/generate/smoke.test.tsx
@@ -20,7 +20,8 @@ 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/CanvasPreviewGrid"
+import "@/pages/generate/components/BatchGenerationGrid"
import "@/pages/generate/components/PreviewCountModal"
import "@/pages/generate/components/PreviewVideoPanel"
import "@/pages/generate/components/GenerateResultPanel"
@@ -48,7 +49,6 @@ 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"