style: prettier format useTimelineMenus

- Extract context menu + add clip picker logic into useTimelineMenus hook
- Extract trim drag logic into useTrimDrag hook
- Extract clip reorder drag logic into useClipDrag hook
- TimelinePanel: 597 → 317 lines (-47%)
- Add new hooks to smoke test

apps/web/src/components/voice/CloneModal.tsx

@@ -10,35 +10,357 @@
  *
  * V21 Design System — 零 antd 直接导入
  */
-import React from "react"
-import { Modal } from "@/components/ui"
-import type { CloneModalProps } from "./types/cloneModal"
-import useCloneModal from "./hooks/useCloneModal"
-import InputView from "./clone-modal/InputView"
-import ProgressView from "./clone-modal/ProgressView"
+import React, { useState, useCallback, useRef, useEffect } from "react"
+import { Modal, Button } from "@/components/ui"
+import { createVoiceClone, toVoiceClone } from "@/api/voice-clone"
+import type { VoiceClone } from "@/api/voice-clone"
+import { uploadAsset } from "@/api/assets"
 import "./clone-modal.css"
 
+/* ── 类型定义 ───────────────────────────────────────────── */
+
+type ModalPhase = "input" | "uploading" | "cloning" | "done"
+
+export interface CloneModalProps {
+  /** 弹窗是否可见 */
+  open: boolean
+  /** 关闭弹窗回调 */
+  onClose: () => void
+  /** 克隆成功回调（返回新创建的音色） */
+  onSuccess?: (voice: VoiceClone) => void
+}
+
+/* ── 进度阶段配置 ─────────────────────────────────────────── */
+
+const PROGRESS_STEPS: { key: string; label: string; icon: string }[] = [
+  { key: "uploading", label: "上传中", icon: "📤" },
+  { key: "cloning", label: "克隆中", icon: "🧬" },
+  { key: "done", label: "完成", icon: "✅" },
+]
+
+/* ── 常量 ───────────────────────────────────────────────── */
+
+const ACCEPTED_EXTENSIONS = ["mp3", "wav", "m4a"]
+const ACCEPTED_MIME = ".mp3,.wav,.m4a,audio/mpeg,audio/wav,audio/mp4"
+const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB
+
+/** 最长录制时长：5 分钟（秒） */
+const MAX_RECORD_SECONDS = 5 * 60
+
+/* ── 组件 ───────────────────────────────────────────────── */
+
 const CloneModal: React.FC<CloneModalProps> = ({ open, onClose, onSuccess }) => {
-  const {
-    phase,
-    voiceName,
-    voiceDescription,
-    selectedFile,
-    dragActive,
-    errorMessage,
-    isRecording,
-    recordTime,
-    recordedBlob,
-    canSubmit,
-    isProcessing,
-    setVoiceName,
-    setVoiceDescription,
-    setDragActive,
-    handleFileSelect,
-    handleRecordToggle,
-    handleClose,
-    handleSubmit,
-  } = useCloneModal({ open, onClose, onSuccess })
+  const [phase, setPhase] = useState<ModalPhase>("input")
+  const [voiceName, setVoiceName] = useState("")
+  const [voiceDescription, setVoiceDescription] = useState("")
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [dragActive, setDragActive] = useState(false)
+  const [errorMessage, setErrorMessage] = useState("")
+
+  // 录音状态
+  const [isRecording, setIsRecording] = useState(false)
+  const [recordTime, setRecordTime] = useState(0)
+  const [recordedBlob, setRecordedBlob] = useState<Blob | null>(null)
+
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const recordTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
+  const audioChunksRef = useRef<Blob[]>([])
+  /** 默认音色名称计数器（组件级 ref，避免多实例串号） */
+  const cloneCounterRef = useRef(1)
+
+  /** 生成下一个默认音色名称 */
+  const getNextDefaultName = useCallback((): string => {
+    const name = `我的声音 ${cloneCounterRef.current}`
+    cloneCounterRef.current += 1
+    return name
+  }, [])
+
+  /** 组件卸载时清理定时器和 MediaRecorder */
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+      if (recordTimerRef.current) clearInterval(recordTimerRef.current)
+      if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+        mediaRecorderRef.current.stop()
+      }
+    }
+  }, [])
+
+  /** 重置弹窗状态 */
+  const resetState = useCallback(() => {
+    setPhase("input")
+    setVoiceName(getNextDefaultName())
+    setVoiceDescription("")
+    setSelectedFile(null)
+    setDragActive(false)
+    setErrorMessage("")
+    setIsRecording(false)
+    setRecordTime(0)
+    setRecordedBlob(null)
+    audioChunksRef.current = []
+    if (recordTimerRef.current) {
+      clearInterval(recordTimerRef.current)
+      recordTimerRef.current = null
+    }
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+      mediaRecorderRef.current.stop()
+    }
+    mediaRecorderRef.current = null
+  }, [getNextDefaultName])
+
+  /** 关闭弹窗 */
+  const handleClose = useCallback(() => {
+    resetState()
+    onClose()
+  }, [resetState, onClose])
+
+  /** 弹窗打开时重置状态 */
+  useEffect(() => {
+    if (open) {
+      resetState()
+    }
+  }, [open, resetState])
+
+  /* ── 文件验证 ──────────────────────────────────────── */
+
+  const validateFile = (file: File): string | null => {
+    const ext = file.name.split(".").pop()?.toLowerCase()
+    if (!ext || !ACCEPTED_EXTENSIONS.includes(ext)) {
+      return "不支持的音频格式，请上传 MP3、WAV 或 M4A 文件"
+    }
+    if (file.size > MAX_FILE_SIZE) {
+      return "文件大小超过 10MB，请压缩后重试"
+    }
+    return null
+  }
+
+  /* ── 文件上传 ──────────────────────────────────────── */
+
+  const handleUploadClick = () => {
+    fileInputRef.current?.click()
+  }
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      const error = validateFile(file)
+      if (error) {
+        setErrorMessage(error)
+        setSelectedFile(null)
+      } else {
+        setErrorMessage("")
+        setSelectedFile(file)
+        // 清除录音
+        setRecordedBlob(null)
+        setIsRecording(false)
+        setRecordTime(0)
+      }
+    }
+    e.target.value = ""
+  }
+
+  /* ── 拖拽 ──────────────────────────────────────────── */
+
+  const handleDrag = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true)
+    } else if (e.type === "dragleave") {
+      setDragActive(false)
+    }
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setDragActive(false)
+    const file = e.dataTransfer.files?.[0]
+    if (file) {
+      const error = validateFile(file)
+      if (error) {
+        setErrorMessage(error)
+        setSelectedFile(null)
+      } else {
+        setErrorMessage("")
+        setSelectedFile(file)
+        setRecordedBlob(null)
+        setIsRecording(false)
+        setRecordTime(0)
+      }
+    }
+  }
+
+  /* ── 录音（真实 MediaRecorder） ───────────────────── */
+
+  const handleRecord = async () => {
+    if (isRecording) {
+      // 停止录制
+      setIsRecording(false)
+      if (recordTimerRef.current) {
+        clearInterval(recordTimerRef.current)
+        recordTimerRef.current = null
+      }
+      if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+        mediaRecorderRef.current.stop()
+      }
+    } else {
+      // 开始录制
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: true,
+        })
+        const mediaRecorder = new MediaRecorder(stream)
+        mediaRecorderRef.current = mediaRecorder
+        audioChunksRef.current = []
+
+        mediaRecorder.ondataavailable = (event) => {
+          if (event.data.size > 0) {
+            audioChunksRef.current.push(event.data)
+          }
+        }
+
+        mediaRecorder.onstop = () => {
+          const blob = new Blob(audioChunksRef.current, { type: "audio/webm" })
+          setRecordedBlob(blob)
+          // 清除上传的文件
+          setSelectedFile(null)
+          // 停止音轨
+          stream.getTracks().forEach((track) => track.stop())
+        }
+
+        mediaRecorder.start()
+        setIsRecording(true)
+        setRecordTime(0)
+        setRecordedBlob(null)
+        setErrorMessage("")
+
+        recordTimerRef.current = setInterval(() => {
+          setRecordTime((prev) => {
+            const next = prev + 1
+            if (next >= MAX_RECORD_SECONDS) {
+              // 达到 5 分钟上限，自动停止录制
+              setTimeout(() => {
+                setIsRecording(false)
+                if (recordTimerRef.current) {
+                  clearInterval(recordTimerRef.current)
+                  recordTimerRef.current = null
+                }
+                if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+                  mediaRecorderRef.current.stop()
+                }
+                setErrorMessage("已达最长录制时长（5分钟），已自动停止")
+              }, 0)
+              return MAX_RECORD_SECONDS
+            }
+            return next
+          })
+        }, 1000)
+      } catch {
+        setErrorMessage("无法访问麦克风，请检查浏览器权限设置")
+      }
+    }
+  }
+
+  /** 格式化录制时间 mm:ss */
+  const formatRecordTime = (seconds: number): string => {
+    const m = Math.floor(seconds / 60)
+    const s = seconds % 60
+    return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`
+  }
+
+  /* ── 表单验证 ──────────────────────────────────────── */
+
+  const hasAudio = selectedFile !== null || recordedBlob !== null
+
+  const validateForm = (): string | null => {
+    const name = voiceName.trim()
+    if (!name) {
+      return "请输入音色名称"
+    }
+    if (name.length < 2 || name.length > 20) {
+      return "音色名称需在 2-20 个字符之间"
+    }
+    if (!hasAudio) {
+      return "请上传音频文件或录制一段声音"
+    }
+    return null
+  }
+
+  /* ── 提交克隆 ──────────────────────────────────────── */
+
+  const handleSubmit = async () => {
+    const formError = validateForm()
+    if (formError) {
+      setErrorMessage(formError)
+      return
+    }
+
+    setErrorMessage("")
+
+    try {
+      // 阶段 1：上传音频
+      setPhase("uploading")
+
+      let fileToUpload: File
+      if (selectedFile) {
+        fileToUpload = selectedFile
+      } else {
+        // 将录音 Blob 转为 File
+        fileToUpload = new File([recordedBlob!], `recorded-${Date.now()}.webm`, {
+          type: "audio/webm",
+        })
+      }
+
+      const formData = new FormData()
+      formData.append("file", fileToUpload)
+      const uploadResult = await uploadAsset(formData)
+
+      // 阶段 2：克隆
+      setPhase("cloning")
+      const result = await createVoiceClone({
+        name: voiceName.trim(),
+        description: voiceDescription.trim() || undefined,
+        audio_url: uploadResult.url,
+      })
+
+      // 阶段 3：完成
+      setPhase("done")
+
+      // 2秒后自动关闭
+      timerRef.current = setTimeout(() => {
+        onSuccess?.(toVoiceClone(result))
+        handleClose()
+      }, 2000)
+    } catch (err) {
+      setPhase("input")
+      setErrorMessage(err instanceof Error ? err.message : "克隆失败，请重试")
+    }
+  }
+
+  /* ── 计算属性 ──────────────────────────────────────── */
+
+  const canSubmit = voiceName.trim().length >= 2 && voiceName.trim().length <= 20 && hasAudio
+
+  const isProcessing = phase === "uploading" || phase === "cloning"
+
+  /** 当前进度索引 */
+  const getProgressIndex = (): number => {
+    switch (phase) {
+      case "uploading":
+        return 0
+      case "cloning":
+        return 1
+      case "done":
+        return 2
+      default:
+        return -1
+    }
+  }
+
+  const progressIndex = getProgressIndex()
 
   return (
     <Modal
@@ -51,30 +373,228 @@ const CloneModal: React.FC<CloneModalProps> = ({ open, onClose, onSuccess }) =>
       maskClosable={!isProcessing}
       keyboard={!isProcessing}
     >
-      {/* 输入阶段 */}
+      {/* ── 输入阶段 ──────────────────────────────────── */}
       {phase === "input" && (
-        <InputView
-          voiceName={voiceName}
-          voiceDescription={voiceDescription}
-          selectedFile={selectedFile}
-          dragActive={dragActive}
-          isRecording={isRecording}
-          recordTime={recordTime}
-          recordedBlob={recordedBlob}
-          errorMessage={errorMessage}
-          canSubmit={canSubmit}
-          onVoiceNameChange={setVoiceName}
-          onVoiceDescChange={setVoiceDescription}
-          onDragActiveChange={setDragActive}
-          onFileSelect={handleFileSelect}
-          onRecordToggle={handleRecordToggle}
-          onClose={handleClose}
-          onSubmit={handleSubmit}
-        />
+        <div className="xx-clonemodal-body">
+          {/* 步骤引导 */}
+          <div className="xx-clonemodal-steps">
+            <div className="xx-clonemodal-step xx-clonemodal-step--active">
+              <div className="xx-clonemodal-step-number">1</div>
+              <span className="xx-clonemodal-step-label">上传/录制音频</span>
+            </div>
+            <div className="xx-clonemodal-step-connector" />
+            <div className="xx-clonemodal-step">
+              <div className="xx-clonemodal-step-number">2</div>
+              <span className="xx-clonemodal-step-label">填写信息</span>
+            </div>
+            <div className="xx-clonemodal-step-connector" />
+            <div className="xx-clonemodal-step">
+              <div className="xx-clonemodal-step-number">3</div>
+              <span className="xx-clonemodal-step-label">提交克隆</span>
+            </div>
+          </div>
+
+          {/* 音色名称 */}
+          <div className="xx-clonemodal-field">
+            <label className="xx-clonemodal-label">
+              音色名称 <span className="xx-clonemodal-required">*</span>
+            </label>
+            <input
+              type="text"
+              className="xx-clonemodal-input"
+              value={voiceName}
+              onChange={(e) => setVoiceName(e.target.value)}
+              placeholder="输入音色名称（2-20字符）"
+              maxLength={20}
+            />
+            <div className="xx-clonemodal-char-count">{voiceName.length}/20</div>
+          </div>
+
+          {/* 上传区域 */}
+          <div className="xx-clonemodal-field">
+            <label className="xx-clonemodal-label">上传音频</label>
+            <div
+              className={`xx-clonemodal-upload-zone${dragActive ? " xx-clonemodal-upload-zone--active" : ""}${selectedFile ? " xx-clonemodal-upload-zone--has-file" : ""}`}
+              onClick={handleUploadClick}
+              onDragEnter={handleDrag}
+              onDragOver={handleDrag}
+              onDragLeave={handleDrag}
+              onDrop={handleDrop}
+            >
+              <div className="xx-clonemodal-upload-icon">{selectedFile ? "📄" : "🎵"}</div>
+              <p className="xx-clonemodal-upload-title">
+                {selectedFile ? selectedFile.name : "拖拽音频文件到此处，或点击上传"}
+              </p>
+              <p className="xx-clonemodal-upload-hint">支持 MP3、WAV、M4A 格式，最大 10MB</p>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept={ACCEPTED_MIME}
+                style={{ display: "none" }}
+                onChange={handleFileChange}
+              />
+            </div>
+          </div>
+
+          {/* 或分隔 */}
+          <div className="xx-clonemodal-divider">
+            <div className="xx-clonemodal-divider-line" />
+            <span className="xx-clonemodal-divider-text">或</span>
+            <div className="xx-clonemodal-divider-line" />
+          </div>
+
+          {/* 录制区域 */}
+          <div className="xx-clonemodal-field">
+            <label className="xx-clonemodal-label">直接录制</label>
+            <div className="xx-clonemodal-record-area">
+              <div className="xx-clonemodal-record-info">
+                <p className="xx-clonemodal-record-hint">
+                  {isRecording
+                    ? `录制中 ${formatRecordTime(recordTime)}`
+                    : recordedBlob
+                      ? `已录制 ${formatRecordTime(recordTime)}`
+                      : "点击按钮开始录制（最长 5 分钟）"}
+                </p>
+                {isRecording && (
+                  <div className="xx-clonemodal-record-wave">
+                    <span className="xx-clonemodal-record-wave-bar" />
+                    <span className="xx-clonemodal-record-wave-bar" />
+                    <span className="xx-clonemodal-record-wave-bar" />
+                    <span className="xx-clonemodal-record-wave-bar" />
+                    <span className="xx-clonemodal-record-wave-bar" />
+                  </div>
+                )}
+              </div>
+              <button
+                type="button"
+                className={`xx-clonemodal-record-btn${isRecording ? " xx-clonemodal-record-btn--recording" : ""}`}
+                onClick={handleRecord}
+                title={isRecording ? "停止录制" : "开始录制"}
+              >
+                {isRecording ? "⏹" : "🎙️"}
+              </button>
+            </div>
+          </div>
+
+          {/* 音色描述 */}
+          <div className="xx-clonemodal-field">
+            <label className="xx-clonemodal-label">音色描述</label>
+            <textarea
+              className="xx-clonemodal-textarea"
+              value={voiceDescription}
+              onChange={(e) => setVoiceDescription(e.target.value)}
+              placeholder="可选，描述这个音色的特点（最多100字符）"
+              maxLength={100}
+              rows={3}
+            />
+            <div className="xx-clonemodal-char-count">{voiceDescription.length}/100</div>
+          </div>
+
+          {/* 错误提示 */}
+          {errorMessage && (
+            <div className="xx-clonemodal-error">
+              <span className="xx-clonemodal-error-icon">⚠️</span>
+              <span>{errorMessage}</span>
+            </div>
+          )}
+
+          {/* 提示 */}
+          <div className="xx-clonemodal-tip">
+            <span className="xx-clonemodal-tip-icon">💡</span>
+            <span>建议上传 10 秒 ~ 3 分钟的清晰语音，环境安静、语速均匀效果最佳</span>
+          </div>
+
+          {/* 底部按钮 */}
+          <div className="xx-clonemodal-footer">
+            <Button buttonType="ghost" onClick={handleClose}>
+              取消
+            </Button>
+            <Button buttonType="primary" disabled={!canSubmit} onClick={handleSubmit}>
+              🎤 开始克隆
+            </Button>
+          </div>
+        </div>
       )}
 
-      {/* 进度 / 完成阶段 */}
-      {phase !== "input" && <ProgressView phase={phase} />}
+      {/* ── 进度阶段（上传中 / 克隆中） ──────────────── */}
+      {isProcessing && (
+        <div className="xx-clonemodal-progress-body">
+          {/* 步骤指示器 */}
+          <div className="xx-clonemodal-steps-progress">
+            {PROGRESS_STEPS.map((step, idx) => {
+              const isActive = idx === progressIndex
+              const isDone = idx < progressIndex
+              const stepClass = [
+                "xx-clonemodal-step-progress",
+                isActive ? "xx-clonemodal-step-progress--active" : "",
+                isDone ? "xx-clonemodal-step-progress--done" : "",
+              ]
+                .filter(Boolean)
+                .join(" ")
+
+              return (
+                <React.Fragment key={step.key}>
+                  {idx > 0 && (
+                    <div
+                      className={`xx-clonemodal-step-connector${isDone ? " xx-clonemodal-step-connector--done" : ""}`}
+                    />
+                  )}
+                  <div className={stepClass}>
+                    <div className="xx-clonemodal-step-icon">{isDone ? "✓" : step.icon}</div>
+                    <span className="xx-clonemodal-step-label">{step.label}</span>
+                  </div>
+                </React.Fragment>
+              )
+            })}
+          </div>
+
+          {/* 当前阶段描述 */}
+          <div className="xx-clonemodal-progress-info">
+            {phase === "uploading" && (
+              <>
+                <div className="xx-clonemodal-progress-spinner" />
+                <p className="xx-clonemodal-progress-text">正在上传音频文件…</p>
+                <p className="xx-clonemodal-progress-sub">请稍候，正在将音频上传至服务器</p>
+              </>
+            )}
+            {phase === "cloning" && (
+              <>
+                <div className="xx-clonemodal-progress-spinner xx-clonemodal-progress-spinner--cloning" />
+                <p className="xx-clonemodal-progress-text">AI 正在克隆你的声音…</p>
+                <p className="xx-clonemodal-progress-sub">正在分析声音特征，生成专属音色模型</p>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* ── 完成阶段 ──────────────────────────────────── */}
+      {phase === "done" && (
+        <div className="xx-clonemodal-progress-body">
+          {/* 步骤指示器（全部完成） */}
+          <div className="xx-clonemodal-steps-progress">
+            {PROGRESS_STEPS.map((step, idx) => (
+              <React.Fragment key={step.key}>
+                {idx > 0 && (
+                  <div className="xx-clonemodal-step-connector xx-clonemodal-step-connector--done" />
+                )}
+                <div className="xx-clonemodal-step-progress xx-clonemodal-step-progress--done">
+                  <div className="xx-clonemodal-step-icon">✓</div>
+                  <span className="xx-clonemodal-step-label">{step.label}</span>
+                </div>
+              </React.Fragment>
+            ))}
+          </div>
+
+          <div className="xx-clonemodal-success">
+            <div className="xx-clonemodal-success-icon">🎉</div>
+            <h3 className="xx-clonemodal-success-title">克隆已提交</h3>
+            <p className="xx-clonemodal-success-desc">
+              音色正在生成中，完成后将出现在「我的克隆」列表中
+            </p>
+          </div>
+        </div>
+      )}
     </Modal>
   )
 }

apps/web/src/components/voice/clone-modal/InputView.tsx

@@ -1,142 +0,0 @@
-import React from "react"
-import { Button } from "@/components/ui"
-import UploadZone from "./UploadZone"
-import RecordArea from "./RecordArea"
-import StepIndicator from "./StepIndicator"
-import { MAX_VOICE_NAME_LENGTH, MAX_VOICE_DESC_LENGTH } from "../constants/cloneModal"
-
-interface InputViewProps {
-  voiceName: string
-  voiceDescription: string
-  selectedFile: File | null
-  dragActive: boolean
-  isRecording: boolean
-  recordTime: number
-  recordedBlob: Blob | null
-  errorMessage: string
-  canSubmit: boolean
-  onVoiceNameChange: (value: string) => void
-  onVoiceDescChange: (value: string) => void
-  onDragActiveChange: (active: boolean) => void
-  onFileSelect: (file: File | null, error: string) => void
-  onRecordToggle: () => void
-  onClose: () => void
-  onSubmit: () => void
-}
-
-const INPUT_STEPS = ["上传/录制音频", "填写信息", "提交克隆"]
-
-const InputView: React.FC<InputViewProps> = ({
-  voiceName,
-  voiceDescription,
-  selectedFile,
-  dragActive,
-  isRecording,
-  recordTime,
-  recordedBlob,
-  errorMessage,
-  canSubmit,
-  onVoiceNameChange,
-  onVoiceDescChange,
-  onDragActiveChange,
-  onFileSelect,
-  onRecordToggle,
-  onClose,
-  onSubmit,
-}) => {
-  return (
-    <div className="xx-clonemodal-body">
-      {/* 步骤引导 */}
-      <StepIndicator currentStep={0} steps={INPUT_STEPS} />
-
-      {/* 音色名称 */}
-      <div className="xx-clonemodal-field">
-        <label className="xx-clonemodal-label">
-          音色名称 <span className="xx-clonemodal-required">*</span>
-        </label>
-        <input
-          type="text"
-          className="xx-clonemodal-input"
-          value={voiceName}
-          onChange={(e) => onVoiceNameChange(e.target.value)}
-          placeholder="输入音色名称（2-20字符）"
-          maxLength={MAX_VOICE_NAME_LENGTH}
-        />
-        <div className="xx-clonemodal-char-count">
-          {voiceName.length}/{MAX_VOICE_NAME_LENGTH}
-        </div>
-      </div>
-
-      {/* 上传区域 */}
-      <div className="xx-clonemodal-field">
-        <label className="xx-clonemodal-label">上传音频</label>
-        <UploadZone
-          selectedFile={selectedFile}
-          dragActive={dragActive}
-          onDragActiveChange={onDragActiveChange}
-          onFileSelect={onFileSelect}
-        />
-      </div>
-
-      {/* 或分隔 */}
-      <div className="xx-clonemodal-divider">
-        <div className="xx-clonemodal-divider-line" />
-        <span className="xx-clonemodal-divider-text">或</span>
-        <div className="xx-clonemodal-divider-line" />
-      </div>
-
-      {/* 录制区域 */}
-      <div className="xx-clonemodal-field">
-        <label className="xx-clonemodal-label">直接录制</label>
-        <RecordArea
-          isRecording={isRecording}
-          recordTime={recordTime}
-          recordedBlob={recordedBlob}
-          onRecordToggle={onRecordToggle}
-        />
-      </div>
-
-      {/* 音色描述 */}
-      <div className="xx-clonemodal-field">
-        <label className="xx-clonemodal-label">音色描述</label>
-        <textarea
-          className="xx-clonemodal-textarea"
-          value={voiceDescription}
-          onChange={(e) => onVoiceDescChange(e.target.value)}
-          placeholder="可选，描述这个音色的特点（最多100字符）"
-          maxLength={MAX_VOICE_DESC_LENGTH}
-          rows={3}
-        />
-        <div className="xx-clonemodal-char-count">
-          {voiceDescription.length}/{MAX_VOICE_DESC_LENGTH}
-        </div>
-      </div>
-
-      {/* 错误提示 */}
-      {errorMessage && (
-        <div className="xx-clonemodal-error">
-          <span className="xx-clonemodal-error-icon">⚠️</span>
-          <span>{errorMessage}</span>
-        </div>
-      )}
-
-      {/* 提示 */}
-      <div className="xx-clonemodal-tip">
-        <span className="xx-clonemodal-tip-icon">💡</span>
-        <span>建议上传 10 秒 ~ 3 分钟的清晰语音，环境安静、语速均匀效果最佳</span>
-      </div>
-
-      {/* 底部按钮 */}
-      <div className="xx-clonemodal-footer">
-        <Button buttonType="ghost" onClick={onClose}>
-          取消
-        </Button>
-        <Button buttonType="primary" disabled={!canSubmit} onClick={onSubmit}>
-          🎤 开始克隆
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-export default InputView

apps/web/src/components/voice/clone-modal/ProgressView.tsx

@@ -1,92 +0,0 @@
-import React from "react"
-import { PROGRESS_STEPS } from "../constants/cloneModal"
-import type { ProgressStep } from "../types/cloneModal"
-import type { ModalPhase } from "../types/cloneModal"
-
-interface ProgressViewProps {
-  phase: ModalPhase
-}
-
-const getProgressIndex = (phase: ModalPhase): number => {
-  switch (phase) {
-    case "uploading":
-      return 0
-    case "cloning":
-      return 1
-    case "done":
-      return 2
-    default:
-      return -1
-  }
-}
-
-const ProgressView: React.FC<ProgressViewProps> = ({ phase }) => {
-  const progressIndex = getProgressIndex(phase)
-  const isDone = phase === "done"
-
-  return (
-    <div className="xx-clonemodal-progress-body">
-      {/* 步骤指示器 */}
-      <div className="xx-clonemodal-steps-progress">
-        {PROGRESS_STEPS.map((step: ProgressStep, idx: number) => {
-          const isActive = idx === progressIndex && !isDone
-          const stepDone = idx < progressIndex || isDone
-          const stepClass = [
-            "xx-clonemodal-step-progress",
-            isActive ? "xx-clonemodal-step-progress--active" : "",
-            stepDone ? "xx-clonemodal-step-progress--done" : "",
-          ]
-            .filter(Boolean)
-            .join(" ")
-
-          return (
-            <React.Fragment key={step.key}>
-              {idx > 0 && (
-                <div
-                  className={`xx-clonemodal-step-connector${stepDone ? " xx-clonemodal-step-connector--done" : ""}`}
-                />
-              )}
-              <div className={stepClass}>
-                <div className="xx-clonemodal-step-icon">{stepDone ? "✓" : step.icon}</div>
-                <span className="xx-clonemodal-step-label">{step.label}</span>
-              </div>
-            </React.Fragment>
-          )
-        })}
-      </div>
-
-      {/* 完成阶段 */}
-      {isDone && (
-        <div className="xx-clonemodal-success">
-          <div className="xx-clonemodal-success-icon">🎉</div>
-          <h3 className="xx-clonemodal-success-title">克隆已提交</h3>
-          <p className="xx-clonemodal-success-desc">
-            音色正在生成中，完成后将出现在「我的克隆」列表中
-          </p>
-        </div>
-      )}
-
-      {/* 进行中阶段 */}
-      {!isDone && (
-        <div className="xx-clonemodal-progress-info">
-          {phase === "uploading" && (
-            <>
-              <div className="xx-clonemodal-progress-spinner" />
-              <p className="xx-clonemodal-progress-text">正在上传音频文件…</p>
-              <p className="xx-clonemodal-progress-sub">请稍候，正在将音频上传至服务器</p>
-            </>
-          )}
-          {phase === "cloning" && (
-            <>
-              <div className="xx-clonemodal-progress-spinner xx-clonemodal-progress-spinner--cloning" />
-              <p className="xx-clonemodal-progress-text">AI 正在克隆你的声音…</p>
-              <p className="xx-clonemodal-progress-sub">正在分析声音特征，生成专属音色模型</p>
-            </>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default ProgressView

apps/web/src/components/voice/clone-modal/RecordArea.tsx

@@ -1,49 +0,0 @@
-import React from "react"
-import { formatRecordTime } from "../utils/cloneModal"
-
-interface RecordAreaProps {
-  isRecording: boolean
-  recordTime: number
-  recordedBlob: Blob | null
-  onRecordToggle: () => void
-}
-
-const RecordArea: React.FC<RecordAreaProps> = ({
-  isRecording,
-  recordTime,
-  recordedBlob,
-  onRecordToggle,
-}) => {
-  const getHintText = () => {
-    if (isRecording) return `录制中 ${formatRecordTime(recordTime)}`
-    if (recordedBlob) return `已录制 ${formatRecordTime(recordTime)}`
-    return "点击按钮开始录制（最长 5 分钟）"
-  }
-
-  return (
-    <div className="xx-clonemodal-record-area">
-      <div className="xx-clonemodal-record-info">
-        <p className="xx-clonemodal-record-hint">{getHintText()}</p>
-        {isRecording && (
-          <div className="xx-clonemodal-record-wave">
-            <span className="xx-clonemodal-record-wave-bar" />
-            <span className="xx-clonemodal-record-wave-bar" />
-            <span className="xx-clonemodal-record-wave-bar" />
-            <span className="xx-clonemodal-record-wave-bar" />
-            <span className="xx-clonemodal-record-wave-bar" />
-          </div>
-        )}
-      </div>
-      <button
-        type="button"
-        className={`xx-clonemodal-record-btn${isRecording ? " xx-clonemodal-record-btn--recording" : ""}`}
-        onClick={onRecordToggle}
-        title={isRecording ? "停止录制" : "开始录制"}
-      >
-        {isRecording ? "⏹" : "🎙️"}
-      </button>
-    </div>
-  )
-}
-
-export default RecordArea

apps/web/src/components/voice/clone-modal/StepIndicator.tsx

@@ -1,30 +0,0 @@
-import React from "react"
-
-interface StepIndicatorProps {
-  currentStep: number
-  steps: string[]
-}
-
-/**
- * 输入阶段顶部的步骤引导（数字步骤）
- */
-const StepIndicator: React.FC<StepIndicatorProps> = ({ currentStep, steps }) => {
-  return (
-    <div className="xx-clonemodal-steps">
-      {steps.map((label, idx) => {
-        const isActive = idx <= currentStep
-        return (
-          <React.Fragment key={idx}>
-            {idx > 0 && <div className="xx-clonemodal-step-connector" />}
-            <div className={`xx-clonemodal-step${isActive ? " xx-clonemodal-step--active" : ""}`}>
-              <div className="xx-clonemodal-step-number">{idx + 1}</div>
-              <span className="xx-clonemodal-step-label">{label}</span>
-            </div>
-          </React.Fragment>
-        )
-      })}
-    </div>
-  )
-}
-
-export default StepIndicator

apps/web/src/components/voice/clone-modal/UploadZone.tsx

@@ -1,79 +0,0 @@
-import React, { useRef } from "react"
-import { ACCEPTED_MIME } from "../constants/cloneModal"
-import { validateFile } from "../utils/cloneModal"
-
-interface UploadZoneProps {
-  selectedFile: File | null
-  dragActive: boolean
-  onDragActiveChange: (active: boolean) => void
-  onFileSelect: (file: File | null, error: string) => void
-}
-
-const UploadZone: React.FC<UploadZoneProps> = ({
-  selectedFile,
-  dragActive,
-  onDragActiveChange,
-  onFileSelect,
-}) => {
-  const fileInputRef = useRef<HTMLInputElement>(null)
-
-  const handleUploadClick = () => {
-    fileInputRef.current?.click()
-  }
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (file) {
-      const error = validateFile(file)
-      onFileSelect(error ? null : file, error || "")
-    }
-    e.target.value = ""
-  }
-
-  const handleDrag = (e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    if (e.type === "dragenter" || e.type === "dragover") {
-      onDragActiveChange(true)
-    } else if (e.type === "dragleave") {
-      onDragActiveChange(false)
-    }
-  }
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    onDragActiveChange(false)
-    const file = e.dataTransfer.files?.[0]
-    if (file) {
-      const error = validateFile(file)
-      onFileSelect(error ? null : file, error || "")
-    }
-  }
-
-  return (
-    <div
-      className={`xx-clonemodal-upload-zone${dragActive ? " xx-clonemodal-upload-zone--active" : ""}${selectedFile ? " xx-clonemodal-upload-zone--has-file" : ""}`}
-      onClick={handleUploadClick}
-      onDragEnter={handleDrag}
-      onDragOver={handleDrag}
-      onDragLeave={handleDrag}
-      onDrop={handleDrop}
-    >
-      <div className="xx-clonemodal-upload-icon">{selectedFile ? "📄" : "🎵"}</div>
-      <p className="xx-clonemodal-upload-title">
-        {selectedFile ? selectedFile.name : "拖拽音频文件到此处，或点击上传"}
-      </p>
-      <p className="xx-clonemodal-upload-hint">支持 MP3、WAV、M4A 格式，最大 10MB</p>
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept={ACCEPTED_MIME}
-        style={{ display: "none" }}
-        onChange={handleFileChange}
-      />
-    </div>
-  )
-}
-
-export default UploadZone

apps/web/src/components/voice/constants/cloneModal.ts

@@ -1,29 +0,0 @@
-import type { ProgressStep } from "../types/cloneModal"
-
-/** 进度阶段配置 */
-export const PROGRESS_STEPS: ProgressStep[] = [
-  { key: "uploading", label: "上传中", icon: "📤" },
-  { key: "cloning", label: "克隆中", icon: "🧬" },
-  { key: "done", label: "完成", icon: "✅" },
-]
-
-/** 支持的音频扩展名 */
-export const ACCEPTED_EXTENSIONS = ["mp3", "wav", "m4a"]
-
-/** input accept 属性值 */
-export const ACCEPTED_MIME = ".mp3,.wav,.m4a,audio/mpeg,audio/wav,audio/mp4"
-
-/** 最大文件大小：10MB */
-export const MAX_FILE_SIZE = 10 * 1024 * 1024
-
-/** 最长录制时长（秒）：5 分钟 */
-export const MAX_RECORD_SECONDS = 5 * 60
-
-/** 音色名称最小长度 */
-export const MIN_VOICE_NAME_LENGTH = 2
-
-/** 音色名称最大长度 */
-export const MAX_VOICE_NAME_LENGTH = 20
-
-/** 音色描述最大长度 */
-export const MAX_VOICE_DESC_LENGTH = 100

apps/web/src/components/voice/hooks/useAudioRecorder.ts

@@ -1,119 +0,0 @@
-import { useState, useRef, useCallback, useEffect } from "react"
-import { MAX_RECORD_SECONDS } from "../constants/cloneModal"
-
-interface UseAudioRecorderReturn {
-  isRecording: boolean
-  recordTime: number
-  recordedBlob: Blob | null
-  toggleRecording: () => void
-  resetRecording: () => void
-}
-
-/**
- * 录音 Hook —— 封装 MediaRecorder 录音逻辑
- */
-const useAudioRecorder = (): UseAudioRecorderReturn => {
-  const [isRecording, setIsRecording] = useState(false)
-  const [recordTime, setRecordTime] = useState(0)
-  const [recordedBlob, setRecordedBlob] = useState<Blob | null>(null)
-
-  const recordTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
-  const audioChunksRef = useRef<Blob[]>([])
-
-  const stopRecording = useCallback(() => {
-    setIsRecording(false)
-    if (recordTimerRef.current) {
-      clearInterval(recordTimerRef.current)
-      recordTimerRef.current = null
-    }
-    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
-      mediaRecorderRef.current.stop()
-    }
-  }, [])
-
-  const startRecording = useCallback(async () => {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
-      const mediaRecorder = new MediaRecorder(stream)
-      mediaRecorderRef.current = mediaRecorder
-      audioChunksRef.current = []
-
-      mediaRecorder.ondataavailable = (event) => {
-        if (event.data.size > 0) {
-          audioChunksRef.current.push(event.data)
-        }
-      }
-
-      mediaRecorder.onstop = () => {
-        const blob = new Blob(audioChunksRef.current, { type: "audio/webm" })
-        setRecordedBlob(blob)
-        stream.getTracks().forEach((track) => track.stop())
-      }
-
-      mediaRecorder.start()
-      setIsRecording(true)
-      setRecordTime(0)
-      setRecordedBlob(null)
-
-      recordTimerRef.current = setInterval(() => {
-        setRecordTime((prev) => {
-          const next = prev + 1
-          if (next >= MAX_RECORD_SECONDS) {
-            setTimeout(() => {
-              stopRecording()
-            }, 0)
-            return MAX_RECORD_SECONDS
-          }
-          return next
-        })
-      }, 1000)
-    } catch {
-      // 错误由调用方通过其他机制提示
-      setIsRecording(false)
-    }
-  }, [stopRecording])
-
-  const toggleRecording = useCallback(() => {
-    if (isRecording) {
-      stopRecording()
-    } else {
-      startRecording()
-    }
-  }, [isRecording, startRecording, stopRecording])
-
-  const resetRecording = useCallback(() => {
-    setIsRecording(false)
-    setRecordTime(0)
-    setRecordedBlob(null)
-    audioChunksRef.current = []
-    if (recordTimerRef.current) {
-      clearInterval(recordTimerRef.current)
-      recordTimerRef.current = null
-    }
-    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
-      mediaRecorderRef.current.stop()
-    }
-    mediaRecorderRef.current = null
-  }, [])
-
-  // 卸载时清理
-  useEffect(() => {
-    return () => {
-      if (recordTimerRef.current) clearInterval(recordTimerRef.current)
-      if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
-        mediaRecorderRef.current.stop()
-      }
-    }
-  }, [])
-
-  return {
-    isRecording,
-    recordTime,
-    recordedBlob,
-    toggleRecording,
-    resetRecording,
-  }
-}
-
-export default useAudioRecorder

apps/web/src/components/voice/hooks/useCloneModal.ts

@@ -1,215 +0,0 @@
-import { useState, useRef, useCallback, useEffect } from "react"
-import { createVoiceClone, toVoiceClone } from "@/api/voice-clone"
-import { uploadAsset } from "@/api/assets"
-import type { ModalPhase, CloneModalProps } from "../types/cloneModal"
-import { MIN_VOICE_NAME_LENGTH, MAX_VOICE_NAME_LENGTH } from "../constants/cloneModal"
-import useAudioRecorder from "./useAudioRecorder"
-
-interface UseCloneModalReturn {
-  phase: ModalPhase
-  voiceName: string
-  voiceDescription: string
-  selectedFile: File | null
-  dragActive: boolean
-  errorMessage: string
-  isRecording: boolean
-  recordTime: number
-  recordedBlob: Blob | null
-  canSubmit: boolean
-  isProcessing: boolean
-  setVoiceName: (value: string) => void
-  setVoiceDescription: (value: string) => void
-  setDragActive: (active: boolean) => void
-  handleFileSelect: (file: File | null, error: string) => void
-  handleRecordToggle: () => void
-  handleClose: () => void
-  handleSubmit: () => void
-}
-
-/**
- * 音色克隆弹窗主业务 Hook
- */
-const useCloneModal = ({ open, onClose, onSuccess }: CloneModalProps): UseCloneModalReturn => {
-  const [phase, setPhase] = useState<ModalPhase>("input")
-  const [voiceName, setVoiceName] = useState("")
-  const [voiceDescription, setVoiceDescription] = useState("")
-  const [selectedFile, setSelectedFile] = useState<File | null>(null)
-  const [dragActive, setDragActive] = useState(false)
-  const [errorMessage, setErrorMessage] = useState("")
-
-  const { isRecording, recordTime, recordedBlob, toggleRecording, resetRecording } =
-    useAudioRecorder()
-
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  /** 默认音色名称计数器 */
-  const cloneCounterRef = useRef(1)
-
-  const getNextDefaultName = useCallback((): string => {
-    const name = `我的声音 ${cloneCounterRef.current}`
-    cloneCounterRef.current += 1
-    return name
-  }, [])
-
-  const hasAudio = selectedFile !== null || recordedBlob !== null
-
-  const canSubmit =
-    voiceName.trim().length >= MIN_VOICE_NAME_LENGTH &&
-    voiceName.trim().length <= MAX_VOICE_NAME_LENGTH &&
-    hasAudio
-
-  const isProcessing = phase === "uploading" || phase === "cloning"
-
-  /** 重置弹窗状态 */
-  const resetState = useCallback(() => {
-    setPhase("input")
-    setVoiceName(getNextDefaultName())
-    setVoiceDescription("")
-    setSelectedFile(null)
-    setDragActive(false)
-    setErrorMessage("")
-    resetRecording()
-  }, [getNextDefaultName, resetRecording])
-
-  /** 关闭弹窗 */
-  const handleClose = useCallback(() => {
-    resetState()
-    onClose()
-  }, [resetState, onClose])
-
-  /** 弹窗打开时重置状态 */
-  useEffect(() => {
-    if (open) {
-      resetState()
-    }
-  }, [open, resetState])
-
-  /** 组件卸载时清理定时器 */
-  useEffect(() => {
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current)
-    }
-  }, [])
-
-  /** 选择文件（来自上传或拖拽） */
-  const handleFileSelect = useCallback(
-    (file: File | null, error: string) => {
-      if (error) {
-        setErrorMessage(error)
-        setSelectedFile(null)
-      } else {
-        setErrorMessage("")
-        setSelectedFile(file)
-        // 清除录音
-        resetRecording()
-      }
-    },
-    [resetRecording],
-  )
-
-  /** 录音切换 */
-  const handleRecordToggle = useCallback(() => {
-    setErrorMessage("")
-    if (isRecording) {
-      toggleRecording()
-    } else {
-      // 开始录制前清除已选文件
-      setSelectedFile(null)
-      toggleRecording()
-    }
-  }, [isRecording, toggleRecording])
-
-  /** 表单验证 */
-  const validateForm = useCallback((): string | null => {
-    const name = voiceName.trim()
-    if (!name) {
-      return "请输入音色名称"
-    }
-    if (name.length < MIN_VOICE_NAME_LENGTH || name.length > MAX_VOICE_NAME_LENGTH) {
-      return `音色名称需在 ${MIN_VOICE_NAME_LENGTH}-${MAX_VOICE_NAME_LENGTH} 个字符之间`
-    }
-    if (!hasAudio) {
-      return "请上传音频文件或录制一段声音"
-    }
-    return null
-  }, [voiceName, hasAudio])
-
-  /** 提交克隆 */
-  const handleSubmit = useCallback(async () => {
-    const formError = validateForm()
-    if (formError) {
-      setErrorMessage(formError)
-      return
-    }
-
-    setErrorMessage("")
-
-    try {
-      // 阶段 1：上传音频
-      setPhase("uploading")
-
-      let fileToUpload: File
-      if (selectedFile) {
-        fileToUpload = selectedFile
-      } else {
-        fileToUpload = new File([recordedBlob!], `recorded-${Date.now()}.webm`, {
-          type: "audio/webm",
-        })
-      }
-
-      const formData = new FormData()
-      formData.append("file", fileToUpload)
-      const uploadResult = await uploadAsset(formData)
-
-      // 阶段 2：克隆
-      setPhase("cloning")
-      const result = await createVoiceClone({
-        name: voiceName.trim(),
-        description: voiceDescription.trim() || undefined,
-        audio_url: uploadResult.url,
-      })
-
-      // 阶段 3：完成
-      setPhase("done")
-
-      // 2秒后自动关闭
-      timerRef.current = setTimeout(() => {
-        onSuccess?.(toVoiceClone(result))
-        handleClose()
-      }, 2000)
-    } catch (err) {
-      setPhase("input")
-      setErrorMessage(err instanceof Error ? err.message : "克隆失败，请重试")
-    }
-  }, [
-    validateForm,
-    selectedFile,
-    recordedBlob,
-    voiceName,
-    voiceDescription,
-    onSuccess,
-    handleClose,
-  ])
-
-  return {
-    phase,
-    voiceName,
-    voiceDescription,
-    selectedFile,
-    dragActive,
-    errorMessage,
-    isRecording,
-    recordTime,
-    recordedBlob,
-    canSubmit,
-    isProcessing,
-    setVoiceName,
-    setVoiceDescription,
-    setDragActive,
-    handleFileSelect,
-    handleRecordToggle,
-    handleClose,
-    handleSubmit,
-  }
-}
-
-export default useCloneModal

apps/web/src/components/voice/types/cloneModal.ts

@@ -1,20 +0,0 @@
-import type { VoiceClone } from "@/api/voice-clone"
-
-/** 弹窗阶段 */
-export type ModalPhase = "input" | "uploading" | "cloning" | "done"
-
-export interface CloneModalProps {
-  /** 弹窗是否可见 */
-  open: boolean
-  /** 关闭弹窗回调 */
-  onClose: () => void
-  /** 克隆成功回调（返回新创建的音色） */
-  onSuccess?: (voice: VoiceClone) => void
-}
-
-/** 进度步骤项 */
-export interface ProgressStep {
-  key: string
-  label: string
-  icon: string
-}

apps/web/src/components/voice/utils/cloneModal.ts

@@ -1,25 +0,0 @@
-import { ACCEPTED_EXTENSIONS, MAX_FILE_SIZE } from "../constants/cloneModal"
-
-/**
- * 格式化录制时间 mm:ss
- */
-export const formatRecordTime = (seconds: number): string => {
-  const m = Math.floor(seconds / 60)
-  const s = seconds % 60
-  return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`
-}
-
-/**
- * 验证上传的音频文件
- * @returns 错误信息，null 表示验证通过
- */
-export const validateFile = (file: File): string | null => {
-  const ext = file.name.split(".").pop()?.toLowerCase()
-  if (!ext || !ACCEPTED_EXTENSIONS.includes(ext)) {
-    return "不支持的音频格式，请上传 MP3、WAV 或 M4A 文件"
-  }
-  if (file.size > MAX_FILE_SIZE) {
-    return "文件大小超过 10MB，请压缩后重试"
-  }
-  return null
-}

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

