Merge branch 'develop' into refactor/voice-clone-api

将 voice-clone.ts 单文件拆分为目录结构：
- types.ts — 类型定义
- utils.ts — toVoiceClone 映射 + formatDuration
- clones.ts — 克隆 CRUD + 状态 + 重试
- index.ts — 统一入口 re-export

导入路径 @/api/voice-clone 保持向后兼容。

apps/web/src/api/voice-clone.ts

@@ -1,208 +0,0 @@
-/**
- * 音色克隆 API
- * 任务 3.11：替换 Mock 数据，对接后端真实 API（3.05）
- * 任务 3.15：新增 progress 字段用于进度展示
- */
-import apiClient from "./client"
-
-/* ── 前端兼容类型 ─────────────────────────────────────── */
-
-/** 克隆音色状态（前端展示用） */
-export type VoiceCloneStatus = "ready" | "processing" | "failed"
-
-/** 克隆音色条目（前端展示用） */
-export interface VoiceClone {
-  id: string
-  name: string
-  description: string
-  duration_seconds: number
-  status: VoiceCloneStatus
-  /** 克隆进度 0-100，仅 processing 状态时有值 */
-  progress: number
-  sample_url?: string
-  language: string
-  gender: string
-  error_message: string | null
-  created_at: string
-  updated_at: string
-}
-
-/** 创建克隆请求（前端简化版） */
-export interface CreateVoiceCloneRequest {
-  name: string
-  audio_url: string
-  description?: string
-}
-
-/* ── 后端 API 类型 ────────────────────────────────────── */
-
-/** 音色克隆元数据（克隆时附带的扩展信息） */
-export interface VoiceCloneMetadata {
-  /** 语音时长（秒） */
-  duration?: number
-  /** 采样率（Hz） */
-  sample_rate?: number
-  /** 音色 ID（克隆完成后分配） */
-  voice_id?: string
-  /** 其他扩展字段 */
-  [key: string]: unknown
-}
-
-/** 后端克隆档案响应 */
-export interface VoiceCloneProfile {
-  id: string
-  user_id: string
-  name: string
-  description: string
-  source_audio_url: string
-  voice_id: string | null
-  voice_model: string
-  language: string
-  gender: string
-  status: "pending" | "processing" | "ready" | "failed"
-  error_message: string | null
-  retry_count: number
-  max_retries: number
-  metadata_: VoiceCloneMetadata | null
-  created_at: string
-  updated_at: string
-}
-
-/** 后端克隆列表响应 */
-export interface ListVoiceCloneResponse {
-  items: VoiceCloneProfile[]
-  total: number
-}
-
-/** 后端克隆状态响应 */
-export interface VoiceCloneStatusResponse {
-  id: string
-  status: "pending" | "processing" | "ready" | "failed"
-  error_message: string | null
-  voice_id: string | null
-  retry_count: number
-}
-
-/** 后端创建克隆请求（完整版） */
-export interface CreateVoiceCloneRequestFull {
-  name: string
-  description?: string
-  source_audio_url: string
-  voice_model?: string
-  language?: string
-  gender?: string
-  max_retries?: number
-  metadata_?: VoiceCloneMetadata
-}
-
-/* ── 辅助函数 ─────────────────────────────────────────── */
-
-/**
- * 将后端 VoiceCloneProfile 转换为前端 VoiceClone
- * 后端 status "pending" 映射为前端 "processing"
- */
-export const toVoiceClone = (profile: VoiceCloneProfile): VoiceClone => ({
-  id: profile.id,
-  name: profile.name,
-  description: profile.description || "",
-  duration_seconds: 0,
-  status: profile.status === "pending" ? "processing" : profile.status,
-  progress: 0,
-  sample_url: profile.source_audio_url || undefined,
-  language: profile.language || "",
-  gender: profile.gender || "",
-  error_message: profile.error_message || null,
-  created_at: profile.created_at,
-  updated_at: profile.updated_at,
-})
-
-/** 格式化时长 */
-export const formatDuration = (seconds: number): string => {
-  const m = Math.floor(seconds / 60)
-  const s = seconds % 60
-  return `${m}:${String(s).padStart(2, "0")}`
-}
-
-/* ── 查询参数 ─────────────────────────────────────────── */
-
-export interface VoiceCloneListParams {
-  status?: string
-  skip?: number
-  limit?: number
-}
-
-/* ── API 函数 ─────────────────────────────────────────── */
-
-/** 获取克隆音色列表（返回前端兼容数组） */
-export const getVoiceClones = async (params?: VoiceCloneListParams): Promise<VoiceClone[]> => {
-  const searchParams = new URLSearchParams()
-  if (params?.status) searchParams.set("status", params.status)
-  if (params?.skip !== undefined) searchParams.set("skip", String(params.skip))
-  if (params?.limit !== undefined) searchParams.set("limit", String(params.limit))
-  const qs = searchParams.toString()
-  const response = await apiClient.get<ListVoiceCloneResponse>(`/voice-clones${qs ? `?${qs}` : ""}`)
-  return response.data.items.map(toVoiceClone)
-}
-
-/** 获取克隆音色列表（返回完整响应含 total） */
-export const getVoiceClonesWithTotal = async (
-  params?: VoiceCloneListParams,
-): Promise<ListVoiceCloneResponse> => {
-  const searchParams = new URLSearchParams()
-  if (params?.status) searchParams.set("status", params.status)
-  if (params?.skip !== undefined) searchParams.set("skip", String(params.skip))
-  if (params?.limit !== undefined) searchParams.set("limit", String(params.limit))
-  const qs = searchParams.toString()
-  const response = await apiClient.get<ListVoiceCloneResponse>(`/voice-clones${qs ? `?${qs}` : ""}`)
-  return response.data
-}
-
-/** 获取单个克隆音色详情 */
-export const getVoiceCloneDetail = async (id: string): Promise<VoiceCloneProfile> => {
-  const response = await apiClient.get<VoiceCloneProfile>(`/voice-clones/${id}`)
-  return response.data
-}
-
-/** 创建克隆音色 */
-export const createVoiceClone = async (
-  data: CreateVoiceCloneRequest,
-): Promise<VoiceCloneProfile> => {
-  const payload: CreateVoiceCloneRequestFull = {
-    name: data.name,
-    description: data.description,
-    source_audio_url: data.audio_url,
-  }
-  const response = await apiClient.post<VoiceCloneProfile>("/voice-clones", payload)
-  return response.data
-}
-
-/** 删除克隆音色 */
-export const deleteVoiceClone = async (id: string): Promise<void> => {
-  await apiClient.delete(`/voice-clones/${id}`)
-}
-
-/** 更新克隆音色名称（stub — 后端暂无 PATCH 端点） */
-export const updateVoiceClone = async (
-  id: string,
-  data: Partial<Pick<VoiceClone, "name">>,
-): Promise<VoiceClone> => {
-  // 后端暂未提供更新端点，暂用详情接口模拟
-  const response = await apiClient.get<VoiceCloneProfile>(`/voice-clones/${id}`)
-  return toVoiceClone({
-    ...response.data,
-    ...data,
-    updated_at: new Date().toISOString(),
-  })
-}
-
-/** 获取克隆状态 */
-export const getVoiceCloneStatus = async (id: string): Promise<VoiceCloneStatusResponse> => {
-  const response = await apiClient.get<VoiceCloneStatusResponse>(`/voice-clones/${id}/status`)
-  return response.data
-}
-
-/** 重试克隆 */
-export const retryVoiceClone = async (id: string): Promise<VoiceCloneProfile> => {
-  const response = await apiClient.post<VoiceCloneProfile>(`/voice-clones/${id}/retry`)
-  return response.data
-}

