feat(frontend): implement Voice Clone training task management

- Refactor VoiceClone page to task list view with pagination
- Add training components: CreateTaskDialog, TaskCard, TaskList,
TaskProgress, TrainingLogs, UploadZone
- Add TaskDetail page for real-time progress and logs display
- Implement training API module with SSE progress subscription
- Add training store with task state management and SSE handlers
- Extend TypeScript types for TaskResponse, ProgressEvent, FileMetadata
- Update i18n locales with training-related translations (zh-CN/en-US)
- Add /clone/:taskId route for task detail navigation

tts-voice-app/.gitignore

@@ -0,0 +1,35 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Dependencies
+node_modules
+.npm
+
+# Build outputs
+dist
+dist-ssr
+out
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Electron
+release
+
+# TypeScript cache
+*.tsbuildinfo

tts-voice-app/electron.vite.config.ts

@@ -0,0 +1,27 @@
+import { resolve } from 'path'
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  main: {
+    plugins: [externalizeDepsPlugin()]
+  },
+  preload: {
+    plugins: [externalizeDepsPlugin()]
+  },
+  renderer: {
+    resolve: {
+      alias: {
+        '@': resolve('src/renderer/src')
+      }
+    },
+    plugins: [vue()],
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: `@use "@/styles/variables.scss" as *;`
+        }
+      }
+    }
+  }
+})

tts-voice-app/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "tts-voice-app",
+  "version": "1.0.0",
+  "description": "TTS Voice Desktop Application",
+  "main": "./out/main/index.js",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "dev": "electron-vite dev",
+    "build": "electron-vite build",
+    "preview": "electron-vite preview",
+    "build:win": "npm run build && electron-builder --win --config",
+    "build:mac": "npm run build && electron-builder --mac --config",
+    "build:linux": "npm run build && electron-builder --linux --config"
+  },
+  "dependencies": {
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.5",
+    "pinia": "^2.1.7",
+    "element-plus": "^2.5.0",
+    "axios": "^1.6.0",
+    "vue-i18n": "^9.9.0"
+  },
+  "devDependencies": {
+    "@electron-toolkit/preload": "^3.0.0",
+    "@electron-toolkit/utils": "^3.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "electron": "^28.0.0",
+    "electron-vite": "^2.0.0",
+    "electron-builder": "^24.9.1",
+    "sass": "^1.69.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vue-tsc": "^1.8.0",
+    "@types/node": "^20.10.0"
+  }
+}

tts-voice-app/src/main/index.ts

@@ -0,0 +1,62 @@
+import { app, shell, BrowserWindow, ipcMain } from 'electron'
+import { join } from 'path'
+import { electronApp, optimizer, is } from '@electron-toolkit/utils'
+
+function createWindow(): void {
+  const mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    minWidth: 900,
+    minHeight: 600,
+    show: false,
+    autoHideMenuBar: true,
+    titleBarStyle: 'hiddenInset',
+    webPreferences: {
+      preload: join(__dirname, '../preload/index.js'),
+      sandbox: false,
+      nodeIntegration: false,
+      contextIsolation: true
+    }
+  })
+
+  mainWindow.on('ready-to-show', () => {
+    mainWindow.show()
+  })
+
+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url)
+    return { action: 'deny' }
+  })
+
+  // HMR for renderer base on electron-vite cli.
+  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
+  } else {
+    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
+  }
+}
+
+app.whenReady().then(() => {
+  electronApp.setAppUserModelId('com.tts-voice')
+
+  app.on('browser-window-created', (_, window) => {
+    optimizer.watchWindowShortcuts(window)
+  })
+
+  // IPC: 获取 API 基础 URL
+  ipcMain.handle('get-api-base-url', () => {
+    return process.env['API_BASE_URL'] || 'http://localhost:8000'
+  })
+
+  createWindow()
+
+  app.on('activate', function () {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+  })
+})
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})

tts-voice-app/src/preload/index.d.ts

@@ -0,0 +1,10 @@
+import { ElectronAPI } from '@electron-toolkit/preload'
+
+declare global {
+  interface Window {
+    electron: ElectronAPI
+    api: {
+      getApiBaseUrl: () => Promise<string>
+    }
+  }
+}

tts-voice-app/src/preload/index.ts

@@ -0,0 +1,23 @@
+import { contextBridge, ipcRenderer } from 'electron'
+import { electronAPI } from '@electron-toolkit/preload'
+
+// Custom APIs for renderer
+const api = {
+  getApiBaseUrl: (): Promise<string> => ipcRenderer.invoke('get-api-base-url')
+}
+
+// Use `contextBridge` APIs to expose Electron APIs to
+// renderer only if context isolation is enabled
+if (process.contextIsolated) {
+  try {
+    contextBridge.exposeInMainWorld('electron', electronAPI)
+    contextBridge.exposeInMainWorld('api', api)
+  } catch (error) {
+    console.error(error)
+  }
+} else {
+  // @ts-ignore (define in dts)
+  window.electron = electronAPI
+  // @ts-ignore (define in dts)
+  window.api = api
+}

tts-voice-app/src/renderer/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TTS Voice</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