@@ -8,21 +8,13 @@
  * - 拖动时实时显示裁剪预览（入点/出点/时长）
  * - 右键片段弹出菜单：分割 / 恢复原始长度 / 删除
  */
-import React, { useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo } from "react"
+import React, { useState, useRef, useCallback, useEffect } from "react"
 import type { ClipData, ClipType, TrimConfig } from "../types"
-import {
-  DEFAULT_PIXELS_PER_SECOND,
-  MIN_PIXELS_PER_SECOND,
-  MAX_PIXELS_PER_SECOND,
-  ZOOM_STEP,
-  MIN_TRIM_DURATION,
-  DEFAULT_ADD_DURATION,
-  MIN_ADD_DURATION,
-  MAX_ADD_DURATION,
-  TRACK_GAP,
-  ADD_PICKER_WIDTH,
-} from "../constants/timeline"
+import { DEFAULT_PIXELS_PER_SECOND } from "../constants/timeline"
 import { formatTime } from "../utils/timeline"
+import { useClipDrag } from "../hooks/useClipDrag"
+import { useTrimDrag } from "../hooks/useTrimDrag"
+import { useTimelineMenus } from "../hooks/useTimelineMenus"
 import { ClipCard } from "./timeline/ClipCard"
 import { TimeRuler } from "./timeline/TimeRuler"
 import { AddClipPicker } from "./timeline/AddClipPicker"