apps/web/src/api/voice-clone/clones.ts

@@ -0,0 +1,87 @@
+/**
+ * 音色克隆 API 函数
+ */
+import apiClient from "../client"
+import { toVoiceClone } from "./utils"
+import type {
+  VoiceClone,
+  VoiceCloneProfile,
+  CreateVoiceCloneRequest,
+  CreateVoiceCloneRequestFull,
+  VoiceCloneListParams,
+  ListVoiceCloneResponse,
+  VoiceCloneStatusResponse,
+} from "./types"
+
+/** 获取克隆音色列表（返回前端兼容数组） */
+export const getVoiceClones = async (params?: VoiceCloneListParams): Promise<VoiceClone[]> => {
+  const searchParams = new URLSearchParams()
+  if (params?.status) searchParams.set("status", params.status)
+  if (params?.skip !== undefined) searchParams.set("skip", String(params.skip))
+  if (params?.limit !== undefined) searchParams.set("limit", String(params.limit))
+  const qs = searchParams.toString()
+  const response = await apiClient.get<ListVoiceCloneResponse>(`/voice-clones${qs ? `?${qs}` : ""}`)
+  return response.data.items.map(toVoiceClone)
+}
+
+/** 获取克隆音色列表（返回完整响应含 total） */
+export const getVoiceClonesWithTotal = async (
+  params?: VoiceCloneListParams,
+): Promise<ListVoiceCloneResponse> => {
+  const searchParams = new URLSearchParams()
+  if (params?.status) searchParams.set("status", params.status)
+  if (params?.skip !== undefined) searchParams.set("skip", String(params.skip))
+  if (params?.limit !== undefined) searchParams.set("limit", String(params.limit))
+  const qs = searchParams.toString()
+  const response = await apiClient.get<ListVoiceCloneResponse>(`/voice-clones${qs ? `?${qs}` : ""}`)
+  return response.data
+}
+
+/** 获取单个克隆音色详情 */
+export const getVoiceCloneDetail = async (id: string): Promise<VoiceCloneProfile> => {
+  const response = await apiClient.get<VoiceCloneProfile>(`/voice-clones/${id}`)
+  return response.data
+}
+
+/** 创建克隆音色 */
+export const createVoiceClone = async (
+  data: CreateVoiceCloneRequest,
+): Promise<VoiceCloneProfile> => {
+  const payload: CreateVoiceCloneRequestFull = {
+    name: data.name,
+    description: data.description,
+    source_audio_url: data.audio_url,
+  }
+  const response = await apiClient.post<VoiceCloneProfile>("/voice-clones", payload)
+  return response.data
+}
+
+/** 删除克隆音色 */
+export const deleteVoiceClone = async (id: string): Promise<void> => {
+  await apiClient.delete(`/voice-clones/${id}`)
+}
+
+/** 更新克隆音色名称（stub — 后端暂无 PATCH 端点） */
+export const updateVoiceClone = async (
+  id: string,
+  data: Partial<Pick<VoiceClone, "name">>,
+): Promise<VoiceClone> => {
+  const response = await apiClient.get<VoiceCloneProfile>(`/voice-clones/${id}`)
+  return toVoiceClone({
+    ...response.data,
+    ...data,
+    updated_at: new Date().toISOString(),
+  })
+}
+
+/** 获取克隆状态 */
+export const getVoiceCloneStatus = async (id: string): Promise<VoiceCloneStatusResponse> => {
+  const response = await apiClient.get<VoiceCloneStatusResponse>(`/voice-clones/${id}/status`)
+  return response.data
+}
+
+/** 重试克隆 */
+export const retryVoiceClone = async (id: string): Promise<VoiceCloneProfile> => {
+  const response = await apiClient.post<VoiceCloneProfile>(`/voice-clones/${id}/retry`)
+  return response.data
+}