tts-voice-app/src/renderer/src/App.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import Sidebar from './components/layout/Sidebar.vue'
+import { useAppStore } from './stores/app'
+
+const appStore = useAppStore()
+
+onMounted(() => {
+  // 初始化主题
+  document.documentElement.setAttribute('data-theme', appStore.theme)
+})
+</script>
+
+<template>
+  <div class="app-container">
+    <Sidebar />
+    <main class="main-content">
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-container {
+  display: flex;
+  height: 100vh;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+.main-content {
+  flex: 1;
+  overflow: auto;
+  padding: 24px;
+}
+</style>

tts-voice-app/src/renderer/src/api/index.ts

@@ -0,0 +1,47 @@
+import axios from 'axios'
+
+// 获取 API 基础 URL
+const getBaseUrl = async (): Promise<string> => {
+  if (window.api?.getApiBaseUrl) {
+    return await window.api.getApiBaseUrl()
+  }
+  return 'http://localhost:8000'
+}
+
+// 创建 axios 实例
+export const api = axios.create({
+  baseURL: 'http://localhost:8000/api/v1',
+  timeout: 30000,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+// 初始化 baseURL
+;(async () => {
+  const baseUrl = await getBaseUrl()
+  api.defaults.baseURL = `${baseUrl}/api/v1`
+})()
+
+// 请求拦截器
+api.interceptors.request.use(
+  (config) => {
+    // 可添加 token 等
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+api.interceptors.response.use(
+  (response) => response.data,
+  (error) => {
+    const message = error.response?.data?.detail || error.message
+    console.error('API Error:', message)
+    return Promise.reject(error)
+  }
+)
+
+export default api

tts-voice-app/src/renderer/src/api/training.ts

@@ -0,0 +1,84 @@
+/**
+ * 训练任务 API
+ *
+ * Quick Mode 一键训练 API 接口
+ */
+
+import { api } from './index'
+import type {
+  QuickModeRequest,
+  TaskResponse,
+  TaskListResponse,
+  FileUploadResponse,
+  SuccessResponse
+} from '../types'
+
+/**
+ * 上传音频文件
+ */
+export async function uploadAudio(file: File): Promise<FileUploadResponse> {
+  const formData = new FormData()
+  formData.append('file', file)
+
+  return api.post('/files?purpose=training', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+/**
+ * 创建训练任务
+ */
+export async function createTask(request: QuickModeRequest): Promise<TaskResponse> {
+  return api.post('/tasks', request)
+}
+
+/**
+ * 获取任务列表
+ */
+export async function listTasks(params: {
+  status?: string
+  limit?: number
+  offset?: number
+}): Promise<TaskListResponse> {
+  return api.get('/tasks', { params })
+}
+
+/**
+ * 获取任务详情
+ */
+export async function getTask(taskId: string): Promise<TaskResponse> {
+  return api.get(`/tasks/${taskId}`)
+}
+
+/**
+ * 取消任务
+ */
+export async function cancelTask(taskId: string): Promise<SuccessResponse> {
+  return api.delete(`/tasks/${taskId}`)
+}
+
+/**
+ * SSE 进度订阅
+ *
+ * 返回 EventSource 实例，调用方需要自行管理事件监听和关闭
+ */
+export function subscribeProgress(taskId: string): EventSource {
+  const baseUrl = api.defaults.baseURL || 'http://localhost:8000/api/v1'
+  return new EventSource(`${baseUrl}/tasks/${taskId}/progress`)
+}
+
+/**
+ * 训练 API 导出
+ */
+export const trainingApi = {
+  uploadAudio,
+  createTask,
+  listTasks,
+  getTask,
+  cancelTask,
+  subscribeProgress
+}
+
+export default trainingApi

tts-voice-app/src/renderer/src/components/layout/Sidebar.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
+
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
+const appStore = useAppStore()
+
+const menuItems = computed(() => [
+  { path: '/tts', icon: 'text', label: t('nav.textToSpeech') },
+  { path: '/library', icon: 'mic', label: t('nav.voiceLibrary') },
+  { path: '/clone', icon: 'copy', label: t('nav.voiceClone') }
+])
+
+const navigateTo = (path: string) => {
+  router.push(path)
+}
+
+const isActive = (path: string) => {
+  return route.path === path
+}
+</script>
+
+<template>
+  <aside class="sidebar">
+    <div class="sidebar-header">
+      <div class="logo">
+        <span class="logo-icon">🎙</span>
+        <span class="logo-text">TTS Voice</span>
+      </div>
+      <button class="theme-toggle" @click="appStore.toggleTheme" :title="appStore.theme === 'light' ? t('theme.dark') : t('theme.light')">
+        <span v-if="appStore.theme === 'light'">🌙</span>
+        <span v-else>☀️</span>
+      </button>
+    </div>
+
+    <nav class="sidebar-nav">
+      <button
+        v-for="item in menuItems"
+        :key="item.path"
+        class="nav-item"
+        :class="{ active: isActive(item.path) }"
+        @click="navigateTo(item.path)"
+      >
+        <span class="nav-icon">
+          <template v-if="item.icon === 'text'">📝</template>
+          <template v-else-if="item.icon === 'mic'">🎤</template>
+          <template v-else-if="item.icon === 'copy'">📋</template>
+        </span>
+        <span class="nav-label">{{ item.label }}</span>
+      </button>
+    </nav>
+
+    <div class="sidebar-footer">
+      <div class="user-info">
+        <div class="user-avatar">
+          <span>U</span>
+        </div>
+        <div class="user-details">
+          <span class="user-name">User</span>
+          <span class="user-email">user@example.com</span>
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<style lang="scss" scoped>
+.sidebar {
+  width: var(--sidebar-width);
+  height: 100vh;
+  background: var(--bg-sidebar);
+  display: flex;
+  flex-direction: column;
+  color: #e5eaf3;
+  padding-top: 28px; // 为 macOS 窗口控制按钮留出空间
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.logo-icon {
+  font-size: 24px;
+}
+
+.logo-text {
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+}
+
+.theme-toggle {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  background: rgba(255, 255, 255, 0.1);
+  transition: background var(--transition-fast);
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+}
+
+.sidebar-nav {
+  flex: 1;
+  padding: 16px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border-radius: 10px;
+  color: rgba(255, 255, 255, 0.7);
+  transition: all var(--transition-fast);
+  width: 100%;
+  text-align: left;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+  }
+  
+  &.active {
+    background: var(--primary-color);
+    color: #fff;
+  }
+}
+
+.nav-icon {
+  font-size: 18px;
+  width: 24px;
+  text-align: center;
+}
+
+.nav-label {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.sidebar-footer {
+  padding: 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.user-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--primary-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.user-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.user-name {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.user-email {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+}
+</style>

tts-voice-app/src/renderer/src/components/training/CreateTaskDialog.vue

@@ -0,0 +1,267 @@
+<script setup lang="ts">
+/**
+ * 创建训练任务对话框
+ *
+ * 包含音频上传和训练配置
+ */
+
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { ElMessage } from 'element-plus'
+import UploadZone from './UploadZone.vue'
+import { useTrainingStore } from '../../stores/training'
+import type { AudioSource, TrainingQuality, QuickModeRequest } from '../../types'
+
+const { t } = useI18n()
+const store = useTrainingStore()
+
+// Props
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+// Emits
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  created: [taskId: string]
+}>()
+
+// 表单数据
+const voiceName = ref('')
+const language = ref('zh')
+const quality = ref<TrainingQuality>('standard')
+const audioSource = ref<AudioSource | null>(null)
+const uploadFailed = ref(false)
+
+// 语言选项
+const languageOptions = [
+  { label: '中文', value: 'zh' },
+  { label: 'English', value: 'en' },
+  { label: '日本語', value: 'ja' },
+  { label: '한국어', value: 'ko' }
+]
+
+// 计算属性
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const canSubmit = computed(() => {
+  return (
+    voiceName.value.trim().length > 0 &&
+    audioSource.value?.fileId &&
+    !store.creating &&
+    !store.uploading
+  )
+})
+
+const isLoading = computed(() => store.creating || store.uploading)
+
+// 重置表单
+function resetForm() {
+  voiceName.value = ''
+  language.value = 'zh'
+  quality.value = 'standard'
+  audioSource.value = null
+  uploadFailed.value = false
+  store.clearUploadedAudio()
+}
+
+// 监听对话框关闭时重置表单
+watch(visible, (newVal) => {
+  if (!newVal) {
+    resetForm()
+  }
+})
+
+// 处理文件选择
+async function handleFileSelected(file: File) {
+  uploadFailed.value = false
+  try {
+    const fileId = await store.uploadAudio(file)
+    // 使用新对象替换以确保响应式更新
+    if (audioSource.value) {
+      audioSource.value = {
+        ...audioSource.value,
+        fileId,
+        duration: store.uploadedAudio?.duration
+      }
+    }
+  } catch (error) {
+    console.error('Upload failed:', error)
+    uploadFailed.value = true
+    ElMessage.error(t('clone.uploadFailed'))
+    // 不清除 audioSource，保留已选择的文件信息让用户可以看到
+  }
+}
+
+// 重试上传
+async function retryUpload() {
+  if (audioSource.value?.file) {
+    await handleFileSelected(audioSource.value.file)
+  }
+}
+
+// 处理清除文件
+function handleClearFile() {
+  audioSource.value = null
+  store.clearUploadedAudio()
+}
+
+// 提交表单
+async function handleSubmit() {
+  if (!canSubmit.value) return
+
+  const request: QuickModeRequest = {
+    exp_name: voiceName.value.trim(),
+    audio_file_id: audioSource.value!.fileId!,
+    options: {
+      language: language.value,
+      quality: quality.value
+    }
+  }
+
+  try {
+    const task = await store.createTask(request)
+    ElMessage.success(t('clone.taskCreated'))
+    visible.value = false
+    emit('created', task.id)
+  } catch (error: unknown) {
+    const err = error as { response?: { data?: { detail?: string } } }
+    const message = err.response?.data?.detail || t('clone.createFailed')
+    ElMessage.error(message)
+  }
+}
+
+// 关闭对话框
+function handleClose() {
+  visible.value = false
+}
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="t('clone.createTask')"
+    width="560px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="!isLoading"
+    @close="handleClose"
+  >
+    <div class="create-task-form">
+      <!-- Step 1: 上传音频 -->
+      <div class="form-section">
+        <h4 class="section-title">Step 1: {{ t('clone.uploadAudio') }}</h4>
+        <UploadZone
+          v-model="audioSource"
+          :uploading="store.uploading"
+          :disabled="store.creating"
+          :upload-failed="uploadFailed"
+          @file-selected="handleFileSelected"
+          @clear="handleClearFile"
+          @retry="retryUpload"
+        />
+      </div>
+
+      <!-- Step 2: 配置参数 -->
+      <div class="form-section">
+        <h4 class="section-title">Step 2: {{ t('tts.settings') }}</h4>
+        <el-form label-position="top" :disabled="isLoading">
+          <el-form-item :label="t('clone.voiceName')" required>
+            <el-input
+              v-model="voiceName"
+              :placeholder="t('clone.voiceNamePlaceholder')"
+              maxlength="100"
+              show-word-limit
+            />
+          </el-form-item>
+
+          <el-form-item :label="t('clone.language')">
+            <el-select v-model="language" style="width: 100%">
+              <el-option
+                v-for="opt in languageOptions"
+                :key="opt.value"
+                :label="opt.label"
+                :value="opt.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item :label="t('clone.quality')">
+            <el-radio-group v-model="quality">
+              <el-radio value="fast">
+                {{ t('clone.qualityFast') }}
+                <span class="quality-hint">~10{{ t('clone.minutes') }}</span>
+              </el-radio>
+              <el-radio value="standard">
+                {{ t('clone.qualityStandard') }}
+                <span class="quality-hint">~20{{ t('clone.minutes') }}</span>
+              </el-radio>
+              <el-radio value="high">
+                {{ t('clone.qualityHigh') }}
+                <span class="quality-hint">~40{{ t('clone.minutes') }}</span>
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleClose" :disabled="isLoading">
+          {{ t('common.cancel') }}
+        </el-button>
+        <el-button
+          type="primary"
+          :loading="store.creating"
+          :disabled="!canSubmit"
+          @click="handleSubmit"
+        >
+          {{ t('clone.startTraining') }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.create-task-form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.form-section {
+  .section-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 12px;
+  }
+}
+
+.quality-hint {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-left: 4px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+:deep(.el-radio-group) {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+:deep(.el-radio) {
+  height: auto;
+  line-height: 1.5;
+}
+</style>

tts-voice-app/src/renderer/src/components/training/TaskCard.vue

@@ -0,0 +1,263 @@
+<script setup lang="ts">
+/**
+ * 任务卡片组件
+ *
+ * 展示任务状态、进度和操作按钮
+ */
+
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import {
+  Clock,
+  Loading,
+  CircleCheck,
+  CircleClose,
+  Remove,
+  Warning,
+  Delete,
+  View
+} from '@element-plus/icons-vue'
+import type { TaskResponse, TaskStatus, ProgressEvent } from '../../types'
+
+const { t } = useI18n()
+
+// Props
+const props = defineProps<{
+  task: TaskResponse
+  progress?: ProgressEvent
+}>()
+
+// Emits
+const emit = defineEmits<{
+  cancel: [taskId: string]
+  view: [task: TaskResponse]
+}>()
+
+// 状态图标映射
+const statusConfig: Record<
+  TaskStatus,
+  {
+    icon: typeof Clock
+    color: string
+    label: string
+  }
+> = {
+  queued: { icon: Clock, color: 'var(--text-muted)', label: 'clone.status.queued' },
+  running: { icon: Loading, color: 'var(--primary-color)', label: 'clone.status.running' },
+  completed: { icon: CircleCheck, color: 'var(--success-color)', label: 'clone.status.completed' },
+  failed: { icon: CircleClose, color: 'var(--danger-color)', label: 'clone.status.failed' },
+  cancelled: { icon: Remove, color: 'var(--warning-color)', label: 'clone.status.cancelled' },
+  interrupted: { icon: Warning, color: 'var(--warning-color)', label: 'clone.status.interrupted' }
+}
+
+// 计算属性
+const currentStatus = computed(() => statusConfig[props.task.status] || statusConfig.queued)
+
+const isRunning = computed(() => props.task.status === 'running' || props.task.status === 'queued')
+
+const canCancel = computed(() => props.task.status === 'running' || props.task.status === 'queued')
+
+const progressPercent = computed(() => {
+  // 使用实时进度或任务自带进度
+  const p = props.progress?.overall_progress ?? props.task.overall_progress
+  return Math.round(p * 100)
+})
+
+const currentStage = computed(() => {
+  const stage = props.progress?.stage || props.task.current_stage
+  if (!stage) return ''
+  // 翻译阶段名称
+  return t(`clone.stage.${stage}`, stage)
+})
+
+const currentMessage = computed(() => {
+  return props.progress?.message || props.task.message || ''
+})
+
+const createdTime = computed(() => {
+  if (!props.task.created_at) return ''
+  const date = new Date(props.task.created_at)
+  return date.toLocaleString()
+})
+
+// 方法
+function handleCancel() {
+  emit('cancel', props.task.id)
+}
+
+function handleView() {
+  emit('view', props.task)
+}
+</script>
+
+<template>
+  <div class="task-card" :class="[`status-${task.status}`]" @click="handleView">
+    <!-- 左侧：状态图标 -->
+    <div class="task-status" :style="{ color: currentStatus.color }">
+      <el-icon :class="{ 'is-loading': isRunning }" :size="24">
+        <component :is="currentStatus.icon" />
+      </el-icon>
+    </div>
+
+    <!-- 中间：任务信息 -->
+    <div class="task-content">
+      <div class="task-header">
+        <span class="task-name">{{ task.exp_name }}</span>
+        <el-tag :type="task.status === 'completed' ? 'success' : task.status === 'failed' ? 'danger' : task.status === 'cancelled' ? 'warning' : 'info'" size="small">
+          {{ t(currentStatus.label) }}
+        </el-tag>
+      </div>
+
+      <!-- 进度条（运行中时显示） -->
+      <div v-if="isRunning" class="task-progress">
+        <el-progress
+          :percentage="progressPercent"
+          :stroke-width="6"
+          :show-text="false"
+        />
+        <div class="progress-info">
+          <span v-if="currentStage" class="stage">{{ currentStage }}</span>
+          <span class="percent">{{ progressPercent }}%</span>
+        </div>
+        <div v-if="currentMessage" class="progress-message">{{ currentMessage }}</div>
+      </div>
+
+      <!-- 创建时间 -->
+      <div class="task-meta">
+        <span class="created-at">{{ createdTime }}</span>
+      </div>
+    </div>
+
+    <!-- 右侧：操作按钮 -->
+    <div class="task-actions">
+      <el-button
+        v-if="canCancel"
+        type="danger"
+        :icon="Delete"
+        circle
+        size="small"
+        @click.stop="handleCancel"
+      />
+      <el-button
+        type="info"
+        :icon="View"
+        circle
+        size="small"
+        plain
+        @click.stop="handleView"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.task-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 16px 20px;
+  background: var(--bg-primary);
+  border-radius: var(--border-radius-lg);
+  border: 1px solid var(--border-color-light);
+  transition: all var(--transition-fast);
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--primary-color);
+    box-shadow: 0 2px 12px var(--shadow-color);
+    transform: translateY(-1px);
+  }
+
+  &.status-running,
+  &.status-queued {
+    border-left: 3px solid var(--primary-color);
+  }
+
+  &.status-completed {
+    border-left: 3px solid var(--success-color);
+  }
+
+  &.status-failed {
+    border-left: 3px solid var(--danger-color);
+  }
+
+  &.status-cancelled,
+  &.status-interrupted {
+    border-left: 3px solid var(--warning-color);
+  }
+}
+
+.task-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+}
+
+.task-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.task-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.task-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.task-progress {
+  margin-bottom: 8px;
+
+  .el-progress {
+    margin-bottom: 4px;
+  }
+}
+
+.progress-info {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--text-muted);
+
+  .stage {
+    color: var(--text-secondary);
+  }
+
+  .percent {
+    font-weight: 500;
+    color: var(--primary-color);
+  }
+}
+
+.progress-message {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.task-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.task-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+</style>

tts-voice-app/src/renderer/src/components/training/TaskList.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+/**
+ * 任务列表组件
+ *
+ * 展示任务卡片列表，支持空状态和加载状态
+ */
+
+import { useI18n } from 'vue-i18n'
+import { Refresh, FolderOpened } from '@element-plus/icons-vue'
+import TaskCard from './TaskCard.vue'
+import type { TaskResponse, ProgressEvent } from '../../types'
+
+const { t } = useI18n()
+
+// Props
+defineProps<{
+  tasks: TaskResponse[]
+  progressMap: Record<string, ProgressEvent>
+  loading?: boolean
+}>()
+
+// Emits
+const emit = defineEmits<{
+  cancel: [taskId: string]
+  view: [task: TaskResponse]
+  refresh: []
+}>()
+
+// 方法
+function handleCancel(taskId: string) {
+  emit('cancel', taskId)
+}
+
+function handleView(task: TaskResponse) {
+  emit('view', task)
+}
+
+function handleRefresh() {
+  emit('refresh')
+}
+</script>
+
+<template>
+  <div class="task-list-wrapper">
+    <!-- 工具栏 -->
+    <div class="task-list-toolbar">
+      <span class="task-count">{{ t('clone.taskCount', { count: tasks.length }) }}</span>
+      <el-button
+        :icon="Refresh"
+        circle
+        size="small"
+        :loading="loading"
+        @click="handleRefresh"
+      />
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading && tasks.length === 0" class="task-list-loading">
+      <el-icon class="is-loading" :size="32"><Refresh /></el-icon>
+      <span>{{ t('common.loading') }}</span>
+    </div>
+
+    <!-- 空状态 -->
+    <div v-else-if="tasks.length === 0" class="task-list-empty">
+      <el-icon :size="64"><FolderOpened /></el-icon>
+      <div class="empty-text">{{ t('clone.noTasks') }}</div>
+      <div class="empty-hint">{{ t('clone.noTasksHint') }}</div>
+    </div>
+
+    <!-- 任务列表 -->
+    <div v-else class="task-list">
+      <TaskCard
+        v-for="task in tasks"
+        :key="task.id"
+        :task="task"
+        :progress="progressMap[task.id]"
+        @cancel="handleCancel"
+        @view="handleView"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.task-list-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.task-list-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.task-count {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.task-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 4px;
+
+  // 自定义滚动条
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 3px;
+
+    &:hover {
+      background: var(--text-muted);
+    }
+  }
+}
+
+.task-list-loading,
+.task-list-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: var(--text-muted);
+  gap: 12px;
+}
+
+.task-list-loading {
+  .el-icon {
+    color: var(--primary-color);
+  }
+}
+
+.task-list-empty {
+  .el-icon {
+    opacity: 0.5;
+  }
+
+  .empty-text {
+    font-size: 15px;
+    color: var(--text-secondary);
+    margin-top: 8px;
+  }
+
+  .empty-hint {
+    font-size: 13px;
+    color: var(--text-muted);
+  }
+}
+</style>

tts-voice-app/src/renderer/src/components/training/TaskProgress.vue

@@ -0,0 +1,293 @@
+<script setup lang="ts">
+/**
+ * 任务进度详情组件
+ *
+ * 展示训练各阶段的进度状态
+ */
+
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { CircleCheck, Loading, Clock, CircleClose } from '@element-plus/icons-vue'
+import type { TaskResponse, ProgressEvent, StageType } from '../../types'
+import { TRAINING_STAGES } from '../../types'
+
+const { t } = useI18n()
+
+// Props
+const props = defineProps<{
+  task: TaskResponse
+  progress?: ProgressEvent
+}>()
+
+// 阶段状态类型
+type StageStatus = 'pending' | 'running' | 'completed' | 'failed'
+
+// 后端阶段名称（中文）到类型标识符的映射
+const stageNameToType: Record<string, StageType> = {
+  // 英文类型名（直接匹配）
+  'audio_slice': 'audio_slice',
+  'asr': 'asr',
+  'text_feature': 'text_feature',
+  'hubert_feature': 'hubert_feature',
+  'semantic_token': 'semantic_token',
+  'sovits_train': 'sovits_train',
+  'gpt_train': 'gpt_train',
+  // 中文名称映射
+  '语音切分': 'audio_slice',
+  '音频切片': 'audio_slice',
+  '语音识别': 'asr',
+  '文本分词与特征提取': 'text_feature',
+  '文本特征': 'text_feature',
+  '语音自监督特征提取': 'hubert_feature',
+  'HuBERT特征': 'hubert_feature',
+  '语义Token提取': 'semantic_token',
+  '语义token提取': 'semantic_token',
+  'SoVITS训练': 'sovits_train',
+  'GPT训练': 'gpt_train',
+}
+
+// 计算每个阶段的状态
+const stageStatuses = computed(() => {
+  const rawStage = props.progress?.stage || props.task.current_stage
+  const taskStatus = props.task.status
+
+  // 定义阶段顺序
+  const stageOrder: StageType[] = [
+    'audio_slice',
+    'asr',
+    'text_feature',
+    'hubert_feature',
+    'semantic_token',
+    'sovits_train',
+    'gpt_train'
+  ]
+
+  // 将阶段名称转换为类型标识符
+  const currentStageType = rawStage ? (stageNameToType[rawStage] || rawStage) : null
+  const currentIndex = currentStageType ? stageOrder.indexOf(currentStageType as StageType) : -1
+
+  return TRAINING_STAGES.map((stage, index) => {
+    let status: StageStatus = 'pending'
+
+    if (taskStatus === 'completed') {
+      status = 'completed'
+    } else if (taskStatus === 'failed') {
+      if (index < currentIndex) {
+        status = 'completed'
+      } else if (index === currentIndex) {
+        status = 'failed'
+      } else {
+        status = 'pending'
+      }
+    } else if (taskStatus === 'running' || taskStatus === 'queued') {
+      if (index < currentIndex) {
+        status = 'completed'
+      } else if (index === currentIndex) {
+        status = 'running'
+      } else {
+        status = 'pending'
+      }
+    } else if (taskStatus === 'cancelled' || taskStatus === 'interrupted') {
+      if (index < currentIndex) {
+        status = 'completed'
+      } else {
+        status = 'pending'
+      }
+    }
+
+    return {
+      ...stage,
+      status,
+      label: t(`clone.stage.${stage.type}`, stage.name)
+    }
+  })
+})
+
+// 计算整体进度百分比
+const overallPercent = computed(() => {
+  const p = props.progress?.overall_progress ?? props.task.overall_progress
+  return Math.round(p * 100)
+})
+
+// 获取阶段图标
+function getStageIcon(status: StageStatus) {
+  switch (status) {
+    case 'completed':
+      return CircleCheck
+    case 'running':
+      return Loading
+    case 'failed':
+      return CircleClose
+    default:
+      return Clock
+  }
+}
+
+// 获取阶段颜色
+function getStageColor(status: StageStatus) {
+  switch (status) {
+    case 'completed':
+      return 'var(--success-color)'
+    case 'running':
+      return 'var(--primary-color)'
+    case 'failed':
+      return 'var(--danger-color)'
+    default:
+      return 'var(--text-muted)'
+  }
+}
+</script>
+
+<template>
+  <div class="task-progress">
+    <!-- 整体进度 -->
+    <div class="overall-progress">
+      <div class="progress-header">
+        <span class="progress-label">{{ t('clone.overallProgress') }}</span>
+        <span class="progress-value">{{ overallPercent }}%</span>
+      </div>
+      <el-progress
+        :percentage="overallPercent"
+        :stroke-width="8"
+        :show-text="false"
+        :status="task.status === 'completed' ? 'success' : task.status === 'failed' ? 'exception' : undefined"
+      />
+    </div>
+
+    <!-- 阶段列表 -->
+    <div class="stage-list">
+      <div
+        v-for="stage in stageStatuses"
+        :key="stage.type"
+        class="stage-item"
+        :class="[`status-${stage.status}`]"
+      >
+        <el-icon
+          :class="{ 'is-loading': stage.status === 'running' }"
+          :style="{ color: getStageColor(stage.status) }"
+          :size="18"
+        >
+          <component :is="getStageIcon(stage.status)" />
+        </el-icon>
+        <span class="stage-type">{{ stage.type }}</span>
+        <span class="stage-label">{{ stage.label }}</span>
+        <span v-if="stage.status === 'completed'" class="stage-value">100%</span>
+        <span v-else-if="stage.status === 'running'" class="stage-value running">
+          {{ Math.round((progress?.progress ?? task.progress) * 100) }}%
+        </span>
+        <span v-else class="stage-value">0%</span>
+      </div>
+    </div>
+
+    <!-- 当前消息 -->
+    <div v-if="progress?.message || task.message" class="current-message">
+      {{ progress?.message || task.message }}
+    </div>
+
+    <!-- 错误消息 -->
+    <div v-if="task.error_message" class="error-message">
+      <el-icon><CircleClose /></el-icon>
+      {{ task.error_message }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.task-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.overall-progress {
+  .progress-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+  }
+
+  .progress-label {
+    font-size: 13px;
+    color: var(--text-secondary);
+  }
+
+  .progress-value {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--primary-color);
+  }
+}
+
+.stage-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.stage-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: var(--bg-primary);
+  border-radius: var(--border-radius);
+  transition: all var(--transition-fast);
+
+  &.status-running {
+    background: var(--bg-secondary);
+    border-left: 3px solid var(--primary-color);
+  }
+
+  &.status-completed {
+    opacity: 0.8;
+  }
+
+  .el-icon {
+    flex-shrink: 0;
+  }
+}
+
+.stage-type {
+  font-family: 'SF Mono', Monaco, Consolas, monospace;
+  font-size: 12px;
+  color: var(--text-muted);
+  min-width: 120px;
+}
+
+.stage-label {
+  flex: 1;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.stage-value {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-muted);
+  min-width: 40px;
+  text-align: right;
+
+  &.running {
+    color: var(--primary-color);
+  }
+}
+
+.current-message {
+  font-size: 13px;
+  color: var(--text-secondary);
+  padding: 12px 16px;
+  background: var(--bg-secondary);
+  border-radius: var(--border-radius);
+}
+
+.error-message {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--danger-color);
+  padding: 12px 16px;
+  background: rgba(239, 68, 68, 0.1);
+  border-radius: var(--border-radius);
+}
+</style>

tts-voice-app/src/renderer/src/components/training/TrainingLogs.vue

@@ -0,0 +1,228 @@
+<script setup lang="ts">
+/**
+ * 训练日志展示组件
+ *
+ * 展示训练过程中的实时日志
+ */
+
+import { ref, watch, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { LogEntry } from '../../types'
+
+const { t } = useI18n()
+
+// Props
+const props = defineProps<{
+  logs: LogEntry[]
+  autoScroll?: boolean
+}>()
+
+// 默认值
+const autoScrollEnabled = ref(props.autoScroll ?? true)
+
+// Refs
+const logsContainer = ref<HTMLElement | null>(null)
+
+// 自动滚动到底部
+watch(
+  () => props.logs.length,
+  async () => {
+    if (autoScrollEnabled.value && logsContainer.value) {
+      await nextTick()
+      logsContainer.value.scrollTop = logsContainer.value.scrollHeight
+    }
+  }
+)
+
+// 获取日志级别的样式类
+function getLogClass(level: LogEntry['level']) {
+  return `log-${level}`
+}
+
+// 获取日志级别的图标
+function getLogIcon(level: LogEntry['level']) {
+  switch (level) {
+    case 'error':
+      return '✕'
+    case 'warning':
+      return '⚠'
+    default:
+      return '›'
+  }
+}
+
+// 格式化时间戳
+function formatTime(timestamp: string) {
+  try {
+    const date = new Date(timestamp)
+    return date.toLocaleTimeString('zh-CN', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    })
+  } catch {
+    return timestamp
+  }
+}
+
+// 切换自动滚动
+function toggleAutoScroll() {
+  autoScrollEnabled.value = !autoScrollEnabled.value
+}
+</script>
+
+<template>
+  <div class="training-logs">
+    <!-- 日志头部 -->
+    <div class="logs-header">
+      <span class="logs-title">{{ t('clone.detail.logs') }}</span>
+      <div class="logs-actions">
+        <el-button
+          :type="autoScrollEnabled ? 'primary' : 'default'"
+          size="small"
+          text
+          @click="toggleAutoScroll"
+        >
+          {{ autoScrollEnabled ? '自动滚动: 开' : '自动滚动: 关' }}
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 日志内容 -->
+    <div ref="logsContainer" class="logs-container">
+      <div v-if="logs.length === 0" class="logs-empty">
+        {{ t('clone.detail.noLogs') }}
+      </div>
+
+      <div
+        v-for="(log, index) in logs"
+        :key="index"
+        class="log-entry"
+        :class="getLogClass(log.level)"
+      >
+        <span class="log-icon">{{ getLogIcon(log.level) }}</span>
+        <span class="log-time">{{ formatTime(log.timestamp) }}</span>
+        <span v-if="log.stage" class="log-stage">[{{ log.stage }}]</span>
+        <span class="log-message">{{ log.message }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.training-logs {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--bg-primary);
+  border-radius: var(--border-radius-lg);
+  border: 1px solid var(--border-color-light);
+  overflow: hidden;
+}
+
+.logs-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-color-light);
+  flex-shrink: 0;
+}
+
+.logs-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.logs-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+  font-family: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  background: var(--bg-secondary);
+}
+
+.logs-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-muted);
+  font-family: inherit;
+}
+
+.log-entry {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background-color var(--transition-fast);
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  &.log-info {
+    color: var(--text-secondary);
+
+    .log-icon {
+      color: var(--primary-color);
+    }
+  }
+
+  &.log-warning {
+    color: var(--warning-color);
+
+    .log-icon {
+      color: var(--warning-color);
+    }
+  }
+
+  &.log-error {
+    color: var(--danger-color);
+
+    .log-icon {
+      color: var(--danger-color);
+    }
+  }
+}
+
+.log-icon {
+  flex-shrink: 0;
+  width: 14px;
+  text-align: center;
+  font-weight: bold;
+}
+
+.log-time {
+  flex-shrink: 0;
+  color: var(--text-muted);
+  min-width: 70px;
+}
+
+.log-stage {
+  flex-shrink: 0;
+  color: var(--primary-color);
+  font-weight: 500;
+}
+
+.log-message {
+  flex: 1;
+  word-break: break-word;
+}
+
+// 深色模式适配
+:root[data-theme='dark'] {
+  .logs-container {
+    background: #1a1a1a;
+  }
+
+  .log-entry:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
+}
+</style>

