iter(g27): 抽出弹层 Esc 栈,多弹层只关最上层

This commit is contained in:
HIsheR
2026-10-26 11:37:45 +08:00
parent c6ce184aeb
commit d80e132a45
7 changed files with 67 additions and 20 deletions
+4 -3
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T03:34:43.829Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T03:37:32.721Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -797,9 +797,10 @@ const open = signal(false); modal({ title: '确认操作', open, onClose: () =>
1. 创建布尔信号 open = signal(false),弹窗初始隐藏
2. 把 open 传给 modal,其余参数为弹窗内容子节点
3. 打开:open(true);关闭:open(false),点遮罩或 × 会自动写回 false
3. 打开:open(true);关闭:open(false),点遮罩、× 或 Esc 会自动写回 false;多弹层叠加时 Esc 只关最上层(后开先关)
4. 入场自带遮罩淡入 + 弹窗上浮动画
5. 底部操作按钮放进 footer(如取消/确定),需要更宽内容用 size: 'lg',窄确认框用 'sm'
6. 打开后 Tab 焦点锁在弹窗内,关闭自动把焦点还给打开前的元素
现场演示:apps/docs/demo.html#sec-tabs-modal
@@ -825,7 +826,7 @@ const open = signal(false); drawer({ title: '详情', open, width: 360, onClose:
1. 创建布尔信号 open = signal(false),传给 drawer;其余参数为面板内容子节点
2. 打开后从侧边滑出:placement: 'right'(默认)或 'left',width 控制宽度(窄屏自动收到 92vw)
3. 点遮罩、× 或按 Esc 关闭并写回 false;打开时焦点落在面板首个可交互元素
3. 点遮罩、× 或按 Esc 关闭并写回 false;打开时焦点落在面板首个可交互元素,Esc 只关最上层弹层
4. 底部操作按钮放进 footer;与 modal 的分工:modal 是强打断的确认,drawer 保留主视图上下文做详情/编辑
5. 面板内容与 modal 一样接受任意 DOM 与响应式函数