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

/**
 * GeneratePage 步骤内容渲染
 * 根据当前步骤渲染对应的 Step 组件
 */
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 "../../editing-planner/types"
import type { TitleSettings } from "../types"
import type { PreviewResult, PreviewStatus } from "../hooks/useStep3Preview"
import Step1TemplateSelect from "../components/Step1TemplateSelect"
import Step2MaterialSelect from "../components/Step2MaterialSelect"
import Step3GeneratePreview from "../components/Step3GeneratePreview"
import Step4TitleSettings from "../components/Step4TitleSettings"
import Step5VoiceSelect from "../components/Step5VoiceSelect"
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
  /* Step3 预览 */
  previewStatus: PreviewStatus
  previewResult: PreviewResult | null
  previewError: string
  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,
    onVoiceModeChange,
    selectedClonedVoice,
    onSelectedClonedVoiceChange,
    clonedVoices,
    addClone,
    hasProcessing,
    cloneModalOpen,
    onCloneModalOpenChange,
    generateCount,
    onGenerateCountChange,
    generating,
    generated,
    generateError,
    progress,
    generatedVideos,
    onRetry,
    onDismissError,
    presetVoices,
    videoRatio,
    previewStatus,
    previewResult,
    previewError,
    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 (
        <Step3GeneratePreview
          templateName={previewTemplateName}
          materialCount={previewMaterialCount}
          duration={duration}
          videoRatio={videoRatio}
          previewStatus={previewStatus}
          previewResult={previewResult}
          previewError={previewError}
          onGeneratePreview={onGeneratePreview}
          onRegeneratePreview={onRegeneratePreview}
        />
      )
    case 4:
      return (
        <Step4TitleSettings
          titleSettings={titleSettings}
          onTitleSettingsChange={onTitleSettingsChange}
        />
      )
    case 5:
      return (
        <Step5VoiceSelect
          selectedVoice={selectedVoice}
          onSelectedVoiceChange={onSelectedVoiceChange}
          voiceMode={voiceMode}
          onVoiceModeChange={onVoiceModeChange}
          selectedClonedVoice={selectedClonedVoice}
          onSelectedClonedVoiceChange={onSelectedClonedVoiceChange}
          clonedVoices={clonedVoices}
          addClone={addClone}
          hasProcessing={hasProcessing}
          cloneModalOpen={cloneModalOpen}
          onCloneModalOpenChange={onCloneModalOpenChange}
          titleText={titleSettings.title}
        />
      )
    case 6:
      return (
        <Step6CoverSettings
          coverSettings={coverSettings}
          onCoverSettingsChange={onCoverSettingsChange}
          duration={duration}
        />
      )
    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