tts-voice-app/src/renderer/src/components/training/UploadZone.vue

@@ -0,0 +1,404 @@
+<script setup lang="ts">
+/**
+ * 音频上传组件
+ *
+ * 支持拖拽上传和点击选择文件
+ * 预留麦克风录制接口供后期扩展
+ */
+
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { UploadFilled, Microphone, Delete, Document, CircleCheck, RefreshRight, WarningFilled } from '@element-plus/icons-vue'
+import type { AudioSource } from '../../types'
+
+const { t } = useI18n()
+
+// Props
+const props = defineProps<{
+  modelValue: AudioSource | null
+  uploading?: boolean
+  disabled?: boolean
+  uploadFailed?: boolean
+}>()
+
+// Emits
+const emit = defineEmits<{
+  'update:modelValue': [value: AudioSource | null]
+  fileSelected: [file: File]
+  startRecording: [] // 预留：开始录制
+  stopRecording: [] // 预留：停止录制
+  clear: []
+  retry: [] // 重试上传
+}>()
+
+// 状态
+const isDragging = ref(false)
+
+// 是否显示录制按钮（后期扩展）
+const showRecordButton = ref(false)
+
+// 计算属性
+const hasFile = computed(() => !!props.modelValue?.file || !!props.modelValue?.fileId)
+
+const fileName = computed(() => {
+  if (props.modelValue?.filename) {
+    return props.modelValue.filename
+  }
+  if (props.modelValue?.file) {
+    return props.modelValue.file.name
+  }
+  return ''
+})
+
+const fileSize = computed(() => {
+  const file = props.modelValue?.file
+  if (!file) return ''
+  const size = file.size
+  if (size < 1024) return `${size} B`
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`
+})
+
+const fileDuration = computed(() => {
+  const duration = props.modelValue?.duration
+  if (!duration) return ''
+  const minutes = Math.floor(duration / 60)
+  const seconds = Math.floor(duration % 60)
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`
+})
+
+// 方法
+function handleDragOver(e: DragEvent) {
+  e.preventDefault()
+  if (!props.disabled) {
+    isDragging.value = true
+  }
+}
+
+function handleDragLeave() {
+  isDragging.value = false
+}
+
+function handleDrop(e: DragEvent) {
+  e.preventDefault()
+  isDragging.value = false
+
+  if (props.disabled) return
+
+  const files = e.dataTransfer?.files
+  if (files && files.length > 0) {
+    handleFile(files[0])
+  }
+}
+
+function handleFileInput(e: Event) {
+  const input = e.target as HTMLInputElement
+  if (input.files && input.files.length > 0) {
+    handleFile(input.files[0])
+  }
+  // 清空 input 以便重复选择同一文件
+  input.value = ''
+}
+
+function handleFile(file: File) {
+  // 验证文件类型
+  const allowedTypes = ['audio/wav', 'audio/mpeg', 'audio/mp3', 'audio/flac', 'audio/x-flac', 'audio/mp4', 'audio/x-m4a', 'audio/m4a']
+  const allowedExts = ['.wav', '.mp3', '.flac', '.m4a']
+  const ext = file.name.toLowerCase().slice(file.name.lastIndexOf('.'))
+
+  if (!allowedTypes.includes(file.type) && !allowedExts.includes(ext)) {
+    // TODO: 显示错误提示
+    console.error('Unsupported file type:', file.type)
+    return
+  }
+
+  // 更新 model
+  const audioSource: AudioSource = {
+    type: 'file',
+    file,
+    filename: file.name
+  }
+  emit('update:modelValue', audioSource)
+  emit('fileSelected', file)
+}
+
+function clearFile() {
+  emit('update:modelValue', null)
+  emit('clear')
+}
+
+function triggerFileInput() {
+  const input = document.getElementById('audio-file-input') as HTMLInputElement
+  input?.click()
+}
+
+// 预留录制功能
+function startRecording() {
+  emit('startRecording')
+}
+
+function stopRecording() {
+  emit('stopRecording')
+}
+
+// 重试上传
+function retryUpload() {
+  emit('retry')
+}
+</script>
+
+<template>
+  <div class="upload-zone-wrapper">
+    <!-- 未上传状态：显示上传区域 -->
+    <div
+      v-if="!hasFile"
+      class="upload-zone"
+      :class="{
+        dragging: isDragging,
+        disabled: disabled,
+        uploading: uploading
+      }"
+      @dragover="handleDragOver"
+      @dragleave="handleDragLeave"
+      @drop="handleDrop"
+      @click="triggerFileInput"
+    >
+      <input
+        id="audio-file-input"
+        type="file"
+        accept=".wav,.mp3,.flac,.m4a,audio/*"
+        hidden
+        @change="handleFileInput"
+      />
+
+      <div v-if="uploading" class="upload-loading">
+        <el-icon class="is-loading" :size="48"><UploadFilled /></el-icon>
+        <div class="upload-text">{{ t('common.loading') }}</div>
+      </div>
+
+      <div v-else class="upload-content">
+        <el-icon class="upload-icon" :size="48"><UploadFilled /></el-icon>
+        <div class="upload-text">{{ t('clone.dragOrClick') }}</div>
+        <div class="upload-hint">{{ t('clone.supportFormats') }}</div>
+
+        <!-- 预留：录制按钮 -->
+        <div v-if="showRecordButton" class="record-actions">
+          <el-button
+            type="primary"
+            :icon="Microphone"
+            circle
+            size="large"
+            @click.stop="startRecording"
+          />
+          <span class="record-hint">{{ t('clone.orRecord') }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 已选择文件状态：显示文件信息 -->
+    <div v-else class="uploaded-file" :class="{ uploading: uploading, failed: uploadFailed }">
+      <div class="file-icon" :class="{ 'icon-failed': uploadFailed, 'icon-success': props.modelValue?.fileId }">
+        <el-icon v-if="uploading" class="is-loading" :size="32"><UploadFilled /></el-icon>
+        <el-icon v-else-if="uploadFailed" :size="32"><WarningFilled /></el-icon>
+        <el-icon v-else :size="32"><Document /></el-icon>
+      </div>
+      <div class="file-info">
+        <div class="file-name">{{ fileName }}</div>
+        <div class="file-meta">
+          <span v-if="uploading" class="uploading-text">{{ t('clone.uploading') }}</span>
+          <span v-else-if="uploadFailed" class="failed-text">{{ t('clone.uploadFailed') }}</span>
+          <template v-else>
+            <span v-if="fileSize">{{ fileSize }}</span>
+            <span v-if="fileDuration" class="duration">{{ fileDuration }}</span>
+            <span v-if="props.modelValue?.fileId" class="uploaded-badge">
+              <el-icon><CircleCheck /></el-icon>
+              {{ t('clone.uploaded') }}
+            </span>
+          </template>
+        </div>
+      </div>
+      <div class="file-actions">
+        <el-button
+          v-if="uploadFailed"
+          type="primary"
+          :icon="RefreshRight"
+          circle
+          size="small"
+          :disabled="disabled || uploading"
+          @click="retryUpload"
+        />
+        <el-button
+          type="danger"
+          :icon="Delete"
+          circle
+          size="small"
+          :disabled="disabled || uploading"
+          @click="clearFile"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.upload-zone-wrapper {
+  width: 100%;
+}
+
+.upload-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 180px;
+  padding: 32px 24px;
+  border: 2px dashed var(--border-color);
+  border-radius: var(--border-radius-lg);
+  background: var(--bg-primary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+
+  &:hover:not(.disabled):not(.uploading) {
+    border-color: var(--primary-color);
+    background: var(--bg-secondary);
+  }
+
+  &.dragging {
+    border-color: var(--primary-color);
+    background: var(--bg-secondary);
+    border-style: solid;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  &.uploading {
+    cursor: wait;
+  }
+}
+
+.upload-content,
+.upload-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.upload-icon {
+  color: var(--text-muted);
+  margin-bottom: 12px;
+}
+
+.upload-text {
+  font-size: 15px;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+
+.upload-hint {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.record-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid var(--border-color-light);
+}
+
+.record-hint {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.uploaded-file {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 20px;
+  background: var(--bg-secondary);
+  border-radius: var(--border-radius-lg);
+  border: 1px solid var(--border-color-light);
+}
+
+.file-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  background: var(--primary-color);
+  border-radius: var(--border-radius);
+  color: white;
+}
+
+.file-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.file-name {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 13px;
+  color: var(--text-muted);
+
+  .duration {
+    color: var(--primary-color);
+    font-weight: 500;
+  }
+
+  .uploading-text {
+    color: var(--primary-color);
+  }
+
+  .failed-text {
+    color: var(--el-color-danger);
+  }
+
+  .uploaded-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--success-color);
+    font-weight: 500;
+
+    .el-icon {
+      font-size: 14px;
+    }
+  }
+}
+
+.uploaded-file.failed {
+  border-color: var(--el-color-danger);
+}
+
+.file-icon.icon-failed {
+  background: var(--el-color-danger);
+}
+
+.file-icon.icon-success {
+  background: var(--success-color);
+}
+
+.file-actions {
+  flex-shrink: 0;
+}
+</style>

tts-voice-app/src/renderer/src/components/training/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 训练组件导出
+ */
+
+export { default as TaskList } from './TaskList.vue'
+export { default as TaskCard } from './TaskCard.vue'
+export { default as TaskProgress } from './TaskProgress.vue'
+export { default as CreateTaskDialog } from './CreateTaskDialog.vue'
+export { default as UploadZone } from './UploadZone.vue'
+export { default as TrainingLogs } from './TrainingLogs.vue'

tts-voice-app/src/renderer/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

tts-voice-app/src/renderer/src/i18n/index.ts

@@ -0,0 +1,17 @@
+import { createI18n } from 'vue-i18n'
+import zhCN from '@/locales/zh-CN.json'
+import enUS from '@/locales/en-US.json'
+
+export type MessageSchema = typeof zhCN
+
+const i18n = createI18n<[MessageSchema], 'zh-CN' | 'en-US'>({
+  legacy: false,
+  locale: localStorage.getItem('locale') || 'zh-CN',
+  fallbackLocale: 'en-US',
+  messages: {
+    'zh-CN': zhCN,
+    'en-US': enUS
+  }
+})
+
+export default i18n

tts-voice-app/src/renderer/src/locales/en-US.json

@@ -0,0 +1,101 @@
+{
+  "nav": {
+    "textToSpeech": "Text to Speech",
+    "voiceLibrary": "Voice Library",
+    "voiceClone": "Voice Clone"
+  },
+  "tts": {
+    "title": "Text to Speech",
+    "placeholder": "Enter text to convert...",
+    "generate": "Generate",
+    "speed": "Speed",
+    "emotion": "Emotion",
+    "voice": "Voice",
+    "language": "Language",
+    "settings": "Settings",
+    "characters": "characters"
+  },
+  "library": {
+    "title": "Voice Library",
+    "import": "Import",
+    "search": "Search",
+    "preview": "Preview",
+    "edit": "Edit",
+    "export": "Export",
+    "delete": "Delete",
+    "empty": "No voices yet. Please train or import a voice first."
+  },
+  "clone": {
+    "title": "Voice Clone",
+    "quickMode": "Quick Mode",
+    "advancedMode": "Advanced Mode",
+    "uploadAudio": "Upload Audio",
+    "dragOrClick": "Drag files here or click to upload",
+    "supportFormats": "Supports wav, mp3, flac, m4a formats",
+    "uploading": "Uploading...",
+    "uploaded": "Uploaded",
+    "orRecord": "or record audio",
+    "voiceName": "Voice Name",
+    "voiceNamePlaceholder": "Enter voice name",
+    "language": "Language",
+    "quality": "Quality",
+    "qualityFast": "Fast",
+    "qualityStandard": "Standard",
+    "qualityHigh": "High Quality",
+    "minutes": " min",
+    "startTraining": "Start Training",
+    "cancelTraining": "Cancel Training",
+    "progress": "Training Progress",
+    "overallProgress": "Overall Progress",
+    "createTask": "Create Task",
+    "taskList": "Task List",
+    "taskCount": "{count} tasks",
+    "noTasks": "No training tasks yet",
+    "noTasksHint": "Click the button above to create your first training task",
+    "confirmCancel": "Are you sure you want to cancel this training task?",
+    "taskCreated": "Task created successfully",
+    "taskCancelled": "Task cancelled",
+    "createFailed": "Failed to create task",
+    "uploadFailed": "Failed to upload file",
+    "status": {
+      "queued": "Queued",
+      "running": "Running",
+      "completed": "Completed",
+      "failed": "Failed",
+      "cancelled": "Cancelled",
+      "interrupted": "Interrupted"
+    },
+    "stage": {
+      "audio_slice": "Audio Slice",
+      "asr": "Speech Recognition",
+      "text_feature": "Text Feature",
+      "hubert_feature": "HuBERT Feature",
+      "semantic_token": "Semantic Token",
+      "sovits_train": "SoVITS Training",
+      "gpt_train": "GPT Training"
+    },
+    "detail": {
+      "title": "Task Detail",
+      "back": "Back",
+      "logs": "Training Logs",
+      "noLogs": "No logs yet",
+      "stageProgress": "Training Stages",
+      "taskInfo": "Task Info",
+      "createdAt": "Created At",
+      "startedAt": "Started At",
+      "completedAt": "Completed At"
+    }
+  },
+  "common": {
+    "confirm": "Confirm",
+    "cancel": "Cancel",
+    "save": "Save",
+    "loading": "Loading...",
+    "success": "Success",
+    "error": "Error"
+  },
+  "theme": {
+    "light": "Light Mode",
+    "dark": "Dark Mode"
+  }
+}

tts-voice-app/src/renderer/src/locales/zh-CN.json

@@ -0,0 +1,101 @@
+{
+  "nav": {
+    "textToSpeech": "文本转语音",
+    "voiceLibrary": "音色库",
+    "voiceClone": "音色克隆"
+  },
+  "tts": {
+    "title": "文本转语音",
+    "placeholder": "输入要转换的文本...",
+    "generate": "生成",
+    "speed": "语速",
+    "emotion": "情绪",
+    "voice": "音色",
+    "language": "语言",
+    "settings": "设置",
+    "characters": "字符"
+  },
+  "library": {
+    "title": "音色库",
+    "import": "导入",
+    "search": "搜索",
+    "preview": "试听",
+    "edit": "编辑",
+    "export": "导出",
+    "delete": "删除",
+    "empty": "暂无音色，请先训练或导入音色"
+  },
+  "clone": {
+    "title": "音色克隆",
+    "quickMode": "快速模式",
+    "advancedMode": "高级模式",
+    "uploadAudio": "上传音频",
+    "dragOrClick": "拖拽文件到此处或点击上传",
+    "supportFormats": "支持 wav, mp3, flac, m4a 格式",
+    "uploading": "上传中...",
+    "uploaded": "已上传",
+    "orRecord": "或录制音频",
+    "voiceName": "音色名称",
+    "voiceNamePlaceholder": "请输入音色名称",
+    "language": "语言",
+    "quality": "质量",
+    "qualityFast": "快速",
+    "qualityStandard": "标准",
+    "qualityHigh": "高质量",
+    "minutes": "分钟",
+    "startTraining": "开始训练",
+    "cancelTraining": "取消训练",
+    "progress": "训练进度",
+    "overallProgress": "总体进度",
+    "createTask": "创建任务",
+    "taskList": "任务列表",
+    "taskCount": "共 {count} 个任务",
+    "noTasks": "暂无训练任务",
+    "noTasksHint": "点击上方按钮创建第一个训练任务",
+    "confirmCancel": "确定要取消这个训练任务吗？",
+    "taskCreated": "任务创建成功",
+    "taskCancelled": "任务已取消",
+    "createFailed": "创建任务失败",
+    "uploadFailed": "文件上传失败",
+    "status": {
+      "queued": "排队中",
+      "running": "训练中",
+      "completed": "已完成",
+      "failed": "失败",
+      "cancelled": "已取消",
+      "interrupted": "已中断"
+    },
+    "stage": {
+      "audio_slice": "音频切片",
+      "asr": "语音识别",
+      "text_feature": "文本特征",
+      "hubert_feature": "HuBERT特征",
+      "semantic_token": "语义Token",
+      "sovits_train": "SoVITS训练",
+      "gpt_train": "GPT训练"
+    },
+    "detail": {
+      "title": "任务详情",
+      "back": "返回",
+      "logs": "训练日志",
+      "noLogs": "暂无日志",
+      "stageProgress": "训练阶段",
+      "taskInfo": "任务信息",
+      "createdAt": "创建时间",
+      "startedAt": "开始时间",
+      "completedAt": "完成时间"
+    }
+  },
+  "common": {
+    "confirm": "确认",
+    "cancel": "取消",
+    "save": "保存",
+    "loading": "加载中...",
+    "success": "成功",
+    "error": "错误"
+  },
+  "theme": {
+    "light": "浅色模式",
+    "dark": "深色模式"
+  }
+}

tts-voice-app/src/renderer/src/main.ts

@@ -0,0 +1,19 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+import App from './App.vue'
+import router from './router'
+import i18n from './i18n'
+
+import './styles/global.scss'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+app.use(i18n)
+app.use(ElementPlus)
+
+app.mount('#app')

tts-voice-app/src/renderer/src/router/index.ts

@@ -0,0 +1,40 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    redirect: '/tts'
+  },
+  {
+    path: '/tts',
+    name: 'TextToSpeech',
+    component: () => import('@/views/TextToSpeech.vue'),
+    meta: { title: 'Text to Speech', icon: 'text' }
+  },
+  {
+    path: '/library',
+    name: 'VoiceLibrary',
+    component: () => import('@/views/VoiceLibrary.vue'),
+    meta: { title: 'Voice Library', icon: 'mic' }
+  },
+  {
+    path: '/clone',
+    name: 'VoiceClone',
+    component: () => import('@/views/VoiceClone.vue'),
+    meta: { title: 'Voice Clone', icon: 'copy' }
+  },
+  {
+    path: '/clone/:taskId',
+    name: 'TaskDetail',
+    component: () => import('@/views/TaskDetail.vue'),
+    meta: { title: 'Task Detail', icon: 'copy' }
+  }
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+})
+
+export default router

