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

fix: 预览区改为手机屏尺寸，竖屏短视频 UI 体验优化 #1305

Merged
auto-approve-bot merged 1 commits from fix/preview-phone-like-ui into develop 2026-08-08 15:56:00 +08:00
Conversation 5 Commits 1 Files Changed 2
+24 -2
xiaoxia commented 2026-08-08 15:45:30 +08:00
Owner
Copy Link
Copy Source

问题

生成预览时，左侧预览区域（idle/generating/ready 所有状态）撑满整个左列（1fr），对于 9:16 竖屏短视频来说太大、太宽，不像手机屏幕。用户的视频最终发布在抖音/短视频平台，UI 应该呈现手机屏比例。

修复

  1. 预览网格容器（Step4GeneratePreview.tsx）：根据预览数量动态限制 maxWidth（1张=280px, 2张=572px, 3张=864px），居中显示
  2. CSS 手机屏尺寸约束（generate.css）：
    • .xx-preview-generate-section（idle 生成按钮区）：max-width 320px 居中
    • .xx-preview-loading（排队中状态）：max-width 320px 居中
    • .xx-preview-error（生成失败状态）：max-width 320px 居中
    • .xx-preview-tip（完成提示）：max-width 320px 居中
    • .xx-preview-progress-bar（整体进度条）：max-width 320px 居中

效果

所有预览状态容器均呈现约 320px 宽的手机屏幕比例，贴合短视频发布场景，不再出现大面积横向空白。

## 问题 生成预览时，左侧预览区域（idle/generating/ready 所有状态）撑满整个左列（`1fr`），对于 9:16 竖屏短视频来说太大、太宽，不像手机屏幕。用户的视频最终发布在抖音/短视频平台，UI 应该呈现手机屏比例。 ## 修复 1. **预览网格容器**（`Step4GeneratePreview.tsx`）：根据预览数量动态限制 `maxWidth`（1张=280px, 2张=572px, 3张=864px），居中显示 2. **CSS 手机屏尺寸约束**（`generate.css`）： - `.xx-preview-generate-section`（idle 生成按钮区）：max-width 320px 居中 - `.xx-preview-loading`（排队中状态）：max-width 320px 居中 - `.xx-preview-error`（生成失败状态）：max-width 320px 居中 - `.xx-preview-tip`（完成提示）：max-width 320px 居中 - `.xx-preview-progress-bar`（整体进度条）：max-width 320px 居中 ## 效果 所有预览状态容器均呈现约 320px 宽的手机屏幕比例，贴合短视频发布场景，不再出现大面积横向空白。
xiaoxia added 1 commit 2026-08-08 15:45:31 +08:00
fix: 预览区改为手机屏尺寸，竖屏短视频 UI 体验优化
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 / Check if frontend-only change (pull_request) Successful in 1m4s
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m12s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m19s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
AI Code Review / AI Code Review (pull_request) Successful in 1m39s
Details
CI/CD Pipeline / PR Build Worker Image (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
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 2m1s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m34s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m34s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m58s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m50s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 3m10s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 5m13s
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 / Integration Tests (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 36s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 1m12s
Details
9decb013ab 
- 预览网格容器限制 maxWidth（1张=280px, 2张=572px, 3张=864px）并居中
- idle/loading/error/progress/tip 状态统一限制 max-width: 320px 居中
- 所有预览状态容器呈现手机屏幕比例，贴合抖音/短视频发布场景

Closes #1303
auto-approve-bot commented 2026-08-08 15:47:10 +08:00
Collaborator
Copy Link
Copy Source

【阻塞级判定】

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

📊 审查概览

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

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

无

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

  1. [Step4GeneratePreview.tsx: 142] 避免在JS中硬编码布局尺寸

    • 具体内容：代码中直接计算 maxWidth 时使用了硬编码数值 280（推测为卡片宽度）和 12（间距）。如果后续CSS中卡片宽度调整，这里的JS计算逻辑需要同步修改，容易出现布局错位。建议将此类尺寸常量提取到配置文件或CSS变量中，或者考虑使用CSS Grid的 max-content 或 fit-content 属性配合 margin: 0 auto 来实现自适应居中，从而移除JS中的内联样式计算。

  2. [generate.css] 样式代码重复

    • 具体内容：在 .xx-preview-generate-hint、.xx-preview-loading、.xx-preview-error 等多个类中重复添加了相同的 max-width: 320px; margin: 0 auto; 样式规则。建议提取一个通用类（如 .xx-preview-mobile-container）应用到这些元素上，以减少CSS代码冗余，便于后续统一调整移动端展示策略。

✅ 良好实践

  • 在计算网格列数和宽度前，外层条件已确保 items.length > 0，有效规避了空数组导致的数学计算异常或边界问题。
  • CSS 变更针对移动端/窄屏场景做了适配（限制最大宽度并居中），增强了不同屏幕尺寸下的视觉一致性。

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

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：2 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[Step4GeneratePreview.tsx: 142] 避免在JS中硬编码布局尺寸** - 具体内容：代码中直接计算 `maxWidth` 时使用了硬编码数值 `280`（推测为卡片宽度）和 `12`（间距）。如果后续CSS中卡片宽度调整，这里的JS计算逻辑需要同步修改，容易出现布局错位。建议将此类尺寸常量提取到配置文件或CSS变量中，或者考虑使用CSS Grid的 `max-content` 或 `fit-content` 属性配合 `margin: 0 auto` 来实现自适应居中，从而移除JS中的内联样式计算。 2. **[generate.css] 样式代码重复** - 具体内容：在 `.xx-preview-generate-hint`、`.xx-preview-loading`、`.xx-preview-error` 等多个类中重复添加了相同的 `max-width: 320px; margin: 0 auto;` 样式规则。建议提取一个通用类（如 `.xx-preview-mobile-container`）应用到这些元素上，以减少CSS代码冗余，便于后续统一调整移动端展示策略。 ### ✅ 良好实践 - 在计算网格列数和宽度前，外层条件已确保 `items.length > 0`，有效规避了空数组导致的数学计算异常或边界问题。 - CSS 变更针对移动端/窄屏场景做了适配（限制最大宽度并居中），增强了不同屏幕尺寸下的视觉一致性。 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-08-08 07:47:10 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
gitea-actions bot commented 2026-08-08 15:48:36 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

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

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot merged commit 66024c12b6 into develop 2026-08-08 15:56:00 +08:00
auto-approve-bot deleted branch fix/preview-phone-like-ui 2026-08-08 15:56:01 +08:00
gitea-actions bot commented 2026-08-08 15:56:35 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

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

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?