fix: 预览卡片比例动态适配 videoRatio，修复16:9视频右侧白框 #1302

Merged

auto-approve-bot merged 1 commits from fix/preview-card-aspect-ratio into develop 2026-08-08 14:31:00 +08:00

Conversation 5 Commits 1 Files Changed 1

+3 -3

xiaoxia commented 2026-08-08 14:25:37 +08:00

Owner

Copy Link

Copy Source

问题

Step4 多预览网格中，卡片 aspectRatio 硬编码为 9/16（竖屏），但实际生成的预览视频是 16:9（横屏）。容器比例不匹配导致视频右侧出现大片白色空白区域。

修复

• Step4GeneratePreview.tsx：卡片 aspectRatio 从硬编码 "9/16" 改为根据 videoRatio prop 动态计算（"9:16" → "9/16"，"16:9" → "16/9"）
• 移除 maxHeight: 180 限制，让视频完整显示
• 默认值 16:9 匹配实际生成的预览视频比例

影响范围

• 仅影响 Step4 多预览网格的卡片布局
• 右侧单个预览面板（PreviewVideoPanel）的 CSS aspect-ratio 问题后续单独处理

## 问题 Step4 多预览网格中，卡片 aspectRatio 硬编码为 9/16（竖屏），但实际生成的预览视频是 16:9（横屏）。容器比例不匹配导致视频右侧出现大片白色空白区域。 ## 修复 - `Step4GeneratePreview.tsx`：卡片 aspectRatio 从硬编码 `"9/16"` 改为根据 `videoRatio` prop 动态计算（`"9:16"` → `"9/16"`，`"16:9"` → `"16/9"`） - 移除 `maxHeight: 180` 限制，让视频完整显示 - 默认值 `16:9` 匹配实际生成的预览视频比例 ## 影响范围 - 仅影响 Step4 多预览网格的卡片布局 - 右侧单个预览面板（PreviewVideoPanel）的 CSS aspect-ratio 问题后续单独处理

xiaoxia added 1 commit 2026-08-08 14:25:38 +08:00

fix: 预览卡片比例动态适配 videoRatio，修复 16:9 视频右侧白框问题 ... 77288cdc9d

- Step4GeneratePreview 卡片 aspectRatio 从硬编码 '9/16' 改为根据 videoRatio prop 动态计算
- 移除 maxHeight: 180 限制，让视频完整显示
- 默认值 16:9 匹配实际生成的预览视频比例

auto-approve-bot commented 2026-08-08 14:27:23 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

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

📊 审查概览

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

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

无

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

1. [Step4GeneratePreview.tsx: 165] 布局高度溢出风险
   • 具体内容：代码移除了 maxHeight: 180 的样式限制。虽然这解决了硬编码宽高比导致的变形问题，但在父容器宽度较大时，高宽高比（如 9:16）的预览图可能会变得过高，导致 UI 溢出或布局错乱。建议确认父容器是否存在宽度约束，或考虑为 aspectRatio 容器添加 maxHeight 或 object-fit 相关样式以保持界面整洁。

✅ 良好实践

1. 默认值处理：使用 (videoRatio || "16:9") 提供了合理的默认值，防止了空值导致的样式错误。
2. 格式转换逻辑：使用 .replace(":", "/") 将常见的宽高比格式转换为 CSS 标准格式，逻辑简洁有效。
3. 消除未使用变量：移除了 _videoRatio 下划线前缀，正确启用了传入的 videoRatio 属性。

---

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

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-08-08 06:27:23 | 模型:}

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：有建议 - 建议级问题数量：1 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[Step4GeneratePreview.tsx: 165] 布局高度溢出风险** - 具体内容：代码移除了 `maxHeight: 180` 的样式限制。虽然这解决了硬编码宽高比导致的变形问题，但在父容器宽度较大时，高宽高比（如 9:16）的预览图可能会变得过高，导致 UI 溢出或布局错乱。建议确认父容器是否存在宽度约束，或考虑为 `aspectRatio` 容器添加 `maxHeight` 或 `object-fit` 相关样式以保持界面整洁。 ### ✅ 良好实践 1. **默认值处理**：使用 `(videoRatio || "16:9")` 提供了合理的默认值，防止了空值导致的样式错误。 2. **格式转换逻辑**：使用 `.replace(":", "/")` 将常见的宽高比格式转换为 CSS 标准格式，逻辑简洁有效。 3. **消除未使用变量**：移除了 `_videoRatio` 下划线前缀，正确启用了传入的 `videoRatio` 属性。 --- ✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-08 06:27:23 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

gitea-actions bot commented 2026-08-08 14:27:27 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot approved these changes 2026-08-08 14:27:31 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-08 14:27:32 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot merged commit ec8d1786ac into develop 2026-08-08 14:31:00 +08:00

auto-approve-bot deleted branch fix/preview-card-aspect-ratio 2026-08-08 14:31:00 +08:00

gitea-actions bot commented 2026-08-08 14:31:57 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

xiaoxia referenced this pull request 2026-08-10 01:24:10 +08:00

预览视频卡片右侧出现大片白色空白区域 #1303

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

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1302