tts-voice-app/src/renderer/src/stores/app.ts

@@ -0,0 +1,33 @@
+import { defineStore } from 'pinia'
+
+export type Theme = 'light' | 'dark'
+export type Locale = 'zh-CN' | 'en-US'
+
+interface AppState {
+  theme: Theme
+  locale: Locale
+}
+
+export const useAppStore = defineStore('app', {
+  state: (): AppState => ({
+    theme: (localStorage.getItem('theme') as Theme) || 'light',
+    locale: (localStorage.getItem('locale') as Locale) || 'zh-CN'
+  }),
+
+  actions: {
+    setTheme(theme: Theme) {
+      this.theme = theme
+      localStorage.setItem('theme', theme)
+      document.documentElement.setAttribute('data-theme', theme)
+    },
+
+    toggleTheme() {
+      this.setTheme(this.theme === 'light' ? 'dark' : 'light')
+    },
+
+    setLocale(locale: Locale) {
+      this.locale = locale
+      localStorage.setItem('locale', locale)
+    }
+  }
+})

tts-voice-app/src/renderer/src/stores/training.ts

@@ -0,0 +1,430 @@
+/**
+ * 训练任务状态管理
+ *
+ * 管理任务列表、分页、进度订阅
+ */
+
+import { defineStore } from 'pinia'
+import { trainingApi } from '../api/training'
+import type {
+  TaskResponse,
+  QuickModeRequest,
+  ProgressEvent,
+  TaskStatus,
+  AudioSource,
+  LogEntry
+} from '../types'
+
+interface TrainingState {
+  // 任务列表
+  tasks: TaskResponse[]
+  total: number
+
+  // 分页
+  currentPage: number
+  pageSize: number
+
+  // 加载状态
+  loading: boolean
+  creating: boolean
+  uploading: boolean
+
+  // 当前活跃的任务
+  activeTaskId: string | null
+
+  // 进度映射 taskId -> ProgressEvent
+  progressMap: Record<string, ProgressEvent>
+
+  // 日志映射 taskId -> LogEntry[]
+  logsMap: Record<string, LogEntry[]>
+
+  // SSE 连接映射 taskId -> EventSource
+  eventSourceMap: Record<string, EventSource>
+
+  // 上传的音频文件
+  uploadedAudio: AudioSource | null
+}
+
+export const useTrainingStore = defineStore('training', {
+  state: (): TrainingState => ({
+    tasks: [],
+    total: 0,
+    currentPage: 1,
+    pageSize: 10,
+    loading: false,
+    creating: false,
+    uploading: false,
+    activeTaskId: null,
+    progressMap: {},
+    logsMap: {},
+    eventSourceMap: {},
+    uploadedAudio: null
+  }),
+
+  getters: {
+    /**
+     * 计算总页数
+     */
+    totalPages(): number {
+      return Math.ceil(this.total / this.pageSize)
+    },
+
+    /**
+     * 获取当前活跃任务
+     */
+    activeTask(): TaskResponse | null {
+      if (!this.activeTaskId) return null
+      return this.tasks.find((t) => t.id === this.activeTaskId) || null
+    },
+
+    /**
+     * 获取正在运行的任务
+     */
+    runningTasks(): TaskResponse[] {
+      return this.tasks.filter((t) => t.status === 'running' || t.status === 'queued')
+    },
+
+    /**
+     * 是否有正在运行的任务
+     */
+    hasRunningTask(): boolean {
+      return this.runningTasks.length > 0
+    }
+  },
+
+  actions: {
+    /**
+     * 获取任务列表
+     */
+    async fetchTasks(status?: TaskStatus) {
+      this.loading = true
+      try {
+        const offset = (this.currentPage - 1) * this.pageSize
+        const response = await trainingApi.listTasks({
+          status,
+          limit: this.pageSize,
+          offset
+        })
+
+        this.tasks = response.items
+        this.total = response.total
+        // 不在列表页面订阅 SSE，只有打开详情时才订阅
+      } catch (error) {
+        console.error('Failed to fetch tasks:', error)
+        throw error
+      } finally {
+        this.loading = false
+      }
+    },
+
+    /**
+     * 切换页码
+     */
+    async changePage(page: number) {
+      this.currentPage = page
+      await this.fetchTasks()
+    },
+
+    /**
+     * 上传音频文件
+     */
+    async uploadAudio(file: File): Promise<string> {
+      this.uploading = true
+      try {
+        const response = await trainingApi.uploadAudio(file)
+        // 后端返回格式: { success, message, file: FileMetadata }
+        // FileMetadata: { id, filename, duration_seconds, size_bytes, ... }
+        const fileMetadata = response.file
+        this.uploadedAudio = {
+          type: 'file',
+          file,
+          fileId: fileMetadata.id,
+          filename: fileMetadata.filename,
+          duration: fileMetadata.duration_seconds ?? undefined
+        }
+        return fileMetadata.id
+      } catch (error) {
+        console.error('Failed to upload audio:', error)
+        throw error
+      } finally {
+        this.uploading = false
+      }
+    },
+
+    /**
+     * 清除上传的音频
+     */
+    clearUploadedAudio() {
+      this.uploadedAudio = null
+    },
+
+    /**
+     * 创建训练任务
+     */
+    async createTask(request: QuickModeRequest): Promise<TaskResponse> {
+      this.creating = true
+      try {
+        const task = await trainingApi.createTask(request)
+
+        // 添加到列表开头
+        this.tasks.unshift(task)
+        this.total += 1
+
+        // 不在创建时订阅进度，只在用户打开详情时订阅
+
+        // 清除上传的音频
+        this.clearUploadedAudio()
+
+        return task
+      } catch (error) {
+        console.error('Failed to create task:', error)
+        throw error
+      } finally {
+        this.creating = false
+      }
+    },
+
+    /**
+     * 取消任务
+     */
+    async cancelTask(taskId: string): Promise<boolean> {
+      try {
+        await trainingApi.cancelTask(taskId)
+
+        // 取消进度订阅
+        this.unsubscribeProgress(taskId)
+
+        // 更新任务状态
+        const task = this.tasks.find((t) => t.id === taskId)
+        if (task) {
+          task.status = 'cancelled'
+        }
+
+        return true
+      } catch (error) {
+        console.error('Failed to cancel task:', error)
+        throw error
+      }
+    },
+
+    /**
+     * 订阅任务进度
+     */
+    subscribeProgress(taskId: string) {
+      // 避免重复订阅
+      if (this.eventSourceMap[taskId]) {
+        return
+      }
+
+      try {
+        const eventSource = trainingApi.subscribeProgress(taskId)
+
+        // 进度更新事件
+        eventSource.addEventListener('progress', (e: MessageEvent) => {
+          try {
+            const data = JSON.parse(e.data) as ProgressEvent
+            this.handleProgressUpdate(taskId, data)
+          } catch (err) {
+            console.error('Failed to parse progress event:', err)
+          }
+        })
+
+        // 完成事件
+        eventSource.addEventListener('completed', (e: MessageEvent) => {
+          try {
+            const data = JSON.parse(e.data) as ProgressEvent
+            this.handleProgressUpdate(taskId, { ...data, status: 'completed' })
+          } catch (err) {
+            console.error('Failed to parse completed event:', err)
+          }
+          this.unsubscribeProgress(taskId)
+          // 更新本地任务状态，不再重新请求列表
+          const task = this.tasks.find((t) => t.id === taskId)
+          if (task) {
+            task.status = 'completed'
+            task.overall_progress = 1.0
+            task.progress = 1.0
+          }
+        })
+
+        // 失败事件
+        eventSource.addEventListener('failed', (e: MessageEvent) => {
+          try {
+            const data = JSON.parse(e.data) as ProgressEvent
+            this.handleProgressUpdate(taskId, { ...data, status: 'failed' })
+          } catch (err) {
+            console.error('Failed to parse failed event:', err)
+          }
+          this.unsubscribeProgress(taskId)
+          // 更新本地任务状态，不再重新请求列表
+          const task = this.tasks.find((t) => t.id === taskId)
+          if (task) {
+            task.status = 'failed'
+          }
+        })
+
+        // 取消事件
+        eventSource.addEventListener('cancelled', () => {
+          this.unsubscribeProgress(taskId)
+          // 更新本地任务状态，不再重新请求列表
+          const task = this.tasks.find((t) => t.id === taskId)
+          if (task) {
+            task.status = 'cancelled'
+          }
+        })
+
+        // 日志事件
+        eventSource.addEventListener('log', (e: MessageEvent) => {
+          try {
+            const data = JSON.parse(e.data)
+            this.handleLogEvent(taskId, data)
+          } catch (err) {
+            console.error('Failed to parse log event:', err)
+          }
+        })
+
+        // 心跳事件（忽略）
+        eventSource.addEventListener('heartbeat', () => {
+          // 保持连接
+        })
+
+        // 错误处理 - 只关闭连接，不重新请求
+        eventSource.onerror = () => {
+          console.warn('SSE connection error for task:', taskId)
+          this.unsubscribeProgress(taskId)
+          // 不调用 fetchTasks，避免循环请求
+        }
+
+        this.eventSourceMap[taskId] = eventSource
+      } catch (error) {
+        console.error('Failed to subscribe progress:', error)
+      }
+    },
+
+    /**
+     * 取消进度订阅
+     */
+    unsubscribeProgress(taskId: string) {
+      const eventSource = this.eventSourceMap[taskId]
+      if (eventSource) {
+        eventSource.close()
+        delete this.eventSourceMap[taskId]
+      }
+      delete this.progressMap[taskId]
+      // 注意：不删除 logsMap，保留日志历史
+    },
+
+    /**
+     * 处理日志事件
+     */
+    handleLogEvent(taskId: string, data: { level?: string; message?: string; stage?: string }) {
+      if (!this.logsMap[taskId]) {
+        this.logsMap[taskId] = []
+      }
+
+      const logEntry: LogEntry = {
+        level: (data.level as LogEntry['level']) || 'info',
+        message: data.message || '',
+        timestamp: new Date().toISOString(),
+        stage: data.stage
+      }
+
+      this.logsMap[taskId].push(logEntry)
+
+      // 限制日志数量，防止内存溢出
+      const MAX_LOGS = 1000
+      if (this.logsMap[taskId].length > MAX_LOGS) {
+        this.logsMap[taskId] = this.logsMap[taskId].slice(-MAX_LOGS)
+      }
+    },
+
+    /**
+     * 清除任务日志
+     */
+    clearLogs(taskId: string) {
+      delete this.logsMap[taskId]
+    },
+
+    /**
+     * 获取任务日志
+     */
+    getLogs(taskId: string): LogEntry[] {
+      return this.logsMap[taskId] || []
+    },
+
+    /**
+     * 处理进度更新
+     */
+    handleProgressUpdate(taskId: string, data: ProgressEvent) {
+      // 更新进度映射
+      this.progressMap[taskId] = data
+
+      // 更新任务列表中的状态
+      const task = this.tasks.find((t) => t.id === taskId)
+      if (task) {
+        if (data.status) {
+          task.status = data.status
+        }
+        if (data.stage) {
+          task.current_stage = data.stage
+        }
+        if (typeof data.progress === 'number') {
+          task.progress = data.progress
+        }
+        if (typeof data.overall_progress === 'number') {
+          task.overall_progress = data.overall_progress
+        }
+        if (data.message) {
+          task.message = data.message
+        }
+        if (data.error) {
+          task.error_message = data.error
+        }
+      }
+    },
+
+    /**
+     * 刷新任务列表
+     */
+    async refresh() {
+      await this.fetchTasks()
+    },
+
+    /**
+     * 清理所有 SSE 连接
+     */
+    cleanup() {
+      for (const taskId of Object.keys(this.eventSourceMap)) {
+        this.unsubscribeProgress(taskId)
+      }
+    },
+
+    /**
+     * 设置活跃任务
+     */
+    setActiveTask(taskId: string | null) {
+      this.activeTaskId = taskId
+    },
+
+    /**
+     * 根据 ID 获取任务
+     * 优先从本地列表获取，否则调用 API
+     */
+    async getTaskById(taskId: string): Promise<TaskResponse | null> {
+      // 先从本地查找
+      const localTask = this.tasks.find((t) => t.id === taskId)
+      if (localTask) {
+        return localTask
+      }
+
+      // 调用 API 获取
+      try {
+        const task = await trainingApi.getTask(taskId)
+        return task
+      } catch (error) {
+        console.error('Failed to get task:', error)
+        return null
+      }
+    }
+  }
+})

