feat: #1281 支持生成多个预览视频 + 配音前置 #1285

Merged

auto-approve-bot merged 4 commits from feat/1281-multi-preview-with-voice into develop 2026-08-07 23:01:06 +08:00

Conversation 5 Commits 4 Files Changed 12

+834 -521

xiaoxia commented 2026-08-07 21:40:47 +08:00

Owner

Copy Link

Copy Source

改动内容

步骤顺序调整

• 旧：模板(1)→素材(2)→预览(3)→标题(4)→配音(5)→封面(6)→确认(7)
• 新：模板(1)→素材(2)→配音(3)→预览(4)→标题(5)→封面(6)→确认(7)

将配音选择移到预览之前，让预览视频可以包含配音音频。

多预览功能

• 支持选择生成 1/2/3 个预览视频
• 网格展示所有预览结果，每个可单独播放
• 点击选择要查看的版本，右侧面板同步显示

配音传入预览

• 生成预览时传递 voice_ids 参数（后端 API CreatePreviewRequest.voice_ids 已支持）
• 根据 voiceMode 自动选择 selectedVoice（preset/custom）或 selectedClonedVoice（clone）

文件变更

文件	变更
constants.ts	STEPS 顺序调整
useStep4Preview.ts	新 hook，多预览 + voice_ids
Step4GeneratePreview.tsx	新组件，多预览网格 UI
GeneratePage.tsx	步骤阈值调整、voice_ids 传递
GenerateStepContent.tsx	case 映射更新
useStepNavigation.ts	校验步骤号更新
PreviewVideoPanel.tsx	import 路径更新
旧文件	删除 useStep3Preview.ts / Step3GeneratePreview.tsx

## 改动内容 ### 步骤顺序调整 - **旧**：模板(1)→素材(2)→预览(3)→标题(4)→配音(5)→封面(6)→确认(7) - **新**：模板(1)→素材(2)→**配音(3)**→**预览(4)**→标题(5)→封面(6)→确认(7) 将配音选择移到预览之前，让预览视频可以包含配音音频。 ### 多预览功能 - 支持选择生成 1/2/3 个预览视频 - 网格展示所有预览结果，每个可单独播放 - 点击选择要查看的版本，右侧面板同步显示 ### 配音传入预览 - 生成预览时传递 `voice_ids` 参数（后端 API `CreatePreviewRequest.voice_ids` 已支持） - 根据 `voiceMode` 自动选择 `selectedVoice`（preset/custom）或 `selectedClonedVoice`（clone） ## 文件变更 | 文件 | 变更 | |------|------| | `constants.ts` | STEPS 顺序调整 | | `useStep4Preview.ts` | 新 hook，多预览 + voice_ids | | `Step4GeneratePreview.tsx` | 新组件，多预览网格 UI | | `GeneratePage.tsx` | 步骤阈值调整、voice_ids 传递 | | `GenerateStepContent.tsx` | case 映射更新 | | `useStepNavigation.ts` | 校验步骤号更新 | | `PreviewVideoPanel.tsx` | import 路径更新 | | 旧文件 | 删除 useStep3Preview.ts / Step3GeneratePreview.tsx |

xiaoxia added 1 commit 2026-08-07 21:40:47 +08:00

feat: #1281 支持生成多个预览视频 + 配音前置 ... d3b3a0d31e

步骤顺序调整：
- 模板(1)→素材(2)→预览(3)→标题(4)→配音(5)→封面(6)→确认(7)
- 改为：模板(1)→素材(2)→配音(3)→预览(4)→标题(5)→封面(6)→确认(7)

多预览功能：
- 新增 useStep4Preview hook（替代 useStep3Preview），支持 voiceIds + previewCount
- 新增 Step4GeneratePreview 组件，支持预览数量选择（1/2/3个）和网格展示
- 每个预览独立轮询，可选择查看不同版本
- 右侧面板展示当前选中的预览视频

配音传入预览：
- 生成预览时传递 voice_ids 参数（后端 API 已支持）
- 根据 voiceMode 自动选择 selectedVoice 或 selectedClonedVoice

文件变更：
- constants.ts: STEPS 顺序调整
- useStep4Preview.ts: 新 hook，多预览 + voice_ids
- Step4GeneratePreview.tsx: 新组件，多预览网格 UI
- GeneratePage.tsx: 步骤阈值调整（>=4 显示预览，>=5 显示结果）
- GenerateStepContent.tsx: case 映射更新
- useStepNavigation.ts: 校验步骤号更新
- PreviewVideoPanel.tsx: import 路径更新
- 删除旧文件 useStep3Preview.ts / Step3GeneratePreview.tsx
- 测试文件同步更新

xiaoxia referenced this pull request 2026-08-07 22:30:52 +08:00

fix(ci): 简化 staging E2E 测试为冒烟测试，提升稳定性 #1289

xiaoxia added 1 commit 2026-08-07 22:38:27 +08:00

fix: remove unused onVoiceModeChange from GenerateStepContent destructuring ... 1e7232e1f6

