xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 11 Pull Requests 2 Actions Packages Projects Releases 7 Wiki Activity

refactor(upload-voice-modal): 三阶段重构 UploadVoiceModal（329→87行, -74%） #1047

Closed
xiaoxia wants to merge 3 commits from refactor/upload-voice-modal into develop
pull from: refactor/upload-voice-modal
merge into: xiaoxia:develop
Conversation 5 Commits 3 Files Changed 9
+394 -279
xiaoxia commented 2026-07-28 09:14:38 +08:00
Owner
Copy Link
Copy Source

重构内容

Phase 1: 类型/常量抽离

  • upload-voice-modal/types.ts — UploadVoiceModalProps, GENDER_OPTIONS, UPLOAD_CONFIG

Phase 2: UI 组件拆分（5个）

  • FileUploadZone — 拖拽上传区
  • FileInfoCard — 已选文件信息卡
  • UploadProgress — 上传进度条 + 百分比
  • FormFields — 名称/性别/描述表单
  • ActionButtons — 取消/上传操作按钮

Phase 3: 主组件瘦身

  • 329 行 → 87 行（-74%）
  • 仅保留 Modal 框架 + 子组件组装
  • 内联样式变量化（labelStyle/inputStyle），减少重复
  • 保持导入路径向后兼容（UploadVoiceModal.tsx 位置不变）
## 重构内容 ### Phase 1: 类型/常量抽离 - `upload-voice-modal/types.ts` — UploadVoiceModalProps, GENDER_OPTIONS, UPLOAD_CONFIG ### Phase 2: UI 组件拆分（5个） - `FileUploadZone` — 拖拽上传区 - `FileInfoCard` — 已选文件信息卡 - `UploadProgress` — 上传进度条 + 百分比 - `FormFields` — 名称/性别/描述表单 - `ActionButtons` — 取消/上传操作按钮 ### Phase 3: 主组件瘦身 - 329 行 → 87 行（-74%） - 仅保留 Modal 框架 + 子组件组装 - 内联样式变量化（labelStyle/inputStyle），减少重复 - 保持导入路径向后兼容（UploadVoiceModal.tsx 位置不变）
xiaoxia added 1 commit 2026-07-28 09:14:38 +08:00
refactor(upload-voice-modal): 三阶段重构 UploadVoiceModal（329→87行, -74%）
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 44s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m5s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 1m9s
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m43s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m20s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 3m39s
Details
AI Code Review / AI Code Review (pull_request) Successful in 2m1s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m27s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 2m29s
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been cancelled
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Has been cancelled
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been cancelled
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been cancelled
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been cancelled
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been cancelled
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been cancelled
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been cancelled
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been cancelled
Details
CI/CD Pipeline / CI Gate (pull_request) Has been cancelled
Details
Preview Deploy / Deploy Preview Environment (pull_request) Has been cancelled
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m33s
Details
5df49e6bae 
Phase 1: 抽 types/constants
- types.ts — UploadVoiceModalProps, GENDER_OPTIONS, UPLOAD_CONFIG

Phase 2: 拆 5 个 UI 组件
- FileUploadZone — 拖拽上传区
- FileInfoCard — 已选文件信息卡
- UploadProgress — 上传进度条
- FormFields — 名称/性别/描述表单
- ActionButtons — 取消/上传操作按钮

Phase 3: 主组件瘦身
- 仅保留 Modal 框架 + 子组件组装
- 内联样式变量化，labelStyle/inputStyle 复用
xiaoxia added 1 commit 2026-07-28 09:19:17 +08:00
fix: prettier format FileUploadZone
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 48s
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m36s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m3s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m55s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 2m47s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m16s
Details
AI Code Review / AI Code Review (pull_request) Successful in 1m47s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m16s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 2m14s
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m1s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Failing after 1m8s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been cancelled
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been cancelled
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been cancelled
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been cancelled
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been cancelled
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been cancelled
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been cancelled
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been cancelled
Details
CI/CD Pipeline / CI Gate (pull_request) Has been cancelled
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 3m58s
Details
9e4ed48deb
auto-approve-bot approved these changes 2026-07-28 09:24:31 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-07-28 09:24:31 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot commented 2026-07-28 09:24:38 +08:00
Collaborator
Copy Link
Copy Source

