feat(#1197): Phase1 预览生成前端改造 #1206

Merged

auto-approve-bot merged 7 commits from fix/preview-generation-phase1-1197 into develop 2026-08-01 14:26:00 +08:00

Conversation 5 Commits 7 Files Changed 12

+542 -79

xiaoxia commented 2026-07-31 16:18:28 +08:00

Owner

Copy Link

Copy Source

变更内容

1. API 层新增 generation 模块

• 新建 src/api/generation/ 目录（index.ts / preview.ts / types.ts）
• 类型：PreviewStatus / CreatePreviewRequest / CreatePreviewResponse / PreviewTaskResponse
• 接口：
  • createPreview — POST /generation/preview 创建预览任务
  • getPreviewStatus — GET /generation/preview/{task_id} 查询状态

2. useStep3Preview Hook 重写

• 移除 mock 逻辑，替换为真实后端接口调用
• 状态机：idle → pending（排队中）→ generating（生成中）→ ready / error
• 轮询策略：pending 5s、generating 2s，10 分钟超时
• 参数变化自动作废当前任务（竞态保护）
• 组件卸载自动清理定时器

3. Step3GeneratePreview 组件升级

• 新增视频播放器（completed 状态播放 video_url）
• 新增 pending 排队状态 UI
• generating 状态加进度条
• 失败状态保留重试按钮
• 成功态保留剪辑方案信息卡片

4. 右侧预览常驻

• 新增 PreviewVideoPanel 组件
• Step3 及之后步骤，右侧常驻显示预览视频
• 支持空状态 / 加载中 / 失败 / 成功 四种 UI
• 与正式生成结果面板上下排列

5. 竖屏比例默认值调整

• videoRatio 默认值从 16:9 改为 9:16

6. 测试

• 更新 smoke test，覆盖新增 generation API 和组件

关联 Issue

#1197

依赖

• 后端 /generation/preview 接口（#1197 后端 PR）

## 变更内容 ### 1. API 层新增 generation 模块 - 新建 `src/api/generation/` 目录（index.ts / preview.ts / types.ts） - 类型：`PreviewStatus` / `CreatePreviewRequest` / `CreatePreviewResponse` / `PreviewTaskResponse` - 接口： - `createPreview` — POST `/generation/preview` 创建预览任务 - `getPreviewStatus` — GET `/generation/preview/{task_id}` 查询状态 ### 2. useStep3Preview Hook 重写 - 移除 mock 逻辑，替换为真实后端接口调用 - 状态机：idle → pending（排队中）→ generating（生成中）→ ready / error - 轮询策略：pending 5s、generating 2s，10 分钟超时 - 参数变化自动作废当前任务（竞态保护） - 组件卸载自动清理定时器 ### 3. Step3GeneratePreview 组件升级 - 新增视频播放器（completed 状态播放 video_url） - 新增 pending 排队状态 UI - generating 状态加进度条 - 失败状态保留重试按钮 - 成功态保留剪辑方案信息卡片 ### 4. 右侧预览常驻 - 新增 `PreviewVideoPanel` 组件 - Step3 及之后步骤，右侧常驻显示预览视频 - 支持空状态 / 加载中 / 失败 / 成功 四种 UI - 与正式生成结果面板上下排列 ### 5. 竖屏比例默认值调整 - `videoRatio` 默认值从 `16:9` 改为 `9:16` ### 6. 测试 - 更新 smoke test，覆盖新增 generation API 和组件 ## 关联 Issue #1197 ## 依赖 - 后端 `/generation/preview` 接口（#1197 后端 PR）

gitea-actions bot commented 2026-08-01 01:50:09 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

xiaoxia added 5 commits 2026-08-01 01:56:21 +08:00

feat(#1197): Phase1 预览生成前端改造 - 真实接口对接+竖屏9:16+右侧预览常驻 ... bc84dedeb7

- 新增 /api/generation 层：preview 创建/查询接口 + 类型定义
- useStep3Preview 重写：mock 替换为真实 /generation/preview 接口 + 轮询状态机（pending/generating/completed/failed/cancelled）
- Step3GeneratePreview 组件：加视频播放器 + 进度条 + 排队中/生成中/失败/成功 四态
- 新增 PreviewVideoPanel：右侧预览视频常驻面板（Step3+ 显示）
- videoRatio 默认值从 16:9 改为 9:16（竖屏）
- 生成页右侧布局：预览面板 + 正式结果面板上下排列
- 补 smoke test 覆盖新增模块

style: prettier format generate.css c1df8c0e42

chore: re-trigger CI after runner fix 5217d73fe2

fix: remove unused duration destructuring in Step3GeneratePreview 82b52a1919

fix(ci): vitest related命令语法修复 a1505a9f61

xiaoxia force-pushed fix/preview-generation-phase1-1197 from fc917ab58c to a1505a9f61 2026-08-01 01:56:21 +08:00 Compare

xiaoxia added 1 commit 2026-08-01 02:10:32 +08:00

fix: 将POLL_TIMEOUT_MS移到模块级别，修复exhaustive-deps警告 72daddab1d

auto-approve-bot approved these changes 2026-08-01 02:15:32 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-01 02:15:32 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia added 1 commit 2026-08-01 14:13:52 +08:00

revert(ci): 恢复vitest_incremental.sh，避免触发后端CI检查 ... c671d50626

CI脚本修复将单独提PR处理，本PR仅包含前端代码改动

auto-approve-bot commented 2026-08-01 14:19:27 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #1206

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

1. apps/web/src/pages/generate/hooks/useStep3Preview.ts 第107-120行：竞态条件处理不完整，导致参数变更后旧任务仍能更新状态。

   • 原因：在依赖项变化重置状态的 useEffect 中，仅重置了 currentTaskIdRef 和定时器，但未重置 startTimeRef。
   • 后果：当用户在 createPreview 请求期间修改了参数，useEffect 会触发重置，但由于 startTimeRef 仍保留旧值，generatePreview 函数中的竞态检查 if (startTimeRef.current === 0) 会失效。导致已废弃的旧任务请求返回后，依然会覆盖当前状态并启动轮询，造成 UI 显示与用户当前选择不一致的数据。
   • 修改建议：在重置逻辑中添加 startTimeRef.current = 0;。

2. apps/web/pnpm-workspace.yaml 第2行：配置文件语法/值错误。

   • 原因：esbuild 字段的值为字符串 "set this to true or false"，这通常是占位符注释，而非有效的布尔值或配置对象。
   • 后果：如果构建工具或 pnpm 插件读取此配置并期望布尔值，会导致构建报错或配置解析失败。
   • 修改建议：根据实际需求将其设置为 true 或 false，如果暂不确定，应正确注释掉或设置为默认值。

💡 建议（1个可选）

1. apps/web/src/pages/generate/components/PreviewVideoPanel.tsx 第95行：视频源为空字符串时的防御性渲染。
   • 具体内容：代码中 videoUrl 可能为空字符串（来自 data.video_url ?? ""），直接赋值给 <video src=""> 可能导致浏览器尝试加载当前页面或产生无效请求。建议在渲染 <video> 前判断 previewResult.videoUrl 是否有值。

---

✅ 格式检查通过 | ❌ 逻辑审查需修改 | ✅ 性能良好

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-08-01 06:19:27 | 模型:}

## 代码审查结果 - PR #1206 ### ⚠️ 问题（2个需要修改） 1. **apps/web/src/pages/generate/hooks/useStep3Preview.ts 第107-120行**：竞态条件处理不完整，导致参数变更后旧任务仍能更新状态。 - **原因**：在依赖项变化重置状态的 `useEffect` 中，仅重置了 `currentTaskIdRef` 和定时器，但未重置 `startTimeRef`。 - **后果**：当用户在 `createPreview` 请求期间修改了参数，`useEffect` 会触发重置，但由于 `startTimeRef` 仍保留旧值，`generatePreview` 函数中的竞态检查 `if (startTimeRef.current === 0)` 会失效。导致已废弃的旧任务请求返回后，依然会覆盖当前状态并启动轮询，造成 UI 显示与用户当前选择不一致的数据。 - **修改建议**：在重置逻辑中添加 `startTimeRef.current = 0;`。 2. **apps/web/pnpm-workspace.yaml 第2行**：配置文件语法/值错误。 - **原因**：`esbuild` 字段的值为字符串 `"set this to true or false"`，这通常是占位符注释，而非有效的布尔值或配置对象。 - **后果**：如果构建工具或 pnpm 插件读取此配置并期望布尔值，会导致构建报错或配置解析失败。 - **修改建议**：根据实际需求将其设置为 `true` 或 `false`，如果暂不确定，应正确注释掉或设置为默认值。 ### 💡 建议（1个可选） 1. **apps/web/src/pages/generate/components/PreviewVideoPanel.tsx 第95行**：视频源为空字符串时的防御性渲染。 - **具体内容**：代码中 `videoUrl` 可能为空字符串（来自 `data.video_url ?? ""`），直接赋值给 `<video src="">` 可能导致浏览器尝试加载当前页面或产生无效请求。建议在渲染 `<video>` 前判断 `previewResult.videoUrl` 是否有值。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ✅ 性能良好 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-01 06:19:27 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

auto-approve-bot merged commit ba1120dec5 into develop 2026-08-01 14:26:00 +08:00

auto-approve-bot deleted branch fix/preview-generation-phase1-1197 2026-08-01 14:26:00 +08:00

gitea-actions bot commented 2026-08-01 14:27:05 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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