refactor(CloneModal): 音色克隆弹窗目录化拆分（602→440行, -27%） #1186

Merged

auto-approve-bot merged 37 commits from refactor/clone-modal-split into develop 2026-07-30 11:01:16 +08:00

Conversation 5 Commits 37 Files Changed 12

+755 -82

xiaoxia commented 2026-07-30 07:51:07 +08:00

Owner

Copy Link

Copy Source

变更内容

将 CloneModal.tsx（602行）目录化拆分，降低单文件复杂度：

拆分结构

• index.tsx - 主组件（440行，-27%），只保留渲染与状态编排
• types.ts - 类型定义（CloneModalProps、ModalPhase、ProgressStep）
• constants.ts - 常量配置（进度步骤、文件格式、大小限制等）
• utils.ts - 工具函数（validateFile、formatRecordTime）
• hooks/useAudioRecorder.ts - 录音逻辑Hook（MediaRecorder + 计时 + 自动停止）
• clone-modal.css - 样式文件（移到目录内）

改动说明

1. 提取 useAudioRecorder Hook，封装浏览器录音完整逻辑，可复用于其他录音场景
2. 提取 validateFile、formatRecordTime 纯函数到 utils
3. 主组件专注于状态编排与 JSX 渲染，逻辑与视图分离
4. 路径向后兼容：@/components/voice/CloneModal 默认导出不变
5. 已有测试文件 src/test/components/voice/CloneModal.test.tsx 路径兼容

## 变更内容 将 `CloneModal.tsx`（602行）目录化拆分，降低单文件复杂度： ### 拆分结构 - **index.tsx** - 主组件（440行，-27%），只保留渲染与状态编排 - **types.ts** - 类型定义（CloneModalProps、ModalPhase、ProgressStep） - **constants.ts** - 常量配置（进度步骤、文件格式、大小限制等） - **utils.ts** - 工具函数（validateFile、formatRecordTime） - **hooks/useAudioRecorder.ts** - 录音逻辑Hook（MediaRecorder + 计时 + 自动停止） - **clone-modal.css** - 样式文件（移到目录内） ### 改动说明 1. 提取 `useAudioRecorder` Hook，封装浏览器录音完整逻辑，可复用于其他录音场景 2. 提取 `validateFile`、`formatRecordTime` 纯函数到 utils 3. 主组件专注于状态编排与 JSX 渲染，逻辑与视图分离 4. 路径向后兼容：`@/components/voice/CloneModal` 默认导出不变 5. 已有测试文件 `src/test/components/voice/CloneModal.test.tsx` 路径兼容

xiaoxia added 8 commits 2026-07-30 07:51:07 +08:00

refactor(CloneModal): 提取类型定义 b3bc2e319f

refactor(CloneModal): 提取常量 75caf4b853

refactor(CloneModal): 提取工具函数 84b48fce38

refactor(CloneModal): 提取录音Hook e2e8af5455

refactor(CloneModal): 目录化主组件（抽取逻辑到Hook/utils） d2f11bb9d7

refactor(CloneModal): 移动样式文件到目录内 2cd046da68

refactor(CloneModal): 删除旧的单文件组件 31058e04e3

refactor(CloneModal): 删除旧的样式文件（已移到目录内） 1b970a6755

xiaoxia added 1 commit 2026-07-30 08:16:25 +08:00

fix(CloneModal): 移除未使用变量和非组件导出以修复Lint错误 9326f0f174

gitea-actions bot commented 2026-07-30 08:22:03 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

项目	详情
PR号	#1186
预览链接	https://pr-1186.preview.xiaoxiajianji.com
API环境	staging

💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后，预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1186 | | 预览链接 | [https://pr-1186.preview.xiaoxiajianji.com](https://pr-1186.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。

xiaoxia added 1 commit 2026-07-30 08:25:57 +08:00

fix: use mediaRecorder.mimeType for cross-browser compatibility 6cce7e9e08

xiaoxia added 1 commit 2026-07-30 08:25:58 +08:00

fix: add isMounted guard + use ACCEPTED_MIME constant + dynamic file extension 02fba891cd

xiaoxia added 1 commit 2026-07-30 08:53:41 +08:00

test(clone-modal): add smoke test for InputView 36367a58bc

xiaoxia added 1 commit 2026-07-30 08:53:41 +08:00

test(CloneModal): add smoke test for useAudioRecorder hook 351370d6f0

xiaoxia added 1 commit 2026-07-30 08:53:41 +08:00

test(clone-modal): add smoke test for ProgressView 00508d0163

xiaoxia added 1 commit 2026-07-30 08:53:43 +08:00

test(clone-modal): add smoke test for RecordArea 6a775aeac7

xiaoxia added 1 commit 2026-07-30 08:53:44 +08:00

test(clone-modal): add smoke test for StepIndicator 9724076e96

xiaoxia added 1 commit 2026-07-30 08:53:45 +08:00

test(clone-modal): add smoke test for UploadZone 065c8fc79c

auto-approve-bot approved these changes 2026-07-30 08:56:55 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-07-30 08:56:55 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia added 1 commit 2026-07-30 09:32:03 +08:00

test: add smoke test for constants 8cdf9af013

xiaoxia added 1 commit 2026-07-30 09:32:04 +08:00

test: add smoke test for types 9588bb24a7

xiaoxia added 1 commit 2026-07-30 09:32:04 +08:00

test: add smoke test for utils 50794c1d46

xiaoxia added 1 commit 2026-07-30 09:32:06 +08:00

test: add smoke test for index 7381204fb8

xiaoxia added 1 commit 2026-07-30 09:32:08 +08:00

fix: add isMounted guard for async operations e76d59c1c0

xiaoxia added 1 commit 2026-07-30 09:52:19 +08:00

fix: restore useAudioRecorder with isMounted guard 0a10e88abe

xiaoxia added 1 commit 2026-07-30 09:52:35 +08:00

chore: remove invalid test files for non-existent components 44189ad20d

xiaoxia added 1 commit 2026-07-30 09:52:35 +08:00

chore: remove invalid test files for non-existent components 10f1149bed

xiaoxia added 1 commit 2026-07-30 09:52:36 +08:00

chore: remove invalid test files for non-existent components 6feba823ed

xiaoxia added 1 commit 2026-07-30 09:52:38 +08:00

chore: remove invalid test files for non-existent components 215bceae1f

xiaoxia added 1 commit 2026-07-30 10:06:53 +08:00

fix: correct test assertions to match actual hook return API 232d80dec7

xiaoxia added 1 commit 2026-07-30 10:20:50 +08:00

fix: prettier formatting 448443151e

xiaoxia added 1 commit 2026-07-30 10:20:52 +08:00

fix: prettier formatting cf4dc8a415

xiaoxia added 1 commit 2026-07-30 10:20:53 +08:00

fix: prettier formatting 107fe707a8

xiaoxia added 1 commit 2026-07-30 10:20:54 +08:00

fix: prettier formatting 088d697ef4

xiaoxia added 1 commit 2026-07-30 10:20:55 +08:00

fix: prettier formatting e32c5ea1a8

xiaoxia added 1 commit 2026-07-30 10:32:51 +08:00

fix: 添加webm到支持的音频扩展名 7b697d46ba

xiaoxia added 1 commit 2026-07-30 10:32:53 +08:00

fix: 录音启动竞态防护+onstop计时器清理 a2d1a8cb11

auto-approve-bot commented 2026-07-30 10:42:31 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

• 是否存在阻塞级问题：是
• 阻塞级问题数量：1 个

📊 审查概览

• 整体评价：需修改
• 建议级问题数量：2 个

🔴 阻塞级问题（必须修复）

1. [apps/web/src/components/voice/CloneModal/index.tsx: 257] 提交函数存在竞态条件风险
   • 问题类型：逻辑bug
   • 问题描述：handleSubmit 函数中依赖 isProcessing 状态（由 phase 派生）来控制提交，但状态更新是异步的。当用户快速双击“开始克隆”按钮时，canSubmit 在两次点击时可能均为 true，导致 uploadAsset 和 createVoiceClone 被并发调用两次，造成重复创建或资源浪费。
   • 修改建议：在 handleSubmit 函数入口处增加同步的守卫检查，例如使用 if (isProcessing) return，或者引入一个 isSubmittingRef 来确保同一时间只能有一个提交流程在运行。

💡 改进建议（不阻塞合并）

1. [apps/web/src/components/voice/CloneModal/index.tsx: 24] 默认名称计数器重置问题

   • 具体内容：cloneCounterRef 被定义在组件内部，且 Modal 设置了 destroyOnClose={true}。这意味着每次 Modal 关闭并重新打开时，组件会重新挂载，计数器重置为 1。用户每次打开弹窗看到的默认名称都是“我的声音 1”，体验不佳且可能导致重复命名。建议将计数器逻辑移至组件外部（如模块级变量）或使用时间戳/随机数生成唯一后缀。

2. [apps/web/src/components/voice/CloneModal/index.tsx: 18] 辅助函数位置建议

   • 具体内容：getExtensionFromMime 函数目前定义在 index.tsx 顶部。考虑到项目中已经存在 utils.ts 文件，建议将该纯函数移至 utils.ts 中，以保持 index.tsx 的简洁性和关注点分离。

✅ 良好实践

• 使用 isMountedRef 有效防止了组件卸载后的状态更新，避免了内存泄漏和警告。
• useAudioRecorder Hook 中使用 isStartingRef 防止了录音按钮的重复点击触发，逻辑严密。
• 文件上传和拖拽逻辑中，正确处理了 input 的 value 重置，允许重复选择同一文件。
• 错误处理覆盖了录音权限拒绝、文件格式校验等常见场景。

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-07-30 02:42:31 | 模型:}

