底部操作面板需用position:fixed+transform:translateY()实现平滑动画，遮罩与面板应为同级兄弟节点并阻止事件冒泡，iOS键盘弹出时须监听focusin动态锁定滚动并避免vh依赖。
底部操作选择面板（Bottom Action Sheet）在移动端网页中很常见，但原生 HTML 没有 <action-sheet></action-sheet> 这种标签，必须靠 CSS 定位 + JS 控制显隐来实现，且要兼顾触摸响应、滚动穿透、z-index 层级和键盘弹出时的错位问题。
用 position: fixed + transform 实现平滑弹出
不能只靠 display: none/block 切换，那样没有过渡效果，也难控制动画时机。固定定位是基础，但关键在用 transform: translateY() 配合 transition 做位移动画，避免触发重排。
- 面板容器设
position: fixed; bottom: 0; left: 0; right: 0;，高度设为fit-content或明确值（如240px） - 初始状态加
transform: translateY(100%);，隐藏在视口下方 - 激活时改为
transform: translateY(0);，并配transition: transform 0.3s cubic-bezier(0.3, 0, 0.1, 1); - 别忘了加
will-change: transform;提升动画层，尤其在低端 Android 上更稳
点击遮罩层关闭时，如何防止误触底部按钮
遮罩层（backdrop）必须独立于面板内容，否则点击按钮区域可能同时触发关闭和按钮动作。常见错误是把遮罩写成面板的子元素，或没阻止事件冒泡。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 遮罩层和面板内容应为同级兄弟节点，都挂载在
body下（避免父容器 overflow 影响定位） - 遮罩层绑定
click事件后，直接调用close()，不传参也不判断坐标 - 面板内部按钮用
event.stopPropagation()，防止点击穿透到遮罩 - 慎用
pointer-events: none在遮罩上——它会让 iOS Safari 无法触发click，改用opacity: 0+pointer-events: auto更可靠
iOS 键盘弹出导致面板上移或错位怎么办
iOS Safari 在软键盘展开时会缩放视口、重算 vh、甚至把 fixed 元素“推”上去，这是最棘手的兼容点。
立即学习“前端免费学习笔记（深入）”；
- 避免用
height: 100vh或bottom: env(safe-area-inset-bottom)直接参与面板定位计算 - 监听
focusin事件，在 input 获焦时临时给body加style="position: fixed; top: -${window.scrollY}px"锁定滚动，失焦后再恢复 - 面板自身高度尽量用
max-height+overflow-y: auto，而不是撑满整个可用区域 - 测试时务必真机连 Safari 开发者工具，模拟器常表现正常但真机会出问题
真正难的不是让面板“弹出来”，而是它在各种输入场景下不跳、不卡、不遮不住、不点串——尤其是 iOS 键盘 + 滚动锁定 + 安全区适配这三者叠加时，任意一个参数写死都可能崩掉整块交互逻辑。
