feat: Step5 配音选择改为展示用户上传的配音素材 #1252

Merged

auto-approve-bot merged 6 commits from feat/step5-material-voice into develop 2026-08-07 12:06:00 +08:00

Conversation 5 Commits 6 Files Changed 3

+247 -146

xiaoxia commented 2026-08-07 11:50:31 +08:00

Owner

Copy Link

Copy Source

变更说明

将生成流程第5步「选择配音」从展示音色列表改为展示用户已上传的配音素材。

修改文件

1. Step5VoiceSelect.tsx - 完全重写

   • 使用 useQuery + getAssetsByKind("voice") 获取配音素材
   • 卡片展示：音频图标、名称、时长(mm:ss)、文件大小
   • 支持点击播放预览（同时只播放一个）
   • 选中高亮（蓝色边框+浅蓝背景）
   • 空状态引导去配音库上传
   • Props 简化为 selectedVoice + onSelectedVoiceChange

2. GenerateStepContent.tsx - Step5 传参精简

   • 仅传递 selectedVoice 和 onSelectedVoiceChange
   • 接口字段保留，避免上游大量改动

3. useStep7Generate.ts - voiceName 查找逻辑更新

   • 从素材列表中按 selectedVoice ID 查找 name
   • 移除对 voiceMode/presetVoices/clonedVoices 的依赖

## 变更说明 将生成流程第5步「选择配音」从展示音色列表改为展示用户已上传的配音素材。 ### 修改文件 1. **Step5VoiceSelect.tsx** - 完全重写 - 使用 `useQuery` + `getAssetsByKind("voice")` 获取配音素材 - 卡片展示：音频图标、名称、时长(mm:ss)、文件大小 - 支持点击播放预览（同时只播放一个） - 选中高亮（蓝色边框+浅蓝背景） - 空状态引导去配音库上传 - Props 简化为 `selectedVoice` + `onSelectedVoiceChange` 2. **GenerateStepContent.tsx** - Step5 传参精简 - 仅传递 `selectedVoice` 和 `onSelectedVoiceChange` - 接口字段保留，避免上游大量改动 3. **useStep7Generate.ts** - voiceName 查找逻辑更新 - 从素材列表中按 `selectedVoice` ID 查找 name - 移除对 voiceMode/presetVoices/clonedVoices 的依赖

xiaoxia added 3 commits 2026-08-07 11:50:31 +08:00

feat: 重写 Step5VoiceSelect，从音色列表改为展示用户上传的配音素材 32bdaca391

feat: Step5 仅传 selectedVoice 和 onSelectedVoiceChange 给 Step5VoiceSelect ef8c8c0dc6

feat: voiceName 从配音素材库按 selectedVoice ID 查找名称 3079fe1aec

xiaoxia added 1 commit 2026-08-07 11:54:09 +08:00

fix: 移除未使用的解构变量，修复 ESLint no-unused-vars 错误 233c10a77d

xiaoxia added 1 commit 2026-08-07 11:54:09 +08:00

fix: 未使用的参数添加 _ 前缀，修复 ESLint no-unused-vars 错误 db3b07547e

gitea-actions bot commented 2026-08-07 11:55:47 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

xiaoxia added 1 commit 2026-08-07 11:58:14 +08:00

style: Prettier 格式化修复 Step5VoiceSelect.tsx 7bf6e2f75c

auto-approve-bot approved these changes 2026-08-07 11:59:52 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-07 11:59:52 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot commented 2026-08-07 12:00:54 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #1252

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

1. Step5VoiceSelect.tsx 第67-76行：Audio 对象资源未释放，存在内存泄漏风险。
   • 问题描述：代码中通过 new Audio() 创建了音频对象并赋值给 audioRef.current，但在组件卸载时没有进行清理（pause 和置空）。如果用户在音频播放过程中切换页面或组件销毁，音频可能会继续在后台播放，且 Audio 对象无法被垃圾回收，导致内存泄漏。
   • 后果：用户切换页面后声音依然播放，且多次操作可能导致内存占用升高。
   • 修改建议：添加 useEffect 清理函数，在组件卸载时暂停音频并释放引用。

     useEffect(() => {
       return () => {
         if (audioRef.current) {
           audioRef.current.pause();
           audioRef.current = null;
         }
       };
     }, []);
     

💡 建议（2个可选）

1. Step5VoiceSelect.tsx 第103行：建议使用路由跳转替代 window.location.href。
   • 具体内容：当前使用 window.location.href = "/voices" 会导致页面完全刷新，丢失 React 应用的状态。建议使用项目配置的路由实例（如 useNavigate 或 router.push）进行客户端跳转，以保持单页应用体验。
2. Step5VoiceSelect.tsx 第76行：建议增加播放失败的错误提示或日志。
   • 具体内容：audio.play().catch(...) 目前仅做了静默处理（设置 playingId 为 null）。如果音频格式不支持或网络错误，用户无法感知。建议在 catch 中添加 console.error 或 UI 提示，方便排查问题。

---

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

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-08-07 04:00:54 | 模型:}

## 代码审查结果 - PR #1252 ### ⚠️ 问题（1个需要修改） 1. **Step5VoiceSelect.tsx 第67-76行**：Audio 对象资源未释放，存在内存泄漏风险。 - **问题描述**：代码中通过 `new Audio()` 创建了音频对象并赋值给 `audioRef.current`，但在组件卸载时没有进行清理（pause 和置空）。如果用户在音频播放过程中切换页面或组件销毁，音频可能会继续在后台播放，且 Audio 对象无法被垃圾回收，导致内存泄漏。 - **后果**：用户切换页面后声音依然播放，且多次操作可能导致内存占用升高。 - **修改建议**：添加 `useEffect` 清理函数，在组件卸载时暂停音频并释放引用。 ```tsx useEffect(() => { return () => { if (audioRef.current) { audioRef.current.pause(); audioRef.current = null; } }; }, []); ``` ### 💡 建议（2个可选） 1. **Step5VoiceSelect.tsx 第103行**：建议使用路由跳转替代 `window.location.href`。 - **具体内容**：当前使用 `window.location.href = "/voices"` 会导致页面完全刷新，丢失 React 应用的状态。建议使用项目配置的路由实例（如 `useNavigate` 或 `router.push`）进行客户端跳转，以保持单页应用体验。 2. **Step5VoiceSelect.tsx 第76行**：建议增加播放失败的错误提示或日志。 - **具体内容**：`audio.play().catch(...)` 目前仅做了静默处理（设置 playingId 为 null）。如果音频格式不支持或网络错误，用户无法感知。建议在 catch 中添加 `console.error` 或 UI 提示，方便排查问题。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-07 04:00:54 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

auto-approve-bot merged commit 9e57d35b2e into develop 2026-08-07 12:06:00 +08:00

auto-approve-bot deleted branch feat/step5-material-voice 2026-08-07 12:06:00 +08:00

gitea-actions bot commented 2026-08-07 12:06:20 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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