xiaoxia-saas/apps/web/src/pages/generate/components/GenerateStepContent.tsx

/**
 * GeneratePage 步骤内容渲染
 * 根据当前步骤渲染对应的 Step 组件
 * 步骤顺序：模板(1) → 素材(2) → 配音(3) → 标题(4) → 预览(5) → 封面(6) → 确认(7)
 *
 * V24: 移除 Step5 预览生成相关 props，改为纯标题样式编辑
 */
import React from "react"
import type { EditingTemplate } from "@/api/editing-planner"
import type { PresetVoiceItem } from "@/api/voices"
import type { VoiceClone } from "@/api/voice-clone"
import type { CoverConfig } from "../types/cover"
import type { TitleSettings } from "../types"
import Step1TemplateSelect from "../components/Step1TemplateSelect"
import Step2MaterialSelect from "../components/Step2MaterialSelect"
import Step3VoiceSelect from "../components/Step5VoiceSelect"
import Step5GeneratePreview from "../components/Step5GeneratePreview"
import Step4TitleSettings from "../components/Step4TitleSettings"
import Step6CoverSettings from "../components/Step6CoverSettings"
import Step7ConfirmGenerate from "../components/Step7ConfirmGenerate"
import type { GeneratedVideo } from "@/api/template-editor"

export interface GenerateStepContentProps {
  currentStep: number
  /* 模板 */
  userTemplates: EditingTemplate[]
  selectedTemplate: string
  onSelectTemplate: (id: string) => void
  /* 素材 */
  materialMode: "manual" | "auto"
  onMaterialModeChange: (mode: "manual" | "auto") => void
  selectedMaterials: string[]
  onSelectedMaterialsChange: (ids: string[]) => void
  smartSelectedIds: string[]
  onSmartSelectedIdsChange: (ids: string[]) => void
  /* 标题 */
  titleSettings: TitleSettings
  onTitleSettingsChange: (settings: TitleSettings) => void
  /* 标题样式回调 — Step5 样式面板使用 */
  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 }[]
  /* 封面 */
  coverSettings: CoverConfig
  onCoverSettingsChange: (settings: CoverConfig) => void
  duration: number
  /* 配音 */
  selectedVoice: string
  onSelectedVoiceChange: (id: string) => void
  totalVideoDuration?: number
  voiceMode: "preset" | "custom" | "clone"
  onVoiceModeChange: (mode: "preset" | "custom" | "clone") => void
  selectedClonedVoice: string
  onSelectedClonedVoiceChange: (id: string) => void
  clonedVoices: VoiceClone[]
  addClone: (voice: VoiceClone) => void
  hasProcessing: boolean
  cloneModalOpen: boolean
  onCloneModalOpenChange: (open: boolean) => void
  /* 生成 */
  generateCount: number
  onGenerateCountChange: (n: number) => void
  generating: boolean
  generated: boolean
  generateError: string | null
  progress: number
  generatedVideos: GeneratedVideo[]
  onRetry: () => void
  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) => {
  const {
    currentStep,
    userTemplates,
    selectedTemplate,
    onSelectTemplate,
    materialMode,
    onMaterialModeChange,
    selectedMaterials,
    onSelectedMaterialsChange,
    smartSelectedIds,
    onSmartSelectedIdsChange,
    titleSettings,
    onTitleSettingsChange,
    onUpdatePosition,
    onUpdateFont,
    onUpdateSize,
    onToggleBold,
    onToggleItalic,
    onToggleStroke,
    onToggleShadow,
    onApplyPreset,
    activePreset,
    titlePresets,
    coverSettings,
    onCoverSettingsChange,
    duration,
    selectedVoice,
    onSelectedVoiceChange,
    totalVideoDuration,
    voiceMode,
    selectedClonedVoice,
    clonedVoices,
    generateCount,
    onGenerateCountChange,
    generating,
    generated,
    generateError,
    progress,
    generatedVideos,
    onRetry,
    onDismissError,
    presetVoices,
    onPreviewTaskCreated,
    onSourceEditPlanIdExtracted,
    bgm,
    bgmConfig,
  } = props

  /* 当前模板的 segments，传给 Step2 构建 clips */
  const currentTemplate = userTemplates.find((t) => t.id === selectedTemplate)
  const templateSegments = currentTemplate?.segments

  switch (currentStep) {
    case 1:
      return (
        <Step1TemplateSelect
          templates={userTemplates}
          selectedTemplate={selectedTemplate}
          onSelectTemplate={onSelectTemplate}
        />
      )
    case 2:
      return (
        <Step2MaterialSelect
          materialMode={materialMode}
          onMaterialModeChange={onMaterialModeChange}
          selectedMaterials={selectedMaterials}
          onSelectedMaterialsChange={onSelectedMaterialsChange}
          smartSelectedIds={smartSelectedIds}
          onSmartSelectedIdsChange={onSmartSelectedIdsChange}
          selectedTemplate={selectedTemplate}
          templateSegments={templateSegments}
        />
      )
    case 3:
      return (
        <Step3VoiceSelect
          selectedVoice={selectedVoice}
          onSelectedVoiceChange={onSelectedVoiceChange}
          totalVideoDuration={totalVideoDuration}
        />
      )
    case 4:
      return (
        <Step4TitleSettings
          titleSettings={titleSettings}
          onTitleSettingsChange={onTitleSettingsChange}
          selectedTemplate={selectedTemplate}
        />
      )
    case 5:
      return (
        <Step5GeneratePreview
          titleSettings={titleSettings}
          onUpdatePosition={onUpdatePosition}
          onUpdateFont={onUpdateFont}
          onUpdateSize={onUpdateSize}
          onToggleBold={onToggleBold}
          onToggleItalic={onToggleItalic}
          onToggleStroke={onToggleStroke}
          onToggleShadow={onToggleShadow}
          onApplyPreset={onApplyPreset}
          activePreset={activePreset}
          titlePresets={titlePresets}
        />
      )
    case 6:
      return (
        <Step6CoverSettings
          coverSettings={coverSettings}
          onCoverSettingsChange={onCoverSettingsChange}
          duration={duration}
          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:
      return (
        <Step7ConfirmGenerate
          templates={userTemplates}
          selectedTemplate={selectedTemplate}
          materialMode={materialMode}
          selectedMaterials={selectedMaterials}
          smartSelectedIds={smartSelectedIds}
          title={titleSettings.title}
          voiceMode={voiceMode}
          selectedVoice={selectedVoice}
          selectedClonedVoice={selectedClonedVoice}
          presetVoices={presetVoices}
          clonedVoices={clonedVoices}
          coverSettings={coverSettings}
          generateCount={generateCount}
          onGenerateCountChange={onGenerateCountChange}
          generating={generating}
          generated={generated}
          generateError={generateError}
          progress={progress}
          generatedVideos={generatedVideos}
          onRetry={onRetry}
          onDismissError={onDismissError}
        />
      )
    default:
      return null
  }
}

export default GenerateStepContent