@@ -55,25 +47,6 @@ interface TimelinePanelProps {
   totalDuration?: number
 }
 
-/** 裁剪拖拽方向 */
-type TrimDirection = "left" | "right"
-
-/** 裁剪拖拽状态 */
-interface TrimDragState {
-  clipId: string
-  direction: TrimDirection
-  startX: number
-  originalTrim: TrimConfig
-  originalDuration: number
-}
-
-/** 右键菜单状态 */
-interface ContextMenuState {
-  x: number
-  y: number
-  clipId: string
-}
-
 const TimelinePanel: React.FC<TimelinePanelProps> = ({
   clips,
   selectedClipId,
@@ -91,143 +64,51 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
   onSeek,
   totalDuration: totalDurationProp,
 }) => {
-  const [dragIdx, setDragIdx] = useState<number | null>(null)
-  const [dragOverIdx, setDragOverIdx] = useState<number | null>(null)
-  const dragRef = useRef<number | null>(null)
-  const [showAddPicker, setShowAddPicker] = useState(false)
-  const pickerRef = useRef<HTMLDivElement>(null)
-  const addCardRef = useRef<HTMLDivElement>(null)
-  const [pickerPos, setPickerPos] = useState<{ top: number; right: number }>({
-    top: 0,
-    right: 0,
-  })
+  /* ── 缩放 & 时长 ── */
+  const pps = pixelsPerSecond ?? DEFAULT_PIXELS_PER_SECOND
+  const totalDuration = totalDurationProp ?? clips.reduce((s, c) => s + c.duration, 0)
 
-  /* ── 裁剪拖拽状态 ── */
-  const [trimDrag, setTrimDrag] = useState<TrimDragState | null>(null)
-  const [trimPreview, setTrimPreview] = useState<{
-    clipId: string
-    startTime: number
-    endTime: number
-    duration: number
-    x: number
-    y: number
-  } | null>(null)
+  /* ── 裁剪拖拽 ── */
+  const { trimDrag, trimPreview, handleTrimHandleMouseDown } = useTrimDrag(clips, pps, onClipTrim)
 
-  /* ── 右键菜单 ── */
-  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null)
-  const contextMenuRef = useRef<HTMLDivElement>(null)
+  /* ── 片段拖拽排序 ── */
+  const {
+    dragIdx,
+    dragOverIdx,
+    handleDragStart,
+    handleDragOver,
+    handleDragEnd,
+    handleDrop,
+    handleEmptyDragOver,
+  } = useClipDrag(onClipReorder, !!trimDrag)
 
