fix(#1195): CloneVoiceSection增加试听播放按钮，支持克隆音色试听

apps/web/src/pages/generate/components/voice/CloneVoiceSection.tsx

@@ -1,10 +1,18 @@
 /**
  * 克隆声音展开区域
  * 克隆按钮、轮询提示、已克隆列表、空状态
+ * 支持克隆音色试听播放
+ * TODO: 后端克隆音色试听接口出来后，替换 sample_url 为接口返回的试听音频
  */
 import React from "react"
 import { Typography } from "antd"
-import { ThunderboltOutlined, AudioOutlined, CheckCircleFilled } from "@ant-design/icons"
+import {
+  ThunderboltOutlined,
+  AudioOutlined,
+  CheckCircleFilled,
+  PlayCircleOutlined,
+  PauseCircleOutlined,
+} from "@ant-design/icons"
 import type { VoiceClone } from "@/api/voice-clone"
 
 const { Text } = Typography
@@ -15,6 +23,10 @@ interface CloneVoiceSectionProps {
   selectedClonedVoice: string
   onSelect: (voiceId: string) => void
   onOpenCloneModal: () => void
+  /** 当前正在播放的音色ID */
+  playingVoiceId: string | null
+  /** 播放/暂停试听 */
+  onPlaySample: (voiceId: VoiceClone) => void
   CLONE_STATUS_CONFIG: Record<string, { label: string; color: string }>
   formatDuration: (seconds: number) => string
 }
@@ -25,6 +37,8 @@ const CloneVoiceSection: React.FC<CloneVoiceSectionProps> = ({
   selectedClonedVoice,
   onSelect,
   onOpenCloneModal,
+  playingVoiceId,
+  onPlaySample,
   CLONE_STATUS_CONFIG,
   formatDuration,
 }) => {
@@ -60,6 +74,7 @@ const CloneVoiceSection: React.FC<CloneVoiceSectionProps> = ({
             const statusCfg = CLONE_STATUS_CONFIG[cv.status]
             const isReady = cv.status === "ready"
             const selected = selectedClonedVoice === cv.id
+            const isPlaying = playingVoiceId === cv.id
             return (
               <div
                 key={cv.id}
@@ -93,7 +108,26 @@ const CloneVoiceSection: React.FC<CloneVoiceSectionProps> = ({
                     )}
                   </div>
                 </div>
-                {selected && isReady && (
+
+                {/* 试听播放按钮 */}
+                {isReady && (
+                  <button
+                    className="xx-clone-voice-play-btn"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onPlaySample(cv)
+                    }}
+                    title={isPlaying ? "暂停试听" : "试听克隆音色"}
+                  >
+                    {isPlaying ? (
+                      <PauseCircleOutlined style={{ fontSize: 18 }} />
+                    ) : (
+                      <PlayCircleOutlined style={{ fontSize: 18 }} />
+                    )}
+                  </button>
+                )}
+
+                {selected && isReady && !isPlaying && (
                   <CheckCircleFilled style={{ color: "var(--primary-color, #4f46e5)" }} />
                 )}
               </div>