fix(#1197): 第3步生成预览增加真正的预览生成逻辑，禁止直接跳过 #1200

Merged

auto-approve-bot merged 11 commits from fix/step3-preview-generation into develop 2026-07-30 17:06:12 +08:00

Conversation 5 Commits 11 Files Changed 7

+441 -43

xiaoxia commented 2026-07-30 14:01:49 +08:00

Owner

Copy Link

Copy Source

问题

第3步「生成预览」只是静态信息展示，用户点下一步直接跳过，没有真正的预览生成过程

修改内容

1. useStep3Preview.ts: 重写hook，增加预览生成状态机（idle/generating/ready/error），目前为mock实现（1.5s模拟生成），预留后端接口位置
2. Step3GeneratePreview.tsx: 重构组件，支持4种状态展示：未生成（生成按钮）/生成中/生成失败/生成成功（预览详情）
3. useStepNavigation.ts: Step3增加校验，必须先生成预览才能进入下一步
4. GenerateStepContent.tsx: 传递Step3预览相关props
5. GeneratePage.tsx: 集成useStep3Preview hook，贯通预览状态
6. generate.css: 新增预览生成相关样式（生成按钮区、加载状态、错误状态、重新生成按钮）

待后端对齐

• 预览生成接口：POST /generate-preview（入参：template_id, material_ids, duration, video_ratio, style；出参：preview_id, status, clip_count, preview_video_url）
• 后端接口就绪后，替换useStep3Preview中的mock逻辑即可

影响范围

• 智能剪辑生成向导第3步
• 仅前端改动，不影响后端

## 问题 第3步「生成预览」只是静态信息展示，用户点下一步直接跳过，没有真正的预览生成过程 ## 修改内容 1. **useStep3Preview.ts**: 重写hook，增加预览生成状态机（idle/generating/ready/error），目前为mock实现（1.5s模拟生成），预留后端接口位置 2. **Step3GeneratePreview.tsx**: 重构组件，支持4种状态展示：未生成（生成按钮）/生成中/生成失败/生成成功（预览详情） 3. **useStepNavigation.ts**: Step3增加校验，必须先生成预览才能进入下一步 4. **GenerateStepContent.tsx**: 传递Step3预览相关props 5. **GeneratePage.tsx**: 集成useStep3Preview hook，贯通预览状态 6. **generate.css**: 新增预览生成相关样式（生成按钮区、加载状态、错误状态、重新生成按钮） ## 待后端对齐 - 预览生成接口：POST /generate-preview（入参：template_id, material_ids, duration, video_ratio, style；出参：preview_id, status, clip_count, preview_video_url） - 后端接口就绪后，替换useStep3Preview中的mock逻辑即可 ## 影响范围 - 智能剪辑生成向导第3步 - 仅前端改动，不影响后端

xiaoxia added 6 commits 2026-07-30 14:01:49 +08:00

fix(#1197): useStep3Preview增加预览生成逻辑（mock），预留后端接口位置 2a92d83a4b

fix(#1197): Step3增加预览生成按钮和三种状态展示（idle/loading/ready） 968848e433

fix(#1197): Step3增加预览生成校验，必须生成预览才能进入下一步 3ddae20b7c

fix(#1197): GenerateStepContent传递Step3预览相关props 2ea4df35b4

fix(#1197): GeneratePage集成useStep3Preview，贯通预览状态到Step3和StepNavigation 7cf7264922

fix(#1197): 增加Step3预览生成相关CSS样式（生成按钮/加载/错误状态） e7b28623d6

gitea-actions bot commented 2026-07-30 14:03:03 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

xiaoxia added 1 commit 2026-07-30 14:29:15 +08:00

fix(#1197): 参数变化时重置预览状态 + 校验失败展示错误提示 e8b210504e

xiaoxia added 1 commit 2026-07-30 15:42:36 +08:00

fix(#1197): Prettier格式对齐 + 预览生成请求ID竞态防护 72f4be0b3c

xiaoxia added 1 commit 2026-07-30 15:53:35 +08:00

fix(#1197): Prettier格式对齐 ae8afedaa7

xiaoxia added 1 commit 2026-07-30 15:53:35 +08:00

fix(#1197): Prettier格式对齐 5335d60193

auto-approve-bot approved these changes 2026-07-30 15:55:59 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-07-30 15:55:59 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot commented 2026-07-30 15:57:52 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

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

📊 审查概览

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

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

无

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

1. [apps/web/src/pages/generate/hooks/useStep3Preview.ts: useEffect依赖项] 优化 useEffect 依赖项

   • 具体内容：useEffect 的依赖项数组中包含了 previewStatus。该 Effect 的主要目的是监听输入参数（如模板、素材）的变化来重置预览状态。包含 previewStatus 会导致每次预览状态改变（如从 generating 变为 ready）时都触发 Effect 重新执行，虽然逻辑上有保护机制不会出错，但属于不必要的性能开销。建议移除 previewStatus，仅在输入参数变化时执行重置逻辑。

2. [apps/web/src/pages/generate/hooks/useStepNavigation.ts: 末尾导出] 移除多余的默认导出

   • 具体内容：文件末尾添加了 export default useStepNavigation。该文件主要使用命名导出 export const useStepNavigation。添加默认导出容易造成导入时的混淆（如 import useStepNavigation from ... vs import { useStepNavigation } from ...），建议保持一致性，移除默认导出。

✅ 良好实践

• 竞态条件处理：在 useStep3Preview 中使用了 requestIdRef 来处理异步请求的竞态问题，防止旧请求的结果覆盖新请求的状态，这是处理异步状态更新的最佳实践。
• 状态重置逻辑：在关键参数（模板、素材等）发生变化时，能够自动重置预览状态，避免了用户在修改参数后看到旧预览数据的问题。
• 导航守卫：在 useStepNavigation 中增加了 previewReady 的校验，强制用户必须生成预览后才能进入下一步，符合业务流程逻辑。

---

✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好

---

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

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：2 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/pages/generate/hooks/useStep3Preview.ts: useEffect依赖项] 优化 useEffect 依赖项** - 具体内容：`useEffect` 的依赖项数组中包含了 `previewStatus`。该 Effect 的主要目的是监听输入参数（如模板、素材）的变化来重置预览状态。包含 `previewStatus` 会导致每次预览状态改变（如从 `generating` 变为 `ready`）时都触发 Effect 重新执行，虽然逻辑上有保护机制不会出错，但属于不必要的性能开销。建议移除 `previewStatus`，仅在输入参数变化时执行重置逻辑。 2. **[apps/web/src/pages/generate/hooks/useStepNavigation.ts: 末尾导出] 移除多余的默认导出** - 具体内容：文件末尾添加了 `export default useStepNavigation`。该文件主要使用命名导出 `export const useStepNavigation`。添加默认导出容易造成导入时的混淆（如 `import useStepNavigation from ...` vs `import { useStepNavigation } from ...`），建议保持一致性，移除默认导出。 ### ✅ 良好实践 - **竞态条件处理**：在 `useStep3Preview` 中使用了 `requestIdRef` 来处理异步请求的竞态问题，防止旧请求的结果覆盖新请求的状态，这是处理异步状态更新的最佳实践。 - **状态重置逻辑**：在关键参数（模板、素材等）发生变化时，能够自动重置预览状态，避免了用户在修改参数后看到旧预览数据的问题。 - **导航守卫**：在 `useStepNavigation` 中增加了 `previewReady` 的校验，强制用户必须生成预览后才能进入下一步，符合业务流程逻辑。 --- ✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-07-30 07:57:52 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

xiaoxia added 1 commit 2026-07-30 16:58:33 +08:00

test: 添加Step3预览生成smoke test以修复vitest related匹配 91cb26b4cd

auto-approve-bot merged commit a05cc94fdb into develop 2026-07-30 17:06:12 +08:00

auto-approve-bot deleted branch fix/step3-preview-generation 2026-07-30 17:06:12 +08:00

gitea-actions bot commented 2026-07-30 17:06:23 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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