-  /* ── 悬停的片段 ID（显示裁剪手柄） ── */
-  const [hoveredClipId, setHoveredClipId] = useState<string | null>(null)
+  /* ── 菜单 & 面板 ── */
+  const {
+    contextMenu,
+    contextMenuRef,
+    handleContextMenu,
+    handleContextSplit,
+    handleContextResetTrim,
+    handleContextDelete,
+    showAddPicker,
+    pickerRef,
+    addCardRef,
+    pickerPos,
+    availableTypes,
+    addType,
+    addDuration,
+    setAddType,
+    setAddDuration,
+    handleTogglePicker,
+    handleConfirmAdd,
+    hoveredClipId,
+    setHoveredClipId,
+  } = useTimelineMenus(clips, currentMode, onAddClip, onClipSplit, onClipResetTrim, onClipRemove)
 
   /* ── 播放头拖拽状态 ── */
   const [playheadDragging, setPlayheadDragging] = useState(false)
   const trackRef = useRef<HTMLDivElement>(null)
 
-  /* ── 根据模式决定可选类型 ── */
-  const availableTypes: ClipType[] = useMemo(
-    () =>
-      currentMode === "voice_over" ? ["voice"] : currentMode === "pip" ? ["pip"] : ["voice", "pip"], // voice_pip / one_take / 默认
-    [currentMode],
-  )
-
-  /* ── 默认添加类型：跟随模式 ── */
-  const defaultAddType: ClipType = useMemo(() => {
-    if (currentMode === "voice_over") return "voice"
-    if (currentMode === "pip") return "pip"
-    return "voice"
-  }, [currentMode])
-
-  /* ── "+" 卡片：类型+时长选择状态 ── */
-  const [addType, setAddType] = useState<ClipType>(defaultAddType)
-  const [addDuration, setAddDuration] = useState<number>(DEFAULT_ADD_DURATION)
-
-  /* ── 模式切换时自动同步默认添加类型 ── */
-  useEffect(() => {
-    if (!availableTypes.includes(addType)) {
-      setAddType(defaultAddType)
-    }
-  }, [currentMode, addType, availableTypes, defaultAddType])
-
-  /* ── 计算 picker 初始位置 ── */
-  const updatePickerPosition = useCallback(() => {
-    if (!addCardRef.current) return
-    const rect = addCardRef.current.getBoundingClientRect()
-    const vw = window.innerWidth
-    const roughHeight = 180
-    let top = rect.top - TRACK_GAP - roughHeight
-    if (top < 8) top = 8
-    let right = vw - rect.right
-    if (rect.right - ADD_PICKER_WIDTH < 8) {
-      right = vw - ADD_PICKER_WIDTH - 8
-    }
-    setPickerPos({ top, right })
-  }, [])
-
-  const handleTogglePicker = () => {
-    if (!showAddPicker) {
-      const defaultType =
-        currentMode === "pip" ? "pip" : currentMode === "voice_over" ? "voice" : "voice"
-      setAddType(defaultType)
-      updatePickerPosition()
-    }
-    setShowAddPicker((v) => !v)
-  }
-
-  /* ── 渲染后精确边界校正 ── */
-  useLayoutEffect(() => {
-    if (!showAddPicker || !pickerRef.current || !addCardRef.current) return
-    const pickerEl = pickerRef.current
-    const addRect = addCardRef.current.getBoundingClientRect()
-    const pickerH = pickerEl.offsetHeight
-    const vh = window.innerHeight
-    const vw = window.innerWidth
-    let top = addRect.top - TRACK_GAP - pickerH
-    if (top < 8) {
-      top = addRect.bottom + TRACK_GAP
-      if (top + pickerH > vh - 8) {
-        top = vh - 8 - pickerH
-        if (top < 8) top = 8
-      }
-    }
-    let right = vw - addRect.right
-    const pickerRect = pickerEl.getBoundingClientRect()
-    if (pickerRect.left < 8) {
-      right = vw - ADD_PICKER_WIDTH - 8
-    }
-    setPickerPos({ top, right })
-  }, [showAddPicker])
-
-  /* ── 点击外部关闭添加面板 ── */
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (pickerRef.current && !pickerRef.current.contains(e.target as Node)) {
-        setShowAddPicker(false)
-      }
-    }
-    if (showAddPicker) {
-      document.addEventListener("mousedown", handleClickOutside)
-    }
-    return () => document.removeEventListener("mousedown", handleClickOutside)
-  }, [showAddPicker])
-
-  /* ── 点击外部关闭右键菜单 ── */
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
-        setContextMenu(null)
-      }
-    }
-    if (contextMenu) {
-      document.addEventListener("mousedown", handleClickOutside)
-    }
-    return () => document.removeEventListener("mousedown", handleClickOutside)
-  }, [contextMenu])
-
-  /* ── 缩放 & 时长 ── */
-  const pps = pixelsPerSecond ?? DEFAULT_PIXELS_PER_SECOND
-  const totalDuration = totalDurationProp ?? clips.reduce((s, c) => s + c.duration, 0)
-
   /* ── 播放头拖拽全局 mousemove/mouseup ── */
   useEffect(() => {
     if (!playheadDragging) return
@@ -271,165 +152,6 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
     setPlayheadDragging(true)
   }, [])
 
