feat(voices): 任务3.12 克隆音色卡片组件 #170

2026-07-02T13:45:50+08:00

xiaoxia commented

2026-07-02 13:45:50 +08:00

任务 3.12：克隆音色卡片组件

改动内容

voiceClone.ts：扩展 VoiceClone 类型（description/language/gender/error_message），更新 toVoiceClone 映射（后端 pending → 前端 processing）
VoiceLibrary.tsx：新增 CloneVoiceCard 组件（状态标签、播放控制、操作按钮）、CloneDetailModal 详情弹窗、CloneCardSkeleton 骨架屏；添加删除/重试 mutation + toast 提示
voices.css：新增约 450 行克隆卡片样式（卡片布局、状态标签、骨架屏动画、详情弹窗、响应式适配）

功能点

✅ 克隆音色卡片展示（名称、描述、语言、性别、状态标签）
✅ 状态标签：processing（加载动画）、ready（绿色可用）、failed（红色错误）
✅ ready 状态支持试听/使用；failed 状态显示错误信息和重试按钮
✅ 删除确认（调用 DELETE /api/v1/voice-clones/{id}）
✅ 点击卡片查看详情弹窗
✅ 空状态引导 + 骨架屏加载
✅ TypeScript 零错误

关联

基于 PR #167（任务 3.11）和 PR #169（任务 3.08）

## 任务 3.12：克隆音色卡片组件 ### 改动内容 - **voiceClone.ts**：扩展 VoiceClone 类型（description/language/gender/error_message），更新 toVoiceClone 映射（后端 pending → 前端 processing） - **VoiceLibrary.tsx**：新增 CloneVoiceCard 组件（状态标签、播放控制、操作按钮）、CloneDetailModal 详情弹窗、CloneCardSkeleton 骨架屏；添加删除/重试 mutation + toast 提示 - **voices.css**：新增约 450 行克隆卡片样式（卡片布局、状态标签、骨架屏动画、详情弹窗、响应式适配） ### 功能点 - ✅ 克隆音色卡片展示（名称、描述、语言、性别、状态标签） - ✅ 状态标签：processing（加载动画）、ready（绿色可用）、failed（红色错误） - ✅ ready 状态支持试听/使用；failed 状态显示错误信息和重试按钮 - ✅ 删除确认（调用 DELETE /api/v1/voice-clones/{id}） - ✅ 点击卡片查看详情弹窗 - ✅ 空状态引导 + 骨架屏加载 - ✅ TypeScript 零错误 ### 关联 - 基于 PR #167（任务 3.11）和 PR #169（任务 3.08）

xiaoxia added 1 commit 2026-07-02 13:45:50 +08:00

feat(voices): 任务3.12 克隆音色卡片组件

Deploy / Build Production Runtime Images (push) Has been skipped

Details

Deploy / Deploy Production (push) Has been skipped

Details

Deploy / Production Browser E2E (push) Has been skipped

Details

CI/CD Pipeline / Frontend Lint (pull_request) Failing after 167h6m25s

Details

CI/CD Pipeline / Validate Code Quality And Tests (pull_request) Failing after 167h6m30s

Details

Deploy / Deploy Staging (push) Failing after 167h8m16s

Details

CI/CD Pipeline / Frontend Lint (push) Failing after 167h8m47s

Details

CI/CD Pipeline / Validate Code Quality And Tests (push) Failing after 167h8m54s

Details

669b06fc73

- 扩展 VoiceClone 类型（description/language/gender/error_message）
- 更新 toVoiceClone 映射（后端 pending → 前端 processing）
- 新增 CloneVoiceCard 组件（状态标签、播放控制、操作按钮）
- 新增 CloneDetailModal 详情弹窗
- 新增 CloneCardSkeleton 骨架屏加载
- 删除/重试 mutation + toast 提示
- 克隆卡片样式（voices.css ~450 行）
- TypeScript 零错误

xiaoxia commented

2026-07-02 14:18:57 +08:00

代码审查报告：任务3.12 克隆音色卡片组件

结论: ✅ 有条件通过 — 组件结构清晰、功能完整，有几处 P2 需修复

P2 问题

P2-1：语言显示未本地化
CloneVoiceCard 和 CloneDetailModal 中 voice.language 直接显示原始值（如 "zh"），而预置音色使用了 languageLabel() 映射。应保持一致：