【阻塞级判定】

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

📊 审查概览

  • 整体评价：通过
  • 建议级问题数量：1 个

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

无

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

  1. [ActionButtons.tsx: 18-20] 移除不必要的函数包装
    • 具体内容：handleUpload 函数仅是对传入的 onUpload 回调的直接调用，没有增加额外的逻辑（如日志、防抖或校验）。这种中间层包装不仅增加了代码量，还在每次组件渲染时创建一个新的函数实例。建议直接将 onClick 绑定到 onUpload，即 onClick={onUpload}。

✅ 良好实践

  1. 配置集中管理：将 UPLOAD_CONFIG 和 GENDER_OPTIONS 提取到 types.ts 中统一管理，便于后续维护和修改。
  2. 组件拆分合理：将复杂的 UploadVoiceModal 拆分为职责单一的子组件（如 FileUploadZone、FileInfoCard 等），提升了代码的可读性和复用性。
  3. 样式优化：将 FormFields 中的样式对象（labelStyle、inputStyle）提取到组件外部定义，避免了每次渲染时重复创建对象，有利于性能。
  4. 类型安全：使用了 as const 断言 UPLOAD_CONFIG，确保了类型的不可变性和精确推断。
  5. 逻辑防御：在父组件中通过 canUpload 统一控制上传按钮的禁用状态，逻辑清晰，避免了子组件中的重复校验。

✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好

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

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：1 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[ActionButtons.tsx: 18-20] 移除不必要的函数包装** - 具体内容：`handleUpload` 函数仅是对传入的 `onUpload` 回调的直接调用，没有增加额外的逻辑（如日志、防抖或校验）。这种中间层包装不仅增加了代码量，还在每次组件渲染时创建一个新的函数实例。建议直接将 `onClick` 绑定到 `onUpload`，即 `onClick={onUpload}`。 ### ✅ 良好实践 1. **配置集中管理**：将 `UPLOAD_CONFIG` 和 `GENDER_OPTIONS` 提取到 `types.ts` 中统一管理，便于后续维护和修改。 2. **组件拆分合理**：将复杂的 `UploadVoiceModal` 拆分为职责单一的子组件（如 `FileUploadZone`、`FileInfoCard` 等），提升了代码的可读性和复用性。 3. **样式优化**：将 `FormFields` 中的样式对象（`labelStyle`、`inputStyle`）提取到组件外部定义，避免了每次渲染时重复创建对象，有利于性能。 4. **类型安全**：使用了 `as const` 断言 `UPLOAD_CONFIG`，确保了类型的不可变性和精确推断。 5. **逻辑防御**：在父组件中通过 `canUpload` 统一控制上传按钮的禁用状态，逻辑清晰，避免了子组件中的重复校验。 --- ✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-07-28 01:24:38 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
gitea-actions bot commented 2026-07-28 09:25:16 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1047 | | 预览链接 | [https://pr-1047.preview.xiaoxiajianji.com](https://pr-1047.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
xiaoxia added 1 commit 2026-07-28 09:27:41 +08:00
test: 补充voices smoke测试的upload-voice-modal依赖链
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 29s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 57s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m42s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m55s
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 3m11s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m7s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 1m40s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 57s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 51s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 53s
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 7m16s
Details
AI Code Review / AI Code Review (pull_request) Failing after 6m44s
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 25s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 24s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 12m3s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 23s
Details
02c65845ca
xiaoxia force-pushed refactor/upload-voice-modal from 2e1749590e to 02c65845ca 2026-07-28 09:27:41 +08:00 Compare
xiaoxia closed this pull request 2026-07-28 09:43:28 +08:00
gitea-actions bot commented 2026-07-28 09:43:51 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1047 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Some checks are pending
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 29s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 57s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m42s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m55s
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 3m11s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m7s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 1m40s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 57s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 51s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 53s
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 7m16s
Details
AI Code Review / AI Code Review (pull_request) Failing after 6m44s
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 25s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 24s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 12m3s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 23s
Details

Pull request closed

This pull request cannot be reopened because the branch was deleted.
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
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1047
Delete Branch "refactor/upload-voice-modal"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?