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

@@ -1,11 +1,11 @@
 /**
  * 智能剪辑页面 — 前端实时预览架构
- * 7 步向导：选择模板 → 素材 → 配音 → 标题 → 预览 → 封面 → 确认生成
+ * 6 步向导：选择模板 → 素材 → 配音 → 标题(含预览) → 封面 → 确认生成
  * 左右布局：左侧 generate-form + 右侧 generate-preview
  *
  * 架构：
- * - 步骤 4-6 右侧显示 FrontendPreviewPlayer 实时预览
- * - 步骤 7 右侧内联播放生成的最终视频
+ * - 步骤 4-5 右侧显示 FrontendPreviewPlayer 实时预览
+ * - 步骤 6 右侧内联播放生成的最终视频
  * - 点"确认生成"时调用 createGenerationTask 创建一次服务器渲染任务
  */
 import React, { useMemo, useState, useEffect, useRef } from "react"
@@ -163,7 +163,16 @@ const GeneratePage: React.FC = () => {
 
   /* ── 加载素材详情（供前端预览播放器使用 + 配音时长校验） ── */
   const previewAssetsEnabled = previewAssetIds.length > 0
-  const { assets: previewAssets } = usePreviewAssets(previewAssetIds, previewAssetsEnabled)
+  const { assets: previewAssets, ready: previewAssetsReady } = usePreviewAssets(
+    previewAssetIds,
+    previewAssetsEnabled,
+  )
+
+  /* ── 预览就绪：素材已加载，且有模板 ── */
+  const previewReady = useMemo(
+    () => previewAssetsReady && !!currentTemplate,
+    [previewAssetsReady, currentTemplate],
+  )
 
   /* ── 视频总时长计算 ── */
   const totalVideoDuration = useMemo(() => {
@@ -181,6 +190,7 @@ const GeneratePage: React.FC = () => {
     selectedMaterials,
     smartSelectedIds,
     titleSettings,
+    previewReady,
   })
 
   /* ── 视频生成核心逻辑 ── */
@@ -296,9 +306,9 @@ const GeneratePage: React.FC = () => {
           />
         </div>
 
-        {/* ════ 右侧：步骤 4-6 实时预览，步骤 7 最终视频 ════ */}
+        {/* ════ 右侧：步骤 4-5 实时预览，步骤 6 最终视频 ════ */}
         <div className="xx-generate-right-col">
-          {currentStep >= 4 && currentStep <= 6 && !!currentTemplate && (
+          {currentStep >= 4 && currentStep <= 5 && !!currentTemplate && (
             <FrontendPreviewPlayer
               assets={previewAssets}
               template={currentTemplate}
@@ -319,7 +329,7 @@ const GeneratePage: React.FC = () => {
               }}
             />
           )}
-          {currentStep === 7 && generated && generatedVideos.length > 0 && (
+          {currentStep === 6 && generated && generatedVideos.length > 0 && (
             <div className="xx-inline-video-player">
               <video
                 src={generatedVideos[0].download_url || generatedVideos[0].file_url}

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

@@ -28,7 +28,7 @@ export const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
       <button className="xx-btn xx-btn-ghost" onClick={onPrev} disabled={currentStep === 1}>
         ← 上一步
       </button>
-      {currentStep < 7 ? (
+      {currentStep < 6 ? (
         <button className="xx-btn xx-btn-primary" onClick={onNext}>
           下一步 →
         </button>

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

@@ -1,9 +1,9 @@
 /**
  * GeneratePage 步骤内容渲染
  * 根据当前步骤渲染对应的 Step 组件
- * 步骤顺序：模板(1) → 素材(2) → 配音(3) → 标题(4) → 预览(5) → 封面(6) → 确认(7)
+ * 步骤顺序（6步）：模板(1) → 素材(2) → 配音(3) → 标题(4) → 封面(5) → 确认(6)
  *
- * V24: 移除 Step5 预览生成相关 props，改为纯标题样式编辑
+ * 原 Step4(标题) + Step5(预览样式) 已合并为 Step4
  */
 import React from "react"
 import type { EditingTemplate } from "@/api/editing-planner"
@@ -15,10 +15,9 @@ import type { TitleSettings } from "../types"
 import Step1TemplateSelect from "../components/Step1TemplateSelect"
 import Step2MaterialSelect from "../components/Step2MaterialSelect"
 import Step3VoiceSelect from "../components/Step5VoiceSelect"
-import Step5GeneratePreview from "../components/Step5GeneratePreview"
 import Step4TitleSettings from "../components/Step4TitleSettings"
-import Step6CoverSettings from "../components/Step6CoverSettings"
-import Step7ConfirmGenerate from "../components/Step7ConfirmGenerate"
+import Step5CoverSettings from "../components/Step6CoverSettings"
+import Step6ConfirmGenerate from "../components/Step7ConfirmGenerate"
 import type { GeneratedVideo } from "@/api/template-editor"
 
 export interface GenerateStepContentProps {
@@ -37,7 +36,7 @@ export interface GenerateStepContentProps {
   /* 标题 */
   titleSettings: TitleSettings
   onTitleSettingsChange: (settings: TitleSettings) => void
-  /* 标题样式回调 — Step5 样式面板使用 */
+  /* 标题样式回调 — Step4 合并后直接使用 */
   onUpdatePosition: (position: string) => void
   onUpdateFont: (font: string) => void
   onUpdateSize: (size: number) => void
@@ -76,7 +75,7 @@ export interface GenerateStepContentProps {
   onDismissError: () => void
   /* 其他 */
   presetVoices: PresetVoiceItem[]
-  /** 预览任务创建回调——传递给 Step6CoverSettings */
+  /** 预览任务创建回调——传递给封面步骤 */
   onPreviewTaskCreated?: (taskId: string) => void
   /** 从预览响应中提取到 source_edit_plan_id 时的回调 */
   onSourceEditPlanIdExtracted?: (planId: string) => void
@@ -175,12 +174,6 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
           titleSettings={titleSettings}
           onTitleSettingsChange={onTitleSettingsChange}
           selectedTemplate={selectedTemplate}
-        />
-      )
-    case 5:
-      return (
-        <Step5GeneratePreview
-          titleSettings={titleSettings}
           onUpdatePosition={onUpdatePosition}
           onUpdateFont={onUpdateFont}
           onUpdateSize={onUpdateSize}
@@ -193,9 +186,9 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
           titlePresets={titlePresets}
         />
       )
-    case 6:
+    case 5:
       return (
-        <Step6CoverSettings
+        <Step5CoverSettings
           coverSettings={coverSettings}
           onCoverSettingsChange={onCoverSettingsChange}
           duration={duration}
@@ -211,9 +204,9 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
           bgmConfig={bgmConfig}
         />
       )
-    case 7:
+    case 6:
       return (
-        <Step7ConfirmGenerate
+        <Step6ConfirmGenerate
           templates={userTemplates}
           selectedTemplate={selectedTemplate}
           materialMode={materialMode}

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

@@ -1,23 +1,50 @@
 /**
- * Step 4 标题设置组件
- * 仅包含标题文字输入 + AI 标题生成
- * 标题样式面板已迁移到 Step5（生成预览页面）
+ * Step 4 选择标题（合并原 Step4 标题输入 + Step5 标题样式面板）
+ *
+ * 左侧：标题文字输入 + AI生成标题 + 样式设置（位置/字号/字体/颜色/样式/预设）
+ * 右侧：FrontendPreviewPlayer 实时预览（由 GeneratePage 统一渲染）
  */
 import React from "react"
 import { AutoComplete } from "antd"
+import { PlayCircleOutlined } from "@ant-design/icons"
 import type { TitleSettings } from "../types"
+import { POSITION_OPTIONS, FONT_OPTIONS } from "../constants"
 import { useStep4Title } from "../hooks/useStep4Title"
 import AiTitleGenerator from "./title/AiTitleGenerator"
+import TitleStylePanel from "./title/TitleStylePanel"
 
 interface Step4TitleSettingsProps {
   titleSettings: TitleSettings
   onTitleSettingsChange: (settings: TitleSettings) => void
   /** 当前选中的模板/草稿 ID，用于自动保存 */
   selectedTemplate?: string
+  /* 标题样式回调 */
+  onUpdatePosition: (position: string) => void
+  onUpdateFont: (font: string) => void
+  onUpdateSize: (size: number) => void
+  onToggleBold: () => void
+  onToggleItalic: () => void
+  onToggleStroke: () => void
+  onToggleShadow: () => void
+  onApplyPreset: (presetKey: string) => void
+  activePreset: string | null
+  titlePresets: { key: string; label: string; previewStyle: React.CSSProperties }[]
 }
 
 const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
   const t = useStep4Title(props)
+  const {
+    onUpdatePosition,
+    onUpdateFont,
+    onUpdateSize,
+    onToggleBold,
+    onToggleItalic,
+    onToggleStroke,
+    onToggleShadow,
+    onApplyPreset,
+    activePreset,
+    titlePresets,
+  } = props
 
   return (
     <div className="xx-form-section">
@@ -112,6 +139,42 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
           </div>
         </>
       )}
+
+      {/* 标题样式面板（原 Step5） */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "10px 14px",
+          background: "rgba(59, 130, 246, 0.08)",
+          borderRadius: 8,
+          marginTop: 16,
+          marginBottom: 12,
+          border: "1px solid rgba(59, 130, 246, 0.15)",
+        }}
+      >
+        <PlayCircleOutlined style={{ fontSize: 16, color: "#3b82f6" }} />
+        <span style={{ fontSize: 12, color: "var(--text-secondary, #666)" }}>
+          右侧为实时预览，调整样式即时生效
+        </span>
+      </div>
+
+      <TitleStylePanel
+        settings={t.titleSettings}
+        onUpdatePosition={onUpdatePosition}
+        onUpdateFont={onUpdateFont}
+        onUpdateSize={onUpdateSize}
+        onToggleBold={onToggleBold}
+        onToggleItalic={onToggleItalic}
+        onToggleStroke={onToggleStroke}
+        onToggleShadow={onToggleShadow}
+        onApplyPreset={onApplyPreset}
+        activePreset={activePreset}
+        titlePresets={titlePresets}
+        POSITION_OPTIONS={POSITION_OPTIONS}
+        FONT_OPTIONS={FONT_OPTIONS}
+      />
     </div>
   )
 }

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

@@ -1,83 +0,0 @@
-/**
- * Step 5 预览设置组件
- *
- * 前端实时预览架构：
- * - 右侧面板使用 FrontendPreviewPlayer 实时播放素材片段
- * - 标题样式可实时调整，CSS 层即时叠加预览
- * - 点"确认生成"时触发一次服务器渲染
- */
-import React from "react"
-import { PlayCircleOutlined } from "@ant-design/icons"
-import { POSITION_OPTIONS, FONT_OPTIONS } from "../constants"
-import type { TitleSettings } from "../types"
-import TitleStylePanel from "./title/TitleStylePanel"
-
-interface Step5GeneratePreviewProps {
-  titleSettings: TitleSettings
-  onUpdatePosition: (position: string) => void
-  onUpdateFont: (font: string) => void
-  onUpdateSize: (size: number) => void
-  onToggleBold: () => void
-  onToggleItalic: () => void
-  onToggleStroke: () => void
-  onToggleShadow: () => void
-  onApplyPreset: (presetKey: string) => void
-  activePreset: string | null
-  titlePresets: { key: string; label: string; previewStyle: React.CSSProperties }[]
-}
-
-const Step5GeneratePreview: React.FC<Step5GeneratePreviewProps> = ({
-  titleSettings,
-  onUpdatePosition,
-  onUpdateFont,
-  onUpdateSize,
-  onToggleBold,
-  onToggleItalic,
-  onToggleStroke,
-  onToggleShadow,
-  onApplyPreset,
-  activePreset,
-  titlePresets,
-}) => {
-  return (
-    <div className="xx-form-section">
-      <h3>🎬 预览设置</h3>
-
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-          padding: "12px 16px",
-          background: "rgba(59, 130, 246, 0.08)",
-          borderRadius: 8,
-          marginBottom: 16,
-          border: "1px solid rgba(59, 130, 246, 0.15)",
-        }}
-      >
-        <PlayCircleOutlined style={{ fontSize: 18, color: "#3b82f6" }} />
-        <span style={{ fontSize: 13, color: "var(--text-secondary, #666)" }}>
-          右侧为实时预览，选完素材即可播放。确认生成后服务器渲染最终视频
-        </span>
-      </div>
-
-      <TitleStylePanel
-        settings={titleSettings}
-        onUpdatePosition={onUpdatePosition}
-        onUpdateFont={onUpdateFont}
-        onUpdateSize={onUpdateSize}
-        onToggleBold={onToggleBold}
-        onToggleItalic={onToggleItalic}
-        onToggleStroke={onToggleStroke}
-        onToggleShadow={onToggleShadow}
-        onApplyPreset={onApplyPreset}
-        activePreset={activePreset}
-        titlePresets={titlePresets}
-        POSITION_OPTIONS={POSITION_OPTIONS}
-        FONT_OPTIONS={FONT_OPTIONS}
-      />
-    </div>
-  )
-}
-
-export default Step5GeneratePreview

apps/web/src/pages/generate/constants.ts

@@ -33,9 +33,8 @@ export const STEPS = [
   { key: 2, label: "选择素材" },
   { key: 3, label: "选择配音" },
   { key: 4, label: "选择标题" },
-  { key: 5, label: "生成预览" },
-  { key: 6, label: "选择封面" },
-  { key: 7, label: "确认生成" },
+  { key: 5, label: "选择封面" },
+  { key: 6, label: "确认生成" },
 ]
 
 /* ── 标题位置选项 ── */

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

@@ -1,9 +1,9 @@
 /**
  * GeneratePage 步骤导航
  * 管理步骤切换与各步骤的前置校验
- * 步骤顺序：模板(1) → 素材(2) → 配音(3) → 标题(4) → 预览(5) → 封面(6) → 确认(7)
+ * 步骤顺序（6步）：模板(1) → 素材(2) → 配音(3) → 标题(4) → 封面(5) → 确认(6)
  *
- * 前端实时预览架构：Step5 无需等待服务器渲染
+ * 原 Step4(标题) + Step5(预览) 已合并为 Step4
  */
 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,11 +50,18 @@ export const useStepNavigation = (options: UseStepNavigationOptions): UseStepNav
       message.warning("请先进行智能匹配并选择素材")
       return
     }
-    if (currentStep === 4 && !titleSettings.title.trim()) {
-      message.warning("请选择或输入标题")
-      return
+    // Step4（合并后的标题+预览）：标题必填 + 预览必须已生成
+    if (currentStep === 4) {
+      if (!titleSettings.title.trim()) {
+        message.warning("请选择或输入标题")
+        return
+      }
+      if (!previewReady) {
+        message.warning("预览视频正在加载，请稍候")
+        return
+      }
     }
-    if (currentStep < 7) {
+    if (currentStep < 6) {
       setCurrentStep((s) => s + 1)
     }
   }

apps/web/src/test/pages/generate/smoke.test.tsx

@@ -17,7 +17,6 @@ import "@/api/generation/types"
 // 直接引入所有 Step 组件，建立完整依赖链
 import "@/pages/generate/GeneratePage"
 import "@/pages/generate/components/Step2MaterialSelect"
-import "@/pages/generate/components/Step5GeneratePreview"
 import "@/pages/generate/components/Step4TitleSettings"
 import "@/pages/generate/components/Step5VoiceSelect"
 import "@/pages/generate/components/PreviewVideoPanel"

apps/web/src/test/pages/generate/step5-preview.smoke.test.tsx

@@ -1,10 +1,9 @@
 /**
- * Step5GeneratePreview smoke test
+ * Step4+5 merged preview smoke test
  * 确保 vitest related 模式能匹配到第5步预览生成相关文件的改动
  */
 import { describe, it, expect } from "vitest"
 
-import "@/pages/generate/components/Step5GeneratePreview"
 import "@/pages/generate/hooks/usePreviewAssets"
 import "@/pages/generate/hooks/useSegmentScheduler"
 import "@/pages/generate/components/FrontendPreviewPlayer"
@@ -12,8 +11,8 @@ import "@/pages/generate/hooks/useStepNavigation"
 import "@/pages/generate/components/GenerateStepContent"
 import "@/pages/generate/GeneratePage"
 
-describe("Step5GeneratePreview module smoke test", () => {
-  it("should load all step5 preview modules", () => {
+describe("Merged Step4+5 preview module smoke test", () => {
+  it("should load all merged step4+5 preview modules", () => {
     expect(true).toBe(true)
   })
 })