-  /* ── 确认添加片段 ── */
-  const handleConfirmAdd = () => {
-    onAddClip(addType, addDuration)
-    setShowAddPicker(false)
-  }
-
-  /* ── 片段拖拽排序 ── */
-  const handleDragStart = (e: React.DragEvent, idx: number) => {
-    // 如果正在裁剪拖拽，不允许排序拖拽
-    if (trimDrag) return
-    dragRef.current = idx
-    setDragIdx(idx)
-    e.dataTransfer.setData("application/x-clip-drag", String(idx))
-    e.dataTransfer.effectAllowed = "move"
-  }
-
-  const handleDragOver = (e: React.DragEvent, idx: number) => {
-    e.preventDefault()
-    e.dataTransfer.dropEffect = "move"
-    setDragOverIdx(idx)
-  }
-
-  const handleDragEnd = () => {
-    dragRef.current = null
-    setDragIdx(null)
-    setDragOverIdx(null)
-  }
-
-  const handleDrop = (e: React.DragEvent, toIdx: number) => {
-    e.preventDefault()
-    setDragOverIdx(null)
-    const fromStr = e.dataTransfer.getData("application/x-clip-drag")
-    if (fromStr !== "") {
-      const fromIdx = Number(fromStr)
-      if (fromIdx !== toIdx) {
-        onClipReorder(fromIdx, toIdx)
-      }
-    }
-  }
-
-  /* ── 空轨道区域不接受素材拖入 ── */
-  const handleEmptyDragOver = (e: React.DragEvent) => {
-    e.preventDefault()
-  }
-
-  /* ── 裁剪手柄拖拽 ── */
-  const handleTrimHandleMouseDown = useCallback(
-    (e: React.MouseEvent, clipId: string, direction: TrimDirection) => {
-      e.preventDefault()
-      e.stopPropagation()
-      const clip = clips.find((c) => c.id === clipId)
-      if (!clip) return
-
-      const trim: TrimConfig = clip.trim_config ?? {
-        start_time: 0,
-        end_time: clip.duration,
-        original_duration: clip.duration,
-      }
-
-      setTrimDrag({
-        clipId,
-        direction,
-        startX: e.clientX,
-        originalTrim: { ...trim },
-        originalDuration: clip.duration,
-      })
-    },
-    [clips],
-  )
-
-  /* ── 裁剪拖拽全局 mousemove/mouseup ── */
-  useEffect(() => {
-    if (!trimDrag) return
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const dx = e.clientX - trimDrag.startX
-      const dtSec = dx / pps
-      const clip = clips.find((c) => c.id === trimDrag.clipId)
-      if (!clip) return
-
-      const origTrim = trimDrag.originalTrim
-      const origDur = origTrim.original_duration ?? trimDrag.originalDuration
-      let newStart = origTrim.start_time
-      let newEnd = origTrim.end_time
-
-      if (trimDrag.direction === "left") {
-        // 左手柄：调整入点
-        newStart = Math.max(0, Math.min(origTrim.start_time + dtSec, newEnd - MIN_TRIM_DURATION))
-      } else {
-        // 右手柄：调整出点
-        newEnd = Math.max(
-          origTrim.start_time + MIN_TRIM_DURATION,
-          Math.min(origTrim.end_time + dtSec, origDur),
-        )
-      }
-
-      const newDuration = Math.round((newEnd - newStart) * 10) / 10
-
-      setTrimPreview({
-        clipId: trimDrag.clipId,
-        startTime: Math.round(newStart * 10) / 10,
-        endTime: Math.round(newEnd * 10) / 10,
-        duration: newDuration,
-        x: e.clientX,
-        y: e.clientY,
-      })
-    }
-
-    const handleMouseUp = () => {
-      if (trimPreview && trimPreview.clipId === trimDrag.clipId && onClipTrim) {
-        const newTrim: TrimConfig = {
-          start_time: trimPreview.startTime,
-          end_time: trimPreview.endTime,
-          original_duration: trimDrag.originalTrim.original_duration ?? trimDrag.originalDuration,
-        }
-        onClipTrim(trimDrag.clipId, newTrim, trimPreview.duration)
-      }
-      setTrimDrag(null)
-      setTrimPreview(null)
-    }
-
-    document.addEventListener("mousemove", handleMouseMove)
-    document.addEventListener("mouseup", handleMouseUp)
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove)
-      document.removeEventListener("mouseup", handleMouseUp)
-    }
-  }, [trimDrag, trimPreview, clips, onClipTrim, pps])
-
-  /* ── 右键菜单 ── */
-  const handleContextMenu = useCallback((e: React.MouseEvent, clipId: string) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setContextMenu({ x: e.clientX, y: e.clientY, clipId })
-  }, [])
-
-  /* ── 右键菜单操作 ── */
-  const handleContextSplit = useCallback(() => {
-    if (!contextMenu) return
-    if (onClipSplit) {
-      onClipSplit(contextMenu.clipId, 0.5) // 在中间分割
-    }
-    setContextMenu(null)
-  }, [contextMenu, onClipSplit])
-
-  const handleContextResetTrim = useCallback(() => {
-    if (!contextMenu) return
-    if (onClipResetTrim) {
-      onClipResetTrim(contextMenu.clipId)
-    }
-    setContextMenu(null)
-  }, [contextMenu, onClipResetTrim])
-
-  const handleContextDelete = useCallback(() => {
-    if (!contextMenu) return
-    onClipRemove(contextMenu.clipId)
-    setContextMenu(null)
-  }, [contextMenu, onClipRemove])
-
   return (
     <div className="ep-timeline-area">
       {/* 时间线头部 */}
@@ -443,7 +165,7 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
           <div className="ep-timeline-zoom">
             <button
               className="ep-zoom-btn"
-              onClick={() => onZoomChange?.(Math.max(MIN_PIXELS_PER_SECOND, pps - ZOOM_STEP))}
+              onClick={() => onZoomChange?.(Math.max(10, pps - 10))}
               title="缩小"
             >
               −
@@ -451,15 +173,15 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
             <input
               type="range"
               className="ep-zoom-slider"
-              min={MIN_PIXELS_PER_SECOND}
-              max={MAX_PIXELS_PER_SECOND}
+              min={10}
+              max={120}
               step={5}
               value={pps}
               onChange={(e) => onZoomChange?.(Number(e.target.value))}
             />
             <button
               className="ep-zoom-btn"
-              onClick={() => onZoomChange?.(Math.min(MAX_PIXELS_PER_SECOND, pps + ZOOM_STEP))}
+              onClick={() => onZoomChange?.(Math.min(120, pps + 10))}
               title="放大"
             >
               +
@@ -583,8 +305,6 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
           availableTypes={availableTypes}
           addType={addType}
           addDuration={addDuration}
-          minDuration={MIN_ADD_DURATION}
-          maxDuration={MAX_ADD_DURATION}
           onTypeChange={setAddType}
           onDurationChange={setAddDuration}
           onConfirm={handleConfirmAdd}

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

@@ -0,0 +1,64 @@
+import { useState, useCallback } from "react"
+
+/**
+ * 片段拖拽排序 Hook
+ * 支持 HTML5 原生拖拽，实时高亮拖拽位置
+ */
+export const useClipDrag = (
+  onClipReorder: (fromIdx: number, toIdx: number) => void,
+  disabled?: boolean,
+) => {
+  const [dragIdx, setDragIdx] = useState<number | null>(null)
+  const [dragOverIdx, setDragOverIdx] = useState<number | null>(null)
+
+  const handleDragStart = useCallback(
+    (e: React.DragEvent, idx: number) => {
+      if (disabled) return
+      setDragIdx(idx)
+      e.dataTransfer.setData("application/x-clip-drag", String(idx))
+      e.dataTransfer.effectAllowed = "move"
+    },
+    [disabled],
+  )
+
+  const handleDragOver = useCallback((e: React.DragEvent, idx: number) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = "move"
+    setDragOverIdx(idx)
+  }, [])
+
+  const handleDragEnd = useCallback(() => {
+    setDragIdx(null)
+    setDragOverIdx(null)
+  }, [])
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent, toIdx: number) => {
+      e.preventDefault()
+      setDragOverIdx(null)
+      const fromStr = e.dataTransfer.getData("application/x-clip-drag")
+      if (fromStr !== "") {
+        const fromIdx = Number(fromStr)
+        if (fromIdx !== toIdx) {
+          onClipReorder(fromIdx, toIdx)
+        }
+      }
+      setDragIdx(null)
+    },
+    [onClipReorder],
+  )
+
+  const handleEmptyDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+  }, [])
+
+  return {
+    dragIdx,
+    dragOverIdx,
+    handleDragStart,
+    handleDragOver,
+    handleDragEnd,
+    handleDrop,
+    handleEmptyDragOver,
+  }
+}

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

