feat(task-3.14): 一键生成对接音色克隆 — API获取克隆列表 + VoiceCloneModal集成 #150

2026-07-01T15:57:05+08:00

xiaoxia commented

2026-07-01 15:57:05 +08:00

任务 3.14：一键生成对接音色克隆

变更内容

GeneratePage 克隆音色列表改为从 getVoiceClones() API 获取
集成 VoiceCloneModal（任务 3.13）替换内联克隆 UI
新增禁用态卡片样式（processing 状态）
修复路由 voice-clone/my-voices 语法错误

涉及文件

apps/web/src/pages/generate/GeneratePage.tsx
apps/web/src/pages/generate/generate.css
apps/web/src/router/index.tsx

## 任务 3.14：一键生成对接音色克隆 ### 变更内容 - GeneratePage 克隆音色列表改为从 `getVoiceClones()` API 获取 - 集成 VoiceCloneModal（任务 3.13）替换内联克隆 UI - 新增禁用态卡片样式（processing 状态） - 修复路由 voice-clone/my-voices 语法错误 ### 涉及文件 - `apps/web/src/pages/generate/GeneratePage.tsx` - `apps/web/src/pages/generate/generate.css` - `apps/web/src/router/index.tsx`

xiaoxia added 2 commits 2026-07-01 15:57:05 +08:00

feat: add VoiceCloneModal component with 3-stage progress b676f9e2c3

- VoiceCloneModal.tsx: upload audio / record audio, fill voice name,
  submit clone task, 3-stage progress display (上传中 → 克隆中 → 完成)
- voice-clone-modal.css: CSS variables from global.css, xx-vcmodal-*
  naming convention, responsive breakpoints at 768/480px
- Uses Modal/Button from @/components/ui (V21 Design System)
- Calls createVoiceClone API (POST /api/v1/voice-clones mock)
- Props: open, onClose, onSuccess — integrates with MyVoices page

Task 3.13 — 音色克隆弹窗组件

feat(task-3.14): 一键生成对接声音克隆 — getVoiceClones API + VoiceCloneModal 集成

CI/CD Pipeline / Frontend Lint (pull_request) Failing after 188h57m24s

Details

CI/CD Pipeline / Validate Code Quality And Tests (pull_request) Failing after 188h57m29s

Details

aa33c2e6c8

- GeneratePage: 替换内联克隆UI为API数据驱动的音色网格
- 集成 VoiceCloneModal 组件（四阶段进度弹窗）
- 页面加载时自动 fetchClonedVoices，支持克隆成功后刷新列表
- 音色卡片区分 ready/processing/failed 状态，非 ready 禁用选择
- generate.css: 新增 disabled 卡片、选中勾选标记样式
- router/index.tsx: 修复 voice-clone 路由缺失闭合括号的语法错误

xiaoxia commented

2026-07-01 16:30:18 +08:00

代码审查 — PR #150 任务 3.14：一键生成对接音色克隆

结论：✅ 通过，可合并

审查范围

5 文件，+1050/-82：

VoiceCloneModal.tsx（新增 441 行）— 音色克隆弹窗组件
voice-clone-modal.css（新增 471 行）— 弹窗样式
GeneratePage.tsx（修改）— 集成克隆弹窗 + 替换硬编码 Mock 为 API 调用
generate.css（修改）— 新增 disabled 卡片 + check 图标样式
router/index.tsx（修改）— 路由结构修复

优点

组件架构清晰：VoiceCloneModal 采用 phase 状态机（input → uploading → cloning → done），流程控制简洁直观
交互完整度高：支持文件上传 + 拖拽 + 录制三种输入方式，文件类型校验、默认名称生成、自动关闭等细节到位
无障碍支持良好：role/tabIndex/aria-pressed/aria-disabled/keyboard handler 齐全
CSS 规范统一：严格使用 xx-vcmodal-* BEM 命名 + V21 CSS 变量，与其他模块风格一致
集成改造合理：GeneratePage 删除了内联的 ClonedVoice 接口和 MOCK_CLONED_VOICES，改用共享 voiceClone.ts API，数据流向清晰
状态感知：克隆音色列表展示 ready/processing/failed 状态，非 ready 卡片禁用选择

建议（非阻塞）

P2

handleStartClone 中的 setTimeout 未清理
```
// 2秒后自动关闭
setTimeout(() => {
  onSuccess?.(result);
  handleClose();
}, 2000);
```
如果用户在 2 秒内手动关闭弹窗，组件卸载后 setTimeout 仍会触发，导致对已卸载组件的状态更新。建议用 useRef 存储 timer 并在 cleanup 或 handleClose 时 clearTimeout。
缺少 processing 状态轮询机制
fetchClonedVoices() 只在 useEffect 初始加载时调用一次。克隆任务提交后，新音色状态为 processing，但没有定期轮询来更新状态。用户需要手动刷新页面才能看到状态变化。建议：对有 processing 状态音色时启动 5-10s 间隔轮询，或在 handleCloneSuccess 后启动一次性延迟刷新。