tts-voice-app/src/renderer/src/styles/global.scss

@@ -0,0 +1,43 @@
+@use './variables.scss';
+@use './reset.scss';
+
+// 全局样式
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  transition: background-color var(--transition-normal), color var(--transition-normal);
+}
+
+// Element Plus 主题覆盖
+.el-button--primary {
+  --el-button-bg-color: var(--primary-color);
+  --el-button-border-color: var(--primary-color);
+  --el-button-hover-bg-color: var(--primary-color-light);
+  --el-button-hover-border-color: var(--primary-color-light);
+  --el-button-active-bg-color: var(--primary-color-dark);
+  --el-button-active-border-color: var(--primary-color-dark);
+}
+
+// 通用类
+.page-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 24px;
+  color: var(--text-primary);
+}
+
+.card {
+  background-color: var(--bg-secondary);
+  border-radius: var(--border-radius-lg);
+  padding: 20px;
+  box-shadow: 0 2px 8px var(--shadow-color);
+}

tts-voice-app/src/renderer/src/styles/reset.scss

@@ -0,0 +1,67 @@
+// CSS Reset
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.5;
+  overflow: hidden;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+input,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+// 滚动条样式
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 3px;
+  
+  &:hover {
+    background: var(--text-muted);
+  }
+}

tts-voice-app/src/renderer/src/styles/variables.scss