apps/web/src/api/voice-clone/index.ts

@@ -0,0 +1,32 @@
+/**
+ * 音色克隆 API — 目录化入口
+ * 保持与原 voice-clone.ts 相同导出，向后兼容
+ */
+
+// 类型
+export type {
+  VoiceCloneStatus,
+  VoiceClone,
+  CreateVoiceCloneRequest,
+  VoiceCloneMetadata,
+  VoiceCloneProfile,
+  ListVoiceCloneResponse,
+  VoiceCloneStatusResponse,
+  CreateVoiceCloneRequestFull,
+  VoiceCloneListParams,
+} from "./types"
+
+// 工具函数
+export { toVoiceClone, formatDuration } from "./utils"
+
+// API 函数
+export {
+  getVoiceClones,
+  getVoiceClonesWithTotal,
+  getVoiceCloneDetail,
+  createVoiceClone,
+  deleteVoiceClone,
+  updateVoiceClone,
+  getVoiceCloneStatus,
+  retryVoiceClone,
+} from "./clones"

apps/web/src/api/voice-clone/types.ts

@@ -0,0 +1,92 @@
+/**
+ * 音色克隆类型定义
+ */
+
+/** 克隆音色状态（前端展示用） */
+export type VoiceCloneStatus = "ready" | "processing" | "failed"
+
+/** 克隆音色条目（前端展示用） */
+export interface VoiceClone {
+  id: string
+  name: string
+  description: string
+  duration_seconds: number
+  status: VoiceCloneStatus
+  /** 克隆进度 0-100，仅 processing 状态时有值 */
+  progress: number
+  sample_url?: string
+  language: string
+  gender: string
+  error_message: string | null
+  created_at: string
+  updated_at: string
+}
+
+/** 创建克隆请求（前端简化版） */
+export interface CreateVoiceCloneRequest {
+  name: string
+  audio_url: string
+  description?: string
+}
+
+/** 音色克隆元数据 */
+export interface VoiceCloneMetadata {
+  duration?: number
+  sample_rate?: number
+  voice_id?: string
+  [key: string]: unknown
+}
+
+/** 后端克隆档案响应 */
+export interface VoiceCloneProfile {
+  id: string
+  user_id: string
+  name: string
+  description: string
+  source_audio_url: string
+  voice_id: string | null
+  voice_model: string
+  language: string
+  gender: string
+  status: "pending" | "processing" | "ready" | "failed"
+  error_message: string | null
+  retry_count: number
+  max_retries: number
+  metadata_: VoiceCloneMetadata | null
+  created_at: string
+  updated_at: string
+}
+
+/** 后端克隆列表响应 */
+export interface ListVoiceCloneResponse {
+  items: VoiceCloneProfile[]
+  total: number
+}
+
+/** 后端克隆状态响应 */
+export interface VoiceCloneStatusResponse {
+  id: string
+  status: "pending" | "processing" | "ready" | "failed"
+  error_message: string | null
+  voice_id: string | null
+  retry_count: number
+}
+
+/** 后端创建克隆请求（完整版） */
+export interface CreateVoiceCloneRequestFull {
+  name: string
+  description?: string
+  source_audio_url: string
+  voice_model?: string
+  language?: string
+  gender?: string
+  max_retries?: number
+  metadata_?: VoiceCloneMetadata
+}
+
+/** 查询参数 */
+export interface VoiceCloneListParams {
+  status?: string
+  skip?: number
+  limit?: number
+}

apps/web/src/api/voice-clone/utils.ts

