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

refactor(voice-clone): 三阶段重构 VoiceClone 页面（353→108行, -69%） #966

Closed
xiaoxia wants to merge 2 commits from refactor/voice-clone-page into develop
pull from: refactor/voice-clone-page
merge into: xiaoxia:develop
Conversation 6 Commits 2 Files Changed 6
+429 -294
xiaoxia commented 2026-07-26 17:50:27 +08:00
Owner
Copy Link
Copy Source

变更说明

VoiceClone 音色克隆页面三阶段重构，主文件 353→108 行（-69%）

Phase 1: 类型/常量

  • types.ts: STATUS_CONFIG / Toast 类型

Phase 2: UI 组件

  • components/VoiceCloneCard.tsx: 音色卡片（头像/名称/状态/元信息/操作按钮）
  • components/EditNameDialog.tsx: 编辑名称弹窗
  • components/States.tsx: 空状态 / 骨架屏 / Toast 容器

Phase 3: 业务 Hook

  • hooks/useVoiceCloneList.ts: 列表查询 + 删除 + 编辑 + 试听 + Toast 全部逻辑

说明

  • 页面功能完全不变，纯结构重构
  • 注意：分支名 voice-clone-page 避免与 API 拆分的 refactor/voice-clone 混淆
## 变更说明 VoiceClone 音色克隆页面三阶段重构，主文件 353→108 行（-69%） ### Phase 1: 类型/常量 - `types.ts`: STATUS_CONFIG / Toast 类型 ### Phase 2: UI 组件 - `components/VoiceCloneCard.tsx`: 音色卡片（头像/名称/状态/元信息/操作按钮） - `components/EditNameDialog.tsx`: 编辑名称弹窗 - `components/States.tsx`: 空状态 / 骨架屏 / Toast 容器 ### Phase 3: 业务 Hook - `hooks/useVoiceCloneList.ts`: 列表查询 + 删除 + 编辑 + 试听 + Toast 全部逻辑 ### 说明 - 页面功能完全不变，纯结构重构 - 注意：分支名 voice-clone-page 避免与 API 拆分的 refactor/voice-clone 混淆
xiaoxia added 1 commit 2026-07-26 17:50:28 +08:00
refactor(voice-clone-page): 三阶段重构 VoiceClone 页面（353→108行, -69%）
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 29s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 44s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m24s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m14s
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 2m24s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 42s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 51s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m23s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m15s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 2m46s
Details
AI Code Review / AI Code Review (pull_request) Successful in 4m11s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 6m31s
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 / 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 / Frontend Unit Tests (pull_request) Failing after 1m11s
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 / Canary Release to Production (pull_request) Has been cancelled
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
5371b4a4d1 
- Phase 1: 抽 types.ts（STATUS_CONFIG/Toast 类型）
- Phase 2: 抽 4 个 UI 组件（VoiceCloneCard/EditNameDialog/States）
- Phase 3: 抽 useVoiceCloneList 业务 Hook
- 主文件 353→108 行，结构清晰，卡片组件可复用
xiaoxia added 1 commit 2026-07-27 12:34:48 +08:00
Merge branch 'develop' into refactor/voice-clone-page
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 30s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 51s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m17s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m28s
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 / PR Build Worker Image (pull_request) Successful in 35s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 2m27s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m3s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m54s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 45s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 5m18s
Details
AI Code Review / AI Code Review (pull_request) Successful in 5m30s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 15m28s
Details
CI/CD Pipeline / CI Gate (pull_request) 失败: CI/CD Pipeline / Validate - Code Quality (pull_request) [frontend-only]
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 / 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 / Frontend Unit Tests (pull_request) Failing after 22s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
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 / Canary Release to Production (pull_request) Has been cancelled
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 16s
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
d261652c7f
auto-approve-bot approved these changes 2026-07-27 13:50:29 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-07-27 13:50:29 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
gitea-actions bot commented 2026-07-27 13:50:43 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #966 | | 预览链接 | [https://pr-966.preview.xiaoxiajianji.com](https://pr-966.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
auto-approve-bot commented 2026-07-27 13:54:39 +08:00
Collaborator
Copy Link
Copy Source

代码审查结果 - PR #966

⚠️ 问题（2个需要修改）

  1. hooks/useVoiceCloneList.ts 第98行：handleUse 函数签名丢失了 voice 参数，导致逻辑错误。

    • 说明：在 VoiceCloneCard.tsx 中调用 onUse(voice) 传递了音色对象，但在 useVoiceCloneList.ts 定义的 handleUse 是无参函数 () => {}。这导致“使用此音色”功能无法获取具体是哪个音色，无法实现后续的跳转或选中逻辑。
    • 后果：功能缺失，点击“使用此音色”只会提示 Toast，但无法进行实际业务操作。

  2. components/VoiceCloneCard.tsx 第70行：访问 STATUS_CONFIG 存在潜在的运行时错误。

    • 说明：代码通过 STATUS_CONFIG[voice.status] 直接获取配置。如果 API 返回了未在 STATUS_CONFIG 中定义的 status（例如新增的中间状态或异常状态），statusCfg 将为 undefined，后续访问 statusCfg.className 会导致页面崩溃。
    • 后果：当后端扩展状态或返回脏数据时，前端白屏。