@@ -0,0 +1,47 @@
+// CSS 变量 - 主题相关
+:root {
+  // 默认浅色主题
+  --bg-primary: #ffffff;
+  --bg-secondary: #f5f7fa;
+  --bg-sidebar: #1a1a2e;
+  --text-primary: #303133;
+  --text-secondary: #606266;
+  --text-muted: #909399;
+  --border-color: #dcdfe6;
+  --border-color-light: #e4e7ed;
+  --shadow-color: rgba(0, 0, 0, 0.1);
+  
+  // 品牌色
+  --primary-color: #6366f1;
+  --primary-color-light: #818cf8;
+  --primary-color-dark: #4f46e5;
+  
+  // 功能色
+  --success-color: #10b981;
+  --warning-color: #f59e0b;
+  --danger-color: #ef4444;
+  --info-color: #3b82f6;
+  
+  // 尺寸
+  --sidebar-width: 240px;
+  --header-height: 60px;
+  --border-radius: 8px;
+  --border-radius-lg: 12px;
+  
+  // 过渡
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.3s ease;
+}
+
+// 深色主题
+:root[data-theme="dark"] {
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #252525;
+  --bg-sidebar: #0f0f1a;
+  --text-primary: #e5eaf3;
+  --text-secondary: #a3a6ad;
+  --text-muted: #73767a;
+  --border-color: #4c4d4f;
+  --border-color-light: #3a3a3c;
+  --shadow-color: rgba(0, 0, 0, 0.3);
+}