@@ -0,0 +1,30 @@
+/**
+ * 音色克隆工具函数
+ */
+import type { VoiceCloneProfile, VoiceClone } from "./types"
+
+/**
+ * 将后端 VoiceCloneProfile 转换为前端 VoiceClone
+ * 后端 status "pending" 映射为前端 "processing"
+ */
+export const toVoiceClone = (profile: VoiceCloneProfile): VoiceClone => ({
+  id: profile.id,
+  name: profile.name,
+  description: profile.description || "",
+  duration_seconds: 0,
+  status: profile.status === "pending" ? "processing" : profile.status,
+  progress: 0,
+  sample_url: profile.source_audio_url || undefined,
+  language: profile.language || "",
+  gender: profile.gender || "",
+  error_message: profile.error_message || null,
+  created_at: profile.created_at,
+  updated_at: profile.updated_at,
+})
+
+/** 格式化时长 */
+export const formatDuration = (seconds: number): string => {
+  const m = Math.floor(seconds / 60)
+  const s = seconds % 60
+  return `${m}:${String(s).padStart(2, "0")}`
+}

apps/web/src/pages/voice-clone/VoiceClone.tsx

@@ -4,36 +4,232 @@
  * 展示克隆音色列表，卡片网格布局
  * 支持试听、使用、编辑名称、删除操作
  */
-import React from "react"
-import { Button } from "@/components/ui"
+import React, { useState, useCallback } from "react"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { Button, Tooltip } from "@/components/ui"
+import { Popconfirm } from "antd"
+import {
+  EditOutlined,
+  DeleteOutlined,
+  AudioOutlined,
+  SoundOutlined,
+  CalendarOutlined,
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+} from "@ant-design/icons"
 import PageHead from "@/components/layout/PageHead"
 import CloneModal from "@/components/voice/CloneModal"
-import { VoiceCloneCard } from "./components/VoiceCloneCard"
-import { VoiceCloneEmpty, VoiceCloneSkeleton, ToastContainer } from "./components/States"
-import { EditNameDialog } from "./components/EditNameDialog"
-import { useVoiceCloneList } from "./hooks/useVoiceCloneList"
+import {
+  getVoiceClones,
+  deleteVoiceClone,
+  updateVoiceClone,
+  formatDuration,
+  type VoiceClone as VoiceCloneType,
+} from "@/api/voice-clone"
 import "./voice-clone.css"
 
