From 10f3d93a19cc10180220fd8c67f4e6d14507eee0 Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@outlook.com>
Date: Thu, 31 Jul 2025 13:07:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8D=87=E7=BA=A7=E5=A3=B0=E9=9F=B3?=
 =?UTF-8?q?=E5=85=8B=E9=9A=86=E4=B8=8ETTS=E5=B7=A5=E5=85=B7=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将首页改为语音生成历史列表页面，支持搜索和筛选功能
- 创建VoiceCloneModal组件，将声音克隆功能封装为弹框
- 创建SpeechGenerationModal组件，将语音合成功能封装为弹框
- 更新路由配置，/tools/voice-clone指向新的历史页面
- 支持音频播放、下载、删除等操作
- 使用App.tsx中的modal-root容器渲染Modal组件

主要变更：
- 新增 VoiceGenerationHistory.tsx - 语音生成历史页面
- 新增 VoiceCloneModal.tsx - 声音克隆弹框组件
- 新增 SpeechGenerationModal.tsx - 语音合成弹框组件
- 修改 App.tsx - 更新路由配置
- 修改 VoiceCloneTool.tsx - 添加新的图标导入
---
 apps/desktop/src/App.tsx                      |   4 +-
 .../src/components/SpeechGenerationModal.tsx  | 504 ++++++++++++++++++
 .../src/components/VoiceCloneModal.tsx        | 356 +++++++++++++
 .../src/pages/tools/VoiceCloneTool.tsx        |   9 +-
 .../pages/tools/VoiceGenerationHistory.tsx    | 498 +++++++++++++++++
 5 files changed, 1368 insertions(+), 3 deletions(-)
 create mode 100644 apps/desktop/src/components/SpeechGenerationModal.tsx
 create mode 100644 apps/desktop/src/components/VoiceCloneModal.tsx
 create mode 100644 apps/desktop/src/pages/tools/VoiceGenerationHistory.tsx

diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx
index 90d1c9a..03670d7 100644
--- a/apps/desktop/src/App.tsx
+++ b/apps/desktop/src/App.tsx
@@ -26,7 +26,7 @@ import OutfitFavoritesTool from './pages/tools/OutfitFavoritesTool';
 import OutfitComparisonTool from './pages/tools/OutfitComparisonTool';
 import MaterialSearchTool from './pages/tools/MaterialSearchTool';
 import ImageGenerationTool from './pages/tools/ImageGenerationTool';
-import VoiceCloneTool from './pages/tools/VoiceCloneTool';
+import VoiceGenerationHistory from './pages/tools/VoiceGenerationHistory';
 import { EnrichedAnalysisDemo } from './pages/tools/EnrichedAnalysisDemo';
 import MaterialCenter from './pages/MaterialCenter';
 import VideoGeneration from './pages/VideoGeneration';