P3

cloneCounter 为模块级可变变量
```
let cloneCounter = 1;
```
页面刷新后重置为 1，可能产生同名音色。Mock 阶段可接受，后续对接真实 API 后应由后端生成名称。
录制功能纯 Mock，无 MediaRecorder 实现
录制按钮仅计时而不实际录音，handleStartClone 中 selectedFile 为 null 时发送 mock://recorded-audio。功能阶段合理，但后续需补充真实录音逻辑。
无文件大小校验
拖拽/选择文件时未检查文件大小，超大文件可能导致后续上传失败。建议添加 file.size > MAX_SIZE 检查并提示用户。

总结

前端组件质量高，CSS 规范统一，交互流程完整。P2 建议（setTimeout 清理 + 状态轮询）建议在后续迭代中处理，不阻塞合并。

## 代码审查 — PR #150 任务 3.14：一键生成对接音色克隆 **结论：✅ 通过，可合并** --- ### 审查范围 5 文件，+1050/-82： - `VoiceCloneModal.tsx`（新增 441 行）— 音色克隆弹窗组件 - `voice-clone-modal.css`（新增 471 行）— 弹窗样式 - `GeneratePage.tsx`（修改）— 集成克隆弹窗 + 替换硬编码 Mock 为 API 调用 - `generate.css`（修改）— 新增 disabled 卡片 + check 图标样式 - `router/index.tsx`（修改）— 路由结构修复 ### 优点 1. **组件架构清晰**：VoiceCloneModal 采用 phase 状态机（input → uploading → cloning → done），流程控制简洁直观 2. **交互完整度高**：支持文件上传 + 拖拽 + 录制三种输入方式，文件类型校验、默认名称生成、自动关闭等细节到位 3. **无障碍支持良好**：role/tabIndex/aria-pressed/aria-disabled/keyboard handler 齐全 4. **CSS 规范统一**：严格使用 `xx-vcmodal-*` BEM 命名 + V21 CSS 变量，与其他模块风格一致 5. **集成改造合理**：GeneratePage 删除了内联的 `ClonedVoice` 接口和 `MOCK_CLONED_VOICES`，改用共享 `voiceClone.ts` API，数据流向清晰 6. **状态感知**：克隆音色列表展示 ready/processing/failed 状态，非 ready 卡片禁用选择 ### 建议（非阻塞） **P2** 1. **`handleStartClone` 中的 `setTimeout` 未清理** ```ts // 2秒后自动关闭 setTimeout(() => { onSuccess?.(result); handleClose(); }, 2000); ``` 如果用户在 2 秒内手动关闭弹窗，组件卸载后 setTimeout 仍会触发，导致对已卸载组件的状态更新。建议用 `useRef` 存储 timer 并在 cleanup 或 handleClose 时 `clearTimeout`。 2. **缺少 processing 状态轮询机制** `fetchClonedVoices()` 只在 `useEffect` 初始加载时调用一次。克隆任务提交后，新音色状态为 `processing`，但没有定期轮询来更新状态。用户需要手动刷新页面才能看到状态变化。建议：对有 `processing` 状态音色时启动 5-10s 间隔轮询，或在 `handleCloneSuccess` 后启动一次性延迟刷新。 **P3** 3. **`cloneCounter` 为模块级可变变量** ```ts let cloneCounter = 1; ``` 页面刷新后重置为 1，可能产生同名音色。Mock 阶段可接受，后续对接真实 API 后应由后端生成名称。 4. **录制功能纯 Mock，无 MediaRecorder 实现** 录制按钮仅计时而不实际录音，`handleStartClone` 中 `selectedFile` 为 null 时发送 `mock://recorded-audio`。功能阶段合理，但后续需补充真实录音逻辑。 5. **无文件大小校验** 拖拽/选择文件时未检查文件大小，超大文件可能导致后续上传失败。建议添加 `file.size > MAX_SIZE` 检查并提示用户。 ### 总结前端组件质量高，CSS 规范统一，交互流程完整。P2 建议（setTimeout 清理 + 状态轮询）建议在后续迭代中处理，不阻塞合并。

xiaoxia merged commit 74ad82e56a into develop

2026-07-01 16:36:23 +08:00

xiaoxia referenced this issue from a commit

2026-07-01 16:36:25 +08:00

