📝 选择标题
- {/* AI 自动选择模式 */}
- {t.titleSettings.aiAutoSelect && (
+ {!isBatch ? (
+ /* ── 单视频：原有 AI 标题 + 输入框（保持不变） ── */
<>
-
-
- {/* 显示当前 AI 选中的标题（只读）+ 换一个按钮 */}
-
-
-
- {t.titleSettings.title || "AI 将自动为你选择标题"}
-
-
-
-
- )}
-
- {/* 手动选择模式 */}
- {!t.titleSettings.aiAutoSelect && (
- <>
-
-
-
-
-
-
-
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 ? (
-
- 标题库为空，请前往「标题管理」添加
+ {t.titleSettings.aiAutoSelect ? (
+ <>
+
+
+
+
+
+ {(previewTitles?.[0] ?? t.titleSettings.title) || "AI 将自动为你选择标题"}
- ) : null
- }
- />
-
+
+
+
+ ) : (
+ <>
+
+
+
+
+
+
{
+ 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())
+ }}
+ />
+
+
+ )}
+ ) : (
+ /* ── 批量：N 个独立标题输入框（CSS 浮层实时叠加到对应预览） ── */
+
+
+ 为每个视频输入独立标题，修改会实时叠加到左侧对应视频上。标题样式（字体/颜色/位置）全局统一。
+
+ {Array.from({ length: previewCount }, (_, i) => (
+
+
+ updateVariantTitle(i, e.target.value)}
+ />
+
+ ))}
+
)}
- {/* 标题样式面板（原 Step5） */}
-
-
-
- 右侧为实时预览，调整样式即时生效
-
-
-
+ {/* 标题样式面板（全局共用） */}
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 = ({
selectedVoice,
onSelectedVoiceChange,
+ heading = "🎙️ 选择配音",
+ description = "从配音库中选择已上传的素材，点击卡片可预览播放",
+ compact = false,
}) => {
const navigate = useNavigate()
const [playingId, setPlayingId] = useState(null)
@@ -148,14 +157,14 @@ const Step5VoiceSelect: React.FC = ({
return (
-
🎙️ 选择配音
-
- 从配音库中选择已上传的素材，点击卡片可预览播放
-
+
{heading}
+
{description}
diff --git a/apps/web/src/pages/generate/components/Step6CoverSettings.tsx b/apps/web/src/pages/generate/components/Step6CoverSettings.tsx
index d394a5f9a..41eaba9c0 100755
--- a/apps/web/src/pages/generate/components/Step6CoverSettings.tsx
+++ b/apps/web/src/pages/generate/components/Step6CoverSettings.tsx
@@ -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
= (props) => {
@@ -46,13 +62,173 @@ const Step6CoverSettings: React.FC = (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(null)
+ const uploadTargetRef = useRef(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) => {
+ 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 (
+
+
🖼️ 选择封面
+
+
+ 🎬 共 {completedVideos.length} 个成片，封面将从对应成片中智能选帧并叠加该视频的标题
+
+
+
+
+
+
+
+ {cardIndexes.map((variantIndex, cardPos) => {
+ const url = batchCoversList[cardPos]
+ const isLoading = batchCovers.loadingIndex === cardPos
+ const isUploading = batchCovers.uploadingIndex === cardPos
+ const title = batchTitles[cardPos]
+ return (
+
+
视频 {variantIndex + 1}
+
+ {isLoading || isUploading ? (
+
+ } />
+ {isLoading ? "AI 选帧中…" : "上传中…"}
+
+ ) : url ? (
+
+ ) : (
+
+ 🖼️
+ 未设置封面
+
+ )}
+
9:16
+
+ {title && (
+
+ 标题：{title}
+
+ )}
+
+
+
+
+
+ )
+ })}
+
+
+
+
🖼️ 选择封面
@@ -75,7 +251,7 @@ const Step6CoverSettings: React.FC
= (props) => {
)}
-