fix: 预览请求补传 output_width/output_height，匹配 video_ratio #1488

Merged

xiaoxia merged 1 commits from fix/preview-resolution into develop 2026-08-25 09:10:52 +08:00

Conversation 5 Commits 1 Files Changed 4

+62 -31

xiaoxia commented 2026-08-25 09:03:48 +08:00

Owner

Copy Link

Copy Source

问题

调用 POST /generation/preview 时没有传 output_width/output_height，导致预览视频一律以默认 1280×720 横屏渲染，与用户选择的 9:16 竖屏不符，画面两侧出现黑边。

改动

1. 新增 calculateResolution 共享工具函数

   • 从 useGenerateVideo 中提取分辨率计算逻辑为独立工具函数
   • 预览 API 和确认生成共用同一份计算，保持一致
   • 9:16 → 1080×1920，16:9 → 1920×1080，1:1 → 1920×1920

2. CreatePreviewRequest 类型新增 output_width/output_height

3. buildPreviewRequest 传入计算后的分辨率

   • 预览请求体包含 output_width: 1080, output_height: 1920（9:16 时）

4. useGenerateVideo 改用共享函数

   • 删除 30+ 行重复的内联计算代码

验收标准

• 预览 API 返回的分辨率与视频比例匹配（9:16→1080×1920）
• 预览视频画面填满容器，无黑边
• 确认生成走 confirm 路径时分辨率与预览一致

## 问题 调用 POST /generation/preview 时没有传 output_width/output_height，导致预览视频一律以默认 1280×720 横屏渲染，与用户选择的 9:16 竖屏不符，画面两侧出现黑边。 ## 改动 1. **新增 `calculateResolution` 共享工具函数** - 从 useGenerateVideo 中提取分辨率计算逻辑为独立工具函数 - 预览 API 和确认生成共用同一份计算，保持一致 - 9:16 → 1080×1920，16:9 → 1920×1080，1:1 → 1920×1920 2. **CreatePreviewRequest 类型新增 output_width/output_height** 3. **buildPreviewRequest 传入计算后的分辨率** - 预览请求体包含 `output_width: 1080, output_height: 1920`（9:16 时） 4. **useGenerateVideo 改用共享函数** - 删除 30+ 行重复的内联计算代码 ## 验收标准 - 预览 API 返回的分辨率与视频比例匹配（9:16→1080×1920） - 预览视频画面填满容器，无黑边 - 确认生成走 confirm 路径时分辨率与预览一致

xiaoxia added 1 commit 2026-08-25 09:03:48 +08:00

fix: 预览请求补传 output_width/output_height，匹配 video_ratio ... ebb664668b

- 新增 calculateResolution 共享工具函数，预览和生成共用同一份分辨率计算
- CreatePreviewRequest 类型新增 output_width/output_height 字段
- buildPreviewRequest 传入计算后的分辨率（9:16 → 1080×1920）
- useGenerateVideo 改用共享函数，去除重复的内联计算

auto-approve-bot commented 2026-08-25 09:05:44 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

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

📊 审查概览

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

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

无

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

1. [apps/web/src/pages/generate/hooks/useGenerateVideo.ts: 64-67] 冗余计算

   • 具体内容：GeneratePage 中已经通过 useMemo 计算了 resolution 并通过 props 传入 useGenerateVideo，但在 useGenerateVideo 内部又重新调用了一次 calculateResolution。这导致了重复计算，且如果未来 GeneratePage 的计算逻辑变更（例如增加了额外的偏移量），useGenerateVideo 中的逻辑将不一致。
   • 建议：直接使用 props.resolution，移除 Hook 内部的 calculateResolution 调用。如果 resolution 未在 UseGenerateVideoProps 类型定义中，请一并添加。

2. [apps/web/src/pages/generate/utils/calculateResolution.ts: 1-10] 注释与逻辑不符

   • 具体内容：文件顶部的注释说明“规则：- 长边固定 1920”，但这仅适用于 ratio 包含 : 的情况（如 9:16）。对于包含 x 的情况（如 1080x1920），代码直接返回解析后的数值，并未强制长边为 1920。
   • 建议：更新注释，明确说明 x 格式（如 1080x1920）将直接使用输入的像素值，不进行归一化处理；或者确认代码逻辑是否需要统一强制 1920 长边。

✅ 良好实践

• 提取公共逻辑：将分辨率计算逻辑从 Hook 中提取到独立的工具函数 calculateResolution，提高了代码的可复用性和可测试性。
• 偶数对齐处理：calculateResolution 中包含 baseShort - (baseShort % 2) 逻辑，确保视频分辨率为偶数，符合视频编码标准（如 H.264 通常要求宽高为偶数），这是一个很好的细节处理。
• 防御性编程：在 calculateResolution 中对空值、非法字符串格式进行了兜底处理，返回默认分辨率，增强了代码的健壮性。

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-08-25 01:05:44 | 模型:}

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：有建议 - 建议级问题数量：2 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/pages/generate/hooks/useGenerateVideo.ts: 64-67] 冗余计算** - 具体内容：`GeneratePage` 中已经通过 `useMemo` 计算了 `resolution` 并通过 props 传入 `useGenerateVideo`，但在 `useGenerateVideo` 内部又重新调用了一次 `calculateResolution`。这导致了重复计算，且如果未来 `GeneratePage` 的计算逻辑变更（例如增加了额外的偏移量），`useGenerateVideo` 中的逻辑将不一致。 - 建议：直接使用 `props.resolution`，移除 Hook 内部的 `calculateResolution` 调用。如果 `resolution` 未在 `UseGenerateVideoProps` 类型定义中，请一并添加。 2. **[apps/web/src/pages/generate/utils/calculateResolution.ts: 1-10] 注释与逻辑不符** - 具体内容：文件顶部的注释说明“规则：- 长边固定 1920”，但这仅适用于 `ratio` 包含 `:` 的情况（如 9:16）。对于包含 `x` 的情况（如 1080x1920），代码直接返回解析后的数值，并未强制长边为 1920。 - 建议：更新注释，明确说明 `x` 格式（如 1080x1920）将直接使用输入的像素值，不进行归一化处理；或者确认代码逻辑是否需要统一强制 1920 长边。 ### ✅ 良好实践 - **提取公共逻辑**：将分辨率计算逻辑从 Hook 中提取到独立的工具函数 `calculateResolution`，提高了代码的可复用性和可测试性。 - **偶数对齐处理**：`calculateResolution` 中包含 `baseShort - (baseShort % 2)` 逻辑，确保视频分辨率为偶数，符合视频编码标准（如 H.264 通常要求宽高为偶数），这是一个很好的细节处理。 - **防御性编程**：在 `calculateResolution` 中对空值、非法字符串格式进行了兜底处理，返回默认分辨率，增强了代码的健壮性。 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-25 01:05:44 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

gitea-actions bot commented 2026-08-25 09:06:47 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot approved these changes 2026-08-25 09:10:31 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-25 09:10:31 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia merged commit 5b2d5901f0 into develop 2026-08-25 09:10:52 +08:00

gitea-actions bot commented 2026-08-25 09:12:22 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1488