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

fix: 上传的配音素材直接使用 file_url，不调 TTS 合成 #1499

Closed
xiaoxia wants to merge 1 commits from fix/voice-preview-materials-v2 into develop
pull from: fix/voice-preview-materials-v2
merge into: xiaoxia:develop
Conversation 5 Commits 1 Files Changed 1
+20 -1
xiaoxia commented 2026-08-25 16:15:14 +08:00
Owner
Copy Link
Copy Source

问题

Step3 选择上传的配音素材后，预览错误地调用 previewTts 接口，导致预览无声音。

根因

配音预览逻辑没有区分上传素材和预设/克隆音色，统一调用了 TTS 合成接口。

修复方案

修改 GeneratePage.tsx 的配音预览 useEffect：

  1. 优先检查 selectedVoice 是否为已上传素材（通过查询 voiceMaterials）
  2. 如果是上传素材，直接使用其 file_url 作为预览音频
  3. 仅对预设音色或克隆音色调用 previewTts 接口合成

改动文件

  • apps/web/src/pages/generate/GeneratePage.tsx
    • 添加 voiceMaterials 查询（复用 Step3 的缓存）
    • 修改配音预览 useEffect 逻辑
    • 添加 previewVoiceAudioUrl state 和 ttsAbortRef

验收标准

  • Step3 选择上传的配音素材 → 预览面板能播放该素材的原始音频 ✅
  • 切换不同配音素材 → 预览配音随之切换 ✅
  • 预设/克隆音色预览仍正常（回归测试）✅
