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

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

导入路径保持向后兼容

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,
+  }
+}

apps/web/src/pages/voices/components/UploadVoiceModal.tsx

@@ -1,21 +1,8 @@
-/**
- * 上传音频弹窗
- *
- * 子组件目录: upload-voice/
- * - UploadDragger: 拖拽上传区
- * - SelectedFileInfo: 已选文件信息
- * - UploadProgress: 上传进度条
- * - UploadFormFields: 表单区域（名称/性别/描述）
- * - UploadActions: 底部操作按钮
- */
 import React from "react"
-import { Modal } from "antd"
+import { UploadOutlined, SoundOutlined } from "@ant-design/icons"
+import { Modal, Upload, message } from "antd"
 import { type VoiceGender } from "@/pages/voices/types"
-import UploadDragger from "./upload-voice/UploadDragger"
-import SelectedFileInfo from "./upload-voice/SelectedFileInfo"
-import UploadProgress from "./upload-voice/UploadProgress"
-import UploadFormFields from "./upload-voice/UploadFormFields"
-import UploadActions from "./upload-voice/UploadActions"
+import { formatFileSize } from "@/pages/voices/utils/format"
 
 export interface UploadVoiceModalProps {
   open: boolean
@@ -33,6 +20,7 @@ export interface UploadVoiceModalProps {
   onUpload: () => void
 }
 
+/** 上传音频弹窗 */
 const UploadVoiceModal: React.FC<UploadVoiceModalProps> = ({
   open,
   uploadFile,
@@ -48,21 +36,17 @@ const UploadVoiceModal: React.FC<UploadVoiceModalProps> = ({
   onDescChange,
   onUpload,
 }) => {
-  const isUploading = uploadProgress !== null
-
-  const handleClose = () => {
-    if (isUploading) return // 上传中不可关闭
-    onClose()
-  }
-
   return (
     <Modal
       title="上传音频"
       open={open}
-      onCancel={handleClose}
+      onCancel={() => {
+        if (uploadProgress !== null) return // 上传中不可关闭
+        onClose()
+      }}
       footer={null}
       width={520}
-      maskClosable={!isUploading}
+      maskClosable={uploadProgress === null}
     >
       <div
         style={{
@@ -73,37 +57,270 @@ const UploadVoiceModal: React.FC<UploadVoiceModalProps> = ({
         }}
       >
         {/* 拖拽上传区 */}
-        <UploadDragger
-          disabled={isUploading}
-          onFileSelect={onFileSelect}
-          onFileRemove={onFileRemove}
-        />
+        <Upload.Dragger
+          accept="audio/*"
+          maxCount={1}
+          beforeUpload={(file) => {
+            onFileSelect(file)
+            return false
+          }}
+          onRemove={() => {
+            onFileRemove()
+          }}
+          showUploadList={false}
+          disabled={uploadProgress !== null}
+        >
+          <p
+            style={{
+              fontSize: 32,
+              color: "var(--primary-color)",
+              marginBottom: 8,
+            }}
+          >
+            <UploadOutlined />
+          </p>
+          <p style={{ fontSize: 14, fontWeight: 500, margin: "0 0 4px" }}>
+            点击或拖拽音频文件到此处
+          </p>
+          <p
+            style={{
+              fontSize: 12,
+              color: "var(--text-secondary)",
+              margin: 0,
+            }}
+          >
+            支持 MP3、WAV、AAC、FLAC 等格式，最大 200MB
+          </p>
+        </Upload.Dragger>
 
         {/* 已选文件信息 */}
-        {uploadFile && <SelectedFileInfo file={uploadFile} />}
+        {uploadFile && (
+          <div
+            style={{
+              padding: "10px 12px",
+              background: "var(--bg-secondary)",
+              borderRadius: 8,
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+            }}
+          >
+            <SoundOutlined style={{ fontSize: 18, color: "var(--primary-color)" }} />
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div
+                style={{
+                  fontSize: 13,
+                  fontWeight: 500,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {uploadFile.name}
+              </div>
+              <div style={{ fontSize: 11, color: "var(--text-secondary)" }}>
+                {formatFileSize(uploadFile.size)}
+              </div>
+            </div>
+          </div>
+        )}
 
         {/* 上传进度 */}
-        {isUploading && <UploadProgress progress={uploadProgress!} />}
+        {uploadProgress !== null && (
+          <div style={{ textAlign: "center", padding: "8px 0" }}>
+            <div
+              style={{
+                fontSize: 22,
+                fontWeight: 700,
+                color: "var(--primary-color)",
+              }}
+            >
+              {uploadProgress}%
+            </div>
+            <div style={{ fontSize: 12, color: "var(--text-secondary)" }}>
+              {uploadProgress < 100 ? "上传中..." : "处理中..."}
+            </div>
+            <div
+              style={{
+                height: 4,
+                background: "var(--bg-tertiary)",
+                borderRadius: 2,
+                marginTop: 8,
+                overflow: "hidden",
+              }}
+            >
+              <div
+                style={{
+                  height: "100%",
+                  width: `${uploadProgress}%`,
+                  background: "var(--primary-color)",
+                  borderRadius: 2,
+                  transition: "width 0.3s ease",
+                }}
+              />
+            </div>
+          </div>
+        )}
 
-        {/* 表单字段 */}
-        <UploadFormFields
-          name={uploadName}
-          gender={uploadGender}
-          description={uploadDesc}
-          disabled={isUploading}
-          onNameChange={onNameChange}
-          onGenderChange={onGenderChange}
-          onDescriptionChange={onDescChange}
-        />
+        {/* 名称 */}
+        <div>
+          <div
+            style={{
+              fontSize: 13,
+              color: "var(--text-secondary)",
+              marginBottom: 6,
+            }}
+          >
+            素材名称
+          </div>
+          <input
+            value={uploadName}
+            onChange={(e) => onNameChange(e.target.value)}
+            placeholder="输入素材名称"
+            maxLength={100}
+            disabled={uploadProgress !== null}
+            style={{
+              width: "100%",
+              padding: "8px 12px",
+              border: "1px solid var(--border-color)",
+              borderRadius: 8,
+              fontSize: 13,
+              background: "var(--bg-primary)",
+              color: "var(--text-primary)",
+              outline: "none",
+            }}
+          />
+        </div>
+
+        {/* 性别选择 */}
+        <div>
+          <div
+            style={{
+              fontSize: 13,
+              color: "var(--text-secondary)",
+              marginBottom: 6,
+            }}
+          >
+            音色性别
+          </div>
+          <div style={{ display: "flex", gap: 8 }}>
+            {(["female", "male", "child"] as VoiceGender[]).map((g) => (
+              <button
+                key={g}
+                type="button"
+                onClick={() => onGenderChange(g)}
+                disabled={uploadProgress !== null}
+                style={{
+                  flex: 1,
+                  padding: "6px 0",
+                  borderRadius: 8,
+                  border: `1px solid ${uploadGender === g ? "var(--primary-color)" : "var(--border-color)"}`,
+                  background: uploadGender === g ? "var(--primary-soft)" : "transparent",
+                  color: uploadGender === g ? "var(--primary-color)" : "var(--text-secondary)",
+                  fontSize: 13,
+                  fontWeight: uploadGender === g ? 600 : 400,
+                  cursor: uploadProgress !== null ? "not-allowed" : "pointer",
+                  transition: "all 0.2s",
+                }}
+              >
+                {g === "female" ? "女声" : g === "male" ? "男声" : "童声"}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* 描述 */}
+        <div>
+          <div
+            style={{
+              fontSize: 13,
+              color: "var(--text-secondary)",
+              marginBottom: 6,
+            }}
+          >
+            音色描述（可选）
+          </div>
+          <textarea
+            value={uploadDesc}
+            onChange={(e) => onDescChange(e.target.value)}
+            placeholder="描述这个音色的特点..."
+            maxLength={500}
+            rows={2}
+            disabled={uploadProgress !== null}
+            style={{
+              width: "100%",
+              padding: "8px 12px",
+              border: "1px solid var(--border-color)",
+              borderRadius: 8,
+              fontSize: 13,
+              background: "var(--bg-primary)",
+              color: "var(--text-primary)",
+              outline: "none",
+              resize: "vertical",
+              fontFamily: "inherit",
+            }}
+          />
+        </div>
 
         {/* 操作按钮 */}
-        <UploadActions
-          hasFile={!!uploadFile}
-          hasName={!!uploadName.trim()}
-          uploading={isUploading}
-          onCancel={onClose}
-          onUpload={onUpload}
-        />
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+            gap: 10,
+            paddingTop: 4,
+          }}
+        >
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={uploadProgress !== null}
+            style={{
+              padding: "8px 20px",
+              borderRadius: 8,
+              border: "1px solid var(--border-color)",
+              background: "transparent",
+              fontSize: 13,
+              cursor: uploadProgress !== null ? "not-allowed" : "pointer",
+              color: "var(--text-secondary)",
+            }}
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              if (!uploadFile) {
+                message.warning("请先选择音频文件")
+                return
+              }
+              if (!uploadName.trim()) {
+                message.warning("请输入素材名称")
+                return
+              }
+              onUpload()
+            }}
+            disabled={!uploadFile || !uploadName.trim() || uploadProgress !== null}
+            style={{
+              padding: "8px 20px",
+              borderRadius: 8,
+              border: "none",
+              background:
+                !uploadFile || !uploadName.trim() || uploadProgress !== null
+                  ? "var(--text-tertiary)"
+                  : "var(--primary-color)",
+              color: "#fff",
+              fontSize: 13,
+              fontWeight: 600,
+              cursor:
+                !uploadFile || !uploadName.trim() || uploadProgress !== null
+                  ? "not-allowed"
+                  : "pointer",
+            }}
+          >
+            {uploadProgress !== null ? "上传中..." : "开始上传"}
+          </button>
+        </div>
       </div>
     </Modal>
   )

apps/web/src/pages/voices/components/upload-voice/SelectedFileInfo.tsx

@@ -1,45 +0,0 @@
-/**
- * 上传音频 - 已选文件信息
- */
-import React from "react"
-import { SoundOutlined } from "@ant-design/icons"
-import { formatFileSize } from "@/pages/voices/utils/format"
-
-export interface SelectedFileInfoProps {
-  file: File
-}
-
-export const SelectedFileInfo: React.FC<SelectedFileInfoProps> = ({ file }) => {
-  return (
-    <div
-      style={{
-        padding: "10px 12px",
-        background: "var(--bg-secondary)",
-        borderRadius: 8,
-        display: "flex",
-        alignItems: "center",
-        gap: 10,
-      }}
-    >
-      <SoundOutlined style={{ fontSize: 18, color: "var(--primary-color)" }} />
-      <div style={{ flex: 1, minWidth: 0 }}>
-        <div
-          style={{
-            fontSize: 13,
-            fontWeight: 500,
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-          }}
-        >
-          {file.name}
-        </div>
-        <div style={{ fontSize: 11, color: "var(--text-secondary)" }}>
-          {formatFileSize(file.size)}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default SelectedFileInfo

apps/web/src/pages/voices/components/upload-voice/UploadActions.tsx

@@ -1,82 +0,0 @@
-/**
- * 上传音频 - 底部操作按钮
- */
-import React from "react"
-import { message } from "antd"
-
-export interface UploadActionsProps {
-  hasFile: boolean
-  hasName: boolean
-  uploading: boolean
-  onCancel: () => void
-  onUpload: () => void
-}
-
-export const UploadActions: React.FC<UploadActionsProps> = ({
-  hasFile,
-  hasName,
-  uploading,
-  onCancel,
-  onUpload,
-}) => {
-  const canUpload = hasFile && hasName && !uploading
-
-  const handleUploadClick = () => {
-    if (!hasFile) {
-      message.warning("请先选择音频文件")
-      return
-    }
-    if (!hasName) {
-      message.warning("请输入素材名称")
-      return
-    }
-    onUpload()
-  }
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "flex-end",
-        gap: 10,
-        paddingTop: 4,
-      }}
-    >
-      <button
-        type="button"
-        onClick={onCancel}
-        disabled={uploading}
-        style={{
-          padding: "8px 20px",
-          borderRadius: 8,
-          border: "1px solid var(--border-color)",
-          background: "transparent",
-          fontSize: 13,
-          cursor: uploading ? "not-allowed" : "pointer",
-          color: "var(--text-secondary)",
-        }}
-      >
-        取消
-      </button>
-      <button
-        type="button"
-        onClick={handleUploadClick}
-        disabled={!canUpload}
-        style={{
-          padding: "8px 20px",
-          borderRadius: 8,
-          border: "none",
-          background: canUpload ? "var(--primary-color)" : "var(--text-tertiary)",
-          color: "#fff",
-          fontSize: 13,
-          fontWeight: 600,
-          cursor: canUpload ? "pointer" : "not-allowed",
-        }}
-      >
-        {uploading ? "上传中..." : "开始上传"}
-      </button>
-    </div>
-  )
-}
-
-export default UploadActions

apps/web/src/pages/voices/components/upload-voice/UploadDragger.tsx

@@ -1,56 +0,0 @@
-/**
- * 上传音频 - 拖拽上传区
- */
-import React from "react"
-import { UploadOutlined } from "@ant-design/icons"
-import { Upload } from "antd"
-
-export interface UploadDraggerProps {
-  disabled: boolean
-  onFileSelect: (file: File) => void
-  onFileRemove: () => void
-}
-
-export const UploadDragger: React.FC<UploadDraggerProps> = ({
-  disabled,
-  onFileSelect,
-  onFileRemove,
-}) => {
-  return (
-    <Upload.Dragger
-      accept="audio/*"
-      maxCount={1}
-      beforeUpload={(file) => {
-        onFileSelect(file)
-        return false
-      }}
-      onRemove={() => {
-        onFileRemove()
-      }}
-      showUploadList={false}
-      disabled={disabled}
-    >
-      <p
-        style={{
-          fontSize: 32,
-          color: "var(--primary-color)",
-          marginBottom: 8,
-        }}
-      >
-        <UploadOutlined />
-      </p>
-      <p style={{ fontSize: 14, fontWeight: 500, margin: "0 0 4px" }}>点击或拖拽音频文件到此处</p>
-      <p
-        style={{
-          fontSize: 12,
-          color: "var(--text-secondary)",
-          margin: 0,
-        }}
-      >
-        支持 MP3、WAV、AAC、FLAC 等格式，最大 200MB
-      </p>
-    </Upload.Dragger>
-  )
-}
-
-export default UploadDragger

apps/web/src/pages/voices/components/upload-voice/UploadFormFields.tsx

@@ -1,115 +0,0 @@
-/**
- * 上传音频 - 表单区域（名称/性别/描述）
- */
-import React from "react"
-import { type VoiceGender } from "@/pages/voices/types"
-
-export interface UploadFormFieldsProps {
-  name: string
-  gender: VoiceGender
-  description: string
-  disabled: boolean
-  onNameChange: (name: string) => void
-  onGenderChange: (gender: VoiceGender) => void
-  onDescriptionChange: (desc: string) => void
-}
-
-const GENDER_LABELS: Record<VoiceGender, string> = {
-  female: "女声",
-  male: "男声",
-  child: "童声",
-  elderly: "老年音",
-}
-
-export const UploadFormFields: React.FC<UploadFormFieldsProps> = ({
-  name,
-  gender,
-  description,
-  disabled,
-  onNameChange,
-  onGenderChange,
-  onDescriptionChange,
-}) => {
-  return (
-    <>
-      {/* 名称 */}
-      <div>
-        <div style={labelStyle}>素材名称</div>
-        <input
-          value={name}
-          onChange={(e) => onNameChange(e.target.value)}
-          placeholder="输入素材名称"
-          maxLength={100}
-          disabled={disabled}
-          style={inputStyle}
-        />
-      </div>
-
-      {/* 性别选择 */}
-      <div>
-        <div style={labelStyle}>音色性别</div>
-        <div style={{ display: "flex", gap: 8 }}>
-          {(["female", "male", "child"] as VoiceGender[]).map((g) => (
-            <button
-              key={g}
-              type="button"
-              onClick={() => onGenderChange(g)}
-              disabled={disabled}
-              style={{
-                flex: 1,
-                padding: "6px 0",
-                borderRadius: 8,
-                border: `1px solid ${gender === g ? "var(--primary-color)" : "var(--border-color)"}`,
-                background: gender === g ? "var(--primary-soft)" : "transparent",
-                color: gender === g ? "var(--primary-color)" : "var(--text-secondary)",
-                fontSize: 13,
-                fontWeight: gender === g ? 600 : 400,
-                cursor: disabled ? "not-allowed" : "pointer",
-                transition: "all 0.2s",
-              }}
-            >
-              {GENDER_LABELS[g]}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* 描述 */}
-      <div>
-        <div style={labelStyle}>音色描述（可选）</div>
-        <textarea
-          value={description}
-          onChange={(e) => onDescriptionChange(e.target.value)}
-          placeholder="描述这个音色的特点..."
-          maxLength={500}
-          rows={2}
-          disabled={disabled}
-          style={{
-            ...inputStyle,
-            resize: "vertical",
-            fontFamily: "inherit",
-          }}
-        />
-      </div>
-    </>
-  )
-}
-
-const labelStyle: React.CSSProperties = {
-  fontSize: 13,
-  color: "var(--text-secondary)",
-  marginBottom: 6,
-}
-
-const inputStyle: React.CSSProperties = {
-  width: "100%",
-  padding: "8px 12px",
-  border: "1px solid var(--border-color)",
-  borderRadius: 8,
-  fontSize: 13,
-  background: "var(--bg-primary)",
-  color: "var(--text-primary)",
-  outline: "none",
-}
-
-export default UploadFormFields

apps/web/src/pages/voices/components/upload-voice/UploadProgress.tsx

@@ -1,48 +0,0 @@
-/**
- * 上传音频 - 上传进度条
- */
-import React from "react"
-
-export interface UploadProgressProps {
-  progress: number
-}
-
-export const UploadProgress: React.FC<UploadProgressProps> = ({ progress }) => {
-  return (
-    <div style={{ textAlign: "center", padding: "8px 0" }}>
-      <div
-        style={{
-          fontSize: 22,
-          fontWeight: 700,
-          color: "var(--primary-color)",
-        }}
-      >
-        {progress}%
-      </div>
-      <div style={{ fontSize: 12, color: "var(--text-secondary)" }}>
-        {progress < 100 ? "上传中..." : "处理中..."}
-      </div>
-      <div
-        style={{
-          height: 4,
-          background: "var(--bg-tertiary)",
-          borderRadius: 2,
-          marginTop: 8,
-          overflow: "hidden",
-        }}
-      >
-        <div
-          style={{
-            height: "100%",
-            width: `${progress}%`,
-            background: "var(--primary-color)",
-            borderRadius: 2,
-            transition: "width 0.3s ease",
-          }}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default UploadProgress