fix(frontend): #1897 声音克隆页增加情绪/语速设置

- api/voice-clone/clones.ts: getVoiceClonePreview 增加 options 参数(speed/emotion),通过 searchParams 透传
- 新增 VoiceClonePreviewPanel 组件:音色选择下拉、试听文本框、语速滑块(复用 SpeedControl)、情绪下拉(复用 EmotionControl)、试听按钮,试听完成后可直接播放音频
- VoiceClone.tsx:PageHead 下方、卡片网格上方插入试听面板(仅当存在就绪音色时显示)
- voice-clone.css:新增试听面板样式(复用现有 CSS 变量,风格与页面一致)
- 语速 0.5x-2.0x 默认1.0x;情绪 natural/excited/calm/friendly 默认natural
- 不加语言选择(克隆音色语言由训练时确定)
- 参数真实传递到后端 preview 接口
This commit is contained in:
saas-frontend-agent
2026-09-14 18:18:01 +08:00
parent b69f3200be
commit 8afc84dbff
@@ -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 />}