diff --git a/apps/web/src/api/voice-clone/clones.ts b/apps/web/src/api/voice-clone/clones.ts
index f63e71124..a5e64fdc8 100644
--- a/apps/web/src/api/voice-clone/clones.ts
+++ b/apps/web/src/api/voice-clone/clones.ts
@@ -96,9 +96,12 @@ export const retryVoiceClone = async (id: string): Promise<VoiceCloneProfile> =>
 export const getVoiceClonePreview = async (
   cloneId: string,
   text?: string,
+  options?: { speed?: number; emotion?: string },
 ): Promise<VoiceClonePreviewResponse> => {
   const searchParams = new URLSearchParams()
   if (text) searchParams.set("text", text)
+  if (options?.speed !== undefined) searchParams.set("speed", String(options.speed))
+  if (options?.emotion) searchParams.set("emotion", options.emotion)
   const qs = searchParams.toString()
   const response = await apiClient.get<VoiceClonePreviewResponse>(
     `/voice-clones/${cloneId}/preview${qs ? `?${qs}` : ""}`,
diff --git a/apps/web/src/pages/voice-clone/VoiceClone.tsx b/apps/web/src/pages/voice-clone/VoiceClone.tsx
index bd0291c66..ce6abd872 100755
--- a/apps/web/src/pages/voice-clone/VoiceClone.tsx
+++ b/apps/web/src/pages/voice-clone/VoiceClone.tsx
@@ -11,6 +11,7 @@ import CloneModal from "@/components/voice/CloneModal"
 import { VoiceCloneCard } from "./components/VoiceCloneCard"
 import { VoiceCloneEmpty, VoiceCloneSkeleton, ToastContainer } from "./components/States"
 import { EditNameDialog } from "./components/EditNameDialog"
+import VoiceClonePreviewPanel from "./components/VoiceClonePreviewPanel"
 import { useVoiceCloneList } from "./hooks/useVoiceCloneList"
 import "./voice-clone.css"
 
@@ -47,6 +48,9 @@ const VoiceClone: React.FC = () => {
         }
       />
 
+      {/* 音色试听面板（自定义文本 + 语速/情绪） */}
+      {!isLoading && voices.length > 0 && <VoiceClonePreviewPanel voices={voices} />}
+
       {/* 加载状态 — 骨架屏 */}
       {isLoading && <VoiceCloneSkeleton />}
 
diff --git a/apps/web/src/pages/voice-clone/components/VoiceClonePreviewPanel.tsx b/apps/web/src/pages/voice-clone/components/VoiceClonePreviewPanel.tsx
new file mode 100644
index 000000000..8a7185ce5
--- /dev/null
+++ b/apps/web/src/pages/voice-clone/components/VoiceClonePreviewPanel.tsx
@@ -0,0 +1,133 @@
+/**
+ * 克隆音色试听面板
+ * - 选择就绪音色、输入试听文本、调节语速/情绪，点试听
+ * - 复用配音库 TTS 弹窗的 SpeedControl / EmotionControl 组件
+ */
+import React, { useState, useRef, useCallback } from "react"
+import { message } from "antd"
+import { SoundOutlined, LoadingOutlined } from "@ant-design/icons"
+import { getVoiceClonePreview, type VoiceClone } from "@/api/voice-clone"
+import SpeedControl from "@/pages/voices/components/tts-modal/SpeedControl"
+import EmotionControl from "@/pages/voices/components/tts-modal/EmotionControl"
+import { DEFAULT_TTS_EMOTION, type TtsEmotion } from "@/pages/voices/components/tts-modal/constants"
+import { TTS_CONFIG } from "@/pages/voices/components/tts-modal/types"
+
+interface VoiceClonePreviewPanelProps {
+  voices: VoiceClone[]
+}
+
+const DEFAULT_PREVIEW_TEXT = "你好呀，欢迎使用小虾智剪，这是我的声音效果，希望你喜欢。"
+
+const VoiceClonePreviewPanel: React.FC<VoiceClonePreviewPanelProps> = ({ voices }) => {
+  const readyVoices = voices.filter((v) => v.status === "ready")
+
+  const [selectedId, setSelectedId] = useState<string>(readyVoices[0]?.id ?? "")
+  const [previewText, setPreviewText] = useState(DEFAULT_PREVIEW_TEXT)
+  const [speed, setSpeed] = useState<number>(TTS_CONFIG.DEFAULT_SPEED)
+  const [emotion, setEmotion] = useState<TtsEmotion>(DEFAULT_TTS_EMOTION)
+  const [previewing, setPreviewing] = useState(false)
+  const [audioUrl, setAudioUrl] = useState<string | null>(null)
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+
+  const handlePreview = useCallback(async () => {
+    if (!selectedId) {
+      message.warning("请先选择要试听的音色")
+      return
+    }
+    const text = previewText.trim()
+    if (!text) {
+      message.warning("请输入试听文本")
+      return
+    }
+    if (audioRef.current) {
+      audioRef.current.pause()
+      audioRef.current = null
+    }
+    setPreviewing(true)
+    setAudioUrl(null)
+    try {
+      const res = await getVoiceClonePreview(selectedId, text, { speed, emotion })
+      setAudioUrl(res.audio_url)
+      const audio = new Audio(res.audio_url)
+      audioRef.current = audio
+      audio.play().catch(() => {
+        message.error("播放失败，请重试")
+      })
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "试听失败"
+      message.error(msg)
+    } finally {
+      setPreviewing(false)
+    }
+  }, [selectedId, previewText, speed, emotion])
+
+  if (readyVoices.length === 0) return null
+
+  return (
+    <div className="vc-preview-panel">
+      <div className="vc-preview-header">
+        <SoundOutlined style={{ color: "var(--primary-color)" }} />
+        <span className="vc-preview-title">音色试听</span>
+      </div>
+
+      <div className="vc-preview-body">
+        <div className="vc-preview-field">
+          <label className="vc-preview-label">选择音色</label>
+          <select
+            className="vc-preview-select"
+            value={selectedId}
+            onChange={(e) => setSelectedId(e.target.value)}
+          >
+            {readyVoices.map((v) => (
+              <option key={v.id} value={v.id}>
+                {v.name}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="vc-preview-field">
+          <label className="vc-preview-label">试听文本</label>
+          <textarea
+            className="vc-preview-textarea"
+            value={previewText}
+            onChange={(e) => setPreviewText(e.target.value)}
+            rows={2}
+            maxLength={200}
+            placeholder="输入试听文本（最多200字）"
+          />
+        </div>
+
+        <div className="vc-preview-grid">
+          <div className="vc-preview-field">
+            <SpeedControl speed={speed} onChange={setSpeed} />
+          </div>
+          <div className="vc-preview-field">
+            <EmotionControl emotion={emotion} onChange={setEmotion} />
+          </div>
+        </div>
+
+        <button
+          type="button"
+          className="vc-preview-btn"
+          onClick={handlePreview}
+          disabled={previewing || !selectedId || !previewText.trim()}
+        >
+          {previewing ? (
+            <>
+              <LoadingOutlined /> 合成中...
+            </>
+          ) : (
+            <>▶ 开始试听</>
+          )}
+        </button>
+
+        {audioUrl && !previewing && (
+          <audio controls src={audioUrl} style={{ width: "100%", marginTop: 4 }} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default VoiceClonePreviewPanel
diff --git a/apps/web/src/pages/voice-clone/voice-clone.css b/apps/web/src/pages/voice-clone/voice-clone.css
index eb6b816f3..9d4ca6673 100644
--- a/apps/web/src/pages/voice-clone/voice-clone.css
+++ b/apps/web/src/pages/voice-clone/voice-clone.css
@@ -464,3 +464,93 @@
     padding: var(--space-sm);
   }
 }
+
+/* ── 试听面板 ─────────────────────────────────────────── */
+.vc-preview-panel {
+  background: var(--bg-card);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  padding: var(--space-lg);
+}
+
+.vc-preview-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.vc-preview-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.vc-preview-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.vc-preview-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.vc-preview-label {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.vc-preview-select,
+.vc-preview-textarea {
+  width: 100%;
+  padding: 8px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--line);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 13px;
+  outline: none;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
+.vc-preview-select:focus,
+.vc-preview-textarea:focus {
+  border-color: var(--primary-color);
+}
+
+.vc-preview-textarea {
+  resize: vertical;
+  min-height: 52px;
+}
+
+.vc-preview-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.vc-preview-btn {
+  width: 100%;
+  padding: 10px 0;
+  border-radius: 8px;
+  border: none;
+  background: var(--primary-color);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: opacity 0.15s;
+}
+
+.vc-preview-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}