From e1f52f66819d8bdb3bffe111c286129322370e53 Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Sun, 26 Jul 2026 18:33:37 +0800 Subject: [PATCH] refactor(editing-planner): split EditingDrawers into sub-components - Extract type definitions to editing-drawers/types.ts - Extract clip-level drawers to ClipLevelDrawers.tsx (transition/speed/TTS) - Extract global settings drawers to GlobalDrawers.tsx (8 panels) - Main component reduced from 304 to 106 lines (-65%) - Keep import path @/pages/editing-planner/components/EditingDrawers unchanged --- .../components/EditingDrawers.tsx | 342 ++++-------------- .../editing-drawers/ClipLevelDrawers.tsx | 74 ++++ .../editing-drawers/GlobalDrawers.tsx | 119 ++++++ .../components/editing-drawers/types.ts | 101 ++++++ 4 files changed, 366 insertions(+), 270 deletions(-) create mode 100644 apps/web/src/pages/editing-planner/components/editing-drawers/ClipLevelDrawers.tsx create mode 100644 apps/web/src/pages/editing-planner/components/editing-drawers/GlobalDrawers.tsx create mode 100644 apps/web/src/pages/editing-planner/components/editing-drawers/types.ts diff --git a/apps/web/src/pages/editing-planner/components/EditingDrawers.tsx b/apps/web/src/pages/editing-planner/components/EditingDrawers.tsx index 8b980d015..87c0a34b0 100644 --- a/apps/web/src/pages/editing-planner/components/EditingDrawers.tsx +++ b/apps/web/src/pages/editing-planner/components/EditingDrawers.tsx @@ -3,189 +3,32 @@ * 纯渲染层，业务逻辑和 state 留在父组件 */ import React from "react" -import type { TemplateCategory } from "@/api/editing-planner" -import type { - ClipData, - TransitionConfig, - SpeedConfig, - TtsConfig, - WatermarkConfig, - IntroOutroConfig, - PipConfig, - FilterConfig, - ChromaKeyConfig, - StickerConfig, -} from "../types" -import { DEFAULT_TRANSITION, DEFAULT_SPEED, DEFAULT_TTS_CONFIG } from "../types" -import type { SubtitleStyleConfig } from "../types/subtitle" -import type { BgmMixConfig } from "@/api/bgm" import SaveModal from "./SaveModal" -import BgmSelector from "./BgmSelector" -import SubtitleStylePanel from "./SubtitleStylePanel" -import TransitionSelector from "./TransitionSelector" -import SpeedPanel from "./SpeedPanel" -import TtsPanel from "./TtsPanel" -import WatermarkPanel from "./WatermarkPanel" -import IntroOutroPanel from "./IntroOutroPanel" -import PipConfigPanel from "./PipConfigPanel" -import FilterPanel from "./FilterPanel" -import GreenScreenPanel from "./GreenScreenPanel" -import StickerPanel from "./StickerPanel" +import { ClipLevelDrawers } from "./editing-drawers/ClipLevelDrawers" +import { GlobalDrawers } from "./editing-drawers/GlobalDrawers" +import type { EditingDrawersProps } from "./editing-drawers/types" -interface EditingDrawersProps { - /* 保存弹窗 */ - saveModalOpen: boolean - saveLoading: boolean - isUpdate: boolean - draftName: string - draftCategory: string - draftTags: string - categories: TemplateCategory[] - estimatedDuration: number - onNameChange: (name: string) => void - onCategoryChange: (cat: string) => void - onTagsChange: (tags: string) => void - onSave: () => Promise - onCancelSave: () => void - /* BGM */ - bgmDrawerOpen: boolean - bgmSettings: BgmMixConfig - onCloseBgmDrawer: () => void - onChangeBgmSettings: (config: BgmMixConfig) => void - /* 字幕 */ - subtitleDrawerOpen: boolean - subtitleSettings: SubtitleStyleConfig - onCloseSubtitleDrawer: () => void - onChangeSubtitleSettings: (config: SubtitleStyleConfig) => void - /* 转场 */ - transitionDrawerOpen: boolean - transitionTargetClipId: string | null - onCloseTransitionDrawer: () => void - onTransitionChange: (config: TransitionConfig) => void - /* 调速 */ - speedDrawerOpen: boolean - speedTargetClipId: string | null - onCloseSpeedDrawer: () => void - onSpeedChange: (config: SpeedConfig) => void - onApplySpeedAll: (config: SpeedConfig) => void - /* TTS 配音 */ - ttsDrawerOpen: boolean - ttsTargetClipId: string | null - onCloseTtsDrawer: () => void - onTtsChange: (config: TtsConfig) => void - /* 水印 */ - watermarkDrawerOpen: boolean - watermarkSettings: WatermarkConfig - onCloseWatermarkDrawer: () => void - onWatermarkChange: (config: WatermarkConfig) => void - /* 片头片尾 */ - introOutroDrawerOpen: boolean - introOutroSettings: IntroOutroConfig - onCloseIntroOutroDrawer: () => void - onIntroOutroChange: (config: IntroOutroConfig) => void - /* 混剪 */ - pipDrawerOpen: boolean - pipSettings: PipConfig - onClosePipDrawer: () => void - onPipChange: (config: PipConfig) => void - /* 滤镜调色 */ - filterDrawerOpen: boolean - filterSettings: FilterConfig - onCloseFilterDrawer: () => void - onFilterChange: (config: FilterConfig) => void - /* 绿幕抠像 */ - chromaKeyDrawerOpen: boolean - chromaKeySettings: ChromaKeyConfig - onCloseChromaKeyDrawer: () => void - onChromaKeyChange: (config: ChromaKeyConfig) => void - /* 贴纸 */ - stickerDrawerOpen: boolean - stickerSettings: StickerConfig - onCloseStickerDrawer: () => void - onStickerChange: (config: StickerConfig) => void - /* 共享数据 */ - clips: ClipData[] - totalDuration: number -} - -const EditingDrawers: React.FC = ({ - saveModalOpen, - saveLoading, - isUpdate, - draftName, - draftCategory, - draftTags, - categories, - estimatedDuration, - onNameChange, - onCategoryChange, - onTagsChange, - onSave, - onCancelSave, - bgmDrawerOpen, - bgmSettings, - onCloseBgmDrawer, - onChangeBgmSettings, - subtitleDrawerOpen, - subtitleSettings, - onCloseSubtitleDrawer, - onChangeSubtitleSettings, - transitionDrawerOpen, - transitionTargetClipId, - onCloseTransitionDrawer, - onTransitionChange, - speedDrawerOpen, - speedTargetClipId, - onCloseSpeedDrawer, - onSpeedChange, - onApplySpeedAll, - ttsDrawerOpen, - ttsTargetClipId, - onCloseTtsDrawer, - onTtsChange, - watermarkDrawerOpen, - watermarkSettings, - onCloseWatermarkDrawer, - onWatermarkChange, - introOutroDrawerOpen, - introOutroSettings, - onCloseIntroOutroDrawer, - onIntroOutroChange, - pipDrawerOpen, - pipSettings, - onClosePipDrawer, - onPipChange, - filterDrawerOpen, - filterSettings, - onCloseFilterDrawer, - onFilterChange, - chromaKeyDrawerOpen, - chromaKeySettings, - onCloseChromaKeyDrawer, - onChromaKeyChange, - stickerDrawerOpen, - stickerSettings, - onCloseStickerDrawer, - onStickerChange, - clips, - totalDuration, -}) => { - const transitionConfig = transitionTargetClipId - ? (clips.find((c) => c.id === transitionTargetClipId)?.transition ?? DEFAULT_TRANSITION) - : DEFAULT_TRANSITION - const transitionTitle = transitionTargetClipId ? "片段转场设置" : "全局默认转场" - - const speedConfig = speedTargetClipId - ? (clips.find((c) => c.id === speedTargetClipId)?.speed ?? DEFAULT_SPEED) - : DEFAULT_SPEED - - const ttsConfig = ttsTargetClipId - ? (clips.find((c) => c.id === ttsTargetClipId)?.tts_config ?? DEFAULT_TTS_CONFIG) - : DEFAULT_TTS_CONFIG +const EditingDrawers: React.FC = (props) => { + const { + saveModalOpen, + saveLoading, + isUpdate, + draftName, + draftCategory, + draftTags, + categories, + estimatedDuration, + onNameChange, + onCategoryChange, + onTagsChange, + onSave, + onCancelSave, + clips, + } = props return ( <> - {/* ═══ 保存弹窗 ═══ */} + {/* 保存弹窗 */} = ({ onCancel={onCancelSave} /> - {/* ═══ BGM 选择器 Drawer ═══ */} - - {/* ═══ 字幕样式配置 Drawer ═══ */} - - - {/* ═══ 转场特效选择器 Drawer ═══ */} - - - {/* ═══ 片段调速面板 Drawer ═══ */} - {speedTargetClipId && ( - - )} - - {/* ═══ TTS 配音面板 Drawer ═══ */} - {ttsTargetClipId && ( - - )} - - {/* ═══ 水印配置面板 ═══ */} - - - {/* ═══ 片头片尾配置面板 ═══ */} - - - {/* ═══ 混剪配置面板 ═══ */} - - - {/* ═══ 滤镜调色面板 ═══ */} - - - {/* ═══ 绿幕抠像面板 ═══ */} - - - {/* ═══ 贴纸面板 ═══ */} - ) diff --git a/apps/web/src/pages/editing-planner/components/editing-drawers/ClipLevelDrawers.tsx b/apps/web/src/pages/editing-planner/components/editing-drawers/ClipLevelDrawers.tsx new file mode 100644 index 000000000..5d4997d40 --- /dev/null +++ b/apps/web/src/pages/editing-planner/components/editing-drawers/ClipLevelDrawers.tsx @@ -0,0 +1,74 @@ +import React from "react" +import { DEFAULT_TRANSITION, DEFAULT_SPEED, DEFAULT_TTS_CONFIG } from "../../types" +import TransitionSelector from "../TransitionSelector" +import SpeedPanel from "../SpeedPanel" +import TtsPanel from "../TtsPanel" +import type { ClipLevelDrawersProps } from "./types" + +/** + * 片段级抽屉（转场/调速/TTS） + * 这些抽屉针对特定片段，需要 targetClipId 来定位和读取当前配置 + */ +export const ClipLevelDrawers: React.FC = ({ + clips, + transitionDrawerOpen, + transitionTargetClipId, + onCloseTransitionDrawer, + onTransitionChange, + speedDrawerOpen, + speedTargetClipId, + onCloseSpeedDrawer, + onSpeedChange, + onApplySpeedAll, + ttsDrawerOpen, + ttsTargetClipId, + onCloseTtsDrawer, + onTtsChange, +}) => { + const transitionConfig = transitionTargetClipId + ? (clips.find((c) => c.id === transitionTargetClipId)?.transition ?? DEFAULT_TRANSITION) + : DEFAULT_TRANSITION + const transitionTitle = transitionTargetClipId ? "片段转场设置" : "全局默认转场" + + const speedConfig = speedTargetClipId + ? (clips.find((c) => c.id === speedTargetClipId)?.speed ?? DEFAULT_SPEED) + : DEFAULT_SPEED + + const ttsConfig = ttsTargetClipId + ? (clips.find((c) => c.id === ttsTargetClipId)?.tts_config ?? DEFAULT_TTS_CONFIG) + : DEFAULT_TTS_CONFIG + + return ( + <> + {/* 转场特效选择器 */} + + + {/* 片段调速面板 */} + {speedTargetClipId && ( + + )} + + {/* TTS 配音面板 */} + {ttsTargetClipId && ( + + )} + + ) +} diff --git a/apps/web/src/pages/editing-planner/components/editing-drawers/GlobalDrawers.tsx b/apps/web/src/pages/editing-planner/components/editing-drawers/GlobalDrawers.tsx new file mode 100644 index 000000000..76afc7c80 --- /dev/null +++ b/apps/web/src/pages/editing-planner/components/editing-drawers/GlobalDrawers.tsx @@ -0,0 +1,119 @@ +import React from "react" +import BgmSelector from "../BgmSelector" +import SubtitleStylePanel from "../SubtitleStylePanel" +import WatermarkPanel from "../WatermarkPanel" +import IntroOutroPanel from "../IntroOutroPanel" +import PipConfigPanel from "../PipConfigPanel" +import FilterPanel from "../FilterPanel" +import GreenScreenPanel from "../GreenScreenPanel" +import StickerPanel from "../StickerPanel" +import type { GlobalDrawersProps, BgmDrawerProps, SubtitleDrawerProps } from "./types" + +/** + * 全局设置抽屉（BGM/字幕/水印/片头片尾/混剪/滤镜/绿幕/贴纸） + */ +export const GlobalDrawers: React.FC = ({ + bgmDrawerOpen, + bgmSettings, + onCloseBgmDrawer, + onChangeBgmSettings, + subtitleDrawerOpen, + subtitleSettings, + onCloseSubtitleDrawer, + onChangeSubtitleSettings, + totalDuration, + watermarkDrawerOpen, + watermarkSettings, + onCloseWatermarkDrawer, + onWatermarkChange, + introOutroDrawerOpen, + introOutroSettings, + onCloseIntroOutroDrawer, + onIntroOutroChange, + pipDrawerOpen, + pipSettings, + onClosePipDrawer, + onPipChange, + filterDrawerOpen, + filterSettings, + onCloseFilterDrawer, + onFilterChange, + chromaKeyDrawerOpen, + chromaKeySettings, + onCloseChromaKeyDrawer, + onChromaKeyChange, + stickerDrawerOpen, + stickerSettings, + onCloseStickerDrawer, + onStickerChange, +}) => { + return ( + <> + {/* BGM 选择器 */} + + + {/* 字幕样式配置 */} + + + {/* 水印配置面板 */} + + + {/* 片头片尾配置面板 */} + + + {/* 混剪配置面板 */} + + + {/* 滤镜调色面板 */} + + + {/* 绿幕抠像面板 */} + + + {/* 贴纸面板 */} + + + ) +} diff --git a/apps/web/src/pages/editing-planner/components/editing-drawers/types.ts b/apps/web/src/pages/editing-planner/components/editing-drawers/types.ts new file mode 100644 index 000000000..ee43e64a8 --- /dev/null +++ b/apps/web/src/pages/editing-planner/components/editing-drawers/types.ts @@ -0,0 +1,101 @@ +import type { TemplateCategory } from "@/api/editing-planner" +import type { + ClipData, + TransitionConfig, + SpeedConfig, + TtsConfig, + WatermarkConfig, + IntroOutroConfig, + PipConfig, + FilterConfig, + ChromaKeyConfig, + StickerConfig, +} from "../../types" +import type { SubtitleStyleConfig } from "../../types/subtitle" +import type { BgmMixConfig } from "@/api/bgm" + +/** 保存弹窗 Props */ +export interface SaveModalDrawerProps { + saveModalOpen: boolean + saveLoading: boolean + isUpdate: boolean + draftName: string + draftCategory: string + draftTags: string + categories: TemplateCategory[] + estimatedDuration: number + onNameChange: (name: string) => void + onCategoryChange: (cat: string) => void + onTagsChange: (tags: string) => void + onSave: () => Promise + onCancelSave: () => void +} + +/** BGM 抽屉 Props */ +export interface BgmDrawerProps { + bgmDrawerOpen: boolean + bgmSettings: BgmMixConfig + onCloseBgmDrawer: () => void + onChangeBgmSettings: (config: BgmMixConfig) => void +} + +/** 字幕抽屉 Props */ +export interface SubtitleDrawerProps { + subtitleDrawerOpen: boolean + subtitleSettings: SubtitleStyleConfig + onCloseSubtitleDrawer: () => void + onChangeSubtitleSettings: (config: SubtitleStyleConfig) => void +} + +/** 单个片段级抽屉通用 Props */ +export interface ClipLevelDrawersProps { + clips: ClipData[] + transitionDrawerOpen: boolean + transitionTargetClipId: string | null + onCloseTransitionDrawer: () => void + onTransitionChange: (config: TransitionConfig) => void + speedDrawerOpen: boolean + speedTargetClipId: string | null + onCloseSpeedDrawer: () => void + onSpeedChange: (config: SpeedConfig) => void + onApplySpeedAll: (config: SpeedConfig) => void + ttsDrawerOpen: boolean + ttsTargetClipId: string | null + onCloseTtsDrawer: () => void + onTtsChange: (config: TtsConfig) => void +} + +/** 全局设置抽屉 Props */ +export interface GlobalDrawersProps { + totalDuration: number + watermarkDrawerOpen: boolean + watermarkSettings: WatermarkConfig + onCloseWatermarkDrawer: () => void + onWatermarkChange: (config: WatermarkConfig) => void + introOutroDrawerOpen: boolean + introOutroSettings: IntroOutroConfig + onCloseIntroOutroDrawer: () => void + onIntroOutroChange: (config: IntroOutroConfig) => void + pipDrawerOpen: boolean + pipSettings: PipConfig + onClosePipDrawer: () => void + onPipChange: (config: PipConfig) => void + filterDrawerOpen: boolean + filterSettings: FilterConfig + onCloseFilterDrawer: () => void + onFilterChange: (config: FilterConfig) => void + chromaKeyDrawerOpen: boolean + chromaKeySettings: ChromaKeyConfig + onCloseChromaKeyDrawer: () => void + onChromaKeyChange: (config: ChromaKeyConfig) => void + stickerDrawerOpen: boolean + stickerSettings: StickerConfig + onCloseStickerDrawer: () => void + onStickerChange: (config: StickerConfig) => void +} + +export type EditingDrawersProps = SaveModalDrawerProps & + BgmDrawerProps & + SubtitleDrawerProps & + ClipLevelDrawersProps & + GlobalDrawersProps -- 2.54.0