refactor(voices): 拆分 TtsModal 为子组件(258→53行, -79%) #1051

Closed
xiaoxia wants to merge 1 commits from refactor/tts-modal-voices into develop
Owner
No description provided.
xiaoxia added 1 commit 2026-07-28 09:54:17 +08:00
refactor(voices): 拆分 TtsModal 为子组件
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 40s
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m6s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m12s
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m37s
AI Code Review / AI Code Review (pull_request) Successful in 2m13s
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 2m44s
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m40s
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 2m39s
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m25s
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 6m30s
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 6m33s
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 9m29s
CI/CD Pipeline / CI Gate (pull_request) Successful in 39s
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m5s
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 1m8s
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 12m12s
40cd7ae74d
三阶段重构:
- Phase 1: 提取类型与常量到 tts-modal/types.ts
- Phase 2: 拆分为 6 个 UI 子组件
  - TextInputSection: 文本输入区
  - VoiceSelector: 音色选择下拉
  - SpeedControl: 语速调节滑块
  - SynthesizeButton: 合成按钮
  - ErrorAlert: 错误提示
  - ResultPanel: 合成结果展示
- Phase 3: 主文件 258→53 行(-79%)

保持导入路径向后兼容,主文件仍在原位置
auto-approve-bot approved these changes 2026-07-28 09:55:47 +08:00
auto-approve-bot left a comment
Collaborator

CI全绿,自动审批通过。

CI全绿,自动审批通过。
auto-approve-bot approved these changes 2026-07-28 09:55:47 +08:00
auto-approve-bot left a comment
Collaborator

CI全绿,自动审批通过。

CI全绿,自动审批通过。

🚀 预览环境已部署

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

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

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

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

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

【阻塞级判定】

  • 是否存在阻塞级问题:否
  • 阻塞级问题数量:0 个

📊 审查概览

  • 整体评价:通过
  • 建议级问题数量:0 个

🔴 阻塞级问题(必须修复)

💡 改进建议(不阻塞合并)

良好实践

  1. 组件拆分合理:将庞大的 TtsModal 拆分为 TextInputSectionVoiceSelectorSpeedControl 等单一职责组件,显著提升了代码的可维护性和可读性。
  2. 常量配置提取:将 MAX_TEXT_LENGTHMIN_SPEED 等魔法数字提取到 types.tsTTS_CONFIG 中,便于统一管理和后续修改。
  3. 类型定义清晰:通过 types.ts 集中管理类型定义,并使用 as const 确保配置对象的不可变性,符合 TypeScript 最佳实践。
  4. 保持向后兼容:在 TtsModal.tsx 底部重新导出了 TtsModalPropsTtsStatus 类型,确保外部引用该组件的地方不会因类型路径变更而报错。
  5. 防御性编程:在 SynthesizeButton 组件中,虽然按钮设置了 disabled 属性,但在 handleClick 中依然保留了 text.trim() 的校验逻辑,防止通过非点击方式(如键盘操作)触发无效请求。
  6. 测试覆盖更新:及时更新了 smoke.test.tsx,确保新增的子组件都能被正确加载和编译。

🤖 由 AI 代码审查机器人自动生成 | 2026-07-28 01:56:48 | 模型:

### 【阻塞级判定】 - 是否存在阻塞级问题:否 - 阻塞级问题数量:0 个 ### 📊 审查概览 - 整体评价:通过 - 建议级问题数量:0 个 ### 🔴 阻塞级问题(必须修复) 无 ### 💡 改进建议(不阻塞合并) 无 ### ✅ 良好实践 1. **组件拆分合理**:将庞大的 `TtsModal` 拆分为 `TextInputSection`、`VoiceSelector`、`SpeedControl` 等单一职责组件,显著提升了代码的可维护性和可读性。 2. **常量配置提取**:将 `MAX_TEXT_LENGTH`、`MIN_SPEED` 等魔法数字提取到 `types.ts` 的 `TTS_CONFIG` 中,便于统一管理和后续修改。 3. **类型定义清晰**:通过 `types.ts` 集中管理类型定义,并使用 `as const` 确保配置对象的不可变性,符合 TypeScript 最佳实践。 4. **保持向后兼容**:在 `TtsModal.tsx` 底部重新导出了 `TtsModalProps` 和 `TtsStatus` 类型,确保外部引用该组件的地方不会因类型路径变更而报错。 5. **防御性编程**:在 `SynthesizeButton` 组件中,虽然按钮设置了 `disabled` 属性,但在 `handleClick` 中依然保留了 `text.trim()` 的校验逻辑,防止通过非点击方式(如键盘操作)触发无效请求。 6. **测试覆盖更新**:及时更新了 `smoke.test.tsx`,确保新增的子组件都能被正确加载和编译。 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-07-28 01:56:48 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
xiaoxia closed this pull request 2026-07-28 10:03:46 +08:00

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1051 已关闭或合并,对应的预览环境已被清理。 > 如有需要,可以重新打开 PR 来重新生成预览环境。
Some checks are pending
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 40s
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m6s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m12s
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m37s
AI Code Review / AI Code Review (pull_request) Successful in 2m13s
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 2m44s
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m40s
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 2m39s
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m25s
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 6m30s
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 6m33s
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 9m29s
CI/CD Pipeline / CI Gate (pull_request) Successful in 39s
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m5s
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 1m8s
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 12m12s

Pull request closed

Sign in to join this conversation.