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

fix: 右侧预览面板 aspect-ratio 动态适配 videoRatio #1304

Merged
auto-approve-bot merged 1 commits from fix/preview-panel-aspect-ratio into develop 2026-08-08 15:41:00 +08:00
Conversation 5 Commits 1 Files Changed 2
+6 -5
xiaoxia commented 2026-08-08 15:35:25 +08:00
Owner
Copy Link
Copy Source

问题

右侧单个预览面板（PreviewVideoPanel）中，.xx-preview-video 的 CSS aspect-ratio 硬编码为 9/16（竖屏），但实际生成的预览视频是 16:9（横屏），导致视频只显示左侧一小块，右侧大片白色空白。

修复

  1. PreviewVideoPanel.tsx：所有 3 个 xx-preview-video 容器（loading / error / success）添加 inline aspectRatio，动态从 videoRatio prop 计算
  2. generate.css：两处硬编码 aspect-ratio: 9/16 改为 16/9 作为 CSS 回退默认值

关联

## 问题 右侧单个预览面板（PreviewVideoPanel）中，`.xx-preview-video` 的 CSS `aspect-ratio` 硬编码为 `9/16`（竖屏），但实际生成的预览视频是 16:9（横屏），导致视频只显示左侧一小块，右侧大片白色空白。 ## 修复 1. **PreviewVideoPanel.tsx**：所有 3 个 `xx-preview-video` 容器（loading / error / success）添加 inline `aspectRatio`，动态从 `videoRatio` prop 计算 2. **generate.css**：两处硬编码 `aspect-ratio: 9/16` 改为 `16/9` 作为 CSS 回退默认值 ## 关联 - Issue #1303 - PR #1302（多预览网格卡片的修复，本次补齐右侧单个面板）
xiaoxia added 1 commit 2026-08-08 15:35:25 +08:00
fix: 右侧预览面板 aspect-ratio 动态适配 videoRatio
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web 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 API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E 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 42s
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 56s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 58s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m20s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 46s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m44s
Details
AI Code Review / AI Code Review (pull_request) Successful in 1m44s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m28s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m19s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m47s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 4m18s
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 6s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 41s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 46s
Details
7493bdd949 
- PreviewVideoPanel 所有 xx-preview-video 容器添加 inline aspectRatio
- generate.css 两处硬编码 9/16 改为 16/9 作为 CSS 回退默认值
- 修复右侧单个预览面板中视频只显示左侧、右侧大片白色空白问题

Closes #1303
gitea-actions bot commented 2026-08-08 15:36:42 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

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

【阻塞级判定】

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

📊 审查概览

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

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

无

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

无

✅ 良好实践

  1. 防御性编程：在 PreviewVideoPanel.tsx 中，使用了 (videoRatio || "16:9") 进行空值合并，确保了在 videoRatio 为空时组件仍能正常渲染，避免了潜在的样式错误。
  2. 样式覆盖逻辑正确：合理利用 React 内联样式（style）优先级高于 CSS 类样式的特性，实现了动态宽高比对静态默认宽高比的覆盖，逻辑清晰有效。
  3. 数据格式转换：通过 .replace(":", "/") 将常见的比例格式（如 "16:9"）转换为 CSS 标准格式（"16/9"），兼容性处理得当。

🤖 由 AI 代码审查机器人自动生成 | 2026-08-08 07:37:10 | 模型:

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：0 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 无 ### ✅ 良好实践 1. **防御性编程**：在 `PreviewVideoPanel.tsx` 中，使用了 `(videoRatio || "16:9")` 进行空值合并，确保了在 `videoRatio` 为空时组件仍能正常渲染，避免了潜在的样式错误。 2. **样式覆盖逻辑正确**：合理利用 React 内联样式（`style`）优先级高于 CSS 类样式的特性，实现了动态宽高比对静态默认宽高比的覆盖，逻辑清晰有效。 3. **数据格式转换**：通过 `.replace(":", "/")` 将常见的比例格式（如 "16:9"）转换为 CSS 标准格式（"16/9"），兼容性处理得当。 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-08-08 07:37:10 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
auto-approve-bot approved these changes 2026-08-08 15:37:44 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

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

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot merged commit 2cb5f10d8e into develop 2026-08-08 15:41:00 +08:00
auto-approve-bot deleted branch fix/preview-panel-aspect-ratio 2026-08-08 15:41:00 +08:00
gitea-actions bot commented 2026-08-08 15:41:41 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

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

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?