fix: 删除同名文件避免循环导入（目录index.ts已作为入口）

主文件 238→60 行（-75%），拆分为：
- useClipBasicOps: 选中状态 + 增删改查重排
- useClipTrim: 裁剪、分割、重置裁剪
- useClipEffects: 转场、调速、TTS、配音选择

导入路径保持向后兼容

apps/web/src/pages/editing-planner/components/BgmSelector.tsx

@@ -1,5 +1,273 @@
 /**
- * BGM 选择器入口（向后兼容）
- * 实际实现位于 ./bgm-selector/ 目录
+ * BGM 选择器 — Drawer 形式
+ * 预设 BGM 列表（按风格分类）、搜索、试听、音量/淡入淡出/人声闪避配置
  */
-export { default } from "./bgm-selector"
+import React, { useState, useRef, useCallback, useEffect } from "react"
+import { Drawer, Slider, Input, Tag, message } from "antd"
+import {
+  getBgmPresets,
+  type BgmPreset,
+  type BgmCategory,
+  type BgmMixConfig,
+  DEFAULT_BGM_MIX_CONFIG,
+} from "@/api/bgm"
+
+const { Search } = Input
+
+/* ──────────── 分类标签 ──────────── */
+const CATEGORY_LIST: {
+  key: BgmCategory | "all"
+  label: string
+  icon: string
+}[] = [
+  { key: "all", label: "全部", icon: "🎶" },
+  { key: "轻快", label: "轻快", icon: "🎉" },
+  { key: "治愈", label: "治愈", icon: "🌿" },
+  { key: "科技", label: "科技", icon: "🔬" },
+  { key: "电商", label: "电商", icon: "🛒" },
+]
+
+/* ──────────── Props ──────────── */
+interface BgmSelectorProps {
+  open: boolean
+  onClose: () => void
+  config: BgmMixConfig
+  onChange: (config: BgmMixConfig) => void
+}
+
+const BgmSelector: React.FC<BgmSelectorProps> = ({ open, onClose, config, onChange }) => {
+  const [presets, setPresets] = useState<BgmPreset[]>([])
+  const [loading, setLoading] = useState(false)
+  const [activeCategory, setActiveCategory] = useState<BgmCategory | "all">("all")
+  const [keyword, setKeyword] = useState("")
+  const [previewingId, setPreviewingId] = useState<string | null>(null)
+
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+
+  /* ── 加载 BGM 列表 ── */
+  const loadPresets = useCallback(async () => {
+    setLoading(true)
+    try {
+      const params: { category?: string; keyword?: string } = {}
+      if (activeCategory !== "all") params.category = activeCategory
+      if (keyword.trim()) params.keyword = keyword.trim()
+      const data = await getBgmPresets(params)
+      setPresets(data)
+    } catch {
+      message.error("加载 BGM 列表失败")
+    } finally {
+      setLoading(false)
+    }
+  }, [activeCategory, keyword])
+
+  useEffect(() => {
+    if (open) loadPresets()
+  }, [open, loadPresets])
+
+  /* ── 试听 ── */
+  const handlePreview = useCallback(
+    (bgm: BgmPreset) => {
+      if (previewingId === bgm.id) {
+        audioRef.current?.pause()
+        setPreviewingId(null)
+        return
+      }
+      audioRef.current?.pause()
+      const audio = new Audio(bgm.url)
+      audioRef.current = audio
+      audio.play().catch(() => {})
+      audio.onended = () => setPreviewingId(null)
+      setPreviewingId(bgm.id)
+    },
+    [previewingId],
+  )
+
+  /* ── 选中 BGM ── */
+  const handleSelect = useCallback(
+    (bgm: BgmPreset) => {
+      onChange({
+        ...config,
+        enabled: true,
+        music_id: bgm.id,
+      })
+    },
+    [config, onChange],
+  )
+
+  /* ── 关闭时停止播放 ── */
+  const handleClose = useCallback(() => {
+    audioRef.current?.pause()
+    setPreviewingId(null)
+    onClose()
+  }, [onClose])
+
+  /* ── 移除 BGM ── */
+  const handleClear = useCallback(() => {
+    audioRef.current?.pause()
+    setPreviewingId(null)
+    onChange({ ...DEFAULT_BGM_MIX_CONFIG })
+  }, [onChange])
+
+  /* ── 当前选中的 BGM ── */
+  const selectedBgm = presets.find((p) => p.id === config.music_id)
+
+  return (
+    <Drawer
+      title="🎵 BGM 音乐选择"
+      placement="right"
+      width={420}
+      open={open}
+      onClose={handleClose}
+      className="bgm-selector-drawer"
+    >
+      {/* ── 搜索框 ── */}
+      <div className="bgm-search-row">
+        <Search
+          placeholder="搜索 BGM 名称..."
+          allowClear
+          value={keyword}
+          onChange={(e) => setKeyword(e.target.value)}
+          onSearch={() => loadPresets()}
+        />
+      </div>
+
+      {/* ── 分类标签 ── */}
+      <div className="bgm-category-bar">
+        {CATEGORY_LIST.map((cat) => (
+          <Tag
+            key={cat.key}
+            className={`bgm-category-tag${activeCategory === cat.key ? " active" : ""}`}
+            onClick={() => setActiveCategory(cat.key)}
+          >
+            {cat.icon} {cat.label}
+          </Tag>
+        ))}
+      </div>
+
+      {/* ── BGM 列表 ── */}
+      <div className="bgm-list">
+        {loading && <div className="bgm-loading">加载中...</div>}
+        {!loading && presets.length === 0 && <div className="bgm-empty">暂无 BGM 数据</div>}
+        {presets.map((bgm) => {
+          const isSelected = config.music_id === bgm.id
+          const isPlaying = previewingId === bgm.id
+          return (
+            <div
+              key={bgm.id}
+              className={`bgm-item${isSelected ? " selected" : ""}`}
+              onClick={() => handleSelect(bgm)}
+            >
+              <div className="bgm-item-cover">
+                {bgm.cover_url ? (
+                  <img src={bgm.cover_url} alt={bgm.name} />
+                ) : (
+                  <span className="bgm-item-cover-icon">🎵</span>
+                )}
+              </div>
+              <div className="bgm-item-info">
+                <div className="bgm-item-name">{bgm.name}</div>
+                <div className="bgm-item-meta">
+                  <span className="bgm-item-category">{bgm.category}</span>
+                  <span className="bgm-item-duration">
+                    {Math.floor(bgm.duration / 60)}:
+                    {String(Math.floor(bgm.duration % 60)).padStart(2, "0")}
+                  </span>
+                </div>
+                {bgm.tags.length > 0 && (
+                  <div className="bgm-item-tags">
+                    {bgm.tags.slice(0, 3).map((t) => (
+                      <span key={t} className="bgm-item-tag">
+                        {t}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <button
+                className={`bgm-item-preview-btn${isPlaying ? " playing" : ""}`}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  handlePreview(bgm)
+                }}
+                title={isPlaying ? "暂停" : "试听"}
+              >
+                {isPlaying ? "⏸" : "▶️"}
+              </button>
+              {isSelected && <span className="bgm-item-check">✓</span>}
+            </div>
+          )
+        })}
+      </div>
+
+      {/* ── 混音配置 ── */}
+      {config.enabled && config.music_id && (
+        <div className="bgm-mix-config">
+          <div className="bgm-mix-header">
+            <span>混音配置</span>
+            <button className="bgm-mix-clear" onClick={handleClear}>
+              移除 BGM
+            </button>
+          </div>
+
+          <div className="bgm-mix-selected">
+            {selectedBgm ? `当前：${selectedBgm.name}` : `当前：${config.music_id}`}
+          </div>
+
+          {/* 音量 */}
+          <div className="bgm-mix-field">
+            <label className="bgm-mix-label">
+              音量 <span className="bgm-mix-value">{config.volume}%</span>
+            </label>
+            <Slider
+              min={0}
+              max={100}
+              value={config.volume}
+              onChange={(v) => onChange({ ...config, volume: v })}
+            />
+          </div>
+
+          {/* 淡入 */}
+          <div className="bgm-mix-field">
+            <label className="bgm-mix-label">
+              淡入 <span className="bgm-mix-value">{config.fade_in.toFixed(1)}s</span>
+            </label>
+            <Slider
+              min={0}
+              max={3}
+              step={0.1}
+              value={config.fade_in}
+              onChange={(v) => onChange({ ...config, fade_in: v })}
+            />
+          </div>
+
+          {/* 淡出 */}
+          <div className="bgm-mix-field">
+            <label className="bgm-mix-label">
+              淡出 <span className="bgm-mix-value">{config.fade_out.toFixed(1)}s</span>
+            </label>
+            <Slider
+              min={0}
+              max={3}
+              step={0.1}
+              value={config.fade_out}
+              onChange={(v) => onChange({ ...config, fade_out: v })}
+            />
+          </div>
+
+          {/* 人声闪避 */}
+          <div className="bgm-mix-field bgm-mix-toggle-row">
+            <label className="bgm-mix-label">人声闪避（sidechain）</label>
+            <div
+              className={`ep-toggle${config.voice_dodge ? " active" : ""}`}
+              onClick={() => onChange({ ...config, voice_dodge: !config.voice_dodge })}
+            >
+              <div className="ep-toggle-knob" />
+            </div>
+          </div>
+        </div>
+      )}
+    </Drawer>
+  )
+}
+
+export default BgmSelector

apps/web/src/pages/editing-planner/components/bgm-selector/BgmItem.tsx

@@ -1,66 +0,0 @@
-import React from "react"
-import type { BgmPreset } from "@/api/bgm"
-
-interface BgmItemProps {
-  bgm: BgmPreset
-  isSelected: boolean
-  isPlaying: boolean
-  onSelect: () => void
-  onPreview: () => void
-}
-
-/**
- * 单个 BGM 列表项组件
- */
-export const BgmItem: React.FC<BgmItemProps> = ({
-  bgm,
-  isSelected,
-  isPlaying,
-  onSelect,
-  onPreview,
-}) => {
-  const formatDuration = (seconds: number) => {
-    const mins = Math.floor(seconds / 60)
-    const secs = String(Math.floor(seconds % 60)).padStart(2, "0")
-    return `${mins}:${secs}`
-  }
-
-  return (
-    <div className={`bgm-item${isSelected ? " selected" : ""}`} onClick={onSelect}>
-      <div className="bgm-item-cover">
-        {bgm.cover_url ? (
-          <img src={bgm.cover_url} alt={bgm.name} />
-        ) : (
-          <span className="bgm-item-cover-icon">🎵</span>
-        )}
-      </div>
-      <div className="bgm-item-info">
-        <div className="bgm-item-name">{bgm.name}</div>
-        <div className="bgm-item-meta">
-          <span className="bgm-item-category">{bgm.category}</span>
-          <span className="bgm-item-duration">{formatDuration(bgm.duration)}</span>
-        </div>
-        {bgm.tags.length > 0 && (
-          <div className="bgm-item-tags">
-            {bgm.tags.slice(0, 3).map((t) => (
-              <span key={t} className="bgm-item-tag">
-                {t}
-              </span>
-            ))}
-          </div>
-        )}
-      </div>
-      <button
-        className={`bgm-item-preview-btn${isPlaying ? " playing" : ""}`}
-        onClick={(e) => {
-          e.stopPropagation()
-          onPreview()
-        }}
-        title={isPlaying ? "暂停" : "试听"}
-      >
-        {isPlaying ? "⏸" : "▶️"}
-      </button>
-      {isSelected && <span className="bgm-item-check">✓</span>}
-    </div>
-  )
-}

apps/web/src/pages/editing-planner/components/bgm-selector/BgmMixConfig.tsx

@@ -1,88 +0,0 @@
-import React from "react"
-import { Slider } from "antd"
-import type { BgmMixConfig as BgmMixConfigType, BgmPreset } from "@/api/bgm"
-
-interface BgmMixConfigProps {
-  config: BgmMixConfigType
-  selectedBgm: BgmPreset | undefined
-  onChange: (config: BgmMixConfigType) => void
-  onClear: () => void
-}
-
-/**
- * BGM 混音配置面板
- * 音量、淡入淡出、人声闪避等设置
- */
-export const BgmMixConfig: React.FC<BgmMixConfigProps> = ({
-  config,
-  selectedBgm,
-  onChange,
-  onClear,
-}) => {
-  return (
-    <div className="bgm-mix-config">
-      <div className="bgm-mix-header">
-        <span>混音配置</span>
-        <button className="bgm-mix-clear" onClick={onClear}>
-          移除 BGM
-        </button>
-      </div>
-
-      <div className="bgm-mix-selected">
-        {selectedBgm ? `当前：${selectedBgm.name}` : `当前：${config.music_id}`}
-      </div>
-
-      {/* 音量 */}
-      <div className="bgm-mix-field">
-        <label className="bgm-mix-label">
-          音量 <span className="bgm-mix-value">{config.volume}%</span>
-        </label>
-        <Slider
-          min={0}
-          max={100}
-          value={config.volume}
-          onChange={(v) => onChange({ ...config, volume: v })}
-        />
-      </div>
-
-      {/* 淡入 */}
-      <div className="bgm-mix-field">
-        <label className="bgm-mix-label">
-          淡入 <span className="bgm-mix-value">{config.fade_in.toFixed(1)}s</span>
-        </label>
-        <Slider
-          min={0}
-          max={3}
-          step={0.1}
-          value={config.fade_in}
-          onChange={(v) => onChange({ ...config, fade_in: v })}
-        />
-      </div>
-
-      {/* 淡出 */}
-      <div className="bgm-mix-field">
-        <label className="bgm-mix-label">
-          淡出 <span className="bgm-mix-value">{config.fade_out.toFixed(1)}s</span>
-        </label>
-        <Slider
-          min={0}
-          max={3}
-          step={0.1}
-          value={config.fade_out}
-          onChange={(v) => onChange({ ...config, fade_out: v })}
-        />
-      </div>
-
-      {/* 人声闪避 */}
-      <div className="bgm-mix-field bgm-mix-toggle-row">
-        <label className="bgm-mix-label">人声闪避（sidechain）</label>
-        <div
-          className={`ep-toggle${config.voice_dodge ? " active" : ""}`}
-          onClick={() => onChange({ ...config, voice_dodge: !config.voice_dodge })}
-        >
-          <div className="ep-toggle-knob" />
-        </div>
-      </div>
-    </div>
-  )
-}

apps/web/src/pages/editing-planner/components/bgm-selector/index.tsx

@@ -1,124 +0,0 @@
-/**
- * BGM 选择器 — Drawer 形式
- * 预设 BGM 列表（按风格分类）、搜索、试听、音量/淡入淡出/人声闪避配置
- */
-import React, { useCallback } from "react"
-import { Drawer, Input, Tag } from "antd"
-import { type BgmMixConfig, DEFAULT_BGM_MIX_CONFIG } from "@/api/bgm"
-import { useBgmSelector, CATEGORY_LIST } from "./useBgmSelector"
-import { BgmItem } from "./BgmItem"
-import { BgmMixConfig as BgmMixConfigPanel } from "./BgmMixConfig"
-
-const { Search } = Input
-
-interface BgmSelectorProps {
-  open: boolean
-  onClose: () => void
-  config: BgmMixConfig
-  onChange: (config: BgmMixConfig) => void
-}
-
-const BgmSelector: React.FC<BgmSelectorProps> = ({ open, onClose, config, onChange }) => {
-  const {
-    presets,
-    loading,
-    activeCategory,
-    setActiveCategory,
-    keyword,
-    setKeyword,
-    previewingId,
-    loadPresets,
-    handlePreview,
-    stopPreview,
-  } = useBgmSelector(open)
-
-  /* ── 选中 BGM ── */
-  const handleSelect = useCallback(
-    (bgmId: string) => {
-      onChange({
-        ...config,
-        enabled: true,
-        music_id: bgmId,
-      })
-    },
-    [config, onChange],
-  )
-
-  /* ── 关闭时停止播放 ── */
-  const handleClose = useCallback(() => {
-    stopPreview()
-    onClose()
-  }, [stopPreview, onClose])
-
-  /* ── 移除 BGM ── */
-  const handleClear = useCallback(() => {
-    stopPreview()
-    onChange({ ...DEFAULT_BGM_MIX_CONFIG })
-  }, [stopPreview, onChange])
-
-  /* ── 当前选中的 BGM ── */
-  const selectedBgm = presets.find((p) => p.id === config.music_id)
-
-  return (
-    <Drawer
-      title="🎵 BGM 音乐选择"
-      placement="right"
-      width={420}
-      open={open}
-      onClose={handleClose}
-      className="bgm-selector-drawer"
-    >
-      {/* 搜索框 */}
-      <div className="bgm-search-row">
-        <Search
-          placeholder="搜索 BGM 名称..."
-          allowClear
-          value={keyword}
-          onChange={(e) => setKeyword(e.target.value)}
-          onSearch={() => loadPresets()}
-        />
-      </div>
-
-      {/* 分类标签 */}
-      <div className="bgm-category-bar">
-        {CATEGORY_LIST.map((cat) => (
-          <Tag
-            key={cat.key}
-            className={`bgm-category-tag${activeCategory === cat.key ? " active" : ""}`}
-            onClick={() => setActiveCategory(cat.key)}
-          >
-            {cat.icon} {cat.label}
-          </Tag>
-        ))}
-      </div>
-
-      {/* BGM 列表 */}
-      <div className="bgm-list">
-        {loading && <div className="bgm-loading">加载中...</div>}
-        {!loading && presets.length === 0 && <div className="bgm-empty">暂无 BGM 数据</div>}
-        {presets.map((bgm) => (
-          <BgmItem
-            key={bgm.id}
-            bgm={bgm}
-            isSelected={config.music_id === bgm.id}
-            isPlaying={previewingId === bgm.id}
-            onSelect={() => handleSelect(bgm.id)}
-            onPreview={() => handlePreview(bgm)}
-          />
-        ))}
-      </div>
-
-      {/* 混音配置 */}
-      {config.enabled && config.music_id && (
-        <BgmMixConfigPanel
-          config={config}
-          selectedBgm={selectedBgm}
-          onChange={onChange}
-          onClear={handleClear}
-        />
-      )}
-    </Drawer>
-  )
-}
-
-export default BgmSelector

apps/web/src/pages/editing-planner/components/bgm-selector/useBgmSelector.ts

@@ -1,87 +0,0 @@
-import { useState, useRef, useCallback, useEffect } from "react"
-import { message } from "antd"
-import { getBgmPresets, type BgmPreset, type BgmCategory } from "@/api/bgm"
-
-/* ──────────── 分类标签 ──────────── */
-export const CATEGORY_LIST: {
-  key: BgmCategory | "all"
-  label: string
-  icon: string
-}[] = [
-  { key: "all", label: "全部", icon: "🎶" },
-  { key: "轻快", label: "轻快", icon: "🎉" },
-  { key: "治愈", label: "治愈", icon: "🌿" },
-  { key: "科技", label: "科技", icon: "🔬" },
-  { key: "电商", label: "电商", icon: "🛒" },
-]
-
-/**
- * BGM 选择器数据与交互 Hook
- * 封装列表加载、搜索、分类筛选、试听播放逻辑
- */
-export function useBgmSelector(open: boolean) {
-  const [presets, setPresets] = useState<BgmPreset[]>([])
-  const [loading, setLoading] = useState(false)
-  const [activeCategory, setActiveCategory] = useState<BgmCategory | "all">("all")
-  const [keyword, setKeyword] = useState("")
-  const [previewingId, setPreviewingId] = useState<string | null>(null)
-
-  const audioRef = useRef<HTMLAudioElement | null>(null)
-
-  /* ── 加载 BGM 列表 ── */
-  const loadPresets = useCallback(async () => {
-    setLoading(true)
-    try {
-      const params: { category?: string; keyword?: string } = {}
-      if (activeCategory !== "all") params.category = activeCategory
-      if (keyword.trim()) params.keyword = keyword.trim()
-      const data = await getBgmPresets(params)
-      setPresets(data)
-    } catch {
-      message.error("加载 BGM 列表失败")
-    } finally {
-      setLoading(false)
-    }
-  }, [activeCategory, keyword])
-
-  useEffect(() => {
-    if (open) loadPresets()
-  }, [open, loadPresets])
-
-  /* ── 试听 ── */
-  const handlePreview = useCallback(
-    (bgm: BgmPreset) => {
-      if (previewingId === bgm.id) {
-        audioRef.current?.pause()
-        setPreviewingId(null)
-        return
-      }
-      audioRef.current?.pause()
-      const audio = new Audio(bgm.url)
-      audioRef.current = audio
-      audio.play().catch(() => {})
-      audio.onended = () => setPreviewingId(null)
-      setPreviewingId(bgm.id)
-    },
-    [previewingId],
-  )
-
-  /* ── 停止播放（关闭/移除时调用） ── */
-  const stopPreview = useCallback(() => {
-    audioRef.current?.pause()
-    setPreviewingId(null)
-  }, [])
-
-  return {
-    presets,
-    loading,
-    activeCategory,
-    setActiveCategory,
-    keyword,
-    setKeyword,
-    previewingId,
-    loadPresets,
-    handlePreview,
-    stopPreview,
-  }
-}

apps/web/src/pages/editing-planner/hooks/useClipOperations.ts

@@ -1,238 +0,0 @@
-import { useState, useCallback, useMemo } from "react"
-import { Modal, message } from "antd"
-import type {
-  ClipData,
-  ClipType,
-  TransitionConfig,
-  SpeedConfig,
-  TtsConfig,
-  TrimConfig,
-} from "../types"
-import type { AssetItem } from "@/api/assets"
-
-interface UseClipOperationsParams {
-  clips: ClipData[]
-  setClips: (updater: (prev: ClipData[]) => ClipData[]) => void
-}
-
-/**
- * 片段操作 Hook
- * 片段增删改查、排序、裁剪、分割、转场、调速、TTS、配音选择
- */
-export const useClipOperations = ({ clips, setClips }: UseClipOperationsParams) => {
-  const [selectedClipId, setSelectedClipId] = useState<string | null>(null)
-
-  const selectedClip = useMemo(
-    () => clips.find((c) => c.id === selectedClipId) || null,
-    [clips, selectedClipId],
-  )
-
-  /* ── 选中 / 重排 / 删除 ── */
-
-  const handleClipSelect = useCallback((clipId: string) => {
-    setSelectedClipId(clipId)
-  }, [])
-
-  const handleClipReorder = useCallback(
-    (fromIdx: number, toIdx: number) => {
-      setClips((prev) => {
-        const updated = [...prev]
-        const [moved] = updated.splice(fromIdx, 1)
-        updated.splice(toIdx, 0, moved)
-        return updated.map((c, i) => ({ ...c, order: i }))
-      })
-    },
-    [setClips],
-  )
-
-  const handleClipRemove = useCallback(
-    (clipId: string) => {
-      Modal.confirm({
-        title: "删除片段",
-        content: "确定要删除这个片段吗？此操作可通过撤销恢复。",
-        okText: "删除",
-        okType: "danger",
-        cancelText: "取消",
-        onOk: () => {
-          setClips((prev) => prev.filter((c) => c.id !== clipId))
-          if (selectedClipId === clipId) setSelectedClipId(null)
-        },
-      })
-    },
-    [setClips, selectedClipId],
-  )
-
-  const handleClipUpdate = useCallback(
-    (clipId: string, data: Partial<ClipData>) => {
-      setClips((prev) => prev.map((c) => (c.id === clipId ? { ...c, ...data } : c)))
-    },
-    [setClips],
-  )
-
-  /**
-   * 添加片段（不绑定任何素材）
-   * 片段 = 时间规划 + 类型标记
-   */
-  const handleAddClip = useCallback(
-    (type: ClipType, duration: number) => {
-      const newClip: ClipData = {
-        id: `clip-${Date.now()}`,
-        type,
-        duration,
-        startOffset: 0,
-        order: clips.length,
-      }
-      setClips((prev) => [...prev, newClip])
-    },
-    [clips.length, setClips],
-  )
-
-  /* ── 裁剪 / 分割 / 重置 ── */
-
-  const handleClipTrim = useCallback(
-    (clipId: string, trimConfig: TrimConfig, newDuration: number) => {
-      setClips((prev) =>
-        prev.map((c) =>
-          c.id === clipId ? { ...c, trim_config: trimConfig, duration: newDuration } : c,
-        ),
-      )
-    },
-    [setClips],
-  )
-
-  const handleClipSplit = useCallback(
-    (clipId: string, splitRatio: number) => {
-      setClips((prev) => {
-        const idx = prev.findIndex((c) => c.id === clipId)
-        if (idx === -1) return prev
-        const clip = prev[idx]
-        const splitPoint = Math.round(clip.duration * splitRatio * 10) / 10
-        if (splitPoint < 0.5 || splitPoint >= clip.duration - 0.5) return prev
-
-        // 前半段
-        const firstHalf: ClipData = {
-          ...clip,
-          duration: splitPoint,
-          trim_config: clip.trim_config
-            ? {
-                ...clip.trim_config,
-                end_time: clip.trim_config.start_time + splitPoint,
-              }
-            : undefined,
-        }
-
-        // 后半段
-        const secondHalf: ClipData = {
-          ...clip,
-          id: `clip-${Date.now()}`,
-          duration: clip.duration - splitPoint,
-          startOffset: clip.startOffset + splitPoint,
-          trim_config: clip.trim_config
-            ? {
-                ...clip.trim_config,
-                start_time: clip.trim_config.start_time + splitPoint,
-              }
-            : undefined,
-          order: (clip.order ?? idx) + 1,
-        }
-
-        const updated = [...prev]
-        updated[idx] = firstHalf
-        updated.splice(idx + 1, 0, secondHalf)
-        return updated.map((c, i) => ({ ...c, order: i }))
-      })
-    },
-    [setClips],
-  )
-
-  const handleClipResetTrim = useCallback(
-    (clipId: string) => {
-      setClips((prev) =>
-        prev.map((c) => {
-          if (c.id !== clipId || !c.trim_config) return c
-          const originalDuration = c.trim_config.original_duration ?? c.duration
-          return {
-            ...c,
-            duration: originalDuration,
-            trim_config: undefined,
-          }
-        }),
-      )
-    },
-    [setClips],
-  )
-
-  /* ── 转场 / 调速 / TTS ── */
-
-  const handleTransitionChange = useCallback(
-    (targetClipId: string | null, config: TransitionConfig) => {
-      if (targetClipId) {
-        handleClipUpdate(targetClipId, { transition: config })
-      }
-      // 同时更新全局默认转场（供新片段使用）—— 暂未实现全局默认
-    },
-    [handleClipUpdate],
-  )
-
-  const handleSpeedChange = useCallback(
-    (targetClipId: string | null, config: SpeedConfig) => {
-      if (targetClipId) {
-        handleClipUpdate(targetClipId, { speed: config })
-      }
-    },
-    [handleClipUpdate],
-  )
-
-  const handleApplySpeedAll = useCallback(
-    (config: SpeedConfig) => {
-      setClips((prev) => prev.map((c) => ({ ...c, speed: { ...config } })))
-      message.success("已应用到所有片段")
-    },
-    [setClips],
-  )
-
-  const handleTtsChange = useCallback(
-    (targetClipId: string | null, ttsConfig: TtsConfig) => {
-      if (!targetClipId) return
-      handleClipUpdate(targetClipId, { tts_config: ttsConfig })
-    },
-    [handleClipUpdate],
-  )
-
-  /** 为片段选择配音素材 */
-  const handleClipVoiceSelect = useCallback(
-    (clipId: string, asset: AssetItem | null) => {
-      setClips((prev) =>
-        prev.map((c) =>
-          c.id === clipId
-            ? {
-                ...c,
-                voice_asset_id: asset?.id ?? undefined,
-                voice_file_url: asset?.file_url ?? undefined,
-              }
-            : c,
-        ),
-      )
-    },
-    [setClips],
-  )
-
-  return {
-    selectedClipId,
-    setSelectedClipId,
-    selectedClip,
-    handleClipSelect,
-    handleClipReorder,
-    handleClipRemove,
-    handleClipUpdate,
-    handleAddClip,
-    handleClipTrim,
-    handleClipSplit,
-    handleClipResetTrim,
-    handleTransitionChange,
-    handleSpeedChange,
-    handleApplySpeedAll,
-    handleTtsChange,
-    handleClipVoiceSelect,
-  }
-}

apps/web/src/pages/editing-planner/hooks/useClipOperations/index.ts

@@ -0,0 +1,38 @@
+import type { ClipData } from "../../types"
+import { useClipBasicOps } from "./useClipBasicOps"
+import { useClipTrim } from "./useClipTrim"
+import { useClipEffects } from "./useClipEffects"
+
+interface UseClipOperationsParams {
+  clips: ClipData[]
+  setClips: (updater: (prev: ClipData[]) => ClipData[]) => void
+}
+
+/**
+ * 片段操作 Hook
+ * 片段增删改查、排序、裁剪、分割、转场、调速、TTS、配音选择
+ */
+export const useClipOperations = ({ clips, setClips }: UseClipOperationsParams) => {
+  const basicOps = useClipBasicOps({ clips, setClips })
+  const trimOps = useClipTrim({ setClips })
+  const effectOps = useClipEffects({ setClips, handleClipUpdate: basicOps.handleClipUpdate })
+
+  return {
+    selectedClipId: basicOps.selectedClipId,
+    setSelectedClipId: basicOps.setSelectedClipId,
+    selectedClip: basicOps.selectedClip,
+    handleClipSelect: basicOps.handleClipSelect,
+    handleClipReorder: basicOps.handleClipReorder,
+    handleClipRemove: basicOps.handleClipRemove,
+    handleClipUpdate: basicOps.handleClipUpdate,
+    handleAddClip: basicOps.handleAddClip,
+    handleClipTrim: trimOps.handleClipTrim,
+    handleClipSplit: trimOps.handleClipSplit,
+    handleClipResetTrim: trimOps.handleClipResetTrim,
+    handleTransitionChange: effectOps.handleTransitionChange,
+    handleSpeedChange: effectOps.handleSpeedChange,
+    handleApplySpeedAll: effectOps.handleApplySpeedAll,
+    handleTtsChange: effectOps.handleTtsChange,
+    handleClipVoiceSelect: effectOps.handleClipVoiceSelect,
+  }
+}

apps/web/src/pages/editing-planner/hooks/useClipOperations/useClipBasicOps.ts

@@ -0,0 +1,86 @@
+import { useState, useMemo, useCallback } from "react"
+import { Modal } from "antd"
+import type { ClipData, ClipType } from "../../types"
+
+interface UseClipBasicOpsParams {
+  clips: ClipData[]
+  setClips: (updater: (prev: ClipData[]) => ClipData[]) => void
+}
+
+/**
+ * 片段基础操作 Hook
+ * 选中状态、增删改查、重排
+ */
+export function useClipBasicOps({ clips, setClips }: UseClipBasicOpsParams) {
+  const [selectedClipId, setSelectedClipId] = useState<string | null>(null)
+
+  const selectedClip = useMemo(
+    () => clips.find((c) => c.id === selectedClipId) || null,
+    [clips, selectedClipId],
+  )
+
+  const handleClipSelect = useCallback((clipId: string) => {
+    setSelectedClipId(clipId)
+  }, [])
+
+  const handleClipReorder = useCallback(
+    (fromIdx: number, toIdx: number) => {
+      setClips((prev) => {
+        const updated = [...prev]
+        const [moved] = updated.splice(fromIdx, 1)
+        updated.splice(toIdx, 0, moved)
+        return updated.map((c, i) => ({ ...c, order: i }))
+      })
+    },
+    [setClips],
+  )
+
+  const handleClipRemove = useCallback(
+    (clipId: string) => {
+      Modal.confirm({
+        title: "删除片段",
+        content: "确定要删除这个片段吗？此操作可通过撤销恢复。",
+        okText: "删除",
+        okType: "danger",
+        cancelText: "取消",
+        onOk: () => {
+          setClips((prev) => prev.filter((c) => c.id !== clipId))
+          if (selectedClipId === clipId) setSelectedClipId(null)
+        },
+      })
+    },
+    [setClips, selectedClipId],
+  )
+
+  const handleClipUpdate = useCallback(
+    (clipId: string, data: Partial<ClipData>) => {
+      setClips((prev) => prev.map((c) => (c.id === clipId ? { ...c, ...data } : c)))
+    },
+    [setClips],
+  )
+
+  const handleAddClip = useCallback(
+    (type: ClipType, duration: number) => {
+      const newClip: ClipData = {
+        id: `clip-${Date.now()}`,
+        type,
+        duration,
+        startOffset: 0,
+        order: clips.length,
+      }
+      setClips((prev) => [...prev, newClip])
+    },
+    [clips.length, setClips],
+  )
+
+  return {
+    selectedClipId,
+    setSelectedClipId,
+    selectedClip,
+    handleClipSelect,
+    handleClipReorder,
+    handleClipRemove,
+    handleClipUpdate,
+    handleAddClip,
+  }
+}

apps/web/src/pages/editing-planner/hooks/useClipOperations/useClipEffects.ts

@@ -0,0 +1,74 @@
+import { useCallback } from "react"
+import { message } from "antd"
+import type { ClipData, TransitionConfig, SpeedConfig, TtsConfig } from "../../types"
+import type { AssetItem } from "@/api/assets"
+
+interface UseClipEffectsParams {
+  setClips: (updater: (prev: ClipData[]) => ClipData[]) => void
+  handleClipUpdate: (clipId: string, data: Partial<ClipData>) => void
+}
+
+/**
+ * 片段效果操作 Hook
+ * 转场、调速、TTS、配音选择
+ */
+export function useClipEffects({ setClips, handleClipUpdate }: UseClipEffectsParams) {
+  const handleTransitionChange = useCallback(
+    (targetClipId: string | null, config: TransitionConfig) => {
+      if (targetClipId) {
+        handleClipUpdate(targetClipId, { transition: config })
+      }
+    },
+    [handleClipUpdate],
+  )
+
+  const handleSpeedChange = useCallback(
+    (targetClipId: string | null, config: SpeedConfig) => {
+      if (targetClipId) {
+        handleClipUpdate(targetClipId, { speed: config })
+      }
+    },
+    [handleClipUpdate],
+  )
+
+  const handleApplySpeedAll = useCallback(
+    (config: SpeedConfig) => {
+      setClips((prev) => prev.map((c) => ({ ...c, speed: { ...config } })))
+      message.success("已应用到所有片段")
+    },
+    [setClips],
+  )
+
+  const handleTtsChange = useCallback(
+    (targetClipId: string | null, ttsConfig: TtsConfig) => {
+      if (!targetClipId) return
+      handleClipUpdate(targetClipId, { tts_config: ttsConfig })
+    },
+    [handleClipUpdate],
+  )
+
+  const handleClipVoiceSelect = useCallback(
+    (clipId: string, asset: AssetItem | null) => {
+      setClips((prev) =>
+        prev.map((c) =>
+          c.id === clipId
+            ? {
+                ...c,
+                voice_asset_id: asset?.id ?? undefined,
+                voice_file_url: asset?.file_url ?? undefined,
+              }
+            : c,
+        ),
+      )
+    },
+    [setClips],
+  )
+
+  return {
+    handleTransitionChange,
+    handleSpeedChange,
+    handleApplySpeedAll,
+    handleTtsChange,
+    handleClipVoiceSelect,
+  }
+}

apps/web/src/pages/editing-planner/hooks/useClipOperations/useClipTrim.ts

@@ -0,0 +1,89 @@
+import { useCallback } from "react"
+import type { ClipData, TrimConfig } from "../../types"
+
+interface UseClipTrimParams {
+  setClips: (updater: (prev: ClipData[]) => ClipData[]) => void
+}
+
+/**
+ * 片段裁剪分割 Hook
+ * 裁剪、分割、重置裁剪
+ */
+export function useClipTrim({ setClips }: UseClipTrimParams) {
+  const handleClipTrim = useCallback(
+    (clipId: string, trimConfig: TrimConfig, newDuration: number) => {
+      setClips((prev) =>
+        prev.map((c) =>
+          c.id === clipId ? { ...c, trim_config: trimConfig, duration: newDuration } : c,
+        ),
+      )
+    },
+    [setClips],
+  )
+
+  const handleClipSplit = useCallback(
+    (clipId: string, splitRatio: number) => {
+      setClips((prev) => {
+        const idx = prev.findIndex((c) => c.id === clipId)
+        if (idx === -1) return prev
+        const clip = prev[idx]
+        const splitPoint = Math.round(clip.duration * splitRatio * 10) / 10
+        if (splitPoint < 0.5 || splitPoint >= clip.duration - 0.5) return prev
+
+        const firstHalf: ClipData = {
+          ...clip,
+          duration: splitPoint,
+          trim_config: clip.trim_config
+            ? {
+                ...clip.trim_config,
+                end_time: clip.trim_config.start_time + splitPoint,
+              }
+            : undefined,
+        }
+
+        const secondHalf: ClipData = {
+          ...clip,
+          id: `clip-${Date.now()}`,
+          duration: clip.duration - splitPoint,
+          startOffset: clip.startOffset + splitPoint,
+          trim_config: clip.trim_config
+            ? {
+                ...clip.trim_config,
+                start_time: clip.trim_config.start_time + splitPoint,
+              }
+            : undefined,
+          order: (clip.order ?? idx) + 1,
+        }
+
+        const updated = [...prev]
+        updated[idx] = firstHalf
+        updated.splice(idx + 1, 0, secondHalf)
+        return updated.map((c, i) => ({ ...c, order: i }))
+      })
+    },
+    [setClips],
+  )
+
+  const handleClipResetTrim = useCallback(
+    (clipId: string) => {
+      setClips((prev) =>
+        prev.map((c) => {
+          if (c.id !== clipId || !c.trim_config) return c
+          const originalDuration = c.trim_config.original_duration ?? c.duration
+          return {
+            ...c,
+            duration: originalDuration,
+            trim_config: undefined,
+          }
+        }),
+      )
+    },
+    [setClips],
+  )
+
+  return {
+    handleClipTrim,
+    handleClipSplit,
+    handleClipResetTrim,
+  }
+}