iter: d14 新增抽屉 drawer 组件

llms-full.txt

@@ -1,6 +1,6 @@
 # @ui-arch 组件库 Agent 文档（无图形版）
 
-> 自动生成于 2026-10-23T08:55:54.330Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
+> 自动生成于 2026-10-23T08:56:29.143Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
 
 ## 快速上手
@@ -40,7 +40,7 @@
 
 ## @ui-arch/ui（skin-dom）v0.1.0
 
-26 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。
+27 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。
 
 ### button — 按钮 Button
 
@@ -615,6 +615,34 @@ const open = signal(false); modal({ title: '确认操作', open, onClose: () =>
 
 现场演示：apps/docs/demo.html#sec-tabs-modal
 
+### drawer — 抽屉 Drawer
+
+参数：
+
+- title（必填）：string —— 标题
+- open（必填）：Signal<boolean> —— 开关信号：true 滑出 / false 收起
+- placement（默认 right）：'left' | 'right' —— 滑出方向；缺省 right
+- width（默认 320）：number —— 面板宽度像素（窄屏最多 92vw）；缺省 320
+- footer：unknown —— 底部操作区内容；缺省不渲染
+- onClose（回调）：() => void —— 关闭回调（点遮罩 / × / Esc 触发）
+- ...children：unknown[] —— 面板内容子节点
+
+示例：
+
+```
+const open = signal(false); drawer({ title: '详情', open, width: 360, onClose: () => open(false) }, h('p', null, '内容'))
+```
+
+手把手：
+
+1. 创建布尔信号 open = signal(false)，传给 drawer；其余参数为面板内容子节点
+2. 打开后从侧边滑出：placement: 'right'（默认）或 'left'，width 控制宽度（窄屏自动收到 92vw）
+3. 点遮罩、× 或按 Esc 关闭并写回 false；打开时焦点落在面板首个可交互元素
+4. 底部操作按钮放进 footer；与 modal 的分工：modal 是强打断的确认，drawer 保留主视图上下文做详情/编辑
+5. 面板内容与 modal 一样接受任意 DOM 与响应式函数
+
+现场演示：apps/docs/demo.html#sec-drawer
+
 ### form — 表单 Form / 表单字段 FormItem
 
 参数：
@@ -704,6 +732,7 @@ API 速览：
 - progress(props)：进度条，轨道 + 渐变流动填充，value 信号驱动 0-100，满格切 success 色
 - tabs(props)：标签页，active 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签
 - modal(props, ...children)：弹窗，open 信号驱动显隐，Esc / 遮罩 / × 关闭，size 三档宽度，footer 提供底部操作区
+- drawer(props, ...children)：抽屉，open 信号驱动侧滑面板，placement 左右可配、width 可调、footer 操作区，遮罩 / × / Esc 关闭
 - form(props, items)：表单容器，布局 + 聚合校验，全部通过才触发 onSubmit
 - formItem(props, control)：表单字段，label + 必填红星 + 规则校验 + 错误区，返回 { el, validate } 句柄
 - dataTable(props)：数据表格，粘性表头 / 行选择（全选三态）/ 排序 / 筛选 / 分页 / 空状态；loading 为真时数据行换骨架行且筛选/翻页禁用，内核为 table-core