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

/**
 * GeneratePage 步骤内容渲染
 * 根据当前步骤渲染对应的 Step 组件
 * 步骤顺序：模板(1) → 素材(2) → 配音(3) → 标题(4) → 预览(5) → 封面(6) → 确认(7)
 */
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 type { PreviewItem, PreviewStatus } from "../hooks/useStep5Preview"
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
  /* 封面 */
  coverSettings: CoverConfig
  onCoverSettingsChange: (settings: CoverConfig) => void
  duration: number
  /* 配音 */
  selectedVoice: string
  onSelectedVoiceChange: (id: string) => void
  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[]
  videoRatio: string
  /* Step4 预览（多预览） */
  previewCount: number
  onPreviewCountChange: (count: number) => void
  previewItems: PreviewItem[]
  previewSelectedIndex: number
  onSelectPreview: (index: number) => void
  previewOverallStatus: PreviewStatus
  previewOverallError: string
  previewOverallProgress: number
  previewAnyGenerating: boolean
  previewTemplateName: string
  previewMaterialCount: string
  onGeneratePreview: () => void
  onRegeneratePreview: () => void
}

export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) => {
  const {
    currentStep,
    userTemplates,
    selectedTemplate,
    onSelectTemplate,
    materialMode,
    onMaterialModeChange,
    selectedMaterials,
    onSelectedMaterialsChange,
    smartSelectedIds,
    onSmartSelectedIdsChange,
    titleSettings,
    onTitleSettingsChange,
    coverSettings,
    onCoverSettingsChange,
    duration,
    selectedVoice,
    onSelectedVoiceChange,
    voiceMode,
    selectedClonedVoice,
    clonedVoices,
    generateCount,
    onGenerateCountChange,
    generating,
    generated,
    generateError,
    progress,
    generatedVideos,
    onRetry,
    onDismissError,
    presetVoices,
    videoRatio,
    previewCount,
    onPreviewCountChange,
    previewItems,
    previewSelectedIndex,
    onSelectPreview,
    previewOverallStatus,
    previewOverallError,
    previewOverallProgress,
    previewAnyGenerating,
    previewTemplateName,
    previewMaterialCount,
    onGeneratePreview,
    onRegeneratePreview,
  } = props

  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}
        />
      )
    case 3:
      return (
        <Step3VoiceSelect
          selectedVoice={selectedVoice}
          onSelectedVoiceChange={onSelectedVoiceChange}
        />
      )
    case 4:
      return (
        <Step4TitleSettings
          titleSettings={titleSettings}
          onTitleSettingsChange={onTitleSettingsChange}
        />
      )
    case 5:
      return (
        <Step5GeneratePreview
          templateName={previewTemplateName}
          materialCount={previewMaterialCount}
          duration={duration}
          videoRatio={videoRatio}
          previewCount={previewCount}
          onPreviewCountChange={onPreviewCountChange}
          items={previewItems}
          selectedIndex={previewSelectedIndex}
          onSelectPreview={onSelectPreview}
          overallStatus={previewOverallStatus}
          overallError={previewOverallError}
          overallProgress={previewOverallProgress}
          anyGenerating={previewAnyGenerating}
          onGeneratePreview={onGeneratePreview}
          onRegeneratePreview={onRegeneratePreview}
        />
      )
    case 6:
      return (
        <Step6CoverSettings
          coverSettings={coverSettings}
          onCoverSettingsChange={onCoverSettingsChange}
          duration={duration}
          assetIds={materialMode === "auto" ? smartSelectedIds : selectedMaterials}
          selectedTemplate={selectedTemplate}
        />
      )
    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