+/* ── 状态配置 ─────────────────────────────────────────── */
+
+const STATUS_CONFIG: Record<VoiceCloneType["status"], { label: string; className: string }> = {
+  ready: { label: "就绪", className: "vc-status-pill--ready" },
+  processing: { label: "克隆中", className: "vc-status-pill--processing" },
+  failed: { label: "失败", className: "vc-status-pill--failed" },
+}
+
+/* ── Toast 系统 ─────────────────────────────────────────── */
+
+interface Toast {
+  id: number
+  message: string
+  type: "success" | "error"
+}
+
+let toastId = 0
+
+/* ── 音色卡片组件 ───────────────────────────────────────── */
+
+interface VoiceCloneCardProps {
+  voice: VoiceCloneType
+  onPlay: (voice: VoiceCloneType) => void
+  onUse: (voice: VoiceCloneType) => void
+  onEdit: (voice: VoiceCloneType) => void
+  onDelete: (voice: VoiceCloneType) => void
+}
+
+const VoiceCloneCard: React.FC<VoiceCloneCardProps> = ({
+  voice,
+  onPlay,
+  onUse,
+  onEdit,
+  onDelete,
+}) => {
+  const statusCfg = STATUS_CONFIG[voice.status]
+  const isProcessing = voice.status === "processing"
+  const createdDate = new Date(voice.created_at).toLocaleDateString("zh-CN")
+
+  return (
+    <div className="vc-card">
+      {/* 右上角操作 */}
+      <div className="vc-card-actions">
+        <Tooltip title="编辑名称">
+          <button type="button" className="vc-card-action-btn" onClick={() => onEdit(voice)}>
+            <EditOutlined />
+          </button>
+        </Tooltip>
+        <Tooltip title="删除">
+          <Popconfirm
+            title={`确定删除音色「${voice.name}」吗？`}
+            onConfirm={() => onDelete(voice)}
+            okText="删除"
+            cancelText="取消"
+          >
+            <button type="button" className="vc-card-action-btn vc-card-action-btn--danger">
+              <DeleteOutlined />
+            </button>
+          </Popconfirm>
+        </Tooltip>
+      </div>
+
+      {/* 头部：头像 + 名称 + 状态 */}
+      <div className="vc-card-header">
+        <div className={`vc-card-avatar${isProcessing ? " vc-card-avatar--processing" : ""}`}>
+          <AudioOutlined style={{ fontSize: 22 }} />
+        </div>
+        <div className="vc-card-info">
+          <h4 className="vc-card-name">{voice.name}</h4>
+          <span className={`vc-status-pill ${statusCfg.className}`}>
+            <span className="vc-status-dot" />
+            {statusCfg.label}
+          </span>
+        </div>
+      </div>
+
+      {/* 元信息 */}
+      <div className="vc-card-meta">
+        <div className="vc-card-meta-row">
+          <span className="vc-card-meta-icon">
+            <SoundOutlined />
+          </span>
+          <span>时长：{formatDuration(voice.duration_seconds)}</span>
+        </div>
+        <div className="vc-card-meta-row">
+          <span className="vc-card-meta-icon">
+            <CalendarOutlined />
+          </span>
+          <span>创建于：{createdDate}</span>
+        </div>
+      </div>
+
+      {/* 操作区 */}
+      <div className="vc-card-footer">
+        <Button
+          buttonType="ghost"
+          buttonSize="sm"
+          disabled={isProcessing}
+          onClick={() => onPlay(voice)}
+        >
+          ▶ 试听
+        </Button>
+        <Button
+          buttonType="primary"
+          buttonSize="sm"
+          disabled={isProcessing}
+          onClick={() => onUse(voice)}
+        >
+          使用此音色
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+/* ── 主页面 ─────────────────────────────────────────────── */
+
 const VoiceClone: React.FC = () => {
-  const {
-    voices,
-    isLoading,
-    toasts,
-    editingVoice,
-    editName,
-    setEditName,
-    cloneModalOpen,
-    updateLoading,
-    handleCloneNew,
-    handleCloseCloneModal,
-    handleCloneSuccess,
-    handlePlay,
-    handleUse,
-    handleEdit,
-    handleCloseEdit,
-    handleEditConfirm,
-    handleDelete,
-  } = useVoiceCloneList()
+  const queryClient = useQueryClient()
+  const [toasts, setToasts] = useState<Toast[]>([])
+  const [editingVoice, setEditingVoice] = useState<VoiceCloneType | null>(null)
+  const [editName, setEditName] = useState("")
+  const [cloneModalOpen, setCloneModalOpen] = useState(false)
+
+  /** 显示 toast */
+  const showToast = useCallback((message: string, type: Toast["type"]) => {
+    const id = ++toastId
+    setToasts((prev) => [...prev, { id, message, type }])
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id))
+    }, 3000)
+  }, [])
+
+  /** 查询克隆音色列表 */
+  const { data: voices = [], isLoading } = useQuery({
+    queryKey: ["voiceClones"],
+    queryFn: () => getVoiceClones(),
+  })
+
+  /** 删除 mutation */
+  const deleteMutation = useMutation({
+    mutationFn: deleteVoiceClone,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["voiceClones"] })
+      showToast("音色已删除", "success")
+    },
+    onError: () => {
+      showToast("删除失败", "error")
+    },
+  })
+
+  /** 编辑 mutation */
+  const updateMutation = useMutation({
+    mutationFn: ({ id, name }: { id: string; name: string }) => updateVoiceClone(id, { name }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["voiceClones"] })
+      setEditingVoice(null)
+      showToast("名称已更新", "success")
+    },
+    onError: () => {
+      showToast("更新失败", "error")
+    },
+  })
+
+  /** 克隆新音色 — 打开弹窗 */
+  const handleCloneNew = () => {
+    setCloneModalOpen(true)
+  }
+
+  /** 试听 */
+  const handlePlay = (voice: VoiceCloneType) => {
+    if (voice.sample_url) {
+      const audio = new Audio(voice.sample_url)
+      audio.play().catch(() => {
+        showToast("播放失败", "error")
+      })
+    } else {
+      showToast("暂无试听音频", "error")
+    }
+  }
+
+  /** 使用音色 — 跳转到生成页面 */
+  const handleUse = (_voice: VoiceCloneType) => {
+    showToast("已选择音色，跳转到生成页面", "success")
+  }
+
+  /** 打开编辑弹窗 */
+  const handleEdit = (voice: VoiceCloneType) => {
+    setEditingVoice(voice)
+    setEditName(voice.name)
+  }
+
+  /** 确认编辑 */
+  const handleEditConfirm = () => {
+    if (!editingVoice || !editName.trim()) return
+    updateMutation.mutate({ id: editingVoice.id, name: editName.trim() })
+  }
+
+  /** 删除确认 — 使用 Popconfirm */
+  const handleDelete = (voice: VoiceCloneType) => {
+    deleteMutation.mutate(voice.id)
+  }
 
   return (
     <div className="vc-page">
@@ -48,7 +244,24 @@ const VoiceClone: React.FC = () => {
       />
 
       {/* 加载状态 — 骨架屏 */}
-      {isLoading && <VoiceCloneSkeleton />}
+      {isLoading && (
+        <div className="vc-grid">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="vc-card">
+              <div className="vc-card-header">
+                <div className="vc-skeleton-avatar" />
+                <div style={{ flex: 1 }}>
+                  <div className="vc-skeleton-line vc-skeleton-line--title" />
+                  <div className="vc-skeleton-line vc-skeleton-line--short" />
+                </div>
+              </div>
+              <div className="vc-skeleton-line" />
+              <div className="vc-skeleton-line vc-skeleton-line--short" />
+              <div className="vc-skeleton-line vc-skeleton-line--footer" />
+            </div>
+          ))}
+        </div>
+      )}
 
       {/* 卡片网格 */}
       {!isLoading && voices.length > 0 && (
@@ -67,27 +280,71 @@ const VoiceClone: React.FC = () => {
       )}
 
       {/* 空状态 */}
-      {!isLoading && voices.length === 0 && <VoiceCloneEmpty onClone={handleCloneNew} />}
+      {!isLoading && voices.length === 0 && (
+        <div className="vc-empty">
+          <div className="vc-empty-icon">
+            <AudioOutlined style={{ fontSize: 48 }} />
+          </div>
+          <h3 className="vc-empty-title">还没有克隆音色</h3>
+          <p className="vc-empty-desc">上传你的声音，AI将克隆你的专属音色</p>
+          <Button buttonType="primary" onClick={handleCloneNew}>
+            立即克隆
+          </Button>
+        </div>
+      )}
 
       {/* Toast 提示 */}
-      <ToastContainer toasts={toasts} />
+      {toasts.length > 0 && (
+        <div className="vc-toast-container">
+          {toasts.map((t) => (
+            <div key={t.id} className={`vc-toast vc-toast--${t.type}`}>
+              {t.type === "success" ? <CheckCircleOutlined /> : <CloseCircleOutlined />} {t.message}
+            </div>
+          ))}
+        </div>
+      )}
 
       {/* 编辑弹窗 */}
       {editingVoice && (
-        <EditNameDialog
-          name={editName}
-          onNameChange={setEditName}
-          onConfirm={handleEditConfirm}
-          onCancel={handleCloseEdit}
-          loading={updateLoading}
-        />
+        <div className="vc-edit-overlay" onClick={() => setEditingVoice(null)}>
+          <div className="vc-edit-dialog" onClick={(e) => e.stopPropagation()}>
+            <h3 className="vc-edit-title">编辑音色名称</h3>
+            <input
+              type="text"
+              className="vc-edit-input"
+              value={editName}
+              onChange={(e) => setEditName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleEditConfirm()
+                if (e.key === "Escape") setEditingVoice(null)
+              }}
+              autoFocus
+              placeholder="输入音色名称"
+            />
+            <div className="vc-edit-buttons">
+              <Button buttonType="ghost" onClick={() => setEditingVoice(null)}>
+                取消
+              </Button>
+              <Button
+                buttonType="primary"
+                onClick={handleEditConfirm}
+                disabled={updateMutation.isPending}
+              >
+                {updateMutation.isPending ? "保存中..." : "保存"}
+              </Button>
+            </div>
+          </div>
+        </div>
       )}
 
       {/* 克隆音色弹窗 */}
       <CloneModal
         open={cloneModalOpen}
