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

fix: Step5 单视频全宽布局+视频播放器居中 #1761

Merged
xiaoxia merged 1 commits from fix/1761-step5-single-video-fullwidth into develop 2026-09-07 19:51:51 +08:00
Conversation 4 Commits 1 Files Changed 1
+57 -3
xiaoxia commented 2026-09-07 19:42:54 +08:00
Owner
Copy Link
Copy Source

问题

单视频 Step 5 使用两栏布局 (1fr 320px)，视频被挤在右侧 320px 窄列，既小又不居中。

根因

layoutClassName 对 Step 5 单视频未加 full-width，导致走了 grid-template-columns: 1fr 320px 两栏布局。

修复

  • layoutClassName 新增 if (currentStep === 5) return "xx-generate-layout full-width"，Step 5 始终全宽
  • 视频播放器从 xx-generate-right-col 移入 xx-generate-form 内部，居中显示（maxWidth: 320px）
  • 右侧 xx-generate-right-col 播放器仅在 Step 6 显示
  • Step 6 封面选择保持两栏布局不变

验收

  • 单视频 Step 5：视频卡片居中，宽度≤320px，左右留白对称
  • 多视频 Step 5：BatchGenerationGrid 网格居中（已修复）
  • Step 6 封面选择：两栏布局不变

改动文件

  • apps/web/src/pages/generate/GeneratePage.tsx
## 问题 单视频 Step 5 使用两栏布局 (1fr 320px)，视频被挤在右侧 320px 窄列，既小又不居中。 ## 根因 `layoutClassName` 对 Step 5 单视频未加 `full-width`，导致走了 `grid-template-columns: 1fr 320px` 两栏布局。 ## 修复 - `layoutClassName` 新增 `if (currentStep === 5) return "xx-generate-layout full-width"`，Step 5 始终全宽 - 视频播放器从 `xx-generate-right-col` 移入 `xx-generate-form` 内部，居中显示（`maxWidth: 320px`） - 右侧 `xx-generate-right-col` 播放器仅在 Step 6 显示 - Step 6 封面选择保持两栏布局不变 ## 验收 - 单视频 Step 5：视频卡片居中，宽度≤320px，左右留白对称 - 多视频 Step 5：BatchGenerationGrid 网格居中（已修复） - Step 6 封面选择：两栏布局不变 ## 改动文件 - `apps/web/src/pages/generate/GeneratePage.tsx`
xiaoxia added 1 commit 2026-09-07 19:42:55 +08:00
fix: Step5 单视频全宽布局+视频播放器居中 (#1761)
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
Details
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 1s
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 2s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
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
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging 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 / PR Build Web Image (pull_request) Successful in 1m46s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m49s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m1s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m5s
Details
CI/CD Pipeline / Validate - Style (pull_request) Successful in 2m24s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m34s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 2m54s
Details
AI Code Review / AI Code Review (pull_request) Successful in 6m55s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 6m57s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 10s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 56s
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Failing after 11m21s
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Failing after 11m30s
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Failing after 11m34s
Details
CI/CD Pipeline / Validate - Security (pull_request) Successful in 15m31s
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 / CI Gate (pull_request) Successful in 2s
Details
CI/CD Pipeline / Build Production API Image (pull_request) Failing after 11m9s
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
53c92887a0 
问题：单视频 Step 5 使用两栏布局(1fr 320px)，视频被挤在右侧 320px 窄列
根因：layoutClassName 对 Step 5 单视频未加 full-width

修复：
- Step 5 始终使用 full-width 布局（不再走两栏）
- 视频播放器移入 xx-generate-form 内部，居中显示（maxWidth: 320px）
- 右侧 xx-generate-right-col 播放器仅在 Step 6 显示
- Step 6 封面选择保持两栏布局不变

验收：单视频 Step 5 视频卡片居中，宽度≤320px，左右留白对称
auto-approve-bot approved these changes 2026-09-07 19:45:02 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-09-07 19:45:02 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
gitea-actions bot commented 2026-09-07 19:45:28 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1761 | | 预览链接 | [https://pr-1761.preview.xiaoxiajianji.com](https://pr-1761.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
xiaoxia merged commit 62820391c3 into develop 2026-09-07 19:51:51 +08:00
gitea-actions bot commented 2026-09-07 19:53:14 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

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

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1761
Delete Branch "fix/1761-step5-single-video-fullwidth"

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?