diff --git a/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx b/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx index 9b75d03d6..8085576c2 100644 --- a/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx +++ b/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx @@ -17,48 +17,44 @@ * - useTimelineMenus - 菜单 & 面板 * - usePlayheadDrag - 播放头拖拽 */ -import React from "react"; -import type { ClipData, ClipType, TrimConfig } from "../types"; -import { DEFAULT_PIXELS_PER_SECOND } from "../constants/timeline"; -import { useClipDrag } from "../hooks/useClipDrag"; -import { useTrimDrag } from "../hooks/useTrimDrag"; -import { useTimelineMenus } from "../hooks/useTimelineMenus"; -import { usePlayheadDrag } from "./timeline/hooks/usePlayheadDrag"; -import { TimeRuler } from "./timeline/TimeRuler"; -import { ClipTrack } from "./timeline/ClipTrack"; -import { TimelineHeader } from "./timeline/TimelineHeader"; -import { AddClipPicker } from "./timeline/AddClipPicker"; -import { TrimPreview } from "./timeline/TrimPreview"; -import { ContextMenu } from "./timeline/ContextMenu"; +import React from "react" +import type { ClipData, ClipType, TrimConfig } from "../types" +import { DEFAULT_PIXELS_PER_SECOND } from "../constants/timeline" +import { useClipDrag } from "../hooks/useClipDrag" +import { useTrimDrag } from "../hooks/useTrimDrag" +import { useTimelineMenus } from "../hooks/useTimelineMenus" +import { usePlayheadDrag } from "./timeline/hooks/usePlayheadDrag" +import { TimeRuler } from "./timeline/TimeRuler" +import { ClipTrack } from "./timeline/ClipTrack" +import { TimelineHeader } from "./timeline/TimelineHeader" +import { AddClipPicker } from "./timeline/AddClipPicker" +import { TrimPreview } from "./timeline/TrimPreview" +import { ContextMenu } from "./timeline/ContextMenu" interface TimelinePanelProps { - clips: ClipData[]; - selectedClipId: string | null; - currentMode: string; - onClipSelect: (clipId: string) => void; - onClipReorder: (fromIdx: number, toIdx: number) => void; - onClipRemove: (clipId: string) => void; - onAddClip: (type: ClipType, duration: number) => void; + clips: ClipData[] + selectedClipId: string | null + currentMode: string + onClipSelect: (clipId: string) => void + onClipReorder: (fromIdx: number, toIdx: number) => void + onClipRemove: (clipId: string) => void + onAddClip: (type: ClipType, duration: number) => void /** 裁剪更新:调整片段的 trim_config 和 duration */ - onClipTrim?: ( - clipId: string, - trimConfig: TrimConfig, - newDuration: number, - ) => void; + onClipTrim?: (clipId: string, trimConfig: TrimConfig, newDuration: number) => void /** 在指定位置分割片段 */ - onClipSplit?: (clipId: string, splitRatio: number) => void; + onClipSplit?: (clipId: string, splitRatio: number) => void /** 恢复片段原始长度 */ - onClipResetTrim?: (clipId: string) => void; + onClipResetTrim?: (clipId: string) => void /** 当前播放时间(秒) */ - currentTime?: number; + currentTime?: number /** 缩放:每秒像素数 */ - pixelsPerSecond?: number; + pixelsPerSecond?: number /** 缩放变更回调 */ - onZoomChange?: (pps: number) => void; + onZoomChange?: (pps: number) => void /** 播放头跳转回调 */ - onSeek?: (time: number) => void; + onSeek?: (time: number) => void /** 总时长(秒),可选(默认由 clips 计算) */ - totalDuration?: number; + totalDuration?: number } const TimelinePanel: React.FC = ({ @@ -79,16 +75,11 @@ const TimelinePanel: React.FC = ({ totalDuration: totalDurationProp, }) => { /* ── 缩放 & 时长 ── */ - const pps = pixelsPerSecond ?? DEFAULT_PIXELS_PER_SECOND; - const totalDuration = - totalDurationProp ?? clips.reduce((s, c) => s + c.duration, 0); + const pps = pixelsPerSecond ?? DEFAULT_PIXELS_PER_SECOND + const totalDuration = totalDurationProp ?? clips.reduce((s, c) => s + c.duration, 0) /* ── 裁剪拖拽 ── */ - const { trimDrag, trimPreview, handleTrimHandleMouseDown } = useTrimDrag( - clips, - pps, - onClipTrim, - ); + const { trimDrag, trimPreview, handleTrimHandleMouseDown } = useTrimDrag(clips, pps, onClipTrim) /* ── 片段拖拽排序 ── */ const { @@ -99,7 +90,7 @@ const TimelinePanel: React.FC = ({ handleDragEnd, handleDrop, handleEmptyDragOver, - } = useClipDrag(onClipReorder, !!trimDrag); + } = useClipDrag(onClipReorder, !!trimDrag) /* ── 菜单 & 面板 ── */ const { @@ -122,31 +113,23 @@ const TimelinePanel: React.FC = ({ handleConfirmAdd, hoveredClipId, setHoveredClipId, - } = useTimelineMenus( - clips, - currentMode, - onAddClip, - onClipSplit, - onClipResetTrim, - onClipRemove, - ); + } = useTimelineMenus(clips, currentMode, onAddClip, onClipSplit, onClipResetTrim, onClipRemove) /* ── 播放头拖拽 ── */ - const { trackRef, handlePlayheadMouseDown, handleRulerClick } = - usePlayheadDrag({ - currentTime, - pps, - totalDuration, - onSeek, - }); + const { trackRef, handlePlayheadMouseDown, handleRulerClick } = usePlayheadDrag({ + currentTime, + pps, + totalDuration, + onSeek, + }) /* ── 撤销最后一个片段 ── */ const handleUndoClip = () => { if (clips.length > 1) { - const last = clips[clips.length - 1]; - onClipRemove(last.id); + const last = clips[clips.length - 1] + onClipRemove(last.id) } - }; + } return (
@@ -160,17 +143,11 @@ const TimelinePanel: React.FC = ({ /> {/* 一镜到底提示 */} - {currentMode === "one_take" && ( -
🎥 一镜到底模式无片段
- )} + {currentMode === "one_take" &&
🎥 一镜到底模式无片段
} {/* 时间标尺 */} {currentMode !== "one_take" && ( - + )} {/* 水平片段轨道 */} @@ -221,9 +198,7 @@ const TimelinePanel: React.FC = ({ x={contextMenu.x} y={contextMenu.y} menuRef={contextMenuRef} - hasTrim={ - !!clips.find((c) => c.id === contextMenu.clipId)?.trim_config - } + hasTrim={!!clips.find((c) => c.id === contextMenu.clipId)?.trim_config} onSplit={handleContextSplit} onResetTrim={handleContextResetTrim} onDelete={handleContextDelete} @@ -244,7 +219,7 @@ const TimelinePanel: React.FC = ({ /> )}
- ); -}; + ) +} -export default TimelinePanel; \ No newline at end of file +export default TimelinePanel