xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 16 Pull Requests 2 Actions Packages Projects Releases 7 Wiki Activity

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项优化
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 23s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 36s
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
AI Code Review / AI Code Review (pull_request) Successful in 1m54s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m6s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 19s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m44s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 41s
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m31s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 6m51s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 4m4s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 26m42s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 5s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 42s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 2m39s
Details
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` 库）。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-08-07 16:29:11 | 模型: </sub> <!-- 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
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1293
Delete Branch "fix/preview-improvements"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?