Resolves ESLint no-unused-vars and TypeScript TS6133 errors that caused
Frontend Lint, PR Build Web Image, and Deploy Preview to all fail.

gitea-actions bot commented 2026-08-07 22:40:40 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot approved these changes 2026-08-07 22:41:14 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-07 22:41:14 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia added 1 commit 2026-08-07 22:49:23 +08:00

fix: add explicit String() conversion for voice IDs in previewVoiceIds ... 7b1485ce55

Addresses AI Code Review concern about type safety — selectedVoice and
selectedClonedVoice are already strings, but explicit String() makes the
intent clearer and prevents future regressions if types change.

xiaoxia added 1 commit 2026-08-07 22:55:28 +08:00

fix: add explicit string type annotations for previewVoiceIds ... 0150e6ecf2

AI Code Review incorrectly flagged selectedVoice/selectedClonedVoice as
object types. They are string (voice IDs) per useGenerateFormState types.
Added explicit type annotations and comments to make this unambiguous.

auto-approve-bot commented 2026-08-07 22:57:49 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

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

📊 审查概览

• 整体评价：通过
• 建议级问题数量：2 个

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

无

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

1. [GenerateStepContent.tsx] 组件复用逻辑验证

   • 具体内容：代码中将 Step5VoiceSelect 复用为 Step3VoiceSelect。虽然 props 传递看起来兼容（selectedVoice, onSelectedVoiceChange），但建议确认 Step5VoiceSelect 组件内部是否存在硬编码的步骤编号（如 currentStep === 5）或仅在第 5 步才触发的副作用逻辑，避免因步骤变更导致组件内部逻辑异常。

2. [GeneratePage.tsx] 空值校验建议

   • 具体内容：previewVoiceIds 的计算逻辑中，若未选择配音会返回空数组 []。建议确认 useStepNavigation 中的 canProceed 逻辑已包含对“是否已选择配音”的校验，防止用户在未选择配音的情况下进入 Step4（预览）导致接口报错或生成失败。

✅ 良好实践

• 步骤重构清晰：Step 3 与 Step 4/5 的组件置换及逻辑调整在可见代码中处理得非常干净，状态管理更新及时。
• 防御性编程：在 Step4GeneratePreview.tsx 中，渲染 video 和访问 item.result 属性前均做了 item.status === "ready" && item.result 的存在性检查，有效避免了空指针异常。
• 类型安全：使用了 useMemo 优化计算依赖，且保持了 TypeScript 类型定义的引入和更新。

---

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

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：2 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[GenerateStepContent.tsx] 组件复用逻辑验证** - 具体内容：代码中将 `Step5VoiceSelect` 复用为 `Step3VoiceSelect`。虽然 props 传递看起来兼容（`selectedVoice`, `onSelectedVoiceChange`），但建议确认 `Step5VoiceSelect` 组件内部是否存在硬编码的步骤编号（如 `currentStep === 5`）或仅在第 5 步才触发的副作用逻辑，避免因步骤变更导致组件内部逻辑异常。 2. **[GeneratePage.tsx] 空值校验建议** - 具体内容：`previewVoiceIds` 的计算逻辑中，若未选择配音会返回空数组 `[]`。建议确认 `useStepNavigation` 中的 `canProceed` 逻辑已包含对“是否已选择配音”的校验，防止用户在未选择配音的情况下进入 Step4（预览）导致接口报错或生成失败。 ### ✅ 良好实践 - **步骤重构清晰**：Step 3 与 Step 4/5 的组件置换及逻辑调整在可见代码中处理得非常干净，状态管理更新及时。 - **防御性编程**：在 `Step4GeneratePreview.tsx` 中，渲染 `video` 和访问 `item.result` 属性前均做了 `item.status === "ready" && item.result` 的存在性检查，有效避免了空指针异常。 - **类型安全**：使用了 `useMemo` 优化计算依赖，且保持了 TypeScript 类型定义的引入和更新。 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-07 14:57:49 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

auto-approve-bot merged commit 9414dc1318 into develop 2026-08-07 23:01:06 +08:00

auto-approve-bot deleted branch feat/1281-multi-preview-with-voice 2026-08-07 23:01:06 +08:00

gitea-actions bot commented 2026-08-07 23:02:00 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1285 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。

xiaoxia referenced this issue from a commit 2026-08-08 00:04:43 +08:00

fix: E2E测试步骤顺序适配PR#1285（配音→预览→标题）

xiaoxia referenced this pull request 2026-08-08 00:04:54 +08:00

fix: E2E测试步骤顺序适配PR#1285（配音→预览→标题） #1291

xiaoxia referenced this pull request 2026-08-08 00:24:48 +08:00

feat: 预览数量 preview_count 上限校验 + Worker 并发提升至 4 #1292

xiaoxia referenced this pull request 2026-08-08 11:18:24 +08:00

fix: E2E测试标题步骤placeholder不匹配+AI自动选择模式处理 #1296

xiaoxia referenced this pull request 2026-08-08 11:31:12 +08:00

fix: E2E测试标题步骤placeholder不匹配+AI自动选择模式处理 #1298

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#1285