fix: 预览功能4项优化（数量输入+并发创建+视频播放+填充修复） #1293

Merged

xiaoxia merged 1 commits from fix/preview-improvements into develop 2026-08-08 00:57:53 +08:00

Conversation 4 Commits 1 Files Changed 2

+20 -5

xiaoxia commented 2026-08-08 00:25:42 +08:00

Owner

Copy Link

Copy Source

改动内容

1. 预览数量输入改造（Step4GeneratePreview.tsx）

• 保留 1/2/3 快捷按钮
• 新增 antd InputNumber 数字输入框，支持 1~10 自定义数量
• 后端数量上限校验由后端 PR 负责

2. 前端并发创建预览任务（useStep4Preview.ts）

• 将 for 循环中 await createPreview(...) 串行请求改为 Promise.all 并行创建
• 减少前端串行等待时间，多任务同时提交后端

3. 预览卡片视频播放修复（Step4GeneratePreview.tsx）

• <video> 标签添加 controls autoPlay muted loop 属性
• 用户可以播放/暂停、拖动进度条，静音自动循环播放

4. 预览卡片视频填充修复（Step4GeneratePreview.tsx）

• objectFit: "contain" → objectFit: "cover"
• 视频裁切填充卡片，不再留白

验证

• ✅ TypeScript 类型检查通过
• ✅ ESLint（max-warnings 0）通过
• ✅ Prettier 格式检查通过

## 改动内容 ### 1. 预览数量输入改造（Step4GeneratePreview.tsx） - 保留 1/2/3 快捷按钮 - 新增 antd `InputNumber` 数字输入框，支持 1~10 自定义数量 - 后端数量上限校验由后端 PR 负责 ### 2. 前端并发创建预览任务（useStep4Preview.ts） - 将 `for` 循环中 `await createPreview(...)` 串行请求改为 `Promise.all` 并行创建 - 减少前端串行等待时间，多任务同时提交后端 ### 3. 预览卡片视频播放修复（Step4GeneratePreview.tsx） - `<video>` 标签添加 `controls autoPlay muted loop` 属性 - 用户可以播放/暂停、拖动进度条，静音自动循环播放 ### 4. 预览卡片视频填充修复（Step4GeneratePreview.tsx） - `objectFit: "contain"` → `objectFit: "cover"` - 视频裁切填充卡片，不再留白 ## 验证 - ✅ TypeScript 类型检查通过 - ✅ ESLint（max-warnings 0）通过 - ✅ Prettier 格式检查通过

xiaoxia added 1 commit 2026-08-08 00:25:42 +08:00

fix: 预览功能4项优化 ... bd9623fd20

1. 预览数量输入改造：保留1/2/3快捷按钮，新增InputNumber数字输入框(1~10)
2. 前端并发创建预览任务：for循环串行await改为Promise.all并行请求
3. 预览卡片视频播放修复：添加controls autoPlay muted loop属性
4. 预览卡片视频填充修复：objectFit从contain改为cover，裁切填充不留白

auto-approve-bot commented 2026-08-08 00:29:11 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #1293

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

1. apps/web/src/pages/generate/components/Step4GeneratePreview.tsx 第176-179行：在 <video> 标签中添加了 autoPlay 和 loop 属性。由于该组件支持生成最多 10 个预览（根据 InputNumber 的 max={10}），当用户选择生成多个预览时，页面将同时尝试自动播放并循环多个视频流。这会导致极高的带宽占用和 CPU/GPU 负载，极易造成浏览器卡顿、风扇狂转或标签页崩溃，严重影响用户体验。
2. apps/web/src/pages/generate/components/Step4GeneratePreview.tsx 第182行：将 objectFit 从 contain 修改为 cover。预览功能的核心目的是让用户确认视频内容的完整性和剪辑效果，cover 模式会强制填满容器并裁剪掉视频边缘内容（如字幕、片头片尾或关键画面），导致用户无法完整预览到视频的实际效果，属于逻辑缺陷。

💡 建议（1个可选）

1. apps/web/src/pages/generate/hooks/useStep4Preview.ts 第326-333行：将串行请求（for 循环）改为 Promise.all 并行请求。虽然这能显著减少总等待时间，但在 previewCount 较大（如 10）时，会瞬间向服务器发起 10 个并发请求。如果服务端未做好相应的并发限制或流控，可能导致请求超时、失败率上升或触发服务端限流。建议评估服务端承受能力，或考虑限制并发数（如使用 p-limit 库）。

---

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

---

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

## 代码审查结果 - PR #1293 ### ⚠️ 问题（2个需要修改） 1. **apps/web/src/pages/generate/components/Step4GeneratePreview.tsx 第176-179行**：在 `<video>` 标签中添加了 `autoPlay` 和 `loop` 属性。由于该组件支持生成最多 10 个预览（根据 `InputNumber` 的 `max={10}`），当用户选择生成多个预览时，页面将同时尝试自动播放并循环多个视频流。这会导致极高的带宽占用和 CPU/GPU 负载，极易造成浏览器卡顿、风扇狂转或标签页崩溃，严重影响用户体验。 2. **apps/web/src/pages/generate/components/Step4GeneratePreview.tsx 第182行**：将 `objectFit` 从 `contain` 修改为 `cover`。预览功能的核心目的是让用户确认视频内容的完整性和剪辑效果，`cover` 模式会强制填满容器并裁剪掉视频边缘内容（如字幕、片头片尾或关键画面），导致用户无法完整预览到视频的实际效果，属于逻辑缺陷。 ### 💡 建议（1个可选） 1. **apps/web/src/pages/generate/hooks/useStep4Preview.ts 第326-333行**：将串行请求（`for` 循环）改为 `Promise.all` 并行请求。虽然这能显著减少总等待时间，但在 `previewCount` 较大（如 10）时，会瞬间向服务器发起 10 个并发请求。如果服务端未做好相应的并发限制或流控，可能导致请求超时、失败率上升或触发服务端限流。建议评估服务端承受能力，或考虑限制并发数（如使用 `p-limit` 库）。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-07 16:29:11 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

gitea-actions bot commented 2026-08-08 00:33:15 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

xiaoxia reviewed 2026-08-08 00:56:59 +08:00

xiaoxia left a comment

Author

Owner

Copy Link

Copy Source

CI all green ✅ auto-approve

CI all green ✅ auto-approve

xiaoxia merged commit 052a660ddb into develop 2026-08-08 00:57:53 +08:00

gitea-actions bot commented 2026-08-08 01:00:31 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

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

3 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1293