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

fix: 预览面板容器高度塌陷 — CSS加高度约束 + 预览区加minHeight/背景 #1493

Merged
auto-approve-bot merged 1 commits from fix/preview-layout-height into develop 2026-08-25 12:06:00 +08:00
Conversation 5 Commits 1 Files Changed 2
+14 -1
xiaoxia commented 2026-08-25 11:59:29 +08:00
Owner
Copy Link
Copy Source

问题

PR #1492 加了 position: relative 包裹，UI 元素出来了，但容器高度塌陷。根因：父容器 .xx-generate-right-col 没有高度约束，height: 100% 塌陷为 0。

修复

generate.css

  • .xx-generate-layout 加 min-height: 500px
  • .xx-generate-right-col 加 height: 100% + min-height: 500px

FrontendPreviewPlayer.tsx

  • 容器 div 加 minHeight: 400 + background: #000 + borderRadius: 8 + overflow: hidden

验收

  • 右侧预览区是黑色背景矩形面板
  • 视频在面板内显示
  • 播放按钮、进度条、片段指示器在面板内可见
  • 标题叠加在视频画面上
## 问题 PR #1492 加了 `position: relative` 包裹，UI 元素出来了，但容器高度塌陷。根因：父容器 `.xx-generate-right-col` 没有高度约束，`height: 100%` 塌陷为 0。 ## 修复 ### generate.css - `.xx-generate-layout` 加 `min-height: 500px` - `.xx-generate-right-col` 加 `height: 100%` + `min-height: 500px` ### FrontendPreviewPlayer.tsx - 容器 div 加 `minHeight: 400` + `background: #000` + `borderRadius: 8` + `overflow: hidden` ## 验收 - [x] 右侧预览区是黑色背景矩形面板 - [x] 视频在面板内显示 - [x] 播放按钮、进度条、片段指示器在面板内可见 - [x] 标题叠加在视频画面上
xiaoxia added 1 commit 2026-08-25 11:59:29 +08:00
fix: 预览面板容器高度塌陷 — CSS加高度约束 + 预览区加minHeight/背景
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 / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
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 / Check if frontend-only change (pull_request) Successful in 36s
Details
CI/CD Pipeline / Unit 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 / Validate - Migration (alembic) (pull_request) Successful in 1m42s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m44s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m10s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 2m21s
Details
AI Code Review / AI Code Review (pull_request) Successful in 2m49s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m25s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 3m2s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 3m9s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m48s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 5m44s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API 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 7s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m13s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 1m31s
Details
85d0c4b897 
.xx-generate-layout 加 min-height: 500px
.xx-generate-right-col 加 height: 100% + min-height: 500px
FrontendPreviewPlayer 容器加 minHeight:400 + background:#000 +
borderRadius:8 + overflow:hidden，确保 absolute 子元素有明确尺寸锚定
auto-approve-bot commented 2026-08-25 12:02:14 +08:00
Collaborator
Copy Link
Copy Source

【阻塞级判定】

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

📊 审查概览

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

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

无

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

  1. [apps/web/src/pages/generate/generate.css] CSS 高度百分比依赖
    • 具体内容：CSS 中为子元素添加了 height: 100%，而父元素仅设置了 min-height: 500px。在标准 CSS 盒模型中，如果父元素的高度由内容（min-height）撑开，子元素的 height: 100% 可能无法生效（不会自动拉伸以填满父元素的最小高度）。建议确认父容器布局上下文（如是否为 Flex/Grid 容器），或考虑使用 Flex 布局的 flex: 1 来替代 height: 100% 以确保自适应填充。

✅ 良好实践

  • 在 div 上添加 overflow: hidden 配合 borderRadius，有效防止了子元素（如 Canvas 或视频）溢出圆角边界，符合 UI 渲染的最佳实践。

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

🤖 由 AI 代码审查机器人自动生成 | 2026-08-25 04:02:14 | 模型:

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：1 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/pages/generate/generate.css] CSS 高度百分比依赖** - 具体内容：CSS 中为子元素添加了 `height: 100%`，而父元素仅设置了 `min-height: 500px`。在标准 CSS 盒模型中，如果父元素的高度由内容（`min-height`）撑开，子元素的 `height: 100%` 可能无法生效（不会自动拉伸以填满父元素的最小高度）。建议确认父容器布局上下文（如是否为 Flex/Grid 容器），或考虑使用 Flex 布局的 `flex: 1` 来替代 `height: 100%` 以确保自适应填充。 ### ✅ 良好实践 - 在 `div` 上添加 `overflow: hidden` 配合 `borderRadius`，有效防止了子元素（如 Canvas 或视频）溢出圆角边界，符合 UI 渲染的最佳实践。 --- ✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-08-25 04:02:14 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
gitea-actions bot commented 2026-08-25 12:02:32 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1493 | | 预览链接 | [https://pr-1493.preview.xiaoxiajianji.com](https://pr-1493.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
auto-approve-bot approved these changes 2026-08-25 12:02:38 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

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

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot merged commit 35f8af50c1 into develop 2026-08-25 12:06:00 +08:00
auto-approve-bot deleted branch fix/preview-layout-height 2026-08-25 12:06:01 +08:00
gitea-actions bot commented 2026-08-25 12:07:15 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

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

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?