tts-voice-app/src/renderer/src/types/index.ts

@@ -0,0 +1,274 @@
+// API 响应类型
+export interface ApiResponse<T = unknown> {
+  code: number
+  data: T
+  message: string
+}
+
+// 音色类型
+export interface Voice {
+  id: string
+  name: string
+  language: string
+  version: string
+  created_at: string
+  sovits_path: string
+  gpt_path: string
+}
+
+// TTS 请求类型
+export interface TTSRequest {
+  text: string
+  voice_id: string
+  speed?: number
+  emotion?: string
+}
+
+// TTS 响应类型
+export interface TTSResponse {
+  audio_url: string
+  duration: number
+}
+
+// ============================================================
+// 训练任务相关类型（与后端 schema 对齐）
+// ============================================================
+
+/**
+ * 任务状态
+ */
+export type TaskStatus =
+  | 'queued'
+  | 'running'
+  | 'completed'
+  | 'failed'
+  | 'cancelled'
+  | 'interrupted'
+
+/**
+ * 训练质量预设
+ */
+export type TrainingQuality = 'fast' | 'standard' | 'high'
+
+/**
+ * 模型版本
+ */
+export type ModelVersion = 'v1' | 'v2' | 'v2Pro' | 'v3' | 'v4'
+
+/**
+ * Quick Mode 训练选项
+ */
+export interface QuickModeOptions {
+  version?: ModelVersion
+  language?: string
+  quality?: TrainingQuality
+}
+
+/**
+ * Quick Mode 创建任务请求
+ */
+export interface QuickModeRequest {
+  exp_name: string
+  audio_file_id: string
+  options?: QuickModeOptions
+}
+
+/**
+ * 任务响应（Quick Mode）
+ */
+export interface TaskResponse {
+  id: string
+  exp_name: string
+  status: TaskStatus
+  current_stage?: string | null
+  progress: number
+  overall_progress: number
+  message?: string | null
+  error_message?: string | null
+  created_at?: string | null
+  started_at?: string | null
+  completed_at?: string | null
+}
+
+/**
+ * 任务列表响应
+ */
+export interface TaskListResponse {
+  items: TaskResponse[]
+  total: number
+  limit: number
+  offset: number
+}
+
+/**
+ * 进度更新事件数据
+ */
+export interface ProgressEvent {
+  type?: 'progress' | 'log' | 'heartbeat' | 'completed' | 'failed' | 'cancelled'
+  status?: TaskStatus
+  stage?: string
+  progress?: number
+  overall_progress?: number
+  message?: string
+  error?: string
+  timestamp?: string
+}
+
+// ============================================================
+// 文件上传相关类型
+// ============================================================
+
+/**
+ * 文件用途类型
+ */
+export type FilePurpose = 'training' | 'reference' | 'output'
+
+/**
+ * 文件元数据
+ *
+ * 对应后端 FileMetadata schema
+ */
+export interface FileMetadata {
+  id: string
+  filename: string
+  content_type?: string | null
+  size_bytes: number
+  purpose?: FilePurpose | null
+  duration_seconds?: number | null
+  sample_rate?: number | null
+  uploaded_at: string
+}
+
+/**
+ * 文件上传响应
+ *
+ * 对应后端 FileUploadResponse schema
+ */
+export interface FileUploadResponse {
+  success: boolean
+  message: string
+  file: FileMetadata
+}
+
+/**
+ * 文件列表响应
+ */
+export interface FileListResponse {
+  items: FileMetadata[]
+  total: number
+  limit: number
+  offset: number
+}
+
+/**
+ * 文件删除响应
+ */
+export interface FileDeleteResponse {
+  success: boolean
+  message: string
+  file_id: string
+}
+
+/**
+ * 通用成功响应
+ *
+ * 对应后端 SuccessResponse schema
+ */
+export interface SuccessResponse {
+  success: boolean
+  message: string
+}
+
+/**
+ * 错误响应
+ *
+ * 对应后端 ErrorResponse schema
+ */
+export interface ErrorResponse {
+  success: boolean
+  message: string
+  code?: string | null
+  details?: unknown
+}
+
+// ============================================================
+// 音频来源类型（用于 UploadZone 组件）
+// ============================================================
+
+/**
+ * 音频来源类型
+ */
+export type AudioSourceType = 'file' | 'recording'
+
+/**
+ * 音频来源
+ */
+export interface AudioSource {
+  type: AudioSourceType
+  file?: File
+  fileId?: string
+  filename?: string
+  duration?: number
+}
+
+// ============================================================
+// 训练阶段类型
+// ============================================================
+
+/**
+ * 训练阶段类型
+ */
+export type StageType =
+  | 'audio_slice'
+  | 'asr'
+  | 'text_feature'
+  | 'hubert_feature'
+  | 'semantic_token'
+  | 'sovits_train'
+  | 'gpt_train'
+
+/**
+ * 训练阶段信息
+ */
+export interface TrainingStage {
+  type: StageType
+  name: string
+  label: string
+  status: 'pending' | 'running' | 'completed' | 'failed'
+  progress: number
+}
+
+/**
+ * 所有训练阶段配置
+ */
+export const TRAINING_STAGES: { type: StageType; name: string }[] = [
+  { type: 'audio_slice', name: '音频切片' },
+  { type: 'asr', name: '语音识别' },
+  { type: 'text_feature', name: '文本特征' },
+  { type: 'hubert_feature', name: 'HuBERT特征' },
+  { type: 'semantic_token', name: '语义Token' },
+  { type: 'sovits_train', name: 'SoVITS训练' },
+  { type: 'gpt_train', name: 'GPT训练' }
+]
+
+// 保留旧的 TrainingTask 类型作为别名，���容现有代码
+export type TrainingTask = TaskResponse
+
+// ============================================================
+// 日志相关类型
+// ============================================================
+
+/**
+ * 日志级别
+ */
+export type LogLevel = 'info' | 'warning' | 'error'
+
+/**
+ * 日志条目
+ */
+export interface LogEntry {
+  level: LogLevel
+  message: string
+  timestamp: string
+  stage?: string
+}

tts-voice-app/src/renderer/src/views/TaskDetail.vue