// 修复：复用 languageLabel 或扩展映射
const languageLabel = (l: string) => {
  const map = { zh: "中文", "zh-CN": "中文", en: "英文", ja: "日文", ko: "韩文" };
  return map[l] || l;
};

P2-2：克隆音色播放功能仅为 UI 壳
duration_seconds 始终为 0（硬编码），播放按钮点击后进度条假走但无音频。建议在 duration === 0 时禁用或隐藏播放控件，避免误导用户。

P2-3：「使用」按钮仅弹 Toast，无实际行为
handleCloneUse 只显示 toast，无后续操作。建议至少导航到配音页面 navigate('/app/tts?voiceId=...') 或提示"功能开发中"。

P3 建议

P3-1: CloneVoiceCard 与 VoiceCard CSS 高度重复，可抽取共用样式
P3-2: toastIdSeq 全局变量建议改用 useRef 或 Date.now()
P3-3: gender 映射只处理 male/female，建议复用 genderLabel()

⚠️ 与 PR #171 冲突警告

PR #171（后端 P2 修复）中包含了与本 PR 重叠的前端变更（voiceClone.ts、VoiceLibrary.tsx）。实测先合并本 PR 后，PR #171 会在 VoiceLibrary.tsx 产生 merge conflict。

建议合并顺序：先合并本 PR → 后端编程移除 PR #171 中的前端文件 → 再合并 PR #171。

亮点

组件拆分（CloneVoiceCard / CloneDetailModal / CloneCardSkeleton）职责清晰
useMutation + invalidateQueries 数据管理规范
骨架屏、空状态、Toast 反馈等 UX 细节完善
CSS 使用变量、支持主题、响应式布局

## 代码审查报告：任务3.12 克隆音色卡片组件 **结论**: ✅ **有条件通过** — 组件结构清晰、功能完整，有几处 P2 需修复 ### P2 问题 **P2-1：语言显示未本地化** `CloneVoiceCard` 和 `CloneDetailModal` 中 `voice.language` 直接显示原始值（如 "zh"），而预置音色使用了 `languageLabel()` 映射。应保持一致： ```tsx // 修复：复用 languageLabel 或扩展映射 const languageLabel = (l: string) => { const map = { zh: "中文", "zh-CN": "中文", en: "英文", ja: "日文", ko: "韩文" }; return map[l] || l; }; ``` **P2-2：克隆音色播放功能仅为 UI 壳** `duration_seconds` 始终为 0（硬编码），播放按钮点击后进度条假走但无音频。建议在 `duration === 0` 时禁用或隐藏播放控件，避免误导用户。 **P2-3：「使用」按钮仅弹 Toast，无实际行为** `handleCloneUse` 只显示 toast，无后续操作。建议至少导航到配音页面 `navigate('/app/tts?voiceId=...')` 或提示"功能开发中"。 ### P3 建议 - P3-1: CloneVoiceCard 与 VoiceCard CSS 高度重复，可抽取共用样式 - P3-2: `toastIdSeq` 全局变量建议改用 `useRef` 或 `Date.now()` - P3-3: gender 映射只处理 male/female，建议复用 `genderLabel()` ### ⚠️ 与 PR #171 冲突警告 PR #171（后端 P2 修复）中包含了与本 PR 重叠的前端变更（voiceClone.ts、VoiceLibrary.tsx）。实测先合并本 PR 后，PR #171 会在 VoiceLibrary.tsx 产生 merge conflict。 **建议合并顺序**：先合并本 PR → 后端编程移除 PR #171 中的前端文件 → 再合并 PR #171。 ### 亮点 - 组件拆分（CloneVoiceCard / CloneDetailModal / CloneCardSkeleton）职责清晰 - useMutation + invalidateQueries 数据管理规范 - 骨架屏、空状态、Toast 反馈等 UX 细节完善 - CSS 使用变量、支持主题、响应式布局

xiaoxia referenced this pull request

2026-07-02 14:19:16 +08:00

fix: 修复任务3.08代码审查P2问题 (4项) #171

xiaoxia merged commit 9cf60b6b99 into develop

2026-07-02 14:22:52 +08:00

xiaoxia referenced this issue from a commit

2026-07-02 14:22:54 +08:00

Merge pull request 'feat(voices): 任务3.12 克隆音色卡片组件' (#170) from feature/task-312-clone-voice-card into develop

xiaoxia referenced this issue from a commit

2026-07-07 10:40:20 +08:00

feat: 配音素材库统一入口 + 搜索筛选 + 剪辑编辑器配音体验优化

Sign in to join this conversation.