💡 建议（3个可选）

  1. hooks/useVoiceCloneList.ts 第106行：handleEdit 初始化建议增加空值保护。

    • 说明：setEditName(voice.name) 如果 voice.name 为 null 或 undefined，Input 组件会显示 "null" 字符串。建议改为 setEditName(voice.name || "")。

  2. components/EditNameDialog.tsx 第44行：保存按钮建议增加非空校验禁用状态。

    • 说明：当前逻辑下，如果用户清空输入框，保存按钮仍可点击，点击后无反应（Hook 中拦截了）。建议在组件层判断 disabled={loading || !name.trim()}，提升用户体验。

  3. components/VoiceCloneCard.tsx 第72行：日期格式化建议增加有效性校验。

    • 说明：new Date(voice.created_at) 如果传入无效时间戳或格式，会生成 Invalid Date。虽然 toLocaleDateString 不会报错，但会显示 "Invalid Date"。建议增加简单的校验逻辑。

✅ 格式检查通过 | ❌ 逻辑审查需修改 | ✅ 性能无明显问题

🤖 由 AI 代码审查机器人自动生成 | 2026-07-27 05:54:39 | 模型:

## 代码审查结果 - PR #966 ### ⚠️ 问题（2个需要修改） 1. **hooks/useVoiceCloneList.ts 第98行**：`handleUse` 函数签名丢失了 `voice` 参数，导致逻辑错误。 - **说明**：在 `VoiceCloneCard.tsx` 中调用 `onUse(voice)` 传递了音色对象，但在 `useVoiceCloneList.ts` 定义的 `handleUse` 是无参函数 `() => {}`。这导致“使用此音色”功能无法获取具体是哪个音色，无法实现后续的跳转或选中逻辑。 - **后果**：功能缺失，点击“使用此音色”只会提示 Toast，但无法进行实际业务操作。 2. **components/VoiceCloneCard.tsx 第70行**：访问 `STATUS_CONFIG` 存在潜在的运行时错误。 - **说明**：代码通过 `STATUS_CONFIG[voice.status]` 直接获取配置。如果 API 返回了未在 `STATUS_CONFIG` 中定义的 `status`（例如新增的中间状态或异常状态），`statusCfg` 将为 `undefined`，后续访问 `statusCfg.className` 会导致页面崩溃。 - **后果**：当后端扩展状态或返回脏数据时，前端白屏。 ### 💡 建议（3个可选） 1. **hooks/useVoiceCloneList.ts 第106行**：`handleEdit` 初始化建议增加空值保护。 - **说明**：`setEditName(voice.name)` 如果 `voice.name` 为 `null` 或 `undefined`，Input 组件会显示 "null" 字符串。建议改为 `setEditName(voice.name || "")`。 2. **components/EditNameDialog.tsx 第44行**：保存按钮建议增加非空校验禁用状态。 - **说明**：当前逻辑下，如果用户清空输入框，保存按钮仍可点击，点击后无反应（Hook 中拦截了）。建议在组件层判断 `disabled={loading || !name.trim()}`，提升用户体验。 3. **components/VoiceCloneCard.tsx 第72行**：日期格式化建议增加有效性校验。 - **说明**：`new Date(voice.created_at)` 如果传入无效时间戳或格式，会生成 Invalid Date。虽然 `toLocaleDateString` 不会报错，但会显示 "Invalid Date"。建议增加简单的校验逻辑。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ✅ 性能无明显问题 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-07-27 05:54:39 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
auto-approve-bot commented 2026-07-27 14:05:10 +08:00
Collaborator
Copy Link
Copy Source

Auto merge skipped after multiple 405 errors: PR may have conflicts or unresolved checks. Please review manually. This is not a CI failure.

Auto merge skipped after multiple 405 errors: PR may have conflicts or unresolved checks. Please review manually. This is not a CI failure.
xiaoxia closed this pull request 2026-07-27 16:33:18 +08:00
gitea-actions bot commented 2026-07-27 18:15:29 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #966 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Some required checks failed
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 30s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 51s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m17s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m28s
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 / PR Build Worker Image (pull_request) Successful in 35s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 2m27s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m3s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m54s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 45s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 5m18s
Details
AI Code Review / AI Code Review (pull_request) Successful in 5m30s
Required
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 15m28s
Details
CI/CD Pipeline / CI Gate (pull_request) 失败: CI/CD Pipeline / Validate - Code Quality (pull_request) [frontend-only]
Required
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 / 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 / Frontend Unit Tests (pull_request) Failing after 22s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
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 / Canary Release to Production (pull_request) Has been cancelled
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 16s
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details

Pull request closed

Please reopen this pull request to perform a merge.
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#966
Delete Branch "refactor/voice-clone-page"

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?