### 【阻塞级判定】 - 是否存在阻塞级问题：是 - 阻塞级问题数量：1 个 ### 📊 审查概览 - 整体评价：需修改 - 建议级问题数量：2 个 ### 🔴 阻塞级问题（必须修复） 1. **[apps/web/src/components/voice/CloneModal/index.tsx: 257] 提交函数存在竞态条件风险** - 问题类型：逻辑bug - 问题描述：`handleSubmit` 函数中依赖 `isProcessing` 状态（由 `phase` 派生）来控制提交，但状态更新是异步的。当用户快速双击“开始克隆”按钮时，`canSubmit` 在两次点击时可能均为 `true`，导致 `uploadAsset` 和 `createVoiceClone` 被并发调用两次，造成重复创建或资源浪费。 - 修改建议：在 `handleSubmit` 函数入口处增加同步的守卫检查，例如使用 `if (isProcessing) return`，或者引入一个 `isSubmittingRef` 来确保同一时间只能有一个提交流程在运行。 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/components/voice/CloneModal/index.tsx: 24] 默认名称计数器重置问题** - 具体内容：`cloneCounterRef` 被定义在组件内部，且 Modal 设置了 `destroyOnClose={true}`。这意味着每次 Modal 关闭并重新打开时，组件会重新挂载，计数器重置为 1。用户每次打开弹窗看到的默认名称都是“我的声音 1”，体验不佳且可能导致重复命名。建议将计数器逻辑移至组件外部（如模块级变量）或使用时间戳/随机数生成唯一后缀。 2. **[apps/web/src/components/voice/CloneModal/index.tsx: 18] 辅助函数位置建议** - 具体内容：`getExtensionFromMime` 函数目前定义在 `index.tsx` 顶部。考虑到项目中已经存在 `utils.ts` 文件，建议将该纯函数移至 `utils.ts` 中，以保持 `index.tsx` 的简洁性和关注点分离。 ### ✅ 良好实践 - 使用 `isMountedRef` 有效防止了组件卸载后的状态更新，避免了内存泄漏和警告。 - `useAudioRecorder` Hook 中使用 `isStartingRef` 防止了录音按钮的重复点击触发，逻辑严密。 - 文件上传和拖拽逻辑中，正确处理了 `input` 的 `value` 重置，允许重复选择同一文件。 - 错误处理覆盖了录音权限拒绝、文件格式校验等常见场景。 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-07-30 02:42:31 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

xiaoxia added 1 commit 2026-07-30 10:44:23 +08:00

fix: handleSubmit双击竞态防护(isSubmittingRef) 20bddde331

auto-approve-bot merged commit 613c75d041 into develop 2026-07-30 11:01:16 +08:00

auto-approve-bot deleted branch refactor/clone-modal-split 2026-07-30 11:01:16 +08:00

gitea-actions bot commented 2026-07-30 11:01:33 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

PR #1186 已关闭或合并，对应的预览环境已被清理。

如有需要，可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #1186 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。

Sign in to join this conversation.

Reviewers

No Reviewers

auto-approve-bot

Labels

Clear labels

P0

阻塞性，必须立即处理

P1

高优先级

P2

中优先级

P3

低优先级/后考虑

architecture

架构设计

backend

后端相关

blocked

阻塞中

bug

Bug修复

ci-bug

CI本身的bug

ci-optimization

CI优化类任务

ci-pipeline

CI流水线/workflow相关

cleanup

代码清理

devops

运维/部署/CI

documentation

文档相关

feature

新功能

frontend

前端相关

question

需要讨论确认

ready

PR CI通过，可合并

refactor

代码重构

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

auto-approve-bot xiaoxia

No Assignees

3 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1186