xiaoxia-saas/apps/web/src/pages/editing-planner/components/RightPanel.tsx

import React from "react"
import ClipPropertiesPanel from "./ClipPropertiesPanel"
import EditorClipList from "./EditorClipList"
import type { ClipData, SubtitleStyleConfig, TransitionConfig, SpeedConfig, TtsConfig } from "../types"
import type { BgmMixConfig } from "@/api/bgm"
import type { TemplateMode } from "@/api/editing-planner"
import type { VoiceMaterial } from "@/api/voice"

interface RightPanelProps {
  rightTab: "properties" | "clips"
  onTabChange: (tab: "properties" | "clips") => void
  // 属性 tab
  selectedClip: ClipData | null
  subtitleSettings: SubtitleStyleConfig
  bgmSettings: BgmMixConfig
  clipsCount: number
  totalDuration: number
  currentMode: TemplateMode
  onSubtitleSettingsChange: (partial: Partial<SubtitleStyleConfig>) => void
  onBgmSettingsChange: (partial: Partial<BgmMixConfig>) => void
  onClipUpdate: (clipId: string, updates: Partial<ClipData>) => void
  onOpenBgmDrawer: () => void
  onOpenSubtitleDrawer: () => void
  voiceMaterials: VoiceMaterial[]
  voiceMaterialsLoading: boolean
  onRefreshVoiceMaterials: () => void
  onClipVoiceSelect: (clipId: string, voiceId: string) => void
  onOpenTransitionDrawer: (clipId: string | null) => void
  onOpenSpeedDrawer: (clipId: string | null) => void
  onOpenTtsDrawer: (clipId: string | null) => void
  onOpenWatermarkDrawer: () => void
  onOpenIntroOutroDrawer: () => void
  onOpenPipDrawer: () => void
  onOpenFilterDrawer: () => void
  onOpenGreenScreenDrawer: () => void
  onOpenStickerDrawer: () => void
  // 片段 tab
  clips: ClipData[]
  selectedClipId: string | null
  onClipSelect: (clipId: string) => void
  onClipMoveUp: (clipId: string) => void
  onClipMoveDown: (clipId: string) => void
  onClipRemove: (clipId: string) => void
  onClipAdd: () => void
}

const RightPanel: React.FC<RightPanelProps> = ({
  rightTab,
  onTabChange,
  selectedClip,
  subtitleSettings,
  bgmSettings,
  clipsCount,
  totalDuration,
  currentMode,
  onSubtitleSettingsChange,
  onBgmSettingsChange,
  onClipUpdate,
  onOpenBgmDrawer,
  onOpenSubtitleDrawer,
  voiceMaterials,
  voiceMaterialsLoading,
  onRefreshVoiceMaterials,
  onClipVoiceSelect,
  onOpenTransitionDrawer,
  onOpenSpeedDrawer,
  onOpenTtsDrawer,
  onOpenWatermarkDrawer,
  onOpenIntroOutroDrawer,
  onOpenPipDrawer,
  onOpenFilterDrawer,
  onOpenGreenScreenDrawer,
  onOpenStickerDrawer,
  clips,
  selectedClipId,
  onClipSelect,
  onClipMoveUp,
  onClipMoveDown,
  onClipRemove,
  onClipAdd,
}) => {
  return (
    <div className="ep-right-panel">
      {/* Tab 切换 */}
      <div className="ep-right-tabs">
        <button
          className={`ep-right-tab${rightTab === "properties" ? " active" : ""}`}
          onClick={() => onTabChange("properties")}
        >
          属性
        </button>
        <button
          className={`ep-right-tab${rightTab === "clips" ? " active" : ""}`}
          onClick={() => onTabChange("clips")}
        >
          片段
        </button>
      </div>

      {/* 属性 Tab */}
      {rightTab === "properties" && (
        <div className="ep-right-tab-content">
          <ClipPropertiesPanel
            selectedClip={selectedClip}
            subtitleSettings={subtitleSettings}
            bgmSettings={bgmSettings}
            clipsCount={clipsCount}
            totalDuration={totalDuration}
            currentMode={currentMode}
            onSubtitleSettingsChange={onSubtitleSettingsChange}
            onBgmSettingsChange={onBgmSettingsChange}
            onClipUpdate={onClipUpdate}
            onOpenBgmDrawer={onOpenBgmDrawer}
            onOpenSubtitleDrawer={onOpenSubtitleDrawer}
            voiceMaterials={voiceMaterials}
            voiceMaterialsLoading={voiceMaterialsLoading}
            onRefreshVoiceMaterials={onRefreshVoiceMaterials}
            onClipVoiceSelect={onClipVoiceSelect}
            onOpenTransitionDrawer={onOpenTransitionDrawer}
            onOpenSpeedDrawer={onOpenSpeedDrawer}
            onOpenTtsDrawer={onOpenTtsDrawer}
            onOpenWatermarkDrawer={onOpenWatermarkDrawer}
            onOpenIntroOutroDrawer={onOpenIntroOutroDrawer}
            onOpenPipDrawer={onOpenPipDrawer}
            onOpenFilterDrawer={onOpenFilterDrawer}
            onOpenGreenScreenDrawer={onOpenGreenScreenDrawer}
            onOpenStickerDrawer={onOpenStickerDrawer}
          />
        </div>
      )}

      {/* 片段 Tab */}
      {rightTab === "clips" && (
        <div className="ep-right-tab-content">
          <EditorClipList
            clips={clips}
            selectedClipId={selectedClipId}
            onSelect={onClipSelect}
            onMoveUp={onClipMoveUp}
            onMoveDown={onClipMoveDown}
            onRemove={onClipRemove}
            onAdd={onClipAdd}
          />
        </div>
      )}
    </div>
  )
}

export default RightPanel