@@ -141,7 +141,7 @@ function App() {
               <Route path="/tools/outfit-comparison" element={<OutfitComparisonTool />} />
               <Route path="/tools/material-search" element={<MaterialSearchTool />} />
               <Route path="/tools/image-generation" element={<ImageGenerationTool />} />
-              <Route path="/tools/voice-clone" element={<VoiceCloneTool />} />
+              <Route path="/tools/voice-clone" element={<VoiceGenerationHistory />} />
               <Route path="/tools/advanced-filter-demo" element={<AdvancedFilterTool />} />
               <Route path="/tools/enriched-analysis-demo" element={<EnrichedAnalysisDemo />} />
             </Routes>
diff --git a/apps/desktop/src/components/SpeechGenerationModal.tsx b/apps/desktop/src/components/SpeechGenerationModal.tsx
new file mode 100644
index 0000000..57d3ea2
--- /dev/null
+++ b/apps/desktop/src/components/SpeechGenerationModal.tsx
@@ -0,0 +1,504 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import {
+  Volume2,
+  Play,
+  Download,
+  CheckCircle,
+  XCircle,
+  Loader2,
+  Settings,
+  Users,
+  Mic
+} from 'lucide-react';
+import { invoke } from '@tauri-apps/api/core';
+import { Modal } from './Modal';
+import { useNotifications } from './NotificationSystem';
+import SystemVoiceSelector from './SystemVoiceSelector';
+import {
+  SpeechGenerationRequest,
+  SpeechGenerationResponse,
+  SpeechGenerationStatus,
+  SpeechGenerationState,
+  VoiceInfo,
+  GetVoicesResponse
+} from '../types/voiceClone';
+import { SystemVoice } from '../types/systemVoice';
+
+interface SpeechGenerationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess?: (audioUrl: string) => void;
+}
+
+/**
+ * 语音合成Modal组件
+ * 封装语音合成功能为独立的弹框组件
+ */
+export const SpeechGenerationModal: React.FC<SpeechGenerationModalProps> = ({
+  isOpen,
+  onClose,
+  onSuccess
+}) => {
+  const { addNotification } = useNotifications();
+
+  // ============= 状态管理 =============
+  
+  // 音色管理状态
+  const [voices, setVoices] = useState<VoiceInfo[]>([]);
+  const [selectedVoiceId, setSelectedVoiceId] = useState<string>('');
+  const [isLoadingVoices, setIsLoadingVoices] = useState(false);
+
+  // 系统音色状态
+  const [selectedSystemVoice, setSelectedSystemVoice] = useState<SystemVoice | null>(null);
+  const [voiceSource, setVoiceSource] = useState<'system' | 'custom'>('system');
+
+  // 语音生成状态
+  const [speechRequest, setSpeechRequest] = useState<SpeechGenerationRequest>({
+    text: '',
+    voice_id: '',
+    speed: 1.0,
+    vol: 1.0,
+    emotion: 'calm'
+  });
+  const [speechState, setSpeechState] = useState<SpeechGenerationState>({
+    status: SpeechGenerationStatus.IDLE
+  });
+
+  // ============= 数据加载函数 =============
+
+  // 加载自定义音色列表
+  const loadVoices = useCallback(async () => {
+    setIsLoadingVoices(true);
+    try {
+      const response = await invoke<GetVoicesResponse>('get_voices');
+      if (response.status && response.data) {
+        setVoices(response.data);
+      } else {
+        console.warn('获取音色列表失败:', response.msg);
+      }
+    } catch (error) {
+      console.error('加载音色列表失败:', error);
+    } finally {
+      setIsLoadingVoices(false);
+    }
+  }, []);
+
+  // ============= 音色选择功能 =============
+
+  const handleVoiceSelect = useCallback((voiceId: string) => {
+    setSelectedVoiceId(voiceId);
+    setVoiceSource('custom');
+    setSpeechRequest(prev => ({
+      ...prev,
+      voice_id: voiceId
+    }));
+  }, []);
+
+  // 系统音色选择处理
+  const handleSystemVoiceSelect = useCallback((voiceId: string, voice: SystemVoice) => {
+    setSelectedSystemVoice(voice);
+    setVoiceSource('system');
+    setSpeechRequest(prev => ({
+      ...prev,
+      voice_id: voiceId
+    }));
+  }, []);
+
+  // ============= 语音生成功能 =============
+
+  const handleGenerateSpeech = useCallback(async () => {
+    if (!speechRequest.text.trim()) {
+      addNotification({
+        type: 'warning',
+        title: '请输入要合成的文本',
+        message: '请输入要转换为语音的文本内容'
+      });
+      return;
+    }
+
+    if (!speechRequest.voice_id) {
+      addNotification({
+        type: 'warning',
+        title: '请选择音色',
+        message: '请选择要使用的音色'
+      });
+      return;
+    }
+
+    setSpeechState({
+      status: SpeechGenerationStatus.GENERATING,
+      progress: '正在生成语音...'
+    });
+
+    try {
+      const response = await invoke<SpeechGenerationResponse>('generate_speech', { 
+        request: speechRequest 
+      });
+
+      if (response.status && response.data) {
+        setSpeechState({
+          status: SpeechGenerationStatus.SUCCESS,
+          result: response
+        });
+        
+        addNotification({
+          type: 'success',
+          title: '语音生成成功',
+          message: '语音已成功生成，可以播放或下载'
+        });
+
+        // 调用成功回调
+        if (onSuccess) {
+          onSuccess(response.data);
+        }
+      } else {
+        throw new Error(response.msg || '生成失败');
+      }
+    } catch (error) {
+      console.error('语音生成失败:', error);
+      setSpeechState({
+        status: SpeechGenerationStatus.ERROR,
+        error: String(error)
+      });
+      
+      addNotification({
+        type: 'error',
+        title: '语音生成失败',
+        message: `生成失败: ${error}`
+      });
+    }
+  }, [speechRequest, addNotification, onSuccess]);
+
+  // ============= Modal控制 =============
+
+  const handleClose = useCallback(() => {
+    // 重置状态
+    setSpeechRequest({
+      text: '',
+      voice_id: '',
+      speed: 1.0,
+      vol: 1.0,
+      emotion: 'calm'
+    });
+    setSpeechState({ status: SpeechGenerationStatus.IDLE });
+    setSelectedVoiceId('');
+    setSelectedSystemVoice(null);
+    setVoiceSource('system');
+    onClose();
+  }, [onClose]);
+
+  // ============= 生命周期 =============
+
+  useEffect(() => {
+    if (isOpen) {
+      loadVoices();
+    }
+  }, [isOpen, loadVoices]);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title="语音合成"
+      subtitle="将文本转换为语音"
+      icon={<Volume2 className="w-6 h-6 text-white" />}
+      size="lg"
+      variant="default"
+      closeOnBackdropClick={speechState.status !== SpeechGenerationStatus.GENERATING}
+      closeOnEscape={speechState.status !== SpeechGenerationStatus.GENERATING}
+    >
+      <div className="p-6 space-y-6">
+        {/* 文本输入 */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            合成文本 <span className="text-red-500">*</span>
+          </label>
+          <textarea
+            value={speechRequest.text}
+            onChange={(e) => setSpeechRequest(prev => ({ ...prev, text: e.target.value }))}
+            disabled={speechState.status === SpeechGenerationStatus.GENERATING}
+            placeholder="请输入要转换为语音的文本内容..."
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 resize-none"
+            rows={4}
+          />
+        </div>
+
+        {/* 音色选择 */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-3">
+            选择音色 <span className="text-red-500">*</span>
+          </label>
+          
+          {/* 音色来源选择 */}
+          <div className="flex gap-4 mb-4">
+            <div className="flex items-center">
+              <input
+                type="radio"
+                id="system-voice"
+                name="voice-source"
+                checked={voiceSource === 'system'}
+                onChange={() => setVoiceSource('system')}
+                disabled={speechState.status === SpeechGenerationStatus.GENERATING}
+                className="mr-2"
+              />
+              <label htmlFor="system-voice" className="flex items-center gap-2 text-sm font-medium text-gray-700">
+                <Settings className="w-4 h-4 text-blue-600" />
+                系统音色
+              </label>
+            </div>
+            <div className="flex items-center">
+              <input
+                type="radio"
+                id="custom-voice"
+                name="voice-source"
+                checked={voiceSource === 'custom'}
+                onChange={() => setVoiceSource('custom')}
+                disabled={speechState.status === SpeechGenerationStatus.GENERATING}
+                className="mr-2"
+              />
+              <label htmlFor="custom-voice" className="flex items-center gap-2 text-sm font-medium text-gray-700">
+                <Users className="w-4 h-4 text-orange-600" />
+                自定义音色
+              </label>
+            </div>
+          </div>
+
+          {/* 系统音色选择器 */}
+          {voiceSource === 'system' && (
+            <SystemVoiceSelector
+              selectedVoiceId={voiceSource === 'system' ? speechRequest.voice_id : ''}
+              onVoiceSelect={handleSystemVoiceSelect}
+              showSearch={true}
+              showTypeFilter={true}
+              showGenderFilter={true}
+              className="border-0 shadow-none"
+            />
+          )}
+
+          {/* 自定义音色选择 */}
+          {voiceSource === 'custom' && (
+            <div className="border border-gray-200 rounded-lg p-4">
+              <div className="flex items-center justify-between mb-3">
+                <span className="text-sm font-medium text-gray-700">自定义音色列表</span>
+                <button
+                  onClick={loadVoices}
+                  disabled={isLoadingVoices || speechState.status === SpeechGenerationStatus.GENERATING}
+                  className="text-sm text-blue-600 hover:text-blue-700 disabled:opacity-50"
+                >
+                  刷新
+                </button>
+              </div>
+
+              <div className="space-y-3 max-h-64 overflow-y-auto">
+                {isLoadingVoices ? (
+                  <div className="flex items-center justify-center py-8">
+                    <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+                    <span className="ml-2 text-gray-500">加载中...</span>
+                  </div>
+                ) : voices.length === 0 ? (
+                  <div className="text-center py-8 text-gray-500">
+                    <Volume2 className="w-12 h-12 text-gray-300 mx-auto mb-3" />
+                    <p>暂无可用音色</p>
+                    <p className="text-sm">请先克隆一个音色</p>
+                  </div>
+                ) : (
+                  voices.map((voice) => (
+                    <div
+                      key={voice.voice_id}
+                      className={`p-3 border rounded-lg cursor-pointer transition-colors ${
+                        voiceSource === 'custom' && selectedVoiceId === voice.voice_id
+                          ? 'border-orange-500 bg-orange-50'
+                          : 'border-gray-200 hover:border-orange-300'
+                      }`}
+                      onClick={() => handleVoiceSelect(voice.voice_id)}
+                    >
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <p className="font-medium text-gray-900">{voice.voice_name || voice.voice_id}</p>
+                          <p className="text-sm text-gray-500">ID: {voice.voice_id}</p>
+                        </div>
+                        {voiceSource === 'custom' && selectedVoiceId === voice.voice_id && (
+                          <CheckCircle className="w-5 h-5 text-orange-600" />
+                        )}
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* 参数控制 */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-3">
+            语音参数
+          </label>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                语速: {speechRequest.speed}
+              </label>
+              <input
+                type="range"
+                min="0.5"
+                max="2"
+                step="0.1"
+                value={speechRequest.speed}
+                onChange={(e) => setSpeechRequest(prev => ({
+                  ...prev,
+                  speed: parseFloat(e.target.value)
+                }))}
+                disabled={speechState.status === SpeechGenerationStatus.GENERATING}
+                className="w-full"
+              />
+              <div className="flex justify-between text-xs text-gray-500 mt-1">
+                <span>0.5x</span>
+                <span>2.0x</span>
+              </div>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                音量: {speechRequest.vol}
+              </label>
+              <input
+                type="range"
+                min="0.1"
+                max="2"
+                step="0.1"
+                value={speechRequest.vol}
+                onChange={(e) => setSpeechRequest(prev => ({
+                  ...prev,
+                  vol: parseFloat(e.target.value)
+                }))}
+                disabled={speechState.status === SpeechGenerationStatus.GENERATING}
+                className="w-full"
+              />
+              <div className="flex justify-between text-xs text-gray-500 mt-1">
+                <span>0.1x</span>
+                <span>2.0x</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 情感选择 */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            情感风格
+          </label>
+          <select
+            value={speechRequest.emotion || 'calm'}
+            onChange={(e) => setSpeechRequest(prev => ({ ...prev, emotion: e.target.value }))}
+            disabled={speechState.status === SpeechGenerationStatus.GENERATING}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50"
+          >
+            <option value="calm">平静</option>
+            <option value="happy">快乐</option>
+            <option value="sad">悲伤</option>
+            <option value="angry">愤怒</option>
+            <option value="excited">兴奋</option>
+            <option value="gentle">温柔</option>
+          </select>
+        </div>
+
+        {/* 生成状态显示 */}
+        {speechState.status !== SpeechGenerationStatus.IDLE && (
+          <div className="p-4 rounded-lg border">
+            <div className="flex items-center gap-3">
+              {speechState.status === SpeechGenerationStatus.SUCCESS && (
+                <>
+                  <CheckCircle className="w-5 h-5 text-green-600" />
+                  <div className="flex-1">
+                    <p className="text-sm font-medium text-green-600">生成成功</p>
+                    <p className="text-xs text-gray-500">语音已生成完成</p>
+                  </div>
+                </>
+              )}
+              {speechState.status === SpeechGenerationStatus.ERROR && (
+                <>
+                  <XCircle className="w-5 h-5 text-red-600" />
+                  <div className="flex-1">
+                    <p className="text-sm font-medium text-red-600">生成失败</p>
+                    <p className="text-xs text-gray-500">{speechState.error}</p>
+                  </div>
+                </>
+              )}
+              {speechState.status === SpeechGenerationStatus.GENERATING && (
+                <>
+                  <Loader2 className="w-5 h-5 animate-spin text-blue-600" />
+                  <div className="flex-1">
+                    <p className="text-sm font-medium text-blue-600">生成中</p>
+                    <p className="text-xs text-gray-500">{speechState.progress}</p>
+                  </div>
+                </>
+              )}
+            </div>
+
+            {/* 音频播放器 */}
+            {speechState.result?.data && speechState.status === SpeechGenerationStatus.SUCCESS && (
+              <div className="mt-4 p-3 bg-gray-50 rounded-lg">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-sm font-medium text-gray-700">生成的语音</span>
+                  <button
+                    onClick={() => {
+                      // 下载音频文件
+                      const link = document.createElement('a');
+                      link.href = speechState.result!.data!;
+                      link.download = 'generated_speech.wav';
+                      link.click();
+                    }}
+                    className="flex items-center gap-1 px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                  >
+                    <Download className="w-3 h-3" />
+                    下载
+                  </button>
+                </div>
+
+                <audio
+                  controls
+                  src={speechState.result.data}
+                  className="w-full"
+                >
+                  您的浏览器不支持音频播放
+                </audio>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* 操作按钮 */}
+        <div className="flex gap-3 pt-4 border-t">
+          <button
+            onClick={handleClose}
+            disabled={speechState.status === SpeechGenerationStatus.GENERATING}
+            className="flex-1 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 disabled:opacity-50 transition-colors"
+          >
+            {speechState.status === SpeechGenerationStatus.SUCCESS ? '完成' : '取消'}
+          </button>
+          <button
+            onClick={handleGenerateSpeech}
+            disabled={
+              speechState.status === SpeechGenerationStatus.GENERATING ||
+              !speechRequest.text.trim() ||
+              !speechRequest.voice_id
+            }
+            className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {speechState.status === SpeechGenerationStatus.GENERATING ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin" />
+                生成中...
+              </>
+            ) : (
+              <>
+                <Volume2 className="w-4 h-4" />
+                生成语音
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
diff --git a/apps/desktop/src/components/VoiceCloneModal.tsx b/apps/desktop/src/components/VoiceCloneModal.tsx
new file mode 100644
index 0000000..dada131
--- /dev/null
+++ b/apps/desktop/src/components/VoiceCloneModal.tsx
@@ -0,0 +1,356 @@
+import React, { useState, useCallback } from 'react';
+import {
+  Mic,
+  Upload,
+  Wand2,
+  CheckCircle,
+  XCircle,
+  Loader2,
+  Music,
+  FileAudio,
+  X
+} from 'lucide-react';
+import { invoke } from '@tauri-apps/api/core';
+import { open } from '@tauri-apps/plugin-dialog';
+import { Modal } from './Modal';
+import { useNotifications } from './NotificationSystem';
+import {
+  AudioUploadRequest,
+  AudioUploadResponse,
+  VoiceCloneRequest,
+  VoiceCloneResponse,
+  VoiceCloneStatus,
+  AudioFileInfo,
+  VoiceCloneState
+} from '../types/voiceClone';
+
+interface VoiceCloneModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess?: (voiceId: string) => void;
+}
+
+/**
+ * 声音克隆Modal组件
+ * 封装声音克隆功能为独立的弹框组件
+ */
+export const VoiceCloneModal: React.FC<VoiceCloneModalProps> = ({
+  isOpen,
+  onClose,
+  onSuccess
+}) => {
+  const { addNotification } = useNotifications();
+
+  // ============= 状态管理 =============
+  
+  // 音频上传状态
+  const [audioFile, setAudioFile] = useState<AudioFileInfo | null>(null);
+
+  // 声音克隆状态
+  const [cloneText, setCloneText] = useState('');
+  const [customVoiceId, setCustomVoiceId] = useState('');
+  const [cloneState, setCloneState] = useState<VoiceCloneState>({
+    status: VoiceCloneStatus.IDLE
+  });
+
+  // 合并后的状态：是否正在处理（上传+克隆）
+  const [isProcessingClone, setIsProcessingClone] = useState(false);
+
+  // ============= 文件选择功能 =============
+
+  const handleFileSelect = useCallback(async () => {
+    try {
+      const selected = await open({
+        multiple: false,
+        filters: [{
+          name: 'Audio Files',
+          extensions: ['wav', 'mp3', 'flac', 'm4a', 'aac', 'ogg']
+        }]
+      });
+
+      if (selected && typeof selected === 'string') {
+        const file = new File([], selected.split('/').pop() || 'audio');
+        const audioInfo: AudioFileInfo = {
+          file,
+          name: file.name,
+          size: 0, // 实际应该获取文件大小
+          type: file.type || 'audio/wav',
+          preview_url: selected
+        };
+        
+        setAudioFile(audioInfo);
+        addNotification({
+          type: 'success',
+          title: '文件选择成功',
+          message: `已选择音频文件: ${audioInfo.name}`
+        });
+      }
+    } catch (error) {
+      console.error('文件选择失败:', error);
+      addNotification({
+        type: 'error',
+        title: '文件选择失败',
+        message: `选择文件时出错: ${error}`
+      });
+    }
+  }, [addNotification]);
+
+  // ============= 声音克隆功能 =============
+
+  const handleVoiceClone = useCallback(async () => {
+    if (!cloneText.trim()) {
+      addNotification({
+        type: 'warning',
+        title: '请输入克隆文本',
+        message: '请输入用于声音克隆的文本内容'
+      });
+      return;
+    }
+
+    if (!audioFile?.preview_url) {
+      addNotification({
+        type: 'warning',
+        title: '请先选择音频文件',
+        message: '请先选择参考音频文件'
+      });
+      return;
+    }
+
+    setIsProcessingClone(true);
+    setCloneState({
+      status: VoiceCloneStatus.PROCESSING,
+      progress: '正在上传音频文件...'
+    });
+
+    try {
+      // 第一步：上传音频文件
+      const uploadRequest: AudioUploadRequest = {
+        audio_file_path: audioFile.preview_url,
+        purpose: 'voice_clone'
+      };
+
+      const uploadResponse = await invoke<AudioUploadResponse>('upload_audio_file', { request: uploadRequest });
+
+      if (!uploadResponse.status) {
+        throw new Error(uploadResponse.msg || '音频上传失败');
+      }
+
+      // 更新进度
+      setCloneState({
+        status: VoiceCloneStatus.PROCESSING,
+        progress: '音频上传成功，正在克隆声音...'
+      });
+
+      // 第二步：执行声音克隆
+      const finalVoiceId = customVoiceId.trim() || `voice_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
+
+      const cloneRequest: VoiceCloneRequest = {
+        text: cloneText,
+        model: 'speech-02-hd',
+        need_noise_reduction: true,
+        voice_id: finalVoiceId,
+        prefix: 'BoWong-',
+        audio_file_path: audioFile.preview_url
+      };
+
+      const cloneResponse = await invoke<VoiceCloneResponse>('clone_voice', { request: cloneRequest });
+
+      if (cloneResponse.status && cloneResponse.data) {
+        setCloneState({
+          status: VoiceCloneStatus.SUCCESS,
+          result: cloneResponse
+        });
+
+        const voiceId = cloneResponse.extra?.voice_id || finalVoiceId;
+        addNotification({
+          type: 'success',
+          title: '声音克隆成功',
+          message: `新音色ID: ${voiceId}`
+        });
+
+        // 调用成功回调
+        if (onSuccess) {
+          onSuccess(voiceId);
+        }
+
+        // 延迟关闭Modal，让用户看到成功状态
+        setTimeout(() => {
+          handleClose();
+        }, 2000);
+      } else {
+        throw new Error(cloneResponse.msg || '克隆失败');
+      }
+    } catch (error) {
+      console.error('声音克隆失败:', error);
+      setCloneState({
+        status: VoiceCloneStatus.ERROR,
+        error: String(error)
+      });
+
+      addNotification({
+        type: 'error',
+        title: '声音克隆失败',
+        message: `克隆失败: ${error}`
+      });
+    } finally {
+      setIsProcessingClone(false);
+    }
+  }, [cloneText, audioFile, customVoiceId, addNotification, onSuccess]);
+
+  // ============= Modal控制 =============
+
+  const handleClose = useCallback(() => {
+    // 重置状态
+    setAudioFile(null);
+    setCloneText('');
+    setCustomVoiceId('');
+    setCloneState({ status: VoiceCloneStatus.IDLE });
+    setIsProcessingClone(false);
+    onClose();
+  }, [onClose]);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title="声音克隆"
+      subtitle="上传参考音频，生成专属音色"
+      icon={<Mic className="w-6 h-6 text-white" />}
+      size="lg"
+      variant="default"
+      closeOnBackdropClick={!isProcessingClone}
+      closeOnEscape={!isProcessingClone}
+    >
+      <div className="p-6 space-y-6">
+        {/* 音频文件上传 */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-3">
+            参考音频文件
+          </label>
+          <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-purple-400 transition-colors">
+            {audioFile ? (
+              <div className="flex items-center justify-center gap-3">
+                <FileAudio className="w-8 h-8 text-purple-600" />
+                <div className="text-left">
+                  <p className="text-sm font-medium text-gray-900">{audioFile.name}</p>
+                  <p className="text-xs text-gray-500">{audioFile.type}</p>
+                </div>
+              </div>
+            ) : (
+              <div>
+                <Music className="w-8 h-8 text-gray-400 mx-auto mb-2" />
+                <p className="text-gray-600 text-sm mb-1">选择参考音频文件</p>
+                <p className="text-xs text-gray-500">支持 WAV, MP3, FLAC, M4A, AAC, OGG 格式</p>
+              </div>
+            )}
+
+            <button
+              onClick={handleFileSelect}
+              disabled={isProcessingClone}
+              className="mt-3 px-4 py-2 text-sm bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 transition-colors"
+            >
+              <Upload className="w-4 h-4 inline mr-2" />
+              {audioFile ? '重新选择' : '选择文件'}
+            </button>
+          </div>
+        </div>
+
+        {/* 克隆文本输入 */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            克隆文本 <span className="text-red-500">*</span>
+          </label>
+          <textarea
+            value={cloneText}
+            onChange={(e) => setCloneText(e.target.value)}
+            disabled={isProcessingClone}
+            placeholder="请输入用于声音克隆的文本内容，建议使用清晰、标准的语音内容..."
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent disabled:opacity-50 resize-none"
+            rows={4}
+          />
+          <p className="text-xs text-gray-500 mt-1">
+            建议使用与参考音频相同的语言和风格
+          </p>
+        </div>
+
+        {/* 自定义音色ID */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            自定义音色ID（可选）
+          </label>
+          <input
+            type="text"
+            value={customVoiceId}
+            onChange={(e) => setCustomVoiceId(e.target.value)}
+            disabled={isProcessingClone}
+            placeholder="留空将自动生成唯一ID"
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent disabled:opacity-50"
+          />
+        </div>
+
+        {/* 克隆状态显示 */}
+        {cloneState.status !== VoiceCloneStatus.IDLE && (
+          <div className="p-4 rounded-lg border">
+            <div className="flex items-center gap-3">
+              {cloneState.status === VoiceCloneStatus.SUCCESS && (
+                <>
+                  <CheckCircle className="w-5 h-5 text-green-600" />
+                  <div>
+                    <p className="text-sm font-medium text-green-600">克隆成功</p>
+                    <p className="text-xs text-gray-500">音色已生成，即将关闭窗口</p>
+                  </div>
+                </>
+              )}
+              {cloneState.status === VoiceCloneStatus.ERROR && (
+                <>
+                  <XCircle className="w-5 h-5 text-red-600" />
+                  <div>
+                    <p className="text-sm font-medium text-red-600">克隆失败</p>
+                    <p className="text-xs text-gray-500">{cloneState.error}</p>
+                  </div>
+                </>
+              )}
+              {cloneState.status === VoiceCloneStatus.PROCESSING && (
+                <>
+                  <Loader2 className="w-5 h-5 animate-spin text-purple-600" />
+                  <div>
+                    <p className="text-sm font-medium text-purple-600">处理中</p>
+                    <p className="text-xs text-gray-500">{cloneState.progress}</p>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* 操作按钮 */}
+        <div className="flex gap-3 pt-4 border-t">
+          <button
+            onClick={handleClose}
+            disabled={isProcessingClone}
+            className="flex-1 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 disabled:opacity-50 transition-colors"
+          >
+            取消
+          </button>
+          <button
+            onClick={handleVoiceClone}
+            disabled={isProcessingClone || !cloneText.trim() || !audioFile}
+            className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {isProcessingClone ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin" />
+                处理中...
+              </>
+            ) : (
+              <>
+                <Wand2 className="w-4 h-4" />
+                开始克隆
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
diff --git a/apps/desktop/src/pages/tools/VoiceCloneTool.tsx b/apps/desktop/src/pages/tools/VoiceCloneTool.tsx
index e7a6727..2b23e98 100644
--- a/apps/desktop/src/pages/tools/VoiceCloneTool.tsx
+++ b/apps/desktop/src/pages/tools/VoiceCloneTool.tsx
@@ -13,7 +13,14 @@ import {
   FileAudio,
   Trash2,
   Star,
-  Users
+  Users,
+  Search,
+  Plus,
+  Play,
+  Pause,
+  Calendar,
+  Clock,
+  Filter
 } from 'lucide-react';
 import { invoke } from '@tauri-apps/api/core';
 import { open } from '@tauri-apps/plugin-dialog';
diff --git a/apps/desktop/src/pages/tools/VoiceGenerationHistory.tsx b/apps/desktop/src/pages/tools/VoiceGenerationHistory.tsx
new file mode 100644
index 0000000..e9844ec
--- /dev/null
+++ b/apps/desktop/src/pages/tools/VoiceGenerationHistory.tsx
@@ -0,0 +1,498 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import {
+  Search,
+  Plus,
+  Play,
+  Pause,
+  Download,
+  Trash2,
+  RefreshCw,
+  Calendar,
+  Clock,
+  Filter,
+  Music,
+  Loader2,
+  Volume2,
+  Mic,
+  CheckCircle,
+  XCircle,
+  AlertCircle
+} from 'lucide-react';
+import { invoke } from '@tauri-apps/api/core';
+import { useNotifications } from '../../components/NotificationSystem';
+import { VoiceCloneModal } from '../../components/VoiceCloneModal';
+import { SpeechGenerationModal } from '../../components/SpeechGenerationModal';
+import {
+  SpeechGenerationRecord,
+  SpeechGenerationRecordStatus
+} from '../../types/voiceClone';
+
+/**
+ * 语音生成历史页面
+ * 展示语音生成记录列表，支持搜索、筛选、播放等功能
+ */
+const VoiceGenerationHistory: React.FC = () => {
+  const { addNotification } = useNotifications();
+
+  // ============= 状态管理 =============
+  
+  // 记录列表
+  const [records, setRecords] = useState<SpeechGenerationRecord[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [searchText, setSearchText] = useState('');
+  const [statusFilter, setStatusFilter] = useState<SpeechGenerationRecordStatus | 'all'>('all');
+  
+  // 音频播放状态
+  const [playingRecordId, setPlayingRecordId] = useState<string | null>(null);
+  const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(null);
+
+  // Modal状态
+  const [showVoiceCloneModal, setShowVoiceCloneModal] = useState(false);
+  const [showSpeechGenerationModal, setShowSpeechGenerationModal] = useState(false);
+
+  // ============= 数据加载函数 =============
+
+  // 加载语音生成记录
+  const loadRecords = useCallback(async () => {
+    setLoading(true);
+    try {
+      const allRecords = await invoke<SpeechGenerationRecord[]>('get_speech_generation_records', {
+        limit: 100 // 限制最近100条记录
+      });
+      
+      // 根据搜索和筛选条件过滤记录
+      let filteredRecords = allRecords;
+      
+      if (searchText.trim()) {
+        filteredRecords = filteredRecords.filter(record => 
+          record.text.toLowerCase().includes(searchText.toLowerCase()) ||
+          (record.voice_name && record.voice_name.toLowerCase().includes(searchText.toLowerCase())) ||
+          record.voice_id.toLowerCase().includes(searchText.toLowerCase())
+        );
+      }
+      
+      if (statusFilter !== 'all') {
+        filteredRecords = filteredRecords.filter(record => record.status === statusFilter);
+      }
+      
+      setRecords(filteredRecords);
+    } catch (error) {
+      console.error('加载语音生成记录失败:', error);
+      addNotification({
+        type: 'error',
+        title: '加载失败',
+        message: `加载语音生成记录失败: ${error}`
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, [searchText, statusFilter, addNotification]);
+
+  // 删除记录
+  const handleDeleteRecord = useCallback(async (recordId: string) => {
+    try {
+      await invoke('delete_speech_generation_record', { recordId });
+      setRecords(prev => prev.filter(r => r.id !== recordId));
+      addNotification({
+        type: 'success',
+        title: '删除成功',
+        message: '语音生成记录已删除'
+      });
+    } catch (error) {
+      console.error('删除记录失败:', error);
+      addNotification({
+        type: 'error',
+        title: '删除失败',
+        message: `删除记录失败: ${error}`
+      });
+    }
+  }, [addNotification]);
+
+  // 播放/暂停音频
+  const handlePlayPause = useCallback((record: SpeechGenerationRecord) => {
+    if (!record.audio_url && !record.local_file_path) {
+      addNotification({
+        type: 'warning',
+        title: '无法播放',
+        message: '该记录没有可播放的音频文件'
+      });
+      return;
+    }
+
+    const audioUrl = record.local_file_path || record.audio_url;
+    
+    if (playingRecordId === record.id) {
+      // 暂停当前播放
+      if (audioElement) {
+        audioElement.pause();
+        setPlayingRecordId(null);
+      }
+    } else {
+      // 停止之前的播放
+      if (audioElement) {
+        audioElement.pause();
+      }
+      
+      // 开始新的播放
+      const audio = new Audio(audioUrl);
+      audio.onended = () => setPlayingRecordId(null);
+      audio.onerror = () => {
+        addNotification({
+          type: 'error',
+          title: '播放失败',
+          message: '音频文件播放失败'
+        });
+        setPlayingRecordId(null);
+      };
+      
+      audio.play().then(() => {
+        setPlayingRecordId(record.id);
+        setAudioElement(audio);
+      }).catch(error => {
+        console.error('播放失败:', error);
+        addNotification({
+          type: 'error',
+          title: '播放失败',
+          message: '音频文件播放失败'
+        });
+      });
+    }
+  }, [playingRecordId, audioElement, addNotification]);
+
+  // 下载音频文件
+  const handleDownload = useCallback((record: SpeechGenerationRecord) => {
+    if (!record.audio_url && !record.local_file_path) {
+      addNotification({
+        type: 'warning',
+        title: '无法下载',
+        message: '该记录没有可下载的音频文件'
+      });
+      return;
+    }
+
+    const audioUrl = record.local_file_path || record.audio_url;
+    const link = document.createElement('a');
+    link.href = audioUrl!;
+    link.download = `speech_${record.id}.wav`;
+    link.click();
+  }, [addNotification]);
+
+  // ============= Modal处理函数 =============
+
+  // 声音克隆成功回调
+  const handleVoiceCloneSuccess = useCallback((voiceId: string) => {
+    console.log('声音克隆成功，音色ID:', voiceId);
+    // 刷新记录列表
+    loadRecords();
+  }, [loadRecords]);
+
+  // 语音合成成功回调
+  const handleSpeechGenerationSuccess = useCallback((audioUrl: string) => {
+    console.log('语音合成成功，音频URL:', audioUrl);
+    // 刷新记录列表
+    loadRecords();
+  }, [loadRecords]);
+
+  // ============= 生命周期 =============
+
+  useEffect(() => {
+    loadRecords();
+  }, [loadRecords]);
+
+  // 清理音频元素
+  useEffect(() => {
+    return () => {
+      if (audioElement) {
+        audioElement.pause();
+      }
+    };
+  }, [audioElement]);
+
+  // ============= 辅助函数 =============
+
+  // 格式化时间
+  const formatTime = (timeStr: string) => {
+    const date = new Date(timeStr);
+    return date.toLocaleString('zh-CN');
+  };
+
+  // 格式化持续时间
+  const formatDuration = (ms?: number) => {
+    if (!ms) return '-';
+    if (ms < 1000) return `${ms}ms`;
+    return `${(ms / 1000).toFixed(1)}s`;
+  };
+
+  // 获取状态样式
+  const getStatusStyle = (status: SpeechGenerationRecordStatus) => {
+    switch (status) {
+      case SpeechGenerationRecordStatus.Completed:
+        return 'bg-green-100 text-green-800 border-green-200';
+      case SpeechGenerationRecordStatus.Failed:
+        return 'bg-red-100 text-red-800 border-red-200';
+      case SpeechGenerationRecordStatus.Processing:
+        return 'bg-blue-100 text-blue-800 border-blue-200';
+      default:
+        return 'bg-gray-100 text-gray-800 border-gray-200';
+    }
+  };
+
+  // 获取状态图标
+  const getStatusIcon = (status: SpeechGenerationRecordStatus) => {
+    switch (status) {
+      case SpeechGenerationRecordStatus.Completed:
+        return <CheckCircle className="w-3 h-3" />;
+      case SpeechGenerationRecordStatus.Failed:
+        return <XCircle className="w-3 h-3" />;
+      case SpeechGenerationRecordStatus.Processing:
+        return <Loader2 className="w-3 h-3 animate-spin" />;
+      default:
+        return <AlertCircle className="w-3 h-3" />;
+    }
+  };
+
+  // 获取状态文本
+  const getStatusText = (status: SpeechGenerationRecordStatus) => {
+    switch (status) {
+      case SpeechGenerationRecordStatus.Completed:
+        return '已完成';
+      case SpeechGenerationRecordStatus.Failed:
+        return '失败';
+      case SpeechGenerationRecordStatus.Processing:
+        return '处理中';
+      default:
+        return '待处理';
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* 页面头部 */}
+      <div className="bg-white border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="py-6">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-4">
+                <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center shadow-sm">
+                  <Volume2 className="w-6 h-6 text-white" />
+                </div>
+                <div>
+                  <h1 className="text-2xl font-bold text-gray-900">语音生成历史</h1>
+                  <p className="text-sm text-gray-600 mt-1">管理和播放您的语音生成记录</p>
+                </div>
+              </div>
+              
+              <div className="flex items-center gap-3">
+                <button
+                  onClick={() => setShowVoiceCloneModal(true)}
+                  className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+                >
+                  <Mic className="w-4 h-4" />
+                  声音克隆
+                </button>
+                <button
+                  onClick={() => setShowSpeechGenerationModal(true)}
+                  className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  <Plus className="w-4 h-4" />
+                  语音合成
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 搜索和筛选栏 */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        <div className="bg-white rounded-lg border border-gray-200 p-4 mb-6">
+          <div className="flex flex-col sm:flex-row gap-4">
+            {/* 搜索框 */}
+            <div className="flex-1 relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+              <input
+                type="text"
+                placeholder="搜索文本内容、音色名称或ID..."
+                value={searchText}
+                onChange={(e) => setSearchText(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+            
+            {/* 状态筛选 */}
+            <div className="flex items-center gap-2">
+              <Filter className="w-4 h-4 text-gray-400" />
+              <select
+                value={statusFilter}
+                onChange={(e) => setStatusFilter(e.target.value as SpeechGenerationRecordStatus | 'all')}
+                className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              >
+                <option value="all">全部状态</option>
+                <option value={SpeechGenerationRecordStatus.Completed}>已完成</option>
+                <option value={SpeechGenerationRecordStatus.Processing}>处理中</option>
+                <option value={SpeechGenerationRecordStatus.Failed}>失败</option>
+                <option value={SpeechGenerationRecordStatus.Pending}>待处理</option>
+              </select>
+            </div>
+            
+            {/* 刷新按钮 */}
+            <button
+              onClick={loadRecords}
+              disabled={loading}
+              className="flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 disabled:opacity-50 transition-colors"
+            >
+              <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+              刷新
+            </button>
+          </div>
+        </div>
+
+        {/* 记录列表 */}
+        <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+          {loading ? (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+              <span className="ml-2 text-gray-500">加载中...</span>
+            </div>
+          ) : records.length === 0 ? (
+            <div className="text-center py-12">
+              <Music className="w-16 h-16 mx-auto mb-4 text-gray-300" />
+              <h3 className="text-lg font-medium text-gray-900 mb-2">暂无语音生成记录</h3>
+              <p className="text-gray-500 mb-6">开始创建您的第一个语音生成记录</p>
+              <div className="flex justify-center gap-3">
+                <button
+                  onClick={() => setShowVoiceCloneModal(true)}
+                  className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+                >
+                  <Mic className="w-4 h-4" />
+                  声音克隆
+                </button>
+                <button
+                  onClick={() => setShowSpeechGenerationModal(true)}
+                  className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  <Plus className="w-4 h-4" />
+                  语音合成
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="divide-y divide-gray-200">
+              {records.map((record) => (
+                <div key={record.id} className="p-6 hover:bg-gray-50 transition-colors">
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1 min-w-0">
+                      {/* 状态和基本信息 */}
+                      <div className="flex items-center gap-3 mb-3">
+                        <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium border ${getStatusStyle(record.status)}`}>
+                          {getStatusIcon(record.status)}
+                          {getStatusText(record.status)}
+                        </span>
+                        <span className="text-sm text-gray-500">
+                          音色: {record.voice_name || record.voice_id}
+                        </span>
+                        {record.duration_ms && (
+                          <span className="text-sm text-gray-500">
+                            耗时: {formatDuration(record.duration_ms)}
+                          </span>
+                        )}
+                      </div>
+
+                      {/* 文本内容 */}
+                      <div className="mb-3">
+                        <p className="text-gray-900 text-sm leading-relaxed line-clamp-3">
+                          {record.text}
+                        </p>
+                      </div>
+
+                      {/* 参数信息 */}
+                      <div className="flex items-center gap-4 text-xs text-gray-500 mb-3">
+                        <span>语速: {record.speed}x</span>
+                        <span>音量: {record.volume}</span>
+                        {record.emotion && <span>情感: {record.emotion}</span>}
+                      </div>
+
+                      {/* 时间信息 */}
+                      <div className="flex items-center gap-4 text-xs text-gray-500">
+                        <div className="flex items-center gap-1">
+                          <Calendar className="w-3 h-3" />
+                          <span>创建: {formatTime(record.created_at)}</span>
+                        </div>
+                        {record.completed_at && (
+                          <div className="flex items-center gap-1">
+                            <Clock className="w-3 h-3" />
+                            <span>完成: {formatTime(record.completed_at)}</span>
+                          </div>
+                        )}
+                      </div>
+
+                      {/* 错误信息 */}
+                      {record.error_message && (
+                        <div className="mt-3 p-3 bg-red-50 border border-red-200 rounded-lg">
+                          <p className="text-sm text-red-700">{record.error_message}</p>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* 操作按钮 */}
+                    <div className="flex items-center gap-2 ml-4">
+                      {/* 播放/暂停按钮 */}
+                      {(record.audio_url || record.local_file_path) && record.status === SpeechGenerationRecordStatus.Completed && (
+                        <button
+                          onClick={() => handlePlayPause(record)}
+                          className="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                          title={playingRecordId === record.id ? "暂停播放" : "播放音频"}
+                        >
+                          {playingRecordId === record.id ? (
+                            <Pause className="w-4 h-4" />
+                          ) : (
+                            <Play className="w-4 h-4" />
+                          )}
+                        </button>
+                      )}
+
+                      {/* 下载按钮 */}
+                      {(record.audio_url || record.local_file_path) && record.status === SpeechGenerationRecordStatus.Completed && (
+                        <button
+                          onClick={() => handleDownload(record)}
+                          className="p-2 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors"
+                          title="下载音频"
+                        >
+                          <Download className="w-4 h-4" />
+                        </button>
+                      )}
+
+                      {/* 删除按钮 */}
+                      <button
+                        onClick={() => handleDeleteRecord(record.id)}
+                        className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                        title="删除记录"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Modal组件 */}
+      <VoiceCloneModal
+        isOpen={showVoiceCloneModal}
+        onClose={() => setShowVoiceCloneModal(false)}
+        onSuccess={handleVoiceCloneSuccess}
+      />
+
+      <SpeechGenerationModal
+        isOpen={showSpeechGenerationModal}
+        onClose={() => setShowSpeechGenerationModal(false)}
+        onSuccess={handleSpeechGenerationSuccess}
+      />
+    </div>
+  );
+};
+
+export default VoiceGenerationHistory;