## 问题 Step3 选择上传的配音素材后，预览错误地调用 previewTts 接口，导致预览无声音。 ## 根因 配音预览逻辑没有区分上传素材和预设/克隆音色，统一调用了 TTS 合成接口。 ## 修复方案 修改 `GeneratePage.tsx` 的配音预览 useEffect： 1. 优先检查 `selectedVoice` 是否为已上传素材（通过查询 voiceMaterials） 2. 如果是上传素材，直接使用其 `file_url` 作为预览音频 3. 仅对预设音色或克隆音色调用 `previewTts` 接口合成 ## 改动文件 - `apps/web/src/pages/generate/GeneratePage.tsx` - 添加 `voiceMaterials` 查询（复用 Step3 的缓存） - 修改配音预览 useEffect 逻辑 - 添加 `previewVoiceAudioUrl` state 和 `ttsAbortRef` ## 验收标准 - Step3 选择上传的配音素材 → 预览面板能播放该素材的原始音频 ✅ - 切换不同配音素材 → 预览配音随之切换 ✅ - 预设/克隆音色预览仍正常（回归测试）✅
xiaoxia added 1 commit 2026-08-25 16:15:15 +08:00
fix: 上传的配音素材直接使用 file_url，不调 TTS 合成
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 / Check if frontend-only change (pull_request) Successful in 32s
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 43s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m48s
Details
AI Code Review / AI Code Review (pull_request) Failing after 1m57s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m32s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 2m46s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m16s
Details
CI/CD Pipeline / PR Build Worker Image (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
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m59s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 3m9s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 9m57s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 7m48s
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 Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 11s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 56s
Details
27d7828bf8 
- 配音预览逻辑优化：优先检查 selectedVoice 是否为已上传素材
- 如果是上传素材，直接使用其 file_url 作为预览音频
- 仅对预设音色或克隆音色调用 previewTts 接口合成
- 切换配音或标题时自动重新生成预览音频

解决用户反馈：Step3 选择上传的配音素材后预览无声音的问题
auto-approve-bot commented 2026-08-25 16:17:09 +08:00
Collaborator
Copy Link
Copy Source

【阻塞级判定】

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

📊 审查概览

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

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

  1. [apps/web/src/pages/generate/GeneratePage.tsx:93-96] 素材列表分页限制导致功能失效
    • 问题类型：逻辑bug / 边界条件遗漏
    • 问题描述：代码使用 getAssetsByKind("voice", { limit: 50 }) 获取配音素材列表，并在 useEffect 中通过 voiceMaterials.find 查找当前选中的 selectedVoice。如果用户上传的配音素材数量超过 50 个，且当前选中的素材不在前 50 个之内，find 方法将返回 undefined。此时代码会错误地回退到调用 previewTts 接口。由于用户上传的素材 ID 通常不支持直接作为 TTS 的 voice_id 参数（TTS 仅支持系统预设音色或克隆音色），这将导致预览失败或报错，无法播放用户已上传的音频文件。
    • 修改建议：建议移除 limit: 50 限制（如果数据量可控），或者增加 limit 值（如 1000）。更稳健的方案是：当 selectedVoice 符合特定 ID 格式（如用户上传素材）时，不依赖列表查找，或者确保列表查询能覆盖当前选中的 ID。

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

  1. [apps/web/src/pages/generate/GeneratePage.tsx:134] 依赖数组包含引用类型可能导致频繁重渲染
    • 具体内容：useEffect 的依赖数组中包含了 voiceMaterials（数组对象）。虽然 react-query 通常会返回稳定的引用，但在数据更新时引用仍会变化。如果素材列表频繁更新（例如后台有其他用户上传），会导致该 effect 频繁执行，触发不必要的 TTS 请求或状态设置。建议仅在 selectedVoice 变化时触发查找逻辑，或确保仅在必要时更新 previewVoiceAudioUrl。

✅ 良好实践

  • 使用 AbortController 处理了异步请求的竞态问题，避免了组件卸载或状态更新导致的内存泄漏。
  • 使用了可选链 voiceAsset?.file_url 进行安全访问，防止空指针异常。
  • 引入 useQuery 管理数据获取，符合 React 最佳实践。

🤖 由 AI 代码审查机器人自动生成 | 2026-08-25 08:17:09 | 模型:

### 【阻塞级判定】 - 是否存在阻塞级问题：是 - 阻塞级问题数量：1 个 ### 📊 审查概览 - 整体评价：需修改 - 建议级问题数量：1 个 ### 🔴 阻塞级问题（必须修复） 1. **[apps/web/src/pages/generate/GeneratePage.tsx:93-96] 素材列表分页限制导致功能失效** - 问题类型：逻辑bug / 边界条件遗漏 - 问题描述：代码使用 `getAssetsByKind("voice", { limit: 50 })` 获取配音素材列表，并在 `useEffect` 中通过 `voiceMaterials.find` 查找当前选中的 `selectedVoice`。如果用户上传的配音素材数量超过 50 个，且当前选中的素材不在前 50 个之内，`find` 方法将返回 `undefined`。此时代码会错误地回退到调用 `previewTts` 接口。由于用户上传的素材 ID 通常不支持直接作为 TTS 的 `voice_id` 参数（TTS 仅支持系统预设音色或克隆音色），这将导致预览失败或报错，无法播放用户已上传的音频文件。 - 修改建议：建议移除 `limit: 50` 限制（如果数据量可控），或者增加 `limit` 值（如 1000）。更稳健的方案是：当 `selectedVoice` 符合特定 ID 格式（如用户上传素材）时，不依赖列表查找，或者确保列表查询能覆盖当前选中的 ID。 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/pages/generate/GeneratePage.tsx:134] 依赖数组包含引用类型可能导致频繁重渲染** - 具体内容：`useEffect` 的依赖数组中包含了 `voiceMaterials`（数组对象）。虽然 `react-query` 通常会返回稳定的引用，但在数据更新时引用仍会变化。如果素材列表频繁更新（例如后台有其他用户上传），会导致该 effect 频繁执行，触发不必要的 TTS 请求或状态设置。建议仅在 `selectedVoice` 变化时触发查找逻辑，或确保仅在必要时更新 `previewVoiceAudioUrl`。 ### ✅ 良好实践 - 使用 `AbortController` 处理了异步请求的竞态问题，避免了组件卸载或状态更新导致的内存泄漏。 - 使用了可选链 `voiceAsset?.file_url` 进行安全访问，防止空指针异常。 - 引入 `useQuery` 管理数据获取，符合 React 最佳实践。 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-08-25 08:17:09 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
gitea-actions bot commented 2026-08-25 16:17:49 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

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

CI全绿，自动审批通过。

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

CI全绿，自动审批通过。

CI全绿，自动审批通过。
xiaoxia closed this pull request 2026-09-01 12:29:02 +08:00
gitea-actions bot commented 2026-09-01 12:29:58 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1499 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Some checks are pending
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 / Check if frontend-only change (pull_request) Successful in 32s
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 43s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m48s
Details
AI Code Review / AI Code Review (pull_request) Failing after 1m57s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m32s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 2m46s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m16s
Details
CI/CD Pipeline / PR Build Worker Image (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
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m59s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 3m9s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 9m57s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 7m48s
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 Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 11s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 56s
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#1499
Delete Branch "fix/voice-preview-materials-v2"

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?