fix: 上传的配音素材直接使用 file_url，不调 TTS 合成

- 配音预览逻辑优化：优先检查 selectedVoice 是否为已上传素材
- 如果是上传素材，直接使用其 file_url 作为预览音频
- 仅对预设音色或克隆音色调用 previewTts 接口合成
- 切换配音或标题时自动重新生成预览音频

解决用户反馈：Step3 选择上传的配音素材后预览无声音的问题

apps/web/src/api/generation/types.ts

@@ -13,10 +13,6 @@ export interface CreatePreviewRequest {
   video_title?: string
   duration?: number
   video_ratio?: string
-  /** 输出视频宽度（与 video_ratio 匹配，如 9:16 → 1080） */
-  output_width?: number
-  /** 输出视频高度（与 video_ratio 匹配，如 9:16 → 1920） */
-  output_height?: number
   /* 标题烧录配置（可选，传入后 ASS 渲染标题到预览视频中） */
   title_config?: {
     text?: string
@@ -42,8 +38,6 @@ export interface CreatePreviewResponse {
   is_preview: boolean
   resolution: string
   created_at: string
-  /** 后端自动关联的编辑计划 ID（用于 fallback 路径传递 source_edit_plan_id） */
-  source_edit_plan_id?: string
 }
 
 /** 预览任务详情响应 */

apps/web/src/api/tasks/types.ts

@@ -84,14 +84,6 @@ export interface CreateGenerationTaskRequest {
   }
   /** 关联的草稿 ID（编辑流程数据链路用） */
   source_edit_plan_id?: string
-  /** 配音素材库 ID（用户上传的音频或 AI 配音素材） */
-  voice_library_id?: string
-  /** 自定义 BGM 配置，覆盖模板 BGM 设置 */
-  bgm_config?: {
-    enabled: boolean
-    preset_id?: string
-    volume?: number
-  }
 }
 
 /** 单个生成任务详情（对齐后端 GenerationTaskResponse） */

apps/web/src/pages/generate/GeneratePage.tsx

@@ -1,18 +1,22 @@
 /**
- * 智能剪辑页面 — 前端实时预览架构
+ * 智能剪辑页面 — V24 前端预览播放器架构改造
  * 7 步向导：选择模板 → 素材 → 配音 → 标题 → 预览 → 封面 → 确认生成
  * 左右布局：左侧 generate-form + 右侧 generate-preview
  *
- * 架构：
- * - Step4+ 右侧预览面板使用 FrontendPreviewPlayer 实时播放素材片段
- * - 标题样式编辑时 CSS 层实时叠加预览，所见即所得
- * - 点"确认生成"时调用 createGenerationTask 创建一次服务器渲染任务
+ * 架构改造：
+ * - Step5 预览改为前端素材切片播放（FrontendPreviewPlayer）
+ * - 完全去除后端 FFmpeg 预览依赖
+ * - 标题样式通过 CSS 层实时叠加，所见即所得
+ * - 最终成片仍走后端 FFmpeg 渲染（Step7 确认生成）
  */
 import React, { useMemo, useState, useEffect, useRef } from "react"
 import { Modal, message } from "antd"
 import { useNavigate } from "react-router-dom"
 import type { VoiceClone } from "@/api/voice-clone"
+import { useQuery } from "@tanstack/react-query"
 import { useCloneProgress } from "@/hooks/useCloneProgress"
+import { getAssetsByKind } from "@/api/assets"
+import { previewTts } from "@/api/tts"
 import CloneModal from "@/components/voice/CloneModal"
 import GenerateHeader from "./components/GenerateHeader"
 import {
@@ -21,7 +25,7 @@ import {
 } from "./utils/calculateTotalVideoDuration"
 import GenerateStepsBar from "./components/GenerateStepsBar"
 import GenerateResultPanel from "./components/GenerateResultPanel"
-import FrontendPreviewPlayer from "./components/FrontendPreviewPlayer"
+import PreviewVideoPanel from "./components/PreviewVideoPanel"
 import GenerateStepContent from "./components/GenerateStepContent"
 import GenerateStepActions from "./components/GenerateStepActions"
 import { useGenerateFormState } from "./hooks/useGenerateFormState"
@@ -29,7 +33,6 @@ import { useStepNavigation } from "./hooks/useStepNavigation"
 import { useGenerateVideo } from "./hooks/useGenerateVideo"
 import { usePreviewAssets } from "./hooks/usePreviewAssets"
 import { useTitleStyleUpdaters } from "./hooks/useStep4Title/useTitleStyleUpdaters"
-import { previewTts } from "@/api/tts"
 import "./generate.css"
 
 const GeneratePage: React.FC = () => {
@@ -75,32 +78,79 @@ const GeneratePage: React.FC = () => {
     setPreviewVideo,
     previewModalOpen,
     setPreviewModalOpen,
-    previewTaskId,
-    setPreviewTaskId,
-    storedSourceEditPlanId,
-    setStoredSourceEditPlanId,
   } = formState
 
-  /* ── 标题样式回调 ── */
+  /* ── 标题样式回调（Step5 样式面板 + 右侧预览 CSS 层共用） ── */
   const styleUpdaters = useTitleStyleUpdaters({
     titleSettings,
     onTitleSettingsChange: setTitleSettings,
   })
 
-  /* ── 配音预览音频（TTS 试听）── */
+  /* ── 克隆声音 ── */
+  const { clones: clonedVoices, addClone, hasProcessing } = useCloneProgress()
+
+  const handleCloneSuccess = (voice: VoiceClone) => {
+    addClone(voice)
+    setCloneModalOpen(false)
+    message.success("音色克隆成功！")
+  }
+
+  /* ── 前端预览：加载选中素材的视频文件信息 ── */
+  const previewAssetIds = useMemo(
+    () => (materialMode === "auto" ? smartSelectedIds : selectedMaterials),
+    [materialMode, smartSelectedIds, selectedMaterials],
+  )
+  const previewAssetsEnabled = currentStep >= 4 && previewAssetIds.length > 0
+  const {
+    assets: previewAssets,
+    loading: previewAssetsLoading,
+    ready: previewAssetsReady,
+  } = usePreviewAssets(previewAssetIds, previewAssetsEnabled)
+
+  /* ── 当前模板对象（传给前端预览播放器） ── */
+  const currentTemplate = useMemo(
+    () => userTemplates.find((t) => t.id === selectedTemplate) || null,
+    [userTemplates, selectedTemplate],
+  )
+
+  /* ── 视频总时长计算（用于配音时长校验） ── */
+  const totalVideoDuration = useMemo(() => {
+    // 优先用素材精确时长；素材未加载时用模板 segments 的 duration_max 之和估算
+    const exact = calculateTotalVideoDuration(previewAssets, currentTemplate ?? undefined)
+    if (exact > 0) return exact
+    return estimateTotalVideoDuration(currentTemplate ?? undefined)
+  }, [previewAssets, currentTemplate])
+
+  /* ── 配音音频 URL ── */
+  const { data: voiceMaterials = [] } = useQuery({
+    queryKey: ["assets", "voice"],
+    queryFn: () => getAssetsByKind("voice", { limit: 50 }),
+  })
+
   const [previewVoiceAudioUrl, setPreviewVoiceAudioUrl] = useState<string | null>(null)
   const ttsAbortRef = useRef<AbortController | null>(null)
 
   useEffect(() => {
+    // 如果 selectedVoice 是已上传的配音素材，直接用 file_url
+    const voiceAsset = voiceMaterials.find((m) => m.id === selectedVoice)
+    if (voiceAsset?.file_url) {
+      setPreviewVoiceAudioUrl(voiceAsset.file_url)
+      return
+    }
+
+    // 没有选中的 voice 或标题，跳过
     const voiceId = selectedClonedVoice || selectedVoice
     if (!voiceId || !titleSettings.title) {
       setPreviewVoiceAudioUrl(null)
       return
     }
+
+    // 预设音色 / 克隆音色 → 调 TTS 合成
     ttsAbortRef.current?.abort()
     const controller = new AbortController()
     ttsAbortRef.current = controller
     let cancelled = false
+
     previewTts({
       text: titleSettings.title,
       voice_id: voiceId,
@@ -116,53 +166,14 @@ const GeneratePage: React.FC = () => {
           setPreviewVoiceAudioUrl(null)
         }
       })
+
     return () => {
       cancelled = true
       controller.abort()
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedVoice, selectedClonedVoice, titleSettings.title])
+  }, [selectedVoice, selectedClonedVoice, titleSettings.title, voiceMaterials])
 
-  /* ── 克隆声音 ── */
-  const { clones: clonedVoices, addClone, hasProcessing } = useCloneProgress()
-
-  const handleCloneSuccess = (voice: VoiceClone) => {
-    addClone(voice)
-    setCloneModalOpen(false)
-    message.success("音色克隆成功！")
-  }
-
-  /* ── 素材 ID 列表 ── */
-  const previewAssetIds = useMemo(
-    () => (materialMode === "auto" ? smartSelectedIds : selectedMaterials),
-    [materialMode, smartSelectedIds, selectedMaterials],
-  )
-
-  /* ── 当前模板对象 ── */
-  const currentTemplate = useMemo(
-    () => userTemplates.find((t) => t.id === selectedTemplate) || null,
-    [userTemplates, selectedTemplate],
-  )
-
-  /* ── BGM 配置 ── */
-  const bgmConfig = useMemo(
-    () => ({
-      enabled: bgm,
-      music_id: currentTemplate?.bgm_config?.music_id || "",
-    }),
-    [bgm, currentTemplate],
-  )
-
-  /* ── 加载素材详情（供前端预览播放器使用 + 配音时长校验） ── */
-  const previewAssetsEnabled = previewAssetIds.length > 0
-  const { assets: previewAssets } = usePreviewAssets(previewAssetIds, previewAssetsEnabled)
-
-  /* ── 视频总时长计算 ── */
-  const totalVideoDuration = useMemo(() => {
-    const exact = calculateTotalVideoDuration(previewAssets, currentTemplate ?? undefined)
-    if (exact > 0) return exact
-    return estimateTotalVideoDuration(currentTemplate ?? undefined)
-  }, [previewAssets, currentTemplate])
+  const voiceAudioUrl = previewVoiceAudioUrl || undefined
 
   /* ── 步骤导航 ── */
   const { goNext, goPrev } = useStepNavigation({
@@ -173,6 +184,7 @@ const GeneratePage: React.FC = () => {
     selectedMaterials,
     smartSelectedIds,
     titleSettings,
+    previewReady: previewAssetsReady,
   })
 
   /* ── 视频生成核心逻辑 ── */
@@ -203,25 +215,22 @@ const GeneratePage: React.FC = () => {
     autoSubtitles,
     bgm,
     generateCount,
-    sourceEditPlanId: storedSourceEditPlanId || sourceEditPlanId,
-    previewTaskId,
-    bgmConfig,
-    onGenerationSuccess: () => {
-      setPreviewTaskId(null)
-      setStoredSourceEditPlanId(null)
-    },
+    sourceEditPlanId,
   })
 
   /* ================================================================
-     渲染
+     渲染 — 主页面
      ================================================================ */
 
   return (
     <div className="xx-generate-page">
+      {/* ── 页头 ── */}
       <GenerateHeader fromEditPlan={!!editPlanId} />
 
+      {/* ── 步骤条 ── */}
       <GenerateStepsBar currentStep={currentStep} onStepClick={setCurrentStep} />
 
+      {/* ── 主布局 ── */}
       <div className="xx-generate-layout">
         {/* ════ 左侧：表单区 ════ */}
         <div className="xx-generate-form">
@@ -238,6 +247,7 @@ const GeneratePage: React.FC = () => {
             onSmartSelectedIdsChange={setSmartSelectedIds}
             titleSettings={titleSettings}
             onTitleSettingsChange={setTitleSettings}
+            /* 标题样式回调 */
             onUpdatePosition={styleUpdaters.updatePosition}
             onUpdateFont={styleUpdaters.updateFont}
             onUpdateSize={styleUpdaters.updateSize}
@@ -248,10 +258,6 @@ const GeneratePage: React.FC = () => {
             onApplyPreset={styleUpdaters.applyPreset}
             activePreset={styleUpdaters.activePreset}
             titlePresets={styleUpdaters.titlePresets}
-            onPreviewTaskCreated={setPreviewTaskId}
-            onSourceEditPlanIdExtracted={setStoredSourceEditPlanId}
-            bgm={bgm}
-            bgmConfig={bgmConfig}
             coverSettings={coverSettings}
             onCoverSettingsChange={setCoverSettings}
             duration={duration}
@@ -290,26 +296,18 @@ const GeneratePage: React.FC = () => {
           />
         </div>
 
-        {/* ════ 右侧：预览 + 结果 ════ */}
+        {/* ════ 右侧：预览 + 生成结果 ════ */}
         <div className="xx-generate-right-col">
-          {currentStep >= 4 && !!currentTemplate && (
-            <FrontendPreviewPlayer
+          {/* 预览视频面板（Step4+ 显示，含 CSS 标题实时预览层） */}
+          {currentStep >= 4 && (
+            <PreviewVideoPanel
               assets={previewAssets}
               template={currentTemplate}
               videoRatio={videoRatio}
-              ready={previewAssets.length > 0}
-              voiceAudioUrl={previewVoiceAudioUrl || undefined}
-              titleSettings={{
-                title: titleSettings.title,
-                size: titleSettings.size,
-                font: titleSettings.font,
-                color: titleSettings.color,
-                position: titleSettings.position as "top" | "center" | "bottom",
-                bold: titleSettings.bold,
-                italic: titleSettings.italic,
-                stroke: titleSettings.stroke,
-                shadow: titleSettings.shadow,
-              }}
+              assetsReady={previewAssetsReady}
+              assetsLoading={previewAssetsLoading}
+              titleSettings={titleSettings}
+              voiceAudioUrl={voiceAudioUrl}
             />
           )}
           {currentStep >= 6 && (
@@ -331,7 +329,7 @@ const GeneratePage: React.FC = () => {
         </div>
       </div>
 
-      {/* 视频预览弹窗 */}
+      {/* ── 视频预览弹窗 ── */}
       <Modal
         className="xx-preview-modal"
         open={previewModalOpen}
@@ -354,7 +352,7 @@ const GeneratePage: React.FC = () => {
         )}
       </Modal>
 
-      {/* 音色克隆弹窗 */}
+      {/* ── 音色克隆弹窗 ── */}
       <CloneModal
         open={cloneModalOpen}
         onClose={() => setCloneModalOpen(false)}

apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx

@@ -277,29 +277,20 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
   if (!ready || !assets.length) {
     return (
       <div
+        className="xx-preview-empty"
         style={{
-          position: "relative",
-          width: "100%",
-          maxWidth: 280,
-          aspectRatio: "9 / 16",
-          background: "#0a0a0a",
-          borderRadius: 24,
-          overflow: "hidden",
-          boxShadow:
-            "0 4px 6px -1px rgba(0,0,0,0.3), 0 20px 50px -12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06)",
+          position: "absolute",
+          inset: 0,
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
+          zIndex: 1,
         }}
       >
-        <SoundOutlined style={{ fontSize: 40, color: "rgba(255,255,255,0.3)", marginBottom: 12 }} />
-        <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 14, margin: "0 0 4px" }}>
-          准备预览素材...
-        </p>
-        <p style={{ color: "rgba(255,255,255,0.35)", fontSize: 12, margin: 0 }}>
-          加载素材后即可预览播放
-        </p>
+        <SoundOutlined style={{ fontSize: 48, color: "var(--text-tertiary)", marginBottom: 12 }} />
+        <p className="xx-preview-empty-title">准备预览素材...</p>
+        <p className="xx-preview-empty-desc">加载素材后即可预览播放</p>
       </div>
     )
   }
@@ -309,48 +300,31 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
     const showDecodeError = forceVideoFallback && canvasState.hasDecodeError
     return (
       <div
+        className="xx-preview-empty"
         style={{
-          position: "relative",
-          width: "100%",
-          maxWidth: 280,
-          aspectRatio: "9 / 16",
-          background: "#0a0a0a",
-          borderRadius: 24,
-          overflow: "hidden",
-          boxShadow:
-            "0 4px 6px -1px rgba(0,0,0,0.3), 0 20px 50px -12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06)",
+          position: "absolute",
+          inset: 0,
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
-          padding: 24,
+          zIndex: 1,
         }}
       >
         {isBuffering ? (
           <>
-            <LoadingOutlined style={{ fontSize: 40, color: "#fff", marginBottom: 12 }} spin />
-            <p style={{ color: "rgba(255,255,255,0.8)", fontSize: 14, margin: 0 }}>加载中...</p>
+            <LoadingOutlined style={{ fontSize: 48, color: "#fff", marginBottom: 12 }} spin />
+            <p style={{ color: "rgba(255,255,255,0.8)" }}>加载中...</p>
           </>
         ) : showDecodeError ? (
           <>
-            <PlayCircleOutlined style={{ fontSize: 40, color: "#ef4444", marginBottom: 12 }} />
-            <p
-              style={{
-                color: "rgba(255,255,255,0.9)",
-                fontSize: 14,
-                margin: "0 0 4px",
-                fontWeight: 500,
-              }}
-            >
+            <PlayCircleOutlined style={{ fontSize: 48, color: "#ef4444", marginBottom: 12 }} />
+            <p className="xx-preview-empty-title" style={{ color: "rgba(255,255,255,0.9)" }}>
               视频解码失败
             </p>
             <p
-              style={{
-                color: "rgba(255,255,255,0.5)",
-                fontSize: 12,
-                margin: 0,
-                textAlign: "center",
-              }}
+              className="xx-preview-empty-desc"
+              style={{ color: "rgba(255,255,255,0.6)", maxWidth: 300, textAlign: "center" }}
             >
               {canvasState.errorMessage || "当前浏览器不支持该视频编码格式，请刷新重试"}
             </p>
@@ -358,14 +332,10 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
         ) : (
           <>
             <PlayCircleOutlined
-              style={{ fontSize: 40, color: "rgba(255,255,255,0.3)", marginBottom: 12 }}
+              style={{ fontSize: 48, color: "var(--text-tertiary)", marginBottom: 12 }}
             />
-            <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 14, margin: "0 0 4px" }}>
-              暂无可播放素材
-            </p>
-            <p style={{ color: "rgba(255,255,255,0.35)", fontSize: 12, margin: 0 }}>
-              请先在左侧选择素材
-            </p>
+            <p className="xx-preview-empty-title">暂无可播放素材</p>
+            <p className="xx-preview-empty-desc">请先在左侧选择素材</p>
           </>
         )}
       </div>
@@ -373,19 +343,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
   }
 
   return (
-    <div
-      style={{
-        position: "relative",
-        width: "100%",
-        maxWidth: 280,
-        aspectRatio: "9 / 16",
-        background: "#0a0a0a",
-        borderRadius: 24,
-        overflow: "hidden",
-        boxShadow:
-          "0 4px 6px -1px rgba(0,0,0,0.3), 0 20px 50px -12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06)",
-      }}
-    >
+    <>
       {/* ── Canvas 渲染层（WebCodecs 路径） ── */}
       {effectiveUseWebCodecs && (
         <div
@@ -434,114 +392,54 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
           />
         ))}
 
-      {/* 标题CSS叠加层 — video fallback 路径也要渲染 */}
-      {titleSettings?.title && (
-        <div
-          style={{
-            position: "absolute",
-            left: 0,
-            right: 0,
-            zIndex: 5,
-            display: "flex",
-            justifyContent: "center",
-            pointerEvents: "none",
-            ...(titleSettings.position === "top"
-              ? { top: "10%" }
-              : titleSettings.position === "center"
-                ? { top: "50%", transform: "translateY(-50%)" }
-                : { bottom: "15%" }),
-          }}
-        >
-          <span
-            style={{
-              fontSize: titleSettings.size,
-              fontFamily: titleSettings.font || "思源黑体",
-              color: titleSettings.color || "#ffffff",
-              fontWeight: titleSettings.bold ? 700 : 400,
-              fontStyle: titleSettings.italic ? "italic" : "normal",
-              textShadow: [
-                titleSettings.shadow ? "0 2px 8px rgba(0,0,0,0.7)" : undefined,
-                titleSettings.stroke
-                  ? "1px 1px 0 rgba(0,0,0,0.5), -1px -1px 0 rgba(0,0,0,0.5), 1px -1px 0 rgba(0,0,0,0.5), -1px 1px 0 rgba(0,0,0,0.5)"
-                  : undefined,
-                "0 1px 3px rgba(0,0,0,0.4)",
-              ]
-                .filter(Boolean)
-                .join(", "),
-              maxWidth: "90%",
-              textAlign: "center",
-              lineHeight: 1.3,
-              wordBreak: "break-word",
-            }}
-          >
-            {titleSettings.title}
-          </span>
-        </div>
-      )}
-
-      {/* 中央播放按钮 */}
+      {/* 播放按钮 */}
       {!isPlaying && (
         <button
+          className="xx-preview-play-btn"
           onClick={handleTogglePlay}
           style={{
             position: "absolute",
             top: "50%",
             left: "50%",
             transform: "translate(-50%, -50%)",
-            background: "rgba(0,0,0,0.45)",
-            backdropFilter: "blur(12px)",
-            WebkitBackdropFilter: "blur(12px)",
-            border: "1px solid rgba(255,255,255,0.15)",
+            background: "rgba(0,0,0,0.5)",
+            border: "none",
             borderRadius: "50%",
-            width: 52,
-            height: 52,
+            width: 56,
+            height: 56,
             cursor: "pointer",
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
             color: "#fff",
-            fontSize: 26,
+            fontSize: 28,
             zIndex: 10,
-            transition: "transform 0.2s ease, background 0.2s ease",
-            boxShadow: "0 4px 20px rgba(0,0,0,0.4)",
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.transform = "translate(-50%, -50%) scale(1.08)"
-            e.currentTarget.style.background = "rgba(0,0,0,0.6)"
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.transform = "translate(-50%, -50%) scale(1)"
-            e.currentTarget.style.background = "rgba(0,0,0,0.45)"
           }}
         >
           <PlayCircleOutlined />
         </button>
       )}
 
-      {/* 片段指示器 — 右上角胶囊 */}
+      {/* 片段指示器 */}
       <div
         style={{
           position: "absolute",
           top: 8,
-          right: 8,
-          background: "rgba(0,0,0,0.45)",
-          backdropFilter: "blur(8px)",
-          WebkitBackdropFilter: "blur(8px)",
-          color: "rgba(255,255,255,0.9)",
-          fontSize: 10,
-          fontWeight: 500,
+          left: 8,
+          background: "rgba(0,0,0,0.6)",
+          color: "#fff",
+          fontSize: 11,
           padding: "2px 8px",
-          borderRadius: 999,
+          borderRadius: 4,
           zIndex: 10,
-          border: "1px solid rgba(255,255,255,0.1)",
-          letterSpacing: 0.3,
         }}
       >
-        {`${videoCurrentSegIdx + 1} / ${segments.length}`}
+        {`片段 ${videoCurrentSegIdx + 1}/${segments.length}`}
       </div>
 
-      {/* 控制条 — 手机风格毛玻璃 */}
+      {/* 控制条 */}
       <div
+        className="xx-preview-controls"
         style={{
           position: "absolute",
           bottom: 0,
@@ -549,36 +447,23 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
           right: 0,
           display: "flex",
           alignItems: "center",
-          gap: 10,
-          padding: "12px 16px 16px",
-          background: "linear-gradient(transparent, rgba(0,0,0,0.7))",
-          backdropFilter: "blur(4px)",
-          WebkitBackdropFilter: "blur(4px)",
+          gap: 8,
+          padding: "8px 12px",
+          background: "linear-gradient(transparent, rgba(0,0,0,0.6))",
           zIndex: 10,
         }}
       >
         <button
           onClick={handleTogglePlay}
           style={{
-            background: "rgba(255,255,255,0.15)",
+            background: "none",
             border: "none",
             color: "#fff",
-            fontSize: 16,
+            fontSize: 18,
             cursor: "pointer",
-            width: 32,
-            height: 32,
-            borderRadius: "50%",
+            padding: 4,
             display: "flex",
             alignItems: "center",
-            justifyContent: "center",
-            flexShrink: 0,
-            transition: "background 0.15s",
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.background = "rgba(255,255,255,0.25)"
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.background = "rgba(255,255,255,0.15)"
           }}
         >
           {isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
@@ -586,11 +471,10 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
 
         <span
           style={{
-            fontSize: 11,
-            color: "rgba(255,255,255,0.85)",
-            minWidth: 72,
+            fontSize: 12,
+            color: "rgba(255,255,255,0.8)",
+            minWidth: 80,
             fontVariantNumeric: "tabular-nums",
-            letterSpacing: 0.2,
           }}
         >
           {formatTime(currentTime)} / {formatTime(totalDuration)}
@@ -601,8 +485,8 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
           onMouseDown={handleMouseDown}
           style={{
             flex: 1,
-            height: 3,
-            background: "rgba(255,255,255,0.2)",
+            height: 4,
+            background: "rgba(255,255,255,0.15)",
             borderRadius: 2,
             cursor: "pointer",
             position: "relative",
@@ -612,7 +496,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
             style={{
               height: "100%",
               width: `${progressPercent}%`,
-              background: "#fff",
+              background: "#3b82f6",
               borderRadius: 2,
               transition: isDragging ? "none" : "width 0.1s linear",
             }}
@@ -626,15 +510,15 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
               width: 10,
               height: 10,
               borderRadius: "50%",
-              background: "#fff",
-              boxShadow: "0 0 6px rgba(255,255,255,0.5)",
+              background: "#3b82f6",
+              border: "2px solid #fff",
               opacity: isDragging ? 1 : 0,
               transition: "opacity 0.15s",
             }}
           />
         </div>
       </div>
-    </div>
+    </>
   )
 }
 

apps/web/src/pages/generate/components/GenerateStepContent.tsx

@@ -76,14 +76,6 @@ export interface GenerateStepContentProps {
   onDismissError: () => void
   /* 其他 */
   presetVoices: PresetVoiceItem[]
-  /** 预览任务创建回调——传递给 Step6CoverSettings */
-  onPreviewTaskCreated?: (taskId: string) => void
-  /** 从预览响应中提取到 source_edit_plan_id 时的回调 */
-  onSourceEditPlanIdExtracted?: (planId: string) => void
-  /** BGM 开关 */
-  bgm: boolean
-  /** BGM 配置（来自模板） */
-  bgmConfig?: { enabled: boolean; music_id?: string }
 }
 
 export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) => {
@@ -129,10 +121,6 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
     onRetry,
     onDismissError,
     presetVoices,
-    onPreviewTaskCreated,
-    onSourceEditPlanIdExtracted,
-    bgm,
-    bgmConfig,
   } = props
 
   /* 当前模板的 segments，传给 Step2 构建 clips */
@@ -202,13 +190,6 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
           assetIds={materialMode === "auto" ? smartSelectedIds : selectedMaterials}
           selectedTemplate={selectedTemplate}
           titleSettings={titleSettings}
-          onPreviewTaskCreated={onPreviewTaskCreated}
-          onSourceEditPlanIdExtracted={onSourceEditPlanIdExtracted}
-          voiceMode={voiceMode}
-          selectedVoice={selectedVoice}
-          selectedClonedVoice={selectedClonedVoice}
-          bgm={bgm}
-          bgmConfig={bgmConfig}
         />
       )
     case 7:

apps/web/src/pages/generate/components/PreviewVideoPanel.tsx

@@ -1,42 +1,39 @@
 /**
- * 右侧预览视频面板 — 服务器渲染预览架构
+ * 右侧预览视频面板
+ * Step4+: 显示预览视频面板
+ * Step5: 前端实时预览 — 用原生 video 播放素材片段 + CSS 标题叠加
  *
- * Step4+: 显示预览面板
- * Step5: 播放服务器渲染的真实视频（POST /generation/preview）
+ * 架构改造：完全去除后端 FFmpeg 预览依赖
+ * - 使用 FrontendPreviewPlayer 直接播放素材片段
+ * - TitleOverlay CSS 层实时响应标题样式变化
  *
- * 架构：
- * - 进入 Step4/5 时自动创建服务器预览渲染任务
- * - 轮询完成后用 <video> 标签播放返回的 video_url
- * - 标题样式编辑时 CSS TitleOverlay 实时叠加预览
- * - 素材/配音/BGM 变更自动重新渲染
- * - 标题文字/样式变更标记 stale，保留旧视频 + 显示"重新预览"按钮
- *
- * 点"确认生成"时走 confirm 路径，成品就是预览视频本身，100% 一致。
+ * 布局：本组件提供 .xx-preview-video 容器（position: relative + overflow: hidden）
+ * FrontendPreviewPlayer 的内容通过 absolute 定位填充容器
+ * TitleOverlay 通过 absolute 定位 + z-index: 30 覆盖在最上层
  */
 import React, { useMemo, useRef, useState, useEffect } from "react"
-import { LoadingOutlined, ReloadOutlined, ExclamationCircleOutlined } from "@ant-design/icons"
-import { Button } from "antd"
+import { LoadingOutlined } from "@ant-design/icons"
+import type { AssetItem } from "@/api/assets"
+import type { EditingTemplate } from "@/api/editing-planner"
 import type { TitleSettings } from "../types"
 import { getFontFamily } from "../constants"
-import type { ServerPreviewStatus } from "../hooks/useServerPreview"
+import FrontendPreviewPlayer from "./FrontendPreviewPlayer"
 
 interface PreviewVideoPanelProps {
-  /** 服务器预览状态 */
-  previewStatus: ServerPreviewStatus
-  /** 服务器渲染视频 URL */
-  videoUrl: string | null
-  /** 渲染进度 0-100 */
-  progress: number
-  /** 错误信息 */
-  error: string | null
-  /** 重新预览回调 */
-  onRetry: () => void
+  /** 已加载的素材列表 */
+  assets: AssetItem[]
+  /** 当前模板 */
+  template: EditingTemplate | null
   /** 视频比例 */
   videoRatio: string
-  /** 标题设置 — CSS 实时预览层 */
+  /** 素材是否已加载就绪 */
+  assetsReady: boolean
+  /** 素材是否正在加载 */
+  assetsLoading: boolean
+  /** 标题设置 — 用于 CSS 实时预览层 */
   titleSettings?: TitleSettings
-  /** 素材数量 */
-  assetCount?: number
+  /** 配音音频 URL */
+  voiceAudioUrl?: string
 }
 
 /* ── ASS 坐标系参数（与后端 ass_subtitle_builder.py 一致） ── */
@@ -45,8 +42,13 @@ const ASS_TITLE_MARGIN_TOP = 60
 const ASS_TITLE_MARGIN_BOTTOM = 60
 const ASS_TITLE_MARGIN_SIDE = 40
 
+/**
+ * 根据 position 计算 CSS 垂直定位
+ * 与后端 position_to_ass_alignment() 对齐：top→8, center→5, bottom→2
+ */
 function getPositionStyle(position: string): React.CSSProperties {
   const sidePercent = (ASS_TITLE_MARGIN_SIDE / 1280) * 100
+
   switch (position) {
     case "bottom":
       return {
@@ -74,11 +76,16 @@ function getPositionStyle(position: string): React.CSSProperties {
   }
 }
 
+/**
+ * 构建 CSS 标题层的样式
+ * 所有渲染参数与后端 FFmpeg ASS 字幕一致
+ */
 function buildTitleStyle(settings: TitleSettings, containerHeight: number): React.CSSProperties {
+  // 用 px 计算 fontSize，不再依赖父元素 font-size 的百分比
   const fontSizePx =
     containerHeight > 0
       ? (Math.min(settings.size, 96) / ASS_VIDEO_HEIGHT) * containerHeight
-      : (Math.min(settings.size, 96) / ASS_VIDEO_HEIGHT) * 400
+      : (Math.min(settings.size, 96) / ASS_VIDEO_HEIGHT) * 400 // fallback
 
   const base: React.CSSProperties = {
     fontFamily: getFontFamily(settings.font),
@@ -93,16 +100,28 @@ function buildTitleStyle(settings: TitleSettings, containerHeight: number): Reac
     paddingLeft: `${(ASS_TITLE_MARGIN_SIDE / 1280) * 100}%`,
     paddingRight: `${(ASS_TITLE_MARGIN_SIDE / 1280) * 100}%`,
   }
-  if (settings.stroke) base.WebkitTextStroke = "1px #000000"
-  if (settings.shadow) base.textShadow = "2px 2px 4px rgba(0,0,0,0.8)"
+
+  if (settings.stroke) {
+    base.WebkitTextStroke = "1px #000000"
+  }
+
+  if (settings.shadow) {
+    base.textShadow = "2px 2px 4px rgba(0,0,0,0.8)"
+  }
+
   return base
 }
 
-/** CSS 标题实时预览覆盖层 */
+/**
+ * CSS 标题预览覆盖层
+ * 始终渲染：有标题显示标题，无标题显示占位文本"标题预览"
+ * z-index: 20（在视频 z-index:1 和控制条 z-index:10 之上）
+ */
 const TitleOverlay: React.FC<{ titleSettings: TitleSettings }> = ({ titleSettings }) => {
   const containerRef = useRef<HTMLDivElement>(null)
-  const [containerHeight, setContainerHeight] = useState(400)
+  const [containerHeight, setContainerHeight] = useState(400) // fallback
 
+  // ResizeObserver 获取容器实际高度
   useEffect(() => {
     const el = containerRef.current
     if (!el) return
@@ -113,6 +132,7 @@ const TitleOverlay: React.FC<{ titleSettings: TitleSettings }> = ({ titleSetting
       }
     })
     ro.observe(el)
+    // 初始化也读一次
     const rect = el.getBoundingClientRect()
     if (rect.height > 0) setContainerHeight(rect.height)
     return () => ro.disconnect()
@@ -124,7 +144,7 @@ const TitleOverlay: React.FC<{ titleSettings: TitleSettings }> = ({ titleSetting
   )
   const titleStyle = useMemo(
     () => buildTitleStyle(titleSettings, containerHeight),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- 已逐字段列出 titleSettings 依赖
     [
       containerHeight,
       titleSettings.font,
@@ -150,7 +170,13 @@ const TitleOverlay: React.FC<{ titleSettings: TitleSettings }> = ({ titleSetting
         overflow: "hidden",
       }}
     >
-      <div style={{ ...positionStyle, ...titleStyle, position: "absolute" }}>
+      <div
+        style={{
+          ...positionStyle,
+          ...titleStyle,
+          position: "absolute",
+        }}
+      >
         {displayTitle.split("/").map((part, i) => (
           <span key={i}>
             {i > 0 && <br />}
@@ -165,47 +191,30 @@ const TitleOverlay: React.FC<{ titleSettings: TitleSettings }> = ({ titleSetting
 /* ── 主组件 ── */
 
 export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
-  previewStatus,
-  videoUrl,
-  progress,
-  error,
-  onRetry,
+  assets,
+  template,
   videoRatio,
+  assetsReady,
+  assetsLoading,
   titleSettings,
-  assetCount,
+  voiceAudioUrl,
 }) => {
   const videoAspectStyle = { aspectRatio: (videoRatio || "9:16").replace(":", "/") }
-  const isLoading = previewStatus === "loading"
-  const isReady = previewStatus === "ready" || previewStatus === "stale"
-  const isFailed = previewStatus === "failed"
-  const isIdle = previewStatus === "idle"
-  const isStale = previewStatus === "stale"
 
   return (
     <div className="xx-generate-preview">
       <div className="xx-preview-header">
         <h3>预览视频</h3>
-        {isReady && !isStale && <span className="xx-preview-badge">服务器渲染</span>}
-        {isStale && (
-          <span
-            style={{
-              fontSize: 12,
-              color: "#faad14",
-              display: "flex",
-              alignItems: "center",
-              gap: 4,
-            }}
-          >
-            <ExclamationCircleOutlined /> 配置已变更
-          </span>
-        )}
-        {isLoading && <span className="xx-preview-badge">渲染中</span>}
+        {assetsReady && assets.length > 0 && <span className="xx-preview-badge">实时预览</span>}
       </div>
 
+      {/* ✅ 预览容器 — 唯一的 .xx-preview-video 容器
+          内部所有内容（视频、控制条、标题叠加层）通过 absolute 定位填充 */}
       <div className="xx-preview-video" style={{ ...videoAspectStyle, position: "relative" }}>
-        {/* 加载中 */}
-        {isLoading && (
+        {/* 加载中状态 */}
+        {assetsLoading && (
           <div
+            className="xx-preview-loading-center"
             style={{
               position: "absolute",
               inset: 0,
@@ -214,130 +223,34 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
               alignItems: "center",
               justifyContent: "center",
               zIndex: 5,
-              background: "rgba(0,0,0,0.6)",
             }}
           >
             <LoadingOutlined style={{ fontSize: 36, color: "#fff" }} spin />
-            <p style={{ marginTop: 12, color: "rgba(255,255,255,0.9)", fontSize: 14 }}>
-              正在渲染预览视频{progress > 0 ? `...${progress}%` : "..."}
-            </p>
-            <p style={{ marginTop: 4, color: "rgba(255,255,255,0.5)", fontSize: 12 }}>
-              首次渲染约需 30-60 秒
+            <p style={{ marginTop: 12, color: "rgba(255,255,255,0.8)", fontSize: 14 }}>
+              加载素材中...
             </p>
           </div>
         )}
 
-        {/* 空闲状态（尚未触发预览） */}
-        {isIdle && (
-          <div
-            style={{
-              position: "absolute",
-              inset: 0,
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              background: "rgba(0,0,0,0.3)",
-              zIndex: 5,
-            }}
-          >
-            <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 14 }}>等待素材选择...</p>
-          </div>
-        )}
+        {/* 前端播放器（视频 + 控制条 + 播放按钮）*/}
+        <FrontendPreviewPlayer
+          assets={assets}
+          template={template}
+          videoRatio={videoRatio}
+          ready={assetsReady}
+          voiceAudioUrl={voiceAudioUrl}
+        />
 
-        {/* 服务器渲染的真实视频 */}
-        {isReady && videoUrl && (
-          <video
-            key={videoUrl}
-            src={videoUrl}
-            controls
-            autoPlay
-            loop
-            playsInline
-            style={{
-              width: "100%",
-              height: "100%",
-              objectFit: "contain",
-              position: "absolute",
-              inset: 0,
-              zIndex: 1,
-            }}
-          />
-        )}
-
-        {/* 标题样式实时预览层（仅在有视频时叠加） */}
-        {isReady && titleSettings && <TitleOverlay titleSettings={titleSettings} />}
-
-        {/* stale 遮罩：配置变更提示 */}
-        {isStale && (
-          <div
-            style={{
-              position: "absolute",
-              bottom: 0,
-              left: 0,
-              right: 0,
-              padding: "10px 16px",
-              background: "linear-gradient(transparent, rgba(0,0,0,0.85))",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: 8,
-              zIndex: 30,
-            }}
-          >
-            <span style={{ color: "rgba(255,255,255,0.9)", fontSize: 12 }}>
-              配置已变更，预览内容可能不是最新
-            </span>
-            <Button size="small" type="primary" icon={<ReloadOutlined />} onClick={onRetry}>
-              重新预览
-            </Button>
-          </div>
-        )}
-
-        {/* 错误状态 */}
-        {isFailed && (
-          <div
-            style={{
-              position: "absolute",
-              inset: 0,
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              background: "rgba(0,0,0,0.7)",
-              zIndex: 10,
-              padding: 24,
-            }}
-          >
-            <ExclamationCircleOutlined style={{ fontSize: 40, color: "#ff4d4f" }} />
-            <p
-              style={{
-                marginTop: 12,
-                color: "rgba(255,255,255,0.9)",
-                fontSize: 14,
-                textAlign: "center",
-              }}
-            >
-              {error || "预览渲染失败"}
-            </p>
-            <Button
-              type="primary"
-              icon={<ReloadOutlined />}
-              onClick={onRetry}
-              style={{ marginTop: 12 }}
-            >
-              重新预览
-            </Button>
-          </div>
-        )}
+        {/* CSS 标题实时预览层 — z-index: 20，始终渲染在内容层之上 */}
+        {titleSettings && <TitleOverlay titleSettings={titleSettings} />}
       </div>
 
       {/* 素材信息 */}
-      {assetCount !== undefined && assetCount > 0 && (
+      {assetsReady && assets.length > 0 && (
         <div className="xx-preview-info">
           <div className="xx-preview-info-row">
             <span>素材数</span>
-            <span>{assetCount} 个</span>
+            <span>{assets.length} 个</span>
           </div>
           <div className="xx-preview-info-row">
             <span>比例</span>

apps/web/src/pages/generate/components/Step5GeneratePreview.tsx

@@ -1,10 +1,7 @@
 /**
- * Step 5 预览设置组件
- *
- * 前端实时预览架构：
- * - 右侧面板使用 FrontendPreviewPlayer 实时播放素材片段
- * - 标题样式可实时调整，CSS 层即时叠加预览
- * - 点"确认生成"时触发一次服务器渲染
+ * Step 5 生成预览组件
+ * 架构改造：移除后端预览生成，改为前端实时预览
+ * 左侧仅保留标题样式面板，视频在右侧 PreviewVideoPanel 实时播放
  */
 import React from "react"
 import { PlayCircleOutlined } from "@ant-design/icons"
@@ -13,6 +10,7 @@ import type { TitleSettings } from "../types"
 import TitleStylePanel from "./title/TitleStylePanel"
 
 interface Step5GeneratePreviewProps {
+  /* 标题样式 */
   titleSettings: TitleSettings
   onUpdatePosition: (position: string) => void
   onUpdateFont: (font: string) => void
@@ -43,7 +41,9 @@ const Step5GeneratePreview: React.FC<Step5GeneratePreviewProps> = ({
     <div className="xx-form-section">
       <h3>🎬 预览设置</h3>
 
+      {/* 前端实时预览提示 */}
       <div
+        className="xx-preview-tip"
         style={{
           display: "flex",
           alignItems: "center",
@@ -57,10 +57,11 @@ const Step5GeneratePreview: React.FC<Step5GeneratePreviewProps> = ({
       >
         <PlayCircleOutlined style={{ fontSize: 18, color: "#3b82f6" }} />
         <span style={{ fontSize: 13, color: "var(--text-secondary, #666)" }}>
-          右侧为实时预览，选完素材即可播放。确认生成后服务器渲染最终视频
+          右侧面板直接播放素材片段，调整标题样式可实时预览效果
         </span>
       </div>
 
+      {/* 标题样式面板 */}
       <TitleStylePanel
         settings={titleSettings}
         onUpdatePosition={onUpdatePosition}

apps/web/src/pages/generate/components/Step6CoverSettings.tsx

@@ -16,20 +16,6 @@ interface Step6CoverSettingsProps {
   selectedTemplate?: string
   /** Step4 标题设置，用于预览视频烧录标题 & 封面叠加标题 */
   titleSettings?: import("../types").TitleSettings
-  /** 预览任务创建回调——将 task_id 暴露给父组件供 confirmGeneration 复用 */
-  onPreviewTaskCreated?: (taskId: string) => void
-  /** 从预览响应中提取到 source_edit_plan_id 时的回调 */
-  onSourceEditPlanIdExtracted?: (planId: string) => void
-  /** 配音模式 */
-  voiceMode?: "preset" | "custom" | "clone"
-  /** 选中的配音素材 ID */
-  selectedVoice?: string
-  /** 选中的克隆音色 ID */
-  selectedClonedVoice?: string
-  /** BGM 开关 */
-  bgm?: boolean
-  /** BGM 配置 */
-  bgmConfig?: { enabled: boolean; music_id?: string }
 }
 
 const Step6CoverSettings: React.FC<Step6CoverSettingsProps> = (props) => {
@@ -57,13 +43,6 @@ const Step6CoverSettings: React.FC<Step6CoverSettingsProps> = (props) => {
     assetIds: props.assetIds,
     selectedTemplate: props.selectedTemplate,
     titleSettings: props.titleSettings,
-    onPreviewTaskCreated: props.onPreviewTaskCreated,
-    onSourceEditPlanIdExtracted: props.onSourceEditPlanIdExtracted,
-    voiceMode: props.voiceMode,
-    selectedVoice: props.selectedVoice,
-    selectedClonedVoice: props.selectedClonedVoice,
-    bgm: props.bgm,
-    bgmConfig: props.bgmConfig,
   })
 
   const handleAutoGenerate = () => {

apps/web/src/pages/generate/generate.css

@@ -2525,7 +2525,6 @@
 .xx-generate-right-col {
   display: flex;
   flex-direction: column;
-  align-items: center;
   gap: 16px;
 }
 

apps/web/src/pages/generate/hooks/generate-video/types.ts

@@ -21,15 +21,6 @@ export interface UseGenerateVideoProps {
   generateCount: number
   /** 当前草稿 ID（URL 参数 edit_plan_id，用于后端回写任务关联） */
   sourceEditPlanId?: string | null
-  /** 预览任务 ID（由 useStep6Cover 创建后写入，供 confirmGeneration 复用预览产物） */
-  previewTaskId?: string | null
-  /** BGM 配置（来自模板 bgm_config，受 bgm 开关控制） */
-  bgmConfig?: {
-    enabled: boolean
-    music_id?: string
-  }
-  /** 生成成功后的回调（用于清除持久化的 previewTaskId 等状态） */
-  onGenerationSuccess?: () => void
 }
 
 /** 生成阶段 */

apps/web/src/pages/generate/hooks/useGenerateFormState/index.ts

@@ -14,7 +14,6 @@ import { useTemplateSelection } from "./useTemplateSelection"
 import { useTitleCoverSync } from "./useTitleCoverSync"
 import { useVoiceState } from "./useVoiceState"
 import { usePlanConfigLoader } from "./usePlanConfigLoader"
-import { usePersistedState } from "../usePersistedState"
 
 const DEFAULT_TITLE_SETTINGS: TitleSettings = {
   aiAutoSelect: false,
@@ -96,14 +95,6 @@ export interface GenerateFormState {
   setPreviewVideo: (v: GeneratedVideo | null) => void
   previewModalOpen: boolean
   setPreviewModalOpen: (open: boolean) => void
-
-  /** 预览任务 ID（由 useStep6Cover 创建后写入，供 useGenerateVideo 复用） */
-  previewTaskId: string | null
-  setPreviewTaskId: (id: string | null) => void
-
-  /** 从预览响应中提取的 source_edit_plan_id（供 fallback 路径使用） */
-  storedSourceEditPlanId: string | null
-  setStoredSourceEditPlanId: (planId: string | null) => void
 }
 
 export const useGenerateFormState = (): GenerateFormState => {
@@ -169,30 +160,6 @@ export const useGenerateFormState = (): GenerateFormState => {
   const [previewVideo, setPreviewVideo] = useState<GeneratedVideo | null>(null)
   const [previewModalOpen, setPreviewModalOpen] = useState(false)
 
-  /* ── 预览任务 ID（useStep6Cover 创建预览时写入，useGenerateVideo 复用） ── */
-  // 持久化到 localStorage，key 按 editPlanId/templateId 区分，刷新页面后可恢复
-  const previewStorageKey = editPlanId
-    ? `preview_task_id_${editPlanId}`
-    : selectedTemplate
-      ? `preview_task_id_tpl_${selectedTemplate}`
-      : null
-  const [previewTaskId, setPreviewTaskId] = usePersistedState<string | null>(
-    previewStorageKey,
-    null,
-  )
-
-  /* ── 从预览响应中提取的 source_edit_plan_id（供 fallback 路径使用） ── */
-  // 持久化到 localStorage，刷新页面后 fallback 路径仍能正确传递 source_edit_plan_id
-  const planIdStorageKey = editPlanId
-    ? `source_edit_plan_id_${editPlanId}`
-    : selectedTemplate
-      ? `source_edit_plan_id_tpl_${selectedTemplate}`
-      : null
-  const [storedSourceEditPlanId, setStoredSourceEditPlanId] = usePersistedState<string | null>(
-    planIdStorageKey,
-    null,
-  )
-
   /* ── 从 URL / 编辑计划加载配置 ── */
   usePlanConfigLoader({
     editPlanId,
@@ -241,9 +208,5 @@ export const useGenerateFormState = (): GenerateFormState => {
     setPreviewVideo,
     previewModalOpen,
     setPreviewModalOpen,
-    previewTaskId,
-    setPreviewTaskId,
-    storedSourceEditPlanId,
-    setStoredSourceEditPlanId,
   }
 }

apps/web/src/pages/generate/hooks/useGenerateVideo.ts

@@ -10,11 +10,10 @@ import type { UseGenerateVideoProps } from "./generate-video/types"
 import { getGenerationPhase } from "./generate-video/phase"
 import { useGenerationPolling } from "./generate-video/useGenerationPolling"
 import { validateGenerateInputs } from "./generate-video/buildPayload"
-import { calculateResolution } from "../utils/calculateResolution"
 import { extractBackendError, translateError } from "./generate-video/errorUtils"
 
 export function useGenerateVideo(props: UseGenerateVideoProps) {
-  const { selectedTemplate, onGenerationSuccess } = props
+  const { selectedTemplate } = props
 
   /* ── 生成状态 ── */
   const [generating, setGenerating] = useState(false)
@@ -24,16 +23,11 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
   const [generatedVideos, setGeneratedVideos] = useState<GeneratedVideo[]>([])
 
   const handleProgress = useCallback((p: number) => setProgress(p), [])
-  const handleComplete = useCallback(
-    (videos: unknown[]) => {
-      setGenerating(false)
-      setGenerated(true)
-      setGeneratedVideos(videos as GeneratedVideo[])
-      // 生成成功后清除持久化的预览状态，避免下次进入复用旧任务
-      onGenerationSuccess?.()
-    },
-    [onGenerationSuccess],
-  )
+  const handleComplete = useCallback((videos: unknown[]) => {
+    setGenerating(false)
+    setGenerated(true)
+    setGeneratedVideos(videos as GeneratedVideo[])
+  }, [])
   const handleFailed = useCallback((errorMsg: string) => {
     setGenerating(false)
     setGenerateError(errorMsg)
@@ -60,10 +54,37 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
     clearTimer()
 
     try {
-      // 解析分辨率（共享工具函数）
-      const { width: outputWidth, height: outputHeight } = calculateResolution(
-        props.videoRatio || "9:16",
-      )
+      // 解析分辨率
+      const ratio = props.videoRatio || "9:16"
+      let outputWidth: number
+      let outputHeight: number
+
+      if (ratio.includes(":")) {
+        const [rw, rh] = ratio.split(":").map(Number)
+        if (rw > 0 && rh > 0) {
+          const [longSide, shortSide] = rw < rh ? [rh, rw] : [rw, rh]
+          const baseLong = 1920
+          const baseShort = Math.round((baseLong * shortSide) / longSide)
+          const evenShort = baseShort - (baseShort % 2)
+          if (rw < rh) {
+            outputWidth = evenShort
+            outputHeight = baseLong
+          } else {
+            outputWidth = baseLong
+            outputHeight = evenShort
+          }
+        } else {
+          outputWidth = 1080
+          outputHeight = 1920
+        }
+      } else if (ratio.includes("x")) {
+        const [wStr, hStr] = ratio.split("x")
+        outputWidth = parseInt(wStr, 10) || 1080
+        outputHeight = parseInt(hStr, 10) || 1920
+      } else {
+        outputWidth = 1080
+        outputHeight = 1920
+      }
 
       const assetIds =
         props.materialMode === "auto" ? props.smartSelectedIds : props.selectedMaterials
@@ -71,11 +92,7 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
       // 封面 URL：优先 AI 生成缩略图，兜底用户上传
       const coverUrl = props.coverSettings?.thumbnail_url || props.coverSettings?.upload_url || ""
 
-      // 解析配音参数：voiceMode=clone 时用 selectedClonedVoice，否则用 selectedVoice
-      const voiceLibraryId =
-        props.voiceMode === "clone" ? props.selectedClonedVoice || "" : props.selectedVoice || ""
-
-      // 创建生成任务（服务器渲染）
+      // 直接创建正式生成任务
       const taskResp = await createGenerationTask({
         template_id: selectedTemplate,
         asset_ids: assetIds,
@@ -85,14 +102,6 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
         custom_title: props.titleSettings?.title || "",
         duration: props.duration || undefined,
         video_ratio: props.videoRatio,
-        // 配音：优先用 voice_library_id（配音素材库 asset），兜底 voice_ids
-        ...(voiceLibraryId ? { voice_library_id: voiceLibraryId } : {}),
-        ...(props.selectedVoice && !voiceLibraryId ? { voice_ids: [props.selectedVoice] } : {}),
-        // BGM 配置：受 bgm 开关控制，enabled=false 时也显式传覆盖模板 BGM
-        bgm_config: {
-          enabled: props.bgm !== false,
-          ...(props.bgmConfig?.music_id ? { preset_id: props.bgmConfig.music_id } : {}),
-        },
         ...(props.sourceEditPlanId ? { source_edit_plan_id: props.sourceEditPlanId } : {}),
         ...(props.titleSettings?.title
           ? {
@@ -109,8 +118,9 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
             }
           : {}),
       })
-      const taskId = taskResp.items?.[0]?.id
 
+      // 从创建响应直接拿 task_id，改用新接口轮询
+      const taskId = taskResp.items?.[0]?.id
       if (!taskId) {
         throw new Error("创建任务成功但未返回任务 ID，请稍后在任务列表查看")
       }

apps/web/src/pages/generate/hooks/usePersistedState.ts

@@ -1,63 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from "react"
-
-/**
- * 持久化到 localStorage 的 state hook
- *
- * 用于在页面刷新后恢复 previewTaskId / sourceEditPlanId 等关键状态。
- * 当 localStorage 不可用（SSR、隐私模式等）时自动降级为普通 useState。
- * 当 key 变化时（例如切换模板），自动从新 key 重新读取并更新 state。
- */
-export function usePersistedState<T>(
-  key: string | null | undefined,
-  defaultValue: T,
-): [T, (value: T | ((prev: T) => T)) => void] {
-  const storageKey = key ? `xiaoxia_${key}` : null
-  // defaultValue 用 ref 持有，避免作为 useEffect 依赖导致频繁重跑
-  const defaultValueRef = useRef(defaultValue)
-  defaultValueRef.current = defaultValue
-
-  const readFromStorage = useCallback((k: string | null): T => {
-    if (!k) return defaultValueRef.current
-    try {
-      const stored = localStorage.getItem(k)
-      if (stored !== null) {
-        return JSON.parse(stored) as T
-      }
-    } catch (e) {
-      // localStorage 不可用或 JSON 解析失败，使用默认值
-      console.warn("[usePersistedState] 读取 localStorage 失败:", e)
-    }
-    return defaultValueRef.current
-  }, [])
-
-  const [state, setState] = useState<T>(() => readFromStorage(storageKey))
-
-  // key 变化时（如切换模板/草稿），从新 key 重新读取，避免状态与存储不同步
-  useEffect(() => {
-    setState(readFromStorage(storageKey))
-  }, [storageKey, readFromStorage])
-
-  const setPersistedState = useCallback(
-    (value: T | ((prev: T) => T)) => {
-      setState((prev) => {
-        const nextValue = typeof value === "function" ? (value as (prev: T) => T)(prev) : value
-        if (storageKey) {
-          try {
-            if (nextValue === null || nextValue === undefined || nextValue === "") {
-              localStorage.removeItem(storageKey)
-            } else {
-              localStorage.setItem(storageKey, JSON.stringify(nextValue))
-            }
-          } catch (e) {
-            // localStorage 写入失败（存储空间满/隐私模式），静默忽略
-            console.warn("[usePersistedState] 写入 localStorage 失败:", e)
-          }
-        }
-        return nextValue
-      })
-    },
-    [storageKey],
-  )
-
-  return [state, setPersistedState]
-}

apps/web/src/pages/generate/hooks/useServerPreview.ts

@@ -1,294 +0,0 @@
-/**
- * 服务器渲染预览 Hook
- *
- * 核心职责：
- * 1. 调用 POST /generation/preview 创建服务器预览渲染任务
- * 2. 轮询 GET /generation/preview/{task_id} 直到完成
- * 3. 返回服务器渲染的真实视频 URL（供 <video> 标签播放）
- * 4. 检测配置变更，标记预览失效（stale）或自动重新渲染
- * 5. 网络错误自动重试 2 次
- *
- * 状态机：
- *   idle → loading → ready → stale (config changed)
- *                   ↘ failed → idle (retry)
- */
-import { useState, useCallback, useRef, useEffect } from "react"
-import { createPreview, getPreviewStatus } from "@/api/generation/preview"
-import type { CreatePreviewRequest } from "@/api/generation/types"
-
-export type ServerPreviewStatus = "idle" | "loading" | "ready" | "stale" | "failed"
-
-interface UseServerPreviewOptions {
-  /** 是否启用预览（Step4+ 且有素材和模板时） */
-  enabled: boolean
-  /** 构建预览请求参数（每次 render 调用，获取最新配置） */
-  buildRequest: () => CreatePreviewRequest
-  /** 预览任务创建成功回调 */
-  onPreviewTaskCreated?: (taskId: string, sourceEditPlanId?: string) => void
-}
-
-interface UseServerPreviewReturn {
-  status: ServerPreviewStatus
-  videoUrl: string | null
-  error: string | null
-  /** 进度 0-100 */
-  progress: number
-  /** 手动触发预览创建（"重新预览"按钮或标题变更后手动刷新） */
-  triggerPreview: () => void
-  /** 当前预览任务 ID */
-  taskId: string | null
-}
-
-const POLL_INTERVAL = 2000
-const POLL_TIMEOUT = 120_000
-const MAX_NETWORK_RETRIES = 2
-
-/**
- * 对配置参数做指纹，用于检测配置是否变化
- */
-function buildFingerprint(req: CreatePreviewRequest): string {
-  return JSON.stringify({
-    t: req.template_id,
-    a: [...req.asset_ids].sort(),
-    d: req.duration,
-    r: req.video_ratio,
-    v: req.voice_library_id,
-    b: req.bgm_config,
-    title: req.title_config,
-  })
-}
-
-export function useServerPreview({
-  enabled,
-  buildRequest,
-  onPreviewTaskCreated,
-}: UseServerPreviewOptions): UseServerPreviewReturn {
-  const [status, setStatus] = useState<ServerPreviewStatus>("idle")
-  const [videoUrl, setVideoUrl] = useState<string | null>(null)
-  const [error, setError] = useState<string | null>(null)
-  const [progress, setProgress] = useState(0)
-  const [taskId, setTaskId] = useState<string | null>(null)
-
-  const pollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const timeoutTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const requestSeqRef = useRef(0)
-  const renderedFingerprintRef = useRef<string>("")
-  const mountedRef = useRef(true)
-  const networkRetriesRef = useRef(0)
-
-  // 始终持有最新的 buildRequest 和回调
-  const buildRequestRef = useRef(buildRequest)
-  buildRequestRef.current = buildRequest
-  const onCreatedRef = useRef(onPreviewTaskCreated)
-  onCreatedRef.current = onPreviewTaskCreated
-
-  /* ── 清理 ── */
-  const clearTimers = useCallback(() => {
-    if (pollTimerRef.current) {
-      clearTimeout(pollTimerRef.current)
-      pollTimerRef.current = null
-    }
-    if (timeoutTimerRef.current) {
-      clearTimeout(timeoutTimerRef.current)
-      timeoutTimerRef.current = null
-    }
-  }, [])
-
-  useEffect(() => {
-    mountedRef.current = true
-    return () => {
-      mountedRef.current = false
-      clearTimers()
-    }
-  }, [clearTimers])
-
-  /* ── 创建预览 + 轮询 ── */
-  const createAndPoll = useCallback(
-    async (request: CreatePreviewRequest, seq: number) => {
-      setStatus("loading")
-      setProgress(0)
-      setError(null)
-      networkRetriesRef.current = 0
-
-      try {
-        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)
-
-        let completed = false
-
-        // 超时保护
-        timeoutTimerRef.current = setTimeout(() => {
-          if (completed || seq !== requestSeqRef.current || !mountedRef.current) return
-          completed = true
-          clearTimers()
-          setStatus("failed")
-          setError("预览渲染超时（120秒），请重试")
-        }, POLL_TIMEOUT)
-
-        const poll = async () => {
-          if (completed || seq !== requestSeqRef.current || !mountedRef.current) return
-
-          try {
-            const st = await getPreviewStatus(resp.task_id)
-            if (completed || seq !== requestSeqRef.current || !mountedRef.current) return
-
-            if (st.status === "completed" && st.video_url) {
-              completed = true
-              clearTimers()
-              renderedFingerprintRef.current = buildFingerprint(request)
-              setVideoUrl(st.video_url)
-              setProgress(100)
-              setStatus("ready")
-              setError(null)
-              return
-            }
-
-            if (st.status === "failed" || st.status === "cancelled") {
-              completed = true
-              clearTimers()
-              setStatus("failed")
-              setError(
-                st.status === "cancelled"
-                  ? "预览任务已取消"
-                  : st.error_message || "预览渲染失败，请重试",
-              )
-              return
-            }
-
-            // pending / generating
-            if (typeof st.progress === "number") setProgress(st.progress)
-            pollTimerRef.current = setTimeout(poll, POLL_INTERVAL)
-          } catch (pollErr) {
-            if (completed || seq !== requestSeqRef.current || !mountedRef.current) return
-            if (networkRetriesRef.current < MAX_NETWORK_RETRIES) {
-              networkRetriesRef.current += 1
-              console.warn(
-                `[ServerPreview] 轮询网络错误，第 ${networkRetriesRef.current} 次重试`,
-                pollErr,
-              )
-              pollTimerRef.current = setTimeout(poll, POLL_INTERVAL * 2)
-            } else {
-              completed = true
-              clearTimers()
-              setStatus("failed")
-              setError("网络错误，无法获取预览状态，请重试")
-            }
-          }
-        }
-
-        poll()
-      } catch (createErr) {
-        if (seq !== requestSeqRef.current || !mountedRef.current) return
-        console.error("[ServerPreview] 创建预览任务失败:", createErr)
-
-        const isNetworkError =
-          !!(createErr as { request?: unknown })?.request ||
-          (createErr as { code?: string })?.code === "ERR_NETWORK"
-
-        if (isNetworkError && networkRetriesRef.current < MAX_NETWORK_RETRIES) {
-          networkRetriesRef.current += 1
-          console.warn(`[ServerPreview] 创建任务网络错误，第 ${networkRetriesRef.current} 次重试`)
-          setTimeout(() => {
-            if (seq === requestSeqRef.current && mountedRef.current) {
-              createAndPoll(request, seq)
-            }
-          }, POLL_INTERVAL * 2)
-          return
-        }
-
-        const errData = (
-          createErr as { response?: { data?: { detail?: string; message?: string } } }
-        )?.response?.data
-        setStatus("failed")
-        setError(errData?.detail || errData?.message || "预览任务创建失败，请重试")
-      }
-    },
-    [clearTimers],
-  )
-
-  /* ── 手动触发预览 ── */
-  const triggerPreview = useCallback(() => {
-    if (!enabled) return
-    const request = buildRequestRef.current()
-    if (!request.template_id || request.asset_ids.length === 0) return
-
-    clearTimers()
-    const seq = ++requestSeqRef.current
-    setVideoUrl(null)
-    setTaskId(null)
-    createAndPoll(request, seq)
-  }, [enabled, clearTimers, createAndPoll])
-
-  /* ── 自动触发 + 配置变更检测 ── */
-  // 每次 render 都检查最新配置 fingerprint，与已渲染的 fingerprint 比较
-  const request = enabled ? buildRequest() : null
-  const currentFingerprint = request
-    ? request.template_id && request.asset_ids.length > 0
-      ? buildFingerprint(request)
-      : ""
-    : ""
-
-  // 首次进入自动触发
-  const didInitRef = useRef(false)
-  useEffect(() => {
-    if (!enabled || !currentFingerprint) {
-      didInitRef.current = false
-      // 禁用时取消进行中的轮询，避免回到前序步骤后仍在后台轮询
-      requestSeqRef.current += 1
-      clearTimers()
-      return
-    }
-    if (!didInitRef.current) {
-      didInitRef.current = true
-      renderedFingerprintRef.current = currentFingerprint
-      triggerPreview()
-    }
-  }, [enabled, currentFingerprint, triggerPreview, clearTimers])
-
-  // 配置变更检测：素材/配音/BGM 等变化 → 自动重渲染；标题样式变化 → 标记 stale
-  const prevFingerprintRef = useRef(currentFingerprint)
-  useEffect(() => {
-    if (!enabled || !currentFingerprint) return
-    const prev = prevFingerprintRef.current
-    prevFingerprintRef.current = currentFingerprint
-
-    if (!prev || prev === currentFingerprint) return
-    if (currentFingerprint === renderedFingerprintRef.current) return
-
-    // 配置已变更
-    // 判断是标题样式变更还是素材/配音/BGM 变更
-    const prevParsed = JSON.parse(prev) as Record<string, unknown>
-    const currParsed = JSON.parse(currentFingerprint) as Record<string, unknown>
-    const nonTitleChanged =
-      prevParsed.t !== currParsed.t ||
-      prevParsed.a !== currParsed.a ||
-      prevParsed.d !== currParsed.d ||
-      prevParsed.r !== currParsed.r ||
-      prevParsed.v !== currParsed.v ||
-      JSON.stringify(prevParsed.b) !== JSON.stringify(currParsed.b)
-
-    if (nonTitleChanged) {
-      // 素材/配音/BGM/模板等变化 → 自动重新渲染
-      renderedFingerprintRef.current = currentFingerprint
-      triggerPreview()
-    } else {
-      // 仅标题文字/样式变化 → 标记 stale，不自动重渲染（避免频繁请求）
-      // 实时预览由 CSS TitleOverlay 提供
-      setStatus((s) => (s === "ready" ? "stale" : s))
-    }
-  }, [enabled, currentFingerprint, triggerPreview])
-
-  return {
-    status,
-    videoUrl,
-    error,
-    progress,
-    triggerPreview,
-    taskId,
-  }
-}
-
-export default useServerPreview

apps/web/src/pages/generate/hooks/useStep6Cover.ts

@@ -2,7 +2,7 @@
  * Step 6 封面设置 Hook
  * 封装封面设置的交互逻辑，对接后端封面模板 CRUD API
  */
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import { message } from "antd"
 import type { CoverConfig, CoverTemplate } from "../types/cover"
 import { generateCover } from "@/api/generation"
@@ -26,20 +26,6 @@ interface UseStep6CoverProps {
   selectedTemplate?: string
   /** Step4 标题设置，用于预览视频烧录标题 & 封面叠加标题 */
   titleSettings?: TitleSettings
-  /** 预览任务创建回调——将 task_id 暴露给父组件供 confirmGeneration 复用 */
-  onPreviewTaskCreated?: (taskId: string) => void
-  /** 从预览响应中提取到 source_edit_plan_id 时的回调 */
-  onSourceEditPlanIdExtracted?: (planId: string) => void
-  /** 配音模式 */
-  voiceMode?: "preset" | "custom" | "clone"
-  /** 选中的配音素材 ID（配音素材库 asset ID） */
-  selectedVoice?: string
-  /** 选中的克隆音色 ID */
-  selectedClonedVoice?: string
-  /** BGM 开关 */
-  bgm?: boolean
-  /** BGM 配置（来自模板） */
-  bgmConfig?: { enabled: boolean; music_id?: string }
 }
 
 export function useStep6Cover({
@@ -49,17 +35,8 @@ export function useStep6Cover({
   assetIds = [],
   selectedTemplate = "",
   titleSettings,
-  onPreviewTaskCreated,
-  onSourceEditPlanIdExtracted,
-  voiceMode,
-  selectedVoice,
-  selectedClonedVoice,
-  bgm,
-  bgmConfig,
 }: UseStep6CoverProps) {
   const [generating, setGenerating] = useState(false)
-  // 防竞态：记录当前预览生成的参数指纹，任务完成时校验一致性
-  const previewParamsRef = useRef<string>("")
 
   // ── 封面设置弹窗状态 ──
   const [showCoverSettings, setShowCoverSettings] = useState(false)
@@ -174,22 +151,10 @@ export function useStep6Cover({
         console.log("[Step6] 检测到预览缺失，尝试自动创建预览渲染任务...")
         message.info("正在准备预览视频，请稍候...")
         try {
-          // 记录当前参数指纹，用于任务完成时校验一致性（防竞态）
-          previewParamsRef.current = JSON.stringify({ selectedTemplate, assetIds, titleSettings })
-          // 解析配音参数：voiceMode=clone 时用 selectedClonedVoice，否则用 selectedVoice
-          const previewVoiceLibraryId =
-            voiceMode === "clone" ? selectedClonedVoice || "" : selectedVoice || ""
           const previewResp = await createPreview({
             template_id: selectedTemplate,
             asset_ids: assetIds,
             duration: duration || 30,
-            // 配音：voice_library_id 是配音素材库 asset ID（用户上传的音频或 AI 配音）
-            ...(previewVoiceLibraryId ? { voice_library_id: previewVoiceLibraryId } : {}),
-            // BGM 配置：受 bgm 开关控制
-            bgm_config: {
-              enabled: bgm !== false,
-              ...(bgmConfig?.music_id ? { preset_id: bgmConfig.music_id } : {}),
-            },
             ...(titleSettings?.title
               ? {
                   title_config: {
@@ -205,15 +170,6 @@ export function useStep6Cover({
                 }
               : {}),
           })
-          // 将预览任务 ID 暴露给父组件，供 Step7 确认生成时复用（confirmGeneration）
-          const currentFingerprint = JSON.stringify({ selectedTemplate, assetIds, titleSettings })
-          if (previewResp.task_id && previewParamsRef.current === currentFingerprint) {
-            onPreviewTaskCreated?.(previewResp.task_id)
-            // 提取后端自动关联的 source_edit_plan_id，供 fallback 路径使用
-            if (previewResp.source_edit_plan_id) {
-              onSourceEditPlanIdExtracted?.(previewResp.source_edit_plan_id)
-            }
-          }
           // 轮询等待预览渲染完成：递归 setTimeout 避免请求重叠 + 120s 超时兜底
           await new Promise<void>((resolve, reject) => {
             let finished = false
@@ -326,13 +282,6 @@ export function useStep6Cover({
     generating,
     duration,
     titleSettings,
-    onPreviewTaskCreated,
-    onSourceEditPlanIdExtracted,
-    voiceMode,
-    selectedVoice,
-    selectedClonedVoice,
-    bgm,
-    bgmConfig,
   ])
 
   // ── 模板操作方法 ──

apps/web/src/pages/generate/hooks/useStepNavigation.ts

@@ -3,7 +3,7 @@
  * 管理步骤切换与各步骤的前置校验
  * 步骤顺序：模板(1) → 素材(2) → 配音(3) → 标题(4) → 预览(5) → 封面(6) → 确认(7)
  *
- * 前端实时预览架构：Step5 无需等待服务器渲染
+ * V24: previewReady 改为前端素材加载状态
  */
 import { message } from "antd"
 import type { TitleSettings } from "../types"
@@ -16,6 +16,8 @@ export interface UseStepNavigationOptions {
   selectedMaterials: string[]
   smartSelectedIds: string[]
   titleSettings: TitleSettings
+  /** 预览是否就绪（前端素材已加载） */
+  previewReady: boolean
 }
 
 export interface UseStepNavigationReturn {
@@ -32,6 +34,7 @@ export const useStepNavigation = (options: UseStepNavigationOptions): UseStepNav
     selectedMaterials,
     smartSelectedIds,
     titleSettings,
+    previewReady,
   } = options
 
   const goNext = () => {
@@ -47,10 +50,15 @@ export const useStepNavigation = (options: UseStepNavigationOptions): UseStepNav
       message.warning("请先进行智能匹配并选择素材")
       return
     }
+    // Step3 配音：配音为可选项，不强制校验，用户可跳过
     if (currentStep === 4 && !titleSettings.title.trim()) {
       message.warning("请选择或输入标题")
       return
     }
+    if (currentStep === 5 && !previewReady) {
+      message.warning("请先选择素材以预览效果")
+      return
+    }
     if (currentStep < 7) {
       setCurrentStep((s) => s + 1)
     }

apps/web/src/pages/generate/utils/calculateResolution.ts

@@ -1,46 +0,0 @@
-/**
- * 根据视频比例计算输出分辨率
- *
- * 规则：
- * - 长边固定 1920
- * - 短边按 1920 × (短/长) 计算，对齐到偶数
- * - 9:16 → 1080×1920（竖屏）
- * - 16:9 → 1920×1080（横屏）
- * - 1:1   → 1920×1920
- * - 无法解析时 fallback 到 1080×1920
- */
-export interface Resolution {
-  width: number
-  height: number
-}
-
-export function calculateResolution(ratio: string): Resolution {
-  if (!ratio) return { width: 1080, height: 1920 }
-
-  if (ratio.includes(":")) {
-    const [rw, rh] = ratio.split(":").map(Number)
-    if (rw > 0 && rh > 0) {
-      const [longSide, shortSide] = rw < rh ? [rh, rw] : [rw, rh]
-      const baseLong = 1920
-      const baseShort = Math.round((baseLong * shortSide) / longSide)
-      const evenShort = baseShort - (baseShort % 2)
-      if (rw < rh) {
-        // 竖屏：短边是宽，长边是高
-        return { width: evenShort, height: baseLong }
-      } else {
-        // 横屏：长边是宽，短边是高
-        return { width: baseLong, height: evenShort }
-      }
-    }
-    return { width: 1080, height: 1920 }
-  }
-
-  if (ratio.includes("x")) {
-    const [wStr, hStr] = ratio.split("x")
-    const w = parseInt(wStr, 10) || 1080
-    const h = parseInt(hStr, 10) || 1920
-    return { width: w, height: h }
-  }
-
-  return { width: 1080, height: 1920 }
-}