Merge pull request 'feat(task-3.14): 一键生成对接音色克隆 — API获取克隆列表 + VoiceCloneModal集成' (#150) from feat/generate-voice-clone into develop

xiaoxia referenced this pull request

2026-07-01 17:09:36 +08:00

feat(task-3.13): VoiceCloneModal 四阶段克隆弹窗 #151

xiaoxia referenced this issue from a commit

2026-07-01 21:33:06 +08:00

fix: 清理 entities.py 重复实体定义，统一使用独立域模块

xiaoxia commented

2026-07-04 15:51:36 +08:00

🟡 代码审计（补审）— 有条件通过

审计范围：5 个文件，+1050/-82

P1 级问题

P1-1：音频文件未真实上传，使用 mock URL

位置：VoiceCloneModal.tsx L191-194
问题：audio_url: selectedFile ? "mock://${selectedFile.name}" : "mock://recorded-audio" — 用户选择的文件根本没上传到服务器，构造了一个假 URL 传给后端
影响：音色克隆功能完全不可用，后端收到 mock URL 无法处理
建议：使用 uploadAsset() 先上传文件获取真实 URL（参考 PR #173 CloneModal 的修复方式）

P2 级问题

P2-1：录音功能是纯 UI 假实现

位置：VoiceCloneModal.tsx L152-169
问题：handleRecord() 只有 setInterval 计时和状态切换，没有调用 MediaRecorder API 录制真实音频，停止录制后也没有生成 File 对象
影响：录音按钮点了只是计数器在跑，没有真实录音数据
建议：接入 navigator.mediaDevices.getUserMedia + MediaRecorder，停止时生成 Blob/File

P2-2：上传阶段用 setTimeout 模拟，无真实上传逻辑

位置：L186 await new Promise((r) => setTimeout(r, 1200))
问题：1.2秒纯等待，模拟"上传中"阶段
建议：替换为真实的文件上传逻辑

P2-3：完成阶段 setTimeout 无 cleanup

位置：L201-204 setTimeout(() => { onSuccess?.(...); handleClose(); }, 2000)
问题：用户在2秒内关闭弹窗，timer 仍会触发，可能导致状态更新警告
建议：用 useRef 存 timer ID，useEffect cleanup 中 clearTimeout

P3 级问题

P3-1：与 CloneModal.tsx（PR #173）功能高度重叠

两个组件都是音色克隆弹窗，功能几乎一致（上传/录音/进度/提交）
建议：后续统一为一个共享组件，避免重复维护

P3-2：uploading 阶段硬编码 1200ms

真实上传时间取决于文件大小和网络，固定值体验不好

总结

0P0 / 1P1 / 3P2 / 2P3 — 核心功能（文件上传、录音）均为 Mock 实现，UI 完整但后端无法真正执行克隆。建议参照 PR #173 的修复模式，补齐文件上传和录音真实逻辑。

## 🟡 代码审计（补审）— 有条件通过 **审计范围**：5 个文件，+1050/-82 ### P1 级问题 **P1-1：音频文件未真实上传，使用 mock URL** - 位置：`VoiceCloneModal.tsx` L191-194 - 问题：`audio_url: selectedFile ? "mock://${selectedFile.name}" : "mock://recorded-audio"` — 用户选择的文件根本没上传到服务器，构造了一个假 URL 传给后端 - 影响：音色克隆功能完全不可用，后端收到 mock URL 无法处理 - 建议：使用 `uploadAsset()` 先上传文件获取真实 URL（参考 PR #173 CloneModal 的修复方式） ### P2 级问题 **P2-1：录音功能是纯 UI 假实现** - 位置：`VoiceCloneModal.tsx` L152-169 - 问题：`handleRecord()` 只有 `setInterval` 计时和状态切换，没有调用 `MediaRecorder` API 录制真实音频，停止录制后也没有生成 File 对象 - 影响：录音按钮点了只是计数器在跑，没有真实录音数据 - 建议：接入 `navigator.mediaDevices.getUserMedia` + `MediaRecorder`，停止时生成 Blob/File **P2-2：上传阶段用 setTimeout 模拟，无真实上传逻辑** - 位置：L186 `await new Promise((r) => setTimeout(r, 1200))` - 问题：1.2秒纯等待，模拟"上传中"阶段 - 建议：替换为真实的文件上传逻辑 **P2-3：完成阶段 setTimeout 无 cleanup** - 位置：L201-204 `setTimeout(() => { onSuccess?.(...); handleClose(); }, 2000)` - 问题：用户在2秒内关闭弹窗，timer 仍会触发，可能导致状态更新警告 - 建议：用 `useRef` 存 timer ID，`useEffect` cleanup 中 clearTimeout ### P3 级问题 **P3-1：与 CloneModal.tsx（PR #173）功能高度重叠** - 两个组件都是音色克隆弹窗，功能几乎一致（上传/录音/进度/提交） - 建议：后续统一为一个共享组件，避免重复维护 **P3-2：uploading 阶段硬编码 1200ms** - 真实上传时间取决于文件大小和网络，固定值体验不好 ### 总结 0P0 / 1P1 / 3P2 / 2P3 — 核心功能（文件上传、录音）均为 Mock 实现，UI 完整但后端无法真正执行克隆。建议参照 PR #173 的修复模式，补齐文件上传和录音真实逻辑。

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#150