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

[P0][UI] Modal 组件缺少 centered 属性导致弹窗偏移/裁剪 #1319

New Issue
Closed
opened 2026-08-09 13:47:55 +08:00 by xiaoxia · 1 comment
xiaoxia commented 2026-08-09 13:47:55 +08:00
Owner
Copy Link
Copy Source

问题描述

用户打开弹窗（如AI配音弹窗）时，如果页面已滚动过一定距离，弹窗会向左或向上偏移，导致左侧内容被裁剪、关闭按钮消失。刷新浏览器后恢复正常。

根因分析

apps/web/src/components/ui/Modal.tsx 封装 Ant Design Modal 时未设置 centered 属性。Ant Design Modal 默认使用 top: 100px 定位，当 .xx-app-content 有内部滚动时，打开 Modal 会触发 body 的 overflow: hidden + padding-right 补偿滚动条宽度。由于页面使用嵌套滚动容器，body 的实际滚动状态和 Modal 的 scroll listener 可能产生竞态，导致 Modal wrap 的 left 计算偏移。

影响范围

全局所有使用 Modal 组件的页面

修复方案

在 Modal.tsx 封装组件中默认添加 centered=true

涉及文件

  • apps/web/src/components/ui/Modal.tsx

优先级

P0 - 修复难度低（改1行代码）

## 问题描述 用户打开弹窗（如AI配音弹窗）时，如果页面已滚动过一定距离，弹窗会向左或向上偏移，导致左侧内容被裁剪、关闭按钮消失。刷新浏览器后恢复正常。 ## 根因分析 apps/web/src/components/ui/Modal.tsx 封装 Ant Design Modal 时未设置 centered 属性。Ant Design Modal 默认使用 top: 100px 定位，当 .xx-app-content 有内部滚动时，打开 Modal 会触发 body 的 overflow: hidden + padding-right 补偿滚动条宽度。由于页面使用嵌套滚动容器，body 的实际滚动状态和 Modal 的 scroll listener 可能产生竞态，导致 Modal wrap 的 left 计算偏移。 ## 影响范围 全局所有使用 Modal 组件的页面 ## 修复方案 在 Modal.tsx 封装组件中默认添加 centered=true ## 涉及文件 - apps/web/src/components/ui/Modal.tsx ## 优先级 P0 - 修复难度低（改1行代码）
xiaoxia added the bugfrontendP0 labels 2026-08-09 13:47:55 +08:00
xiaoxia commented 2026-08-09 21:57:33 +08:00
Author
Owner
Copy Link
Copy Source

✅ 代码已核实，修复正确。

Modal.tsx 改动：

  • 解构参数增加 centered = true 默认值
  • 传递给 AntModal: <AntModal centered={centered} ...>
  • 所有使用 Modal 组件的弹窗默认居中，且允许单个弹窗覆盖

PR #1325 已提交，CI 跑完后自动合并。

✅ 代码已核实，修复正确。 **Modal.tsx 改动**： - 解构参数增加 `centered = true` 默认值 - 传递给 AntModal: `<AntModal centered={centered} ...>` - 所有使用 Modal 组件的弹窗默认居中，且允许单个弹窗覆盖 PR #1325 已提交，CI 跑完后自动合并。
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
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 P0 bug frontend
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot xiaoxia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1319
Delete Branch "%!s()"

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?