-        onClose={handleCloseCloneModal}
-        onSuccess={handleCloneSuccess}
+        onClose={() => setCloneModalOpen(false)}
+        onSuccess={() => {
+          queryClient.invalidateQueries({ queryKey: ["voiceClones"] })
+          showToast("音色克隆已提交", "success")
+        }}
       />
     </div>
   )

apps/web/src/pages/voice-clone/components/EditNameDialog.tsx

@@ -1,49 +0,0 @@
-import React from "react"
-import { Button } from "@/components/ui"
-
-interface EditNameDialogProps {
-  name: string
-  onNameChange: (name: string) => void
-  onConfirm: () => void
-  onCancel: () => void
-  loading?: boolean
-}
-
-/**
- * 编辑音色名称弹窗
- */
-export const EditNameDialog: React.FC<EditNameDialogProps> = ({
-  name,
-  onNameChange,
-  onConfirm,
-  onCancel,
-  loading,
-}) => {
-  return (
-    <div className="vc-edit-overlay" onClick={onCancel}>
-      <div className="vc-edit-dialog" onClick={(e) => e.stopPropagation()}>
-        <h3 className="vc-edit-title">编辑音色名称</h3>
-        <input
-          type="text"
-          className="vc-edit-input"
-          value={name}
-          onChange={(e) => onNameChange(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") onConfirm()
-            if (e.key === "Escape") onCancel()
-          }}
-          autoFocus
-          placeholder="输入音色名称"
-        />
-        <div className="vc-edit-buttons">
-          <Button buttonType="ghost" onClick={onCancel}>
-            取消
-          </Button>
-          <Button buttonType="primary" onClick={onConfirm} disabled={loading}>
-            {loading ? "保存中..." : "保存"}
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}

apps/web/src/pages/voice-clone/components/States.tsx

@@ -1,60 +0,0 @@
-import React from "react"
-import { AudioOutlined, CheckCircleOutlined, CloseCircleOutlined } from "@ant-design/icons"
-import { Button } from "@/components/ui"
-import type { Toast } from "../types"
-
-interface VoiceCloneEmptyProps {
-  onClone: () => void
-}
-
-/** 空状态 */
-export const VoiceCloneEmpty: React.FC<VoiceCloneEmptyProps> = ({ onClone }) => (
-  <div className="vc-empty">
-    <div className="vc-empty-icon">
-      <AudioOutlined style={{ fontSize: 48 }} />
-    </div>
-    <h3 className="vc-empty-title">还没有克隆音色</h3>
-    <p className="vc-empty-desc">上传你的声音，AI将克隆你的专属音色</p>
-    <Button buttonType="primary" onClick={onClone}>
-      立即克隆
-    </Button>
-  </div>
-)
-
-/** 骨架屏加载 */
-export const VoiceCloneSkeleton: React.FC = () => (
-  <div className="vc-grid">
-    {[1, 2, 3].map((i) => (
-      <div key={i} className="vc-card">
-        <div className="vc-card-header">
-          <div className="vc-skeleton-avatar" />
-          <div style={{ flex: 1 }}>
-            <div className="vc-skeleton-line vc-skeleton-line--title" />
-            <div className="vc-skeleton-line vc-skeleton-line--short" />
-          </div>
-        </div>
-        <div className="vc-skeleton-line" />
-        <div className="vc-skeleton-line vc-skeleton-line--short" />
-        <div className="vc-skeleton-line vc-skeleton-line--footer" />
-      </div>
-    ))}
-  </div>
-)
-
-interface ToastContainerProps {
-  toasts: Toast[]
-}
-
-/** Toast 提示容器 */
-export const ToastContainer: React.FC<ToastContainerProps> = ({ toasts }) => {
-  if (toasts.length === 0) return null
-  return (
-    <div className="vc-toast-container">
-      {toasts.map((t) => (
-        <div key={t.id} className={`vc-toast vc-toast--${t.type}`}>
-          {t.type === "success" ? <CheckCircleOutlined /> : <CloseCircleOutlined />} {t.message}
-        </div>
-      ))}
-    </div>
-  )
-}

apps/web/src/pages/voice-clone/components/VoiceCloneCard.tsx

@@ -1,111 +0,0 @@
-import React from "react"
-import { Tooltip } from "@/components/ui"
-import { Popconfirm } from "antd"
-import {
-  EditOutlined,
-  DeleteOutlined,
-  AudioOutlined,
-  SoundOutlined,
-  CalendarOutlined,
-} from "@ant-design/icons"
-import { Button } from "@/components/ui"
-import { formatDuration, type VoiceClone } from "@/api/voice-clone"
-import { STATUS_CONFIG } from "../types"
-
-interface VoiceCloneCardProps {
-  voice: VoiceClone
-  onPlay: (voice: VoiceClone) => void
-  onUse: (voice: VoiceClone) => void
-  onEdit: (voice: VoiceClone) => void
-  onDelete: (voice: VoiceClone) => void
-}
-
-/**
- * 音色克隆卡片
- */
-export const VoiceCloneCard: React.FC<VoiceCloneCardProps> = ({
-  voice,
-  onPlay,
-  onUse,
-  onEdit,
-  onDelete,
-}) => {
-  const statusCfg = STATUS_CONFIG[voice.status]
-  const isProcessing = voice.status === "processing"
-  const createdDate = new Date(voice.created_at).toLocaleDateString("zh-CN")
-
-  return (
-    <div className="vc-card">
-      {/* 右上角操作 */}
-      <div className="vc-card-actions">
-        <Tooltip title="编辑名称">
-          <button type="button" className="vc-card-action-btn" onClick={() => onEdit(voice)}>
-            <EditOutlined />
-          </button>
-        </Tooltip>
-        <Tooltip title="删除">
-          <Popconfirm
-            title={`确定删除音色「${voice.name}」吗？`}
-            onConfirm={() => onDelete(voice)}
-            okText="删除"
-            cancelText="取消"
-          >
-            <button type="button" className="vc-card-action-btn vc-card-action-btn--danger">
-              <DeleteOutlined />
-            </button>
-          </Popconfirm>
-        </Tooltip>
-      </div>
-
-      {/* 头部：头像 + 名称 + 状态 */}
-      <div className="vc-card-header">
-        <div className={`vc-card-avatar${isProcessing ? " vc-card-avatar--processing" : ""}`}>
-          <AudioOutlined style={{ fontSize: 22 }} />
-        </div>
-        <div className="vc-card-info">
-          <h4 className="vc-card-name">{voice.name}</h4>
-          <span className={`vc-status-pill ${statusCfg.className}`}>
-            <span className="vc-status-dot" />
-            {statusCfg.label}
-          </span>
-        </div>
-      </div>
-
-      {/* 元信息 */}
-      <div className="vc-card-meta">
-        <div className="vc-card-meta-row">
-          <span className="vc-card-meta-icon">
-            <SoundOutlined />
-          </span>
-          <span>时长：{formatDuration(voice.duration_seconds)}</span>
-        </div>
-        <div className="vc-card-meta-row">
-          <span className="vc-card-meta-icon">
-            <CalendarOutlined />
-          </span>
-          <span>创建于：{createdDate}</span>
-        </div>
-      </div>
-
-      {/* 操作区 */}
-      <div className="vc-card-footer">
-        <Button
-          buttonType="ghost"
-          buttonSize="sm"
-          disabled={isProcessing}
-          onClick={() => onPlay(voice)}
-        >
-          ▶ 试听
-        </Button>
-        <Button
-          buttonType="primary"
-          buttonSize="sm"
-          disabled={isProcessing}
-          onClick={() => onUse(voice)}
-        >
-          使用此音色
-        </Button>
-      </div>
-    </div>
-  )
-}

apps/web/src/pages/voice-clone/hooks/useVoiceCloneList.ts

@@ -1,157 +0,0 @@
-import { useState, useCallback, useRef } from "react"
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
-import {
-  getVoiceClones,
-  deleteVoiceClone,
-  updateVoiceClone,
-  type VoiceClone,
-} from "@/api/voice-clone"
-import type { Toast } from "../types"
-
-let toastId = 0
-
-/**
- * 音色克隆列表业务 Hook
- * 封装列表查询、删除、编辑、试听、Toast 等所有业务逻辑
- */
-export const useVoiceCloneList = () => {
-  const queryClient = useQueryClient()
-  const [toasts, setToasts] = useState<Toast[]>([])
-  const [editingVoice, setEditingVoice] = useState<VoiceClone | null>(null)
-  const [editName, setEditName] = useState("")
-  const [cloneModalOpen, setCloneModalOpen] = useState(false)
-  const audioRef = useRef<HTMLAudioElement | null>(null)
-
-  /** 显示 toast */
-  const showToast = useCallback((message: string, type: Toast["type"]) => {
-    const id = ++toastId
-    setToasts((prev) => [...prev, { id, message, type }])
-    setTimeout(() => {
-      setToasts((prev) => prev.filter((t) => t.id !== id))
-    }, 3000)
-  }, [])
-
-  /** 查询克隆音色列表 */
-  const { data: voices = [], isLoading } = useQuery({
-    queryKey: ["voiceClones"],
-    queryFn: () => getVoiceClones(),
-  })
-
-  /** 删除 mutation */
-  const deleteMutation = useMutation({
-    mutationFn: deleteVoiceClone,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["voiceClones"] })
-      showToast("音色已删除", "success")
-    },
-    onError: () => {
-      showToast("删除失败", "error")
-    },
-  })
-
-  /** 编辑 mutation */
-  const updateMutation = useMutation({
-    mutationFn: ({ id, name }: { id: string; name: string }) => updateVoiceClone(id, { name }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["voiceClones"] })
-      setEditingVoice(null)
-      showToast("名称已更新", "success")
-    },
-    onError: () => {
-      showToast("更新失败", "error")
-    },
-  })
-
-  /** 克隆新音色 — 打开弹窗 */
-  const handleCloneNew = useCallback(() => {
-    setCloneModalOpen(true)
-  }, [])
-
-  /** 关闭克隆弹窗 */
-  const handleCloseCloneModal = useCallback(() => {
-    setCloneModalOpen(false)
-  }, [])
-
-  /** 克隆成功回调 */
-  const handleCloneSuccess = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: ["voiceClones"] })
-    showToast("音色克隆已提交", "success")
-  }, [queryClient, showToast])
-
-  /** 试听 */
-  const handlePlay = useCallback(
-    (voice: VoiceClone) => {
-      if (voice.sample_url) {
-        // 停止之前的播放
-        if (audioRef.current) {
-          audioRef.current.pause()
-          audioRef.current = null
-        }
-        const audio = new Audio(voice.sample_url)
-        audioRef.current = audio
-        audio.play().catch(() => {
-          showToast("播放失败", "error")
-        })
-      } else {
-        showToast("暂无试听音频", "error")
-      }
-    },
-    [showToast],
-  )
-
-  /** 使用音色 */
-  const handleUse = useCallback(() => {
-    showToast("已选择音色，跳转到生成页面", "success")
-  }, [showToast])
-
-  /** 打开编辑弹窗 */
-  const handleEdit = useCallback((voice: VoiceClone) => {
-    setEditingVoice(voice)
-    setEditName(voice.name)
-  }, [])
-
-  /** 关闭编辑弹窗 */
-  const handleCloseEdit = useCallback(() => {
-    setEditingVoice(null)
-  }, [])
-
-  /** 确认编辑 */
-  const handleEditConfirm = useCallback(() => {
-    if (!editingVoice || !editName.trim()) return
-    updateMutation.mutate({ id: editingVoice.id, name: editName.trim() })
-  }, [editingVoice, editName, updateMutation])
-
-  /** 删除确认 */
-  const handleDelete = useCallback(
-    (voice: VoiceClone) => {
-      deleteMutation.mutate(voice.id)
-    },
-    [deleteMutation],
-  )
-
-  return {
-    // 数据
-    voices,
-    isLoading,
-    // 状态
-    toasts,
-    editingVoice,
-    editName,
-    setEditName,
-    cloneModalOpen,
-    // 加载状态
-    deleteLoading: deleteMutation.isPending,
-    updateLoading: updateMutation.isPending,
-    // 操作
-    showToast,
-    handleCloneNew,
-    handleCloseCloneModal,
-    handleCloneSuccess,
-    handlePlay,
-    handleUse,
-    handleEdit,
-    handleCloseEdit,
-    handleEditConfirm,
-    handleDelete,
-  }
-}

apps/web/src/pages/voice-clone/types.ts

@@ -1,15 +0,0 @@
-import type { VoiceClone } from "@/api/voice-clone"
-
-/** 状态配置 */
-export const STATUS_CONFIG: Record<VoiceClone["status"], { label: string; className: string }> = {
-  ready: { label: "就绪", className: "vc-status-pill--ready" },
-  processing: { label: "克隆中", className: "vc-status-pill--processing" },
-  failed: { label: "失败", className: "vc-status-pill--failed" },
-}
-
-/** Toast 类型 */
-export interface Toast {
-  id: number
-  message: string
-  type: "success" | "error"
-}