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

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

xiaoxia commented

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

任务 3.13：VoiceCloneModal 四阶段克隆弹窗

变更内容

新增 VoiceCloneModal 组件：输入 → 上传中 → 克隆中 → 完成
支持拖拽/点击上传音频文件
克隆进度展示与状态管理
CSS 使用 V21 设计系统变量

涉及文件

apps/web/src/components/modals/VoiceCloneModal.tsx
apps/web/src/components/modals/voice-clone-modal.css

## 任务 3.13：VoiceCloneModal 四阶段克隆弹窗 ### 变更内容 - 新增 VoiceCloneModal 组件：输入 → 上传中 → 克隆中 → 完成 - 支持拖拽/点击上传音频文件 - 克隆进度展示与状态管理 - CSS 使用 V21 设计系统变量 ### 涉及文件 - `apps/web/src/components/modals/VoiceCloneModal.tsx` - `apps/web/src/components/modals/voice-clone-modal.css`

xiaoxia added 1 commit 2026-07-01 15:57:14 +08:00

feat: add VoiceCloneModal component with 3-stage progress

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

Details

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

Details

ab9283e1bf

- 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 — 音色克隆弹窗组件

xiaoxia commented

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

代码审查 — PR #151 任务 3.13：VoiceCloneModal 四阶段克隆弹窗

结论：✅ 通过，可合并

审查范围

2 文件，+912：

VoiceCloneModal.tsx（441 行）— 克隆弹窗组件
voice-clone-modal.css（471 行）— 弹窗样式

审查要点

组件设计 ✅

Phase 状态机清晰：input → uploading → cloning → done
支持文件上传 + 拖拽 + 录制三种输入方式
文件类型白名单校验（mp3/wav/m4a/aac/ogg）
音色名称 maxLength=30 + trim 处理

CSS 规范 ✅

严格使用 xx-vcmodal-* BEM 命名
全部基于 V21 CSS 变量（--space-, --font-size-, --color-primary-* 等）
动画使用 CSS keyframes（pulse 录制效果、preview-in 入场）
无外部资源引用，无 dangerouslySetInnerHTML

状态管理 ✅

录制计时器在 useEffect cleanup 正确清理
弹窗关闭时 resetState 清理所有状态
isProcessing 时禁止 maskClosable 和 keyboard 关闭

建议（非阻塞）

P3

cloneCounter 模块级可变变量，页面刷新后重置，可能产生同名音色（Mock 阶段可接受）
录制功能纯 Mock（无 MediaRecorder API），后续需对接真实录音
setTimeout 自动关闭 2s 未清理，组件卸载后可能触发状态更新（与 PR #150 中同一问题）

总结

与 PR #150 中审查的 VoiceCloneModal 为相同代码。组件质量高，CSS 规范统一，无安全问题。

## 代码审查 — PR #151 任务 3.13：VoiceCloneModal 四阶段克隆弹窗 **结论：✅ 通过，可合并** --- ### 审查范围 2 文件，+912： - `VoiceCloneModal.tsx`（441 行）— 克隆弹窗组件 - `voice-clone-modal.css`（471 行）— 弹窗样式 ### 审查要点 **组件设计** ✅ - Phase 状态机清晰：input → uploading → cloning → done - 支持文件上传 + 拖拽 + 录制三种输入方式 - 文件类型白名单校验（mp3/wav/m4a/aac/ogg） - 音色名称 maxLength=30 + trim 处理 **CSS 规范** ✅ - 严格使用 `xx-vcmodal-*` BEM 命名 - 全部基于 V21 CSS 变量（--space-*, --font-size-*, --color-primary-* 等） - 动画使用 CSS keyframes（pulse 录制效果、preview-in 入场） - 无外部资源引用，无 dangerouslySetInnerHTML **状态管理** ✅ - 录制计时器在 useEffect cleanup 正确清理 - 弹窗关闭时 resetState 清理所有状态 - isProcessing 时禁止 maskClosable 和 keyboard 关闭 ### 建议（非阻塞） **P3** 1. `cloneCounter` 模块级可变变量，页面刷新后重置，可能产生同名音色（Mock 阶段可接受） 2. 录制功能纯 Mock（无 MediaRecorder API），后续需对接真实录音 3. `setTimeout` 自动关闭 2s 未清理，组件卸载后可能触发状态更新（与 PR #150 中同一问题） ### 总结与 PR #150 中审查的 VoiceCloneModal 为相同代码。组件质量高，CSS 规范统一，无安全问题。

xiaoxia merged commit 98278efdf6 into develop

2026-07-01 17:10:21 +08:00

xiaoxia referenced this issue from a commit

2026-07-01 17:10:22 +08:00

Merge pull request 'feat(task-3.13): VoiceCloneModal 四阶段克隆弹窗' (#151) from feat/voice-clone-modal into develop

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#151