fix(#1195): 我的音色页面试听按钮对接/voice-clones/{id}/preview接口 #1204

Merged

xiaoxia merged 1 commits from fix/voice-clone-preview-frontend-1195 into develop 2026-08-01 16:20:35 +08:00

Conversation 5 Commits 1 Files Changed 6

+79 -11

xiaoxia commented 2026-07-31 14:55:29 +08:00

Owner

Copy Link

Copy Source

改动说明

#1195 克隆音色试听前端对接：

1. API层：新增 VoiceClonePreviewResponse 类型和 getVoiceClonePreview 函数
2. 播放逻辑：我的音色页面试听从直接使用 sample_url 改为调用 /voice-clones/{id}/preview 接口获取音频URL后播放
3. 加载态：新增 loadingPreviewId 状态，合成中按钮显示「合成中…」并禁用
4. 错误处理：接口失败Toast提示，播放失败友好提示

相关Issue

#1195 克隆音色试听接口前端对接

## 改动说明 #1195 克隆音色试听前端对接： 1. **API层**：新增 `VoiceClonePreviewResponse` 类型和 `getVoiceClonePreview` 函数 2. **播放逻辑**：我的音色页面试听从直接使用 `sample_url` 改为调用 `/voice-clones/{id}/preview` 接口获取音频URL后播放 3. **加载态**：新增 `loadingPreviewId` 状态，合成中按钮显示「合成中…」并禁用 4. **错误处理**：接口失败Toast提示，播放失败友好提示 ## 相关Issue #1195 克隆音色试听接口前端对接

xiaoxia force-pushed fix/voice-clone-preview-frontend-1195 from fac8eae5c9 to 1e360a84eb 2026-07-31 15:51:26 +08:00 Compare

xiaoxia force-pushed fix/voice-clone-preview-frontend-1195 from d6367cf846 to 99c08f51f1 2026-08-01 01:36:41 +08:00 Compare

gitea-actions bot commented 2026-08-01 01:38:31 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot approved these changes 2026-08-01 01:45:43 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-01 01:45:43 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia force-pushed fix/voice-clone-preview-frontend-1195 from 3c67a1a702 to dd34c9cde0 2026-08-01 01:56:05 +08:00 Compare

xiaoxia added 1 commit 2026-08-01 16:12:21 +08:00

fix(#1195): 我的音色页面试听按钮对接/voice-clones/{id}/preview接口 ... 74f146bbaf

- API层新增VoiceClonePreviewResponse类型和getVoiceClonePreview函数
- useMyVoices hook播放逻辑改为先调接口获取音频URL再播放
- 新增loadingPreviewId状态，试听合成中显示加载态
- VoiceCard增加isLoading prop，加载时按钮显示"合成中…"并禁用
- 错误处理：接口失败Toast提示，播放失败友好提示

xiaoxia force-pushed fix/voice-clone-preview-frontend-1195 from e91023e345 to 74f146bbaf 2026-08-01 16:12:21 +08:00 Compare

auto-approve-bot commented 2026-08-01 16:14:38 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #1204

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

1. apps/web/src/pages/my-voices/hooks/useMyVoices.ts 第38-40行：音频切换逻辑存在状态污染风险

   • 问题描述：在切换播放时，代码仅执行了 pause() 和置空引用，但未移除旧音频对象的 onended 事件监听器。如果前一个音频在后台播放结束（或缓冲结束），其 onended 回调仍会触发，导致 setPlayingId(null) 被错误执行，从而打断当前正在播放的音频的 UI 状态。
   • 后果：导致 UI 状态与实际播放不符（例如音频 B 正在播放，但界面显示暂停），且用户无法正常进行暂停操作。

2. apps/web/src/pages/my-voices/hooks/useMyVoices.ts 第43-45行：阻止了在加载期间切换音色的逻辑

   • 问题描述：代码中判断 if (loadingPreviewId && loadingPreviewId !== voice.id) { return }，导致当音色 A 正在生成试听时，用户点击音色 B 会被直接忽略，无任何反馈。
   • 后果：用户体验极差，界面看似卡死或无响应，用户必须等待上一个请求完成才能切换，不符合播放器常规交互逻辑。

💡 建议（1个可选）

1. apps/web/src/pages/my-voices/hooks/useMyVoices.ts：建议引入 AbortController 取消未完成的请求
   • 具体内容：当前逻辑中，如果用户快速切换音色，前一个 getVoiceClonePreview 请求仍在后台运行。建议使用 AbortController 在开始新请求前取消旧请求，既节省服务器资源，也能从根本上解决竞态条件（Race Condition）问题。

---

✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-08-01 08:14:38 | 模型:}

## 代码审查结果 - PR #1204 ### ⚠️ 问题（2个需要修改） 1. **apps/web/src/pages/my-voices/hooks/useMyVoices.ts 第38-40行**：音频切换逻辑存在状态污染风险 - **问题描述**：在切换播放时，代码仅执行了 `pause()` 和置空引用，但未移除旧音频对象的 `onended` 事件监听器。如果前一个音频在后台播放结束（或缓冲结束），其 `onended` 回调仍会触发，导致 `setPlayingId(null)` 被错误执行，从而打断当前正在播放的音频的 UI 状态。 - **后果**：导致 UI 状态与实际播放不符（例如音频 B 正在播放，但界面显示暂停），且用户无法正常进行暂停操作。 2. **apps/web/src/pages/my-voices/hooks/useMyVoices.ts 第43-45行**：阻止了在加载期间切换音色的逻辑 - **问题描述**：代码中判断 `if (loadingPreviewId && loadingPreviewId !== voice.id) { return }`，导致当音色 A 正在生成试听时，用户点击音色 B 会被直接忽略，无任何反馈。 - **后果**：用户体验极差，界面看似卡死或无响应，用户必须等待上一个请求完成才能切换，不符合播放器常规交互逻辑。 ### 💡 建议（1个可选） 1. **apps/web/src/pages/my-voices/hooks/useMyVoices.ts**：建议引入 AbortController 取消未完成的请求 - **具体内容**：当前逻辑中，如果用户快速切换音色，前一个 `getVoiceClonePreview` 请求仍在后台运行。建议使用 `AbortController` 在开始新请求前取消旧请求，既节省服务器资源，也能从根本上解决竞态条件（Race Condition）问题。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-01 08:14:38 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

xiaoxia merged commit 25bbfdda6b into develop 2026-08-01 16:20:35 +08:00

xiaoxia deleted branch fix/voice-clone-preview-frontend-1195 2026-08-01 16:20:35 +08:00

gitea-actions bot commented 2026-08-01 16:21:12 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1204 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 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#1204