@@ -0,0 +1,373 @@
+<script setup lang="ts">
+/**
+ * 任务详情页面
+ *
+ * 展示训练任务的详细进度和实时日志
+ */
+
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { ArrowLeft, Delete, Loading } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import TaskProgress from '../components/training/TaskProgress.vue'
+import TrainingLogs from '../components/training/TrainingLogs.vue'
+import { useTrainingStore } from '../stores/training'
+import type { TaskResponse } from '../types'
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const store = useTrainingStore()
+
+// 状态
+const task = ref<TaskResponse | null>(null)
+const loading = ref(true)
+const error = ref<string | null>(null)
+
+// 获取路由参数
+const taskId = computed(() => route.params.taskId as string)
+
+// 计算属性
+const progress = computed(() => store.progressMap[taskId.value])
+const logs = computed(() => store.getLogs(taskId.value))
+const isRunning = computed(() => task.value?.status === 'running' || task.value?.status === 'queued')
+const canCancel = computed(() => task.value?.status === 'running' || task.value?.status === 'queued')
+
+// 格式化时间
+function formatTime(dateStr?: string | null) {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  return date.toLocaleString()
+}
+
+// 获取状态标签类型
+function getStatusType(status?: string) {
+  switch (status) {
+    case 'completed':
+      return 'success'
+    case 'failed':
+      return 'danger'
+    case 'cancelled':
+    case 'interrupted':
+      return 'warning'
+    case 'running':
+    case 'queued':
+      return 'primary'
+    default:
+      return 'info'
+  }
+}
+
+// 返回列表
+function handleBack() {
+  router.push('/clone')
+}
+
+// 取消任务
+async function handleCancel() {
+  if (!task.value) return
+
+  try {
+    await ElMessageBox.confirm(t('clone.confirmCancel'), t('common.confirm'), {
+      confirmButtonText: t('common.confirm'),
+      cancelButtonText: t('common.cancel'),
+      type: 'warning'
+    })
+
+    await store.cancelTask(task.value.id)
+    ElMessage.success(t('clone.taskCancelled'))
+
+    // 刷新任务状态
+    const updatedTask = await store.getTaskById(taskId.value)
+    if (updatedTask) {
+      task.value = updatedTask
+    }
+  } catch {
+    // 用户取消操作或取消失败
+  }
+}
+
+// 加载任务详情
+async function loadTask() {
+  loading.value = true
+  error.value = null
+
+  try {
+    const result = await store.getTaskById(taskId.value)
+    if (result) {
+      task.value = result
+    } else {
+      error.value = '任务不存在'
+    }
+  } catch (e) {
+    error.value = (e as Error).message || '加载失败'
+  } finally {
+    loading.value = false
+  }
+}
+
+// 监听任务状态变化（从 store 更新）
+watch(
+  () => store.tasks.find((t) => t.id === taskId.value),
+  (updatedTask) => {
+    if (updatedTask && task.value) {
+      task.value = { ...updatedTask }
+    }
+  },
+  { deep: true }
+)
+
+// 监听 SSE 进度更新，同步到 task
+watch(
+  progress,
+  (newProgress) => {
+    if (newProgress && task.value) {
+      // 同步进度数据到 task
+      if (newProgress.stage) {
+        task.value.current_stage = newProgress.stage
+      }
+      if (typeof newProgress.progress === 'number') {
+        task.value.progress = newProgress.progress
+      }
+      if (typeof newProgress.overall_progress === 'number') {
+        task.value.overall_progress = newProgress.overall_progress
+      }
+      if (newProgress.message) {
+        task.value.message = newProgress.message
+      }
+      if (newProgress.status) {
+        task.value.status = newProgress.status
+      }
+    }
+  },
+  { deep: true }
+)
+
+// 生命周期
+onMounted(async () => {
+  await loadTask()
+
+  // 如果任务正在运行，订阅进度
+  if (task.value && isRunning.value) {
+    store.subscribeProgress(taskId.value)
+  }
+})
+
+onUnmounted(() => {
+  // 取消订阅
+  store.unsubscribeProgress(taskId.value)
+})
+
+// 当任务状态变为运行时订阅进度
+watch(isRunning, (running) => {
+  if (running) {
+    store.subscribeProgress(taskId.value)
+  }
+})
+</script>
+
+<template>
+  <div class="task-detail-page">
+    <!-- 页面头部 -->
+    <div class="detail-header">
+      <div class="header-left">
+        <el-button :icon="ArrowLeft" text @click="handleBack">
+          {{ t('clone.detail.back') }}
+        </el-button>
+        <h1 class="page-title">{{ task?.exp_name || t('clone.detail.title') }}</h1>
+        <el-tag v-if="task" :type="getStatusType(task.status)" size="default">
+          {{ t(`clone.status.${task.status}`) }}
+        </el-tag>
+      </div>
+      <div class="header-right">
+        <el-button
+          v-if="canCancel"
+          type="danger"
+          :icon="Delete"
+          @click="handleCancel"
+        >
+          {{ t('clone.cancelTraining') }}
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-container">
+      <el-icon class="is-loading" :size="32">
+        <Loading />
+      </el-icon>
+      <span>{{ t('common.loading') }}</span>
+    </div>
+
+    <!-- 错误状态 -->
+    <div v-else-if="error" class="error-container">
+      <el-result icon="error" :title="error">
+        <template #extra>
+          <el-button type="primary" @click="handleBack">
+            {{ t('clone.detail.back') }}
+          </el-button>
+        </template>
+      </el-result>
+    </div>
+
+    <!-- 任务详情内容 -->
+    <div v-else-if="task" class="detail-content">
+      <!-- 左侧：任务信息和阶段进度 -->
+      <div class="detail-left">
+        <!-- 任务信息卡片 -->
+        <div class="info-card">
+          <h3 class="card-title">{{ t('clone.detail.taskInfo') }}</h3>
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="info-label">{{ t('clone.detail.createdAt') }}</span>
+              <span class="info-value">{{ formatTime(task.created_at) }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">{{ t('clone.detail.startedAt') }}</span>
+              <span class="info-value">{{ formatTime(task.started_at) }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">{{ t('clone.detail.completedAt') }}</span>
+              <span class="info-value">{{ formatTime(task.completed_at) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 阶段进度 -->
+        <div class="progress-card">
+          <h3 class="card-title">{{ t('clone.detail.stageProgress') }}</h3>
+          <TaskProgress :task="task" :progress="progress" />
+        </div>
+      </div>
+
+      <!-- 右侧：训练日志 -->
+      <div class="detail-right">
+        <TrainingLogs :logs="logs" :auto-scroll="true" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.task-detail-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  flex-shrink: 0;
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .page-title {
+    margin: 0;
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+}
+
+.loading-container,
+.error-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  color: var(--text-muted);
+}
+
+.detail-content {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.detail-left {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  overflow-y: auto;
+}
+
+.detail-right {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.info-card,
+.progress-card {
+  background: var(--bg-primary);
+  border-radius: var(--border-radius-lg);
+  border: 1px solid var(--border-color-light);
+  padding: 20px;
+}
+
+.card-title {
+  margin: 0 0 16px 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.info-label {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.info-value {
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.progress-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+
+  :deep(.task-progress) {
+    flex: 1;
+    overflow-y: auto;
+  }
+}
+
+// 响应式布局
+@media (max-width: 1024px) {
+  .detail-content {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
+
+  .info-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>

tts-voice-app/src/renderer/src/views/TextToSpeech.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const text = ref('')
+const maxLength = 5000
+const isGenerating = ref(false)
+
+const characterCount = computed(() => text.value.length)
+const canGenerate = computed(() => text.value.trim().length > 0 && !isGenerating.value)
+
+const handleGenerate = async () => {
+  if (!canGenerate.value) return
+  isGenerating.value = true
+  // TODO: 调用 TTS API
+  setTimeout(() => {
+    isGenerating.value = false
+  }, 2000)
+}
+</script>
+
+<template>
+  <div class="tts-page">
+    <div class="tts-content">
+      <h1 class="page-title">{{ t('tts.title') }}</h1>
+      
+      <div class="tts-main">
+        <div class="text-input-area">
+          <el-input
+            v-model="text"
+            type="textarea"
+            :placeholder="t('tts.placeholder')"
+            :maxlength="maxLength"
+            :rows="12"
+            resize="none"
+            class="text-input"
+          />
+          <div class="input-footer">
+            <span class="char-count">{{ characterCount }}/{{ maxLength }} {{ t('tts.characters') }}</span>
+            <el-button 
+              type="primary" 
+              :loading="isGenerating"
+              :disabled="!canGenerate"
+              @click="handleGenerate"
+            >
+              {{ t('tts.generate') }}
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="tts-settings">
+      <h3 class="settings-title">{{ t('tts.settings') }}</h3>
+      
+      <div class="setting-item">
+        <label>{{ t('tts.voice') }}</label>
+        <el-select placeholder="Select voice" style="width: 100%">
+          <el-option label="Default Voice" value="default" />
+        </el-select>
+      </div>
+
+      <div class="setting-item">
+        <label>{{ t('tts.speed') }}</label>
+        <el-slider :min="0.5" :max="2" :step="0.1" :model-value="1" />
+      </div>
+
+      <div class="setting-item">
+        <label>{{ t('tts.emotion') }}</label>
+        <el-select placeholder="Auto" style="width: 100%">
+          <el-option label="Auto" value="auto" />
+          <el-option label="Happy" value="happy" />
+          <el-option label="Sad" value="sad" />
+          <el-option label="Neutral" value="neutral" />
+        </el-select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tts-page {
+  display: flex;
+  gap: 24px;
+  height: 100%;
+}
+
+.tts-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.tts-main {
+  flex: 1;
+}
+
+.text-input-area {
+  background: var(--bg-secondary);
+  border-radius: var(--border-radius-lg);
+  padding: 16px;
+}
+
+.text-input {
+  :deep(.el-textarea__inner) {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    color: var(--text-primary);
+    font-size: 15px;
+    line-height: 1.6;
+    
+    &::placeholder {
+      color: var(--text-muted);
+    }
+  }
+}
+
+.input-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-color-light);
+}
+
+.char-count {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.tts-settings {
+  width: 280px;
+  background: var(--bg-secondary);
+  border-radius: var(--border-radius-lg);
+  padding: 20px;
+  height: fit-content;
+}
+
+.settings-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: var(--text-primary);
+}
+
+.setting-item {
+  margin-bottom: 20px;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  label {
+    display: block;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    margin-bottom: 8px;
+  }
+}
+</style>

tts-voice-app/src/renderer/src/views/VoiceClone.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+/**
+ * 音色克隆页面
+ *
+ * 展示训练任务列表，支持创建新任务
+ */
+
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { Plus } from '@element-plus/icons-vue'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import TaskList from '../components/training/TaskList.vue'
+import CreateTaskDialog from '../components/training/CreateTaskDialog.vue'
+import { useTrainingStore } from '../stores/training'
+import type { TaskResponse } from '../types'
+
+const { t } = useI18n()
+const router = useRouter()
+const store = useTrainingStore()
+
+// 状态
+const mode = ref<'quick' | 'advanced'>('quick')
+const showCreateDialog = ref(false)
+
+// 计算属性
+const tasks = computed(() => store.tasks)
+const progressMap = computed(() => store.progressMap)
+const loading = computed(() => store.loading)
+const total = computed(() => store.total)
+const totalPages = computed(() => store.totalPages)
+const pageSize = computed(() => store.pageSize)
+
+// 生命周期
+onMounted(async () => {
+  await store.fetchTasks()
+})
+
+onUnmounted(() => {
+  store.cleanup()
+})
+
+// 方法
+function handleCreateTask() {
+  showCreateDialog.value = true
+}
+
+async function handleTaskCreated(_taskId: string) {
+  // 任务创建成功后刷新列表
+  await store.fetchTasks()
+}
+
+async function handleCancelTask(taskId: string) {
+  try {
+    await ElMessageBox.confirm(t('clone.confirmCancel'), t('common.confirm'), {
+      confirmButtonText: t('common.confirm'),
+      cancelButtonText: t('common.cancel'),
+      type: 'warning'
+    })
+
+    await store.cancelTask(taskId)
+    ElMessage.success(t('clone.taskCancelled'))
+  } catch {
+    // 用户取消操作或取消失败
+  }
+}
+
+function handleViewTask(task: TaskResponse) {
+  // 跳转到任务详情页面
+  router.push(`/clone/${task.id}`)
+}
+
+async function handleRefresh() {
+  await store.fetchTasks()
+}
+
+async function handlePageChange(page: number) {
+  await store.changePage(page)
+}
+</script>
+
+<template>
+  <div class="clone-page">
+    <!-- 页面头部 -->
+    <div class="clone-header">
+      <div class="header-left">
+      <h1 class="page-title">{{ t('clone.title') }}</h1>
+      <el-radio-group v-model="mode" size="default">
+        <el-radio-button value="quick">{{ t('clone.quickMode') }}</el-radio-button>
+          <el-radio-button value="advanced" disabled>
+            {{ t('clone.advancedMode') }}
+          </el-radio-button>
+      </el-radio-group>
+      </div>
+      <el-button type="primary" :icon="Plus" @click="handleCreateTask">
+        {{ t('clone.createTask') }}
+      </el-button>
+    </div>
+
+    <!-- 任务列表 -->
+    <div class="clone-content">
+      <TaskList
+        :tasks="tasks"
+        :progress-map="progressMap"
+        :loading="loading"
+        @cancel="handleCancelTask"
+        @view="handleViewTask"
+        @refresh="handleRefresh"
+      />
+
+      <!-- 分页器 -->
+      <div v-if="total > 0" class="pagination-wrapper">
+        <el-pagination
+          :current-page="store.currentPage"
+          :page-size="pageSize"
+          :total="total"
+          :page-count="totalPages"
+          layout="total, prev, pager, next"
+          background
+          @current-change="handlePageChange"
+        />
+      </div>
+    </div>
+
+    <!-- 创建任务对话框 -->
+    <CreateTaskDialog v-model="showCreateDialog" @created="handleTaskCreated" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.clone-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.clone-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  flex-shrink: 0;
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
+  
+  .page-title {
+    margin-bottom: 0;
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+}
+
+.clone-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.pagination-wrapper {
+  display: flex;
+  justify-content: center;
+  padding-top: 24px;
+  margin-top: auto;
+  flex-shrink: 0;
+}
+</style>

tts-voice-app/src/renderer/src/views/VoiceLibrary.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { Voice } from '@/types'
+
+const { t } = useI18n()
+
+const searchQuery = ref('')
+const voices = ref<Voice[]>([])
+
+// TODO: 从 API 获取音色列表
+</script>
+
+<template>
+  <div class="library-page">
+    <div class="library-header">
+      <h1 class="page-title">{{ t('library.title') }}</h1>
+      <div class="header-actions">
+        <el-button type="primary">
+          <el-icon><Plus /></el-icon>
+          {{ t('library.import') }}
+        </el-button>
+        <el-input 
+          v-model="searchQuery"
+          :placeholder="t('library.search')"
+          style="width: 200px"
+          clearable
+        >
+          <template #prefix>
+            <el-icon><Search /></el-icon>
+          </template>
+        </el-input>
+      </div>
+    </div>
+
+    <div v-if="voices.length === 0" class="empty-state">
+      <el-icon :size="64" color="var(--text-muted)"><Microphone /></el-icon>
+      <p>{{ t('library.empty') }}</p>
+    </div>
+
+    <div v-else class="voice-grid">
+      <div v-for="voice in voices" :key="voice.id" class="voice-card">
+        <div class="voice-avatar">
+          <el-icon :size="32"><User /></el-icon>
+        </div>
+        <div class="voice-info">
+          <h4>{{ voice.name }}</h4>
+          <span class="voice-meta">{{ voice.language }} • {{ voice.version }}</span>
+        </div>
+        <div class="voice-actions">
+          <el-button circle size="small">
+            <el-icon><VideoPlay /></el-icon>
+          </el-button>
+          <el-dropdown>
+            <el-button circle size="small">
+              <el-icon><MoreFilled /></el-icon>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>{{ t('library.edit') }}</el-dropdown-item>
+                <el-dropdown-item>{{ t('library.export') }}</el-dropdown-item>
+                <el-dropdown-item divided>{{ t('library.delete') }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Plus, Search, Microphone, User, VideoPlay, MoreFilled } from '@element-plus/icons-vue'
+export default {
+  components: { Plus, Search, Microphone, User, VideoPlay, MoreFilled }
+}
+</script>
+
+<style lang="scss" scoped>
+.library-page {
+  height: 100%;
+}
+
+.library-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  
+  .page-title {
+    margin-bottom: 0;
+  }
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  color: var(--text-muted);
+  
+  p {
+    margin-top: 16px;
+    font-size: 15px;
+  }
+}
+
+.voice-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.voice-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  background: var(--bg-secondary);
+  border-radius: var(--border-radius);
+  transition: box-shadow var(--transition-fast);
+  
+  &:hover {
+    box-shadow: 0 4px 12px var(--shadow-color);
+  }
+}
+
+.voice-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--primary-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+.voice-info {
+  flex: 1;
+  
+  h4 {
+    font-size: 15px;
+    font-weight: 600;
+    margin-bottom: 4px;
+  }
+  
+  .voice-meta {
+    font-size: 12px;
+    color: var(--text-muted);
+  }
+}
+
+.voice-actions {
+  display: flex;
+  gap: 8px;
+}
+</style>

tts-voice-app/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/renderer/src/*"]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

tts-voice-app/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["electron.vite.config.ts"]
+}