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

feat: 任务 3.14 一键生成功能前端对接 TTS API #172

Merged
xiaoxia merged 1 commits from feature/task-314-tts-integration into develop 2026-07-02 15:11:50 +08:00
Conversation 1 Commits 1 Files Changed 2
+352 -97
xiaoxia commented 2026-07-02 14:35:27 +08:00
Owner
Copy Link
Copy Source

任务 3.14：一键生成功能前端对接

变更内容

  1. 新增 src/api/tts.ts：TTS 语音合成 API 模块

    • 对接后端 /api/v1/tts/* 端点（synthesize, jobs, status, delete）
    • 完整类型定义：TTSSynthesizeRequest/Response, TTSJob, TTSJobStatus, TTSJobListResponse

  2. GeneratePage.tsx 对接真实 API

    • 预置音色：MOCK_VOICES → fetchPresetVoices() API + loading/empty 状态
    • 音色试听：Mock toast → 真实 Audio 播放（使用 preview_url）
    • 自定义录制：新增"合成语音"按钮 → synthesizeSpeech() + 轮询 getTTSJobStatus()
    • 克隆音色：生成流程传递 voice_clone_profile_id
    • 配音模式验证：clone 模式需选择克隆音色，custom 模式需文案或录音

技术细节

  • 使用 useMutation 管理 TTS 合成请求
  • useEffect 轮询 TTS 任务状态（2s 间隔，终态 completed/failed/cancelled）
  • PresetVoiceItem.voice_id 作为标识（非 id）
  • TypeScript 零错误

依赖

  • 任务 3.11（音色 API 重写）✅
  • PR #170（克隆音色卡片）✅ 已合并
## 任务 3.14：一键生成功能前端对接 ### 变更内容 1. **新增 `src/api/tts.ts`**：TTS 语音合成 API 模块 - 对接后端 `/api/v1/tts/*` 端点（synthesize, jobs, status, delete） - 完整类型定义：TTSSynthesizeRequest/Response, TTSJob, TTSJobStatus, TTSJobListResponse 2. **`GeneratePage.tsx` 对接真实 API** - 预置音色：`MOCK_VOICES` → `fetchPresetVoices()` API + loading/empty 状态 - 音色试听：Mock toast → 真实 `Audio` 播放（使用 `preview_url`） - 自定义录制：新增"合成语音"按钮 → `synthesizeSpeech()` + 轮询 `getTTSJobStatus()` - 克隆音色：生成流程传递 `voice_clone_profile_id` - 配音模式验证：clone 模式需选择克隆音色，custom 模式需文案或录音 ### 技术细节 - 使用 `useMutation` 管理 TTS 合成请求 - `useEffect` 轮询 TTS 任务状态（2s 间隔，终态 completed/failed/cancelled） - `PresetVoiceItem.voice_id` 作为标识（非 `id`） - TypeScript 零错误 ### 依赖 - 任务 3.11（音色 API 重写）✅ - PR #170（克隆音色卡片）✅ 已合并
xiaoxia added 1 commit 2026-07-02 14:35:28 +08:00
feat: 任务 3.14 一键生成功能前端对接 TTS API
Deploy / Build Production Runtime Images (push) Has been skipped
Details
Deploy / Deploy Production (push) Has been skipped
Details
Deploy / Production Browser E2E (push) Has been skipped
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 166h16m44s
Details
CI/CD Pipeline / Validate Code Quality And Tests (pull_request) Failing after 166h16m49s
Details
Deploy / Deploy Staging (push) Failing after 166h18m39s
Details
CI/CD Pipeline / Frontend Lint (push) Failing after 166h19m9s
Details
CI/CD Pipeline / Validate Code Quality And Tests (push) Failing after 166h19m16s
Details
c7fe28a0d0 
- 新增 src/api/tts.ts：TTS 语音合成 API 模块，对接后端 /api/v1/tts/* 端点
- GeneratePage.tsx 对接真实预置音色 API（fetchPresetVoices 替换 MOCK_VOICES）
- 音色试听改为真实 audio 播放（使用 preview_url）
- 自定义录制模式对接 TTS 合成 API（synthesizeSpeech + 轮询状态）
- 克隆音色生成流程传递 voice_clone_profile_id
- 配音模式验证：clone 模式需选择克隆音色，custom 模式需文案或录音
- TypeScript 零错误
xiaoxia commented 2026-07-02 14:51:20 +08:00
Author
Owner
Copy Link
Copy Source

🔍 代码审查结果

结论: ✅ 有条件通过（0 P0 / 0 P1 / 2 P2 / 4 P3）

✅ 亮点

  • tts.ts API 模块设计优秀：类型完整、轻量 status 与完整 job 分离
  • Mock → API 迁移干净：移除 MOCK_VOICES，useQuery + loading/empty 状态
  • 音色试听从 Mock toast 改为真实 Audio 播放
  • TTS 轮询健壮：cancelled flag + clearTimeout，三种终态处理
  • 配音模式验证完备（clone 需选音色、custom 需文案或录音）

⚠️ P2 问题

P2-1: 「上传录音文件」按钮无行为
自定义录制模式下的上传按钮没有 onClick 处理，点击无反应。建议添加文件选择或 Toast 提示"功能开发中"。

P2-2: 视频生成轮询无组件卸载清理（内存泄漏）
handleGenerate 中的 setTimeout 轮询 generation-status 存在 progressTimer.current 中，但无 useEffect cleanup。用户导航离开后轮询继续执行并 setState。建议添加卸载清理。

P3 建议

  • P3-1: progressTimer 类型为 setInterval 但实际存 setTimeout（双重 as 强转）
  • P3-2: toggleVoicePlay 依赖数组含 playingVoice（可移除以优化渲染）
  • P3-3: handleSynthesizeVoice 的 voice_id 取自 selectedVoice，custom 模式下可能为空
  • P3-4: voiceConfig 在 custom 模式全 undefined 时传空配置（验证已覆盖但可优化）

整体质量良好，2 个 P2 建议修复但不阻塞合并。

## 🔍 代码审查结果 **结论**: ✅ **有条件通过**（0 P0 / 0 P1 / 2 P2 / 4 P3） ### ✅ 亮点 - tts.ts API 模块设计优秀：类型完整、轻量 status 与完整 job 分离 - Mock → API 迁移干净：移除 MOCK_VOICES，useQuery + loading/empty 状态 - 音色试听从 Mock toast 改为真实 Audio 播放 - TTS 轮询健壮：cancelled flag + clearTimeout，三种终态处理 - 配音模式验证完备（clone 需选音色、custom 需文案或录音） ### ⚠️ P2 问题 **P2-1: 「上传录音文件」按钮无行为** 自定义录制模式下的上传按钮没有 onClick 处理，点击无反应。建议添加文件选择或 Toast 提示"功能开发中"。 **P2-2: 视频生成轮询无组件卸载清理（内存泄漏）** handleGenerate 中的 setTimeout 轮询 generation-status 存在 progressTimer.current 中，但无 useEffect cleanup。用户导航离开后轮询继续执行并 setState。建议添加卸载清理。 ### P3 建议 - P3-1: progressTimer 类型为 setInterval 但实际存 setTimeout（双重 as 强转） - P3-2: toggleVoicePlay 依赖数组含 playingVoice（可移除以优化渲染） - P3-3: handleSynthesizeVoice 的 voice_id 取自 selectedVoice，custom 模式下可能为空 - P3-4: voiceConfig 在 custom 模式全 undefined 时传空配置（验证已覆盖但可优化） 整体质量良好，2 个 P2 建议修复但不阻塞合并。
xiaoxia merged commit 7efce724ae into develop 2026-07-02 15:11:50 +08:00
Sign in to join this conversation.
Reviewers
No Reviewers
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
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#172
Delete Branch "feature/task-314-tts-integration"

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?