@@ -0,0 +1,192 @@
+import { useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect } from "react"
+import type { ClipData, ClipType } from "../types"
+import { DEFAULT_ADD_DURATION, ADD_PICKER_WIDTH, TRACK_GAP } from "../constants/timeline"
+
+interface ContextMenuState {
+  x: number
+  y: number
+  clipId: string
+}
+
+/**
+ * 时间线菜单 Hook
+ * 管理右键菜单和添加片段面板的状态与交互
+ */
+export const useTimelineMenus = (
+  _clips: ClipData[],
+  currentMode: string,
+  onAddClip: (type: ClipType, duration: number) => void,
+  onClipSplit?: (clipId: string, splitRatio: number) => void,
+  onClipResetTrim?: (clipId: string) => void,
+  onClipRemove?: (clipId: string) => void,
+) => {
+  /* ── 右键菜单 ── */
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null)
+  const contextMenuRef = useRef<HTMLDivElement>(null)
+
+  /* ── 添加片段面板 ── */
+  const [showAddPicker, setShowAddPicker] = useState(false)
+  const pickerRef = useRef<HTMLDivElement>(null)
+  const addCardRef = useRef<HTMLDivElement>(null)
+  const [pickerPos, setPickerPos] = useState<{ top: number; right: number }>({ top: 0, right: 0 })
+
+  /* ── 悬停的片段 ID（显示裁剪手柄） ── */
+  const [hoveredClipId, setHoveredClipId] = useState<string | null>(null)
+
+  /* ── 根据模式决定可选类型 ── */
+  const availableTypes: ClipType[] = useMemo(
+    () =>
+      currentMode === "voice_over" ? ["voice"] : currentMode === "pip" ? ["pip"] : ["voice", "pip"],
+    [currentMode],
+  )
+
+  /* ── 默认添加类型：跟随模式 ── */
+  const defaultAddType: ClipType = useMemo(() => {
+    if (currentMode === "voice_over") return "voice"
+    if (currentMode === "pip") return "pip"
+    return "voice"
+  }, [currentMode])
+
+  /* ── "+" 卡片：类型+时长选择状态 ── */
+  const [addType, setAddType] = useState<ClipType>(defaultAddType)
+  const [addDuration, setAddDuration] = useState<number>(DEFAULT_ADD_DURATION)
+
+  /* ── 模式切换时自动同步默认添加类型 ── */
+  useEffect(() => {
+    if (!availableTypes.includes(addType)) {
+      setAddType(defaultAddType)
+    }
+  }, [currentMode, addType, availableTypes, defaultAddType])
+
+  /* ── 计算 picker 初始位置 ── */
+  const updatePickerPosition = useCallback(() => {
+    if (!addCardRef.current) return
+    const rect = addCardRef.current.getBoundingClientRect()
+    const vw = window.innerWidth
+    const roughHeight = 180
+    let top = rect.top - TRACK_GAP - roughHeight
+    if (top < 8) top = 8
+    let right = vw - rect.right
+    if (rect.right - ADD_PICKER_WIDTH < 8) {
+      right = vw - ADD_PICKER_WIDTH - 8
+    }
+    setPickerPos({ top, right })
+  }, [])
+
+  const handleTogglePicker = useCallback(() => {
+    if (!showAddPicker) {
+      setAddType(defaultAddType)
+      updatePickerPosition()
+    }
+    setShowAddPicker((v) => !v)
+  }, [showAddPicker, defaultAddType, updatePickerPosition])
+
+  /* ── 渲染后精确边界校正 ── */
+  useLayoutEffect(() => {
+    if (!showAddPicker || !pickerRef.current || !addCardRef.current) return
+    const pickerEl = pickerRef.current
+    const addRect = addCardRef.current.getBoundingClientRect()
+    const pickerH = pickerEl.offsetHeight
+    const vh = window.innerHeight
+    const vw = window.innerWidth
+
+    let top = addRect.top - TRACK_GAP - pickerH
+    if (top < 8) {
+      top = addRect.bottom + TRACK_GAP
+      if (top + pickerH > vh - 8) {
+        top = vh - 8 - pickerH
+        if (top < 8) top = 8
+      }
+    }
+
+    let right = vw - addRect.right
+    const pickerRect = pickerEl.getBoundingClientRect()
+    if (pickerRect.left < 8) {
+      right = vw - ADD_PICKER_WIDTH - 8
+    }
+
+    setPickerPos({ top, right })
+  }, [showAddPicker])
+
+  /* ── 点击外部关闭添加面板 ── */
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (pickerRef.current && !pickerRef.current.contains(e.target as Node)) {
+        setShowAddPicker(false)
+      }
+    }
+    if (showAddPicker) {
+      document.addEventListener("mousedown", handleClickOutside)
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside)
+  }, [showAddPicker])
+
+  /* ── 点击外部关闭右键菜单 ── */
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
+        setContextMenu(null)
+      }
+    }
+    if (contextMenu) {
+      document.addEventListener("mousedown", handleClickOutside)
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside)
+  }, [contextMenu])
+
+  /* ── 确认添加片段 ── */
+  const handleConfirmAdd = useCallback(() => {
+    onAddClip(addType, addDuration)
+    setShowAddPicker(false)
+  }, [onAddClip, addType, addDuration])
+
+  /* ── 右键菜单操作 ── */
+  const handleContextMenu = useCallback((e: React.MouseEvent, clipId: string) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setContextMenu({ x: e.clientX, y: e.clientY, clipId })
+  }, [])
+
+  const handleContextSplit = useCallback(() => {
+    if (!contextMenu) return
+    onClipSplit?.(contextMenu.clipId, 0.5)
+    setContextMenu(null)
+  }, [contextMenu, onClipSplit])
+
+  const handleContextResetTrim = useCallback(() => {
+    if (!contextMenu) return
+    onClipResetTrim?.(contextMenu.clipId)
+    setContextMenu(null)
+  }, [contextMenu, onClipResetTrim])
+
+  const handleContextDelete = useCallback(() => {
+    if (!contextMenu) return
+    onClipRemove?.(contextMenu.clipId)
+    setContextMenu(null)
+  }, [contextMenu, onClipRemove])
+
+  return {
+    // 右键菜单
+    contextMenu,
+    contextMenuRef,
+    handleContextMenu,
+    handleContextSplit,
+    handleContextResetTrim,
+    handleContextDelete,
+    // 添加面板
+    showAddPicker,
+    pickerRef,
+    addCardRef,
+    pickerPos,
+    availableTypes,
+    addType,
+    addDuration,
+    setAddType,
+    setAddDuration,
+    handleTogglePicker,
+    handleConfirmAdd,
+    // 悬停状态
+    hoveredClipId,
+    setHoveredClipId,
+  }
+}

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

