fix: FrontendPreviewPlayer 用 relative 容器包裹 Fragment，修复绝对定位失控 #1492

Merged

auto-approve-bot merged 1 commits from fix/absolute-position-container into develop 2026-08-25 11:41:55 +08:00

Conversation 5 Commits 1 Files Changed 1

+2 -2

xiaoxia commented 2026-08-25 11:29:58 +08:00

Owner

Copy Link

Copy Source

问题

FrontendPreviewPlayer 的 return 最外层是 Fragment（<>），没有 position: relative 锚点。内部所有元素（video、播放按钮、进度条、标题叠加）都是 position: absolute，没有 relative 父容器锚定，导致它们相对视口定位，布局溢出。

修复

将 Fragment 替换为 position: relative + width: 100% + height: 100% 的 div，作为所有 absolute 子元素的定位容器。

改动文件

• apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx

验收

• TypeScript 检查通过
• 预览面板内所有元素正确定位

## 问题 FrontendPreviewPlayer 的 return 最外层是 Fragment（`<>`），没有 `position: relative` 锚点。内部所有元素（video、播放按钮、进度条、标题叠加）都是 `position: absolute`，没有 relative 父容器锚定，导致它们相对视口定位，布局溢出。 ## 修复 将 Fragment 替换为 `position: relative` + `width: 100%` + `height: 100%` 的 div，作为所有 absolute 子元素的定位容器。 ## 改动文件 - `apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx` ## 验收 - [x] TypeScript 检查通过 - [x] 预览面板内所有元素正确定位

xiaoxia added 1 commit 2026-08-25 11:29:58 +08:00

fix: FrontendPreviewPlayer 用 relative 容器包裹 Fragment，修复绝对定位失控 ... e5573a4330

return 最外层是 Fragment（<>），没有 position: relative 锚点，
导致内部所有 absolute 元素相对视口定位，预览面板布局溢出。
改为 position:relative + 100%x100% 的 div 包裹。

auto-approve-bot commented 2026-08-25 11:31:30 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

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

📊 审查概览

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

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

无

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

无

✅ 良好实践

• [FrontendPreviewPlayer.tsx] 建立定位上下文：将 React Fragment (<>) 替换为具有 position: relative 的 <div> 是正确的做法。对于包含 Canvas 或覆盖层的视频播放器组件，这确保了内部绝对定位的元素（如控制条、加载动画等）相对于播放器容器进行定位，避免了定位错乱或溢出到父容器之外的风险。

---

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

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：0 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 无 ### ✅ 良好实践 - **[FrontendPreviewPlayer.tsx] 建立定位上下文**：将 React Fragment (`<>`) 替换为具有 `position: relative` 的 `<div>` 是正确的做法。对于包含 Canvas 或覆盖层的视频播放器组件，这确保了内部绝对定位的元素（如控制条、加载动画等）相对于播放器容器进行定位，避免了定位错乱或溢出到父容器之外的风险。 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-25 03:31:30 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

gitea-actions bot commented 2026-08-25 11:32:16 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot approved these changes 2026-08-25 11:33:04 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-25 11:33:04 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia referenced this issue from a commit 2026-08-25 11:38:03 +08:00

fix: FrontendPreviewPlayer 用 relative 容器包裹 Fragment，修复绝对定位失控 (#1492)

auto-approve-bot merged commit 3e876fc054 into develop 2026-08-25 11:41:55 +08:00

auto-approve-bot deleted branch fix/absolute-position-container 2026-08-25 11:41:55 +08:00

gitea-actions bot commented 2026-08-25 11:43:15 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

xiaoxia referenced this pull request 2026-08-25 11:59:29 +08:00

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

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#1492