iter(g167): 弹窗支持内置页脚与异步确认

This commit is contained in:
HIsheR
2026-10-26 16:14:19 +08:00
parent b6a6827f9b
commit ff9442904b
7 changed files with 78 additions and 17 deletions
+6 -2
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T08:12:34.257Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T08:13:59.371Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -879,7 +879,10 @@ const page = signal(1); pagination({ page, pageSize: 3, total: 24, onChange: (p)
- open(必填):Signal<boolean> —— 开关信号:true 显示 / false 隐藏
- title(必填):string —— 标题
- size(默认 md):'sm' | 'md' | 'lg' —— 宽度档位:sm 340px / md 420px / lg 640px;缺省 md
- footer:unknown —— 底部操作区内容(常见为按钮组,右对齐);缺省不渲染
- footer:unknown —— 底部操作区内容(常见为按钮组,右对齐);缺省不渲染;给了它就用自定义页脚,内置按钮组不再渲染
- confirmText:string —— 内置页脚:确认按钮文案;缺省「确定」(不传 footer 且有 onConfirm 时也渲染内置页脚)
- cancelText:string —— 内置页脚:取消按钮文案;缺省「取消」,点击走 close 流程
- onConfirm(回调):() => void | Promise<void> —— 内置页脚:确认回调;返回 Promise 时按钮变「处理中…」并禁用,成功自动收窗、失败留在窗口重试
- closeOnOverlay:boolean —— 点遮罩是否关闭弹窗;缺省 true,表单类可传 false 防误关(× 与 Esc 仍可用)
- onClose(回调):() => void —— 关闭回调(点遮罩、× 或 Esc 触发)
- ...children:unknown[] —— 弹窗内容子节点
@@ -898,6 +901,7 @@ const open = signal(false); modal({ title: '确认操作', open, onClose: () =>
4. 入场自带遮罩淡入 + 弹窗上浮动画
5. 底部操作按钮放进 footer(如取消/确定),需要更宽内容用 size: 'lg',窄确认框用 'sm'
6. 打开后 Tab 焦点锁在弹窗内,关闭自动把焦点还给打开前的元素
7. 普通确认框不必手拼 footer:传 confirmText / onConfirm 即得「取消 + 确认」按钮组;onConfirm 写成 async,组件会在等待期间把按钮置灰改文案,resolve 后自己收窗、reject 时保持打开供重试
现场演示:apps/docs/demo.html#sec-tabs-modal