@@ -0,0 +1,121 @@
+import { useState, useCallback, useEffect } from "react"
+import type { ClipData, TrimConfig } from "../types"
+
+interface TrimDragState {
+  clipId: string
+  direction: "left" | "right"
+  startX: number
+  originalTrim: TrimConfig
+  originalDuration: number
+}
+
+interface TrimPreviewState {
+  clipId: string
+  startTime: number
+  endTime: number
+  duration: number
+  x: number
+  y: number
+}
+
+const MIN_TRIM_DURATION = 1
+
+/**
+ * 裁剪拖拽 Hook
+ * 拖拽片段两端手柄调整入点/出点，实时显示预览
+ */
+export const useTrimDrag = (
+  clips: ClipData[],
+  pps: number,
+  onClipTrim?: (clipId: string, trimConfig: TrimConfig, newDuration: number) => void,
+) => {
+  const [trimDrag, setTrimDrag] = useState<TrimDragState | null>(null)
+  const [trimPreview, setTrimPreview] = useState<TrimPreviewState | null>(null)
+
+  const handleTrimHandleMouseDown = useCallback(
+    (e: React.MouseEvent, clipId: string, direction: "left" | "right") => {
+      e.preventDefault()
+      e.stopPropagation()
+      const clip = clips.find((c) => c.id === clipId)
+      if (!clip) return
+
+      const trim: TrimConfig = clip.trim_config ?? {
+        start_time: 0,
+        end_time: clip.duration,
+        original_duration: clip.duration,
+      }
+
+      setTrimDrag({
+        clipId,
+        direction,
+        startX: e.clientX,
+        originalTrim: { ...trim },
+        originalDuration: clip.duration,
+      })
+    },
+    [clips],
+  )
+
+  /* ── 裁剪拖拽全局 mousemove/mouseup ── */
+  useEffect(() => {
+    if (!trimDrag) return
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const dx = e.clientX - trimDrag.startX
+      const dtSec = dx / pps
+      const clip = clips.find((c) => c.id === trimDrag.clipId)
+      if (!clip) return
+
+      const origTrim = trimDrag.originalTrim
+      const origDur = origTrim.original_duration ?? trimDrag.originalDuration
+      let newStart = origTrim.start_time
+      let newEnd = origTrim.end_time
+
+      if (trimDrag.direction === "left") {
+        newStart = Math.max(0, Math.min(origTrim.start_time + dtSec, newEnd - MIN_TRIM_DURATION))
+      } else {
+        newEnd = Math.max(
+          origTrim.start_time + MIN_TRIM_DURATION,
+          Math.min(origTrim.end_time + dtSec, origDur),
+        )
+      }
+
+      const newDuration = Math.round((newEnd - newStart) * 10) / 10
+
+      setTrimPreview({
+        clipId: trimDrag.clipId,
+        startTime: Math.round(newStart * 10) / 10,
+        endTime: Math.round(newEnd * 10) / 10,
+        duration: newDuration,
+        x: e.clientX,
+        y: e.clientY,
+      })
+    }
+
+    const handleMouseUp = () => {
+      if (trimPreview && trimPreview.clipId === trimDrag.clipId && onClipTrim) {
+        const newTrim: TrimConfig = {
+          start_time: trimPreview.startTime,
+          end_time: trimPreview.endTime,
+          original_duration: trimDrag.originalTrim.original_duration ?? trimDrag.originalDuration,
+        }
+        onClipTrim(trimDrag.clipId, newTrim, trimPreview.duration)
+      }
+      setTrimDrag(null)
+      setTrimPreview(null)
+    }
+
+    document.addEventListener("mousemove", handleMouseMove)
+    document.addEventListener("mouseup", handleMouseUp)
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove)
+      document.removeEventListener("mouseup", handleMouseUp)
+    }
+  }, [trimDrag, trimPreview, clips, pps, onClipTrim])
+
+  return {
+    trimDrag,
+    trimPreview,
+    handleTrimHandleMouseDown,
+  }
+}

apps/web/src/test/pages/editing-planner/smoke.test.tsx

@@ -94,6 +94,9 @@ import "@/pages/editing-planner/hooks/usePipLayers"
 import "@/pages/editing-planner/hooks/useStickerItems"
 import "@/pages/editing-planner/hooks/useTtsPanel"
 import "@/pages/editing-planner/hooks/useWatermarkConfig"
+import "@/pages/editing-planner/hooks/useTimelineMenus"
+import "@/pages/editing-planner/hooks/useTrimDrag"
+import "@/pages/editing-planner/hooks/useClipDrag"
 
 describe("EditingPlanner module smoke test", () => {
   it("should load all editing-planner modules", () => {