iter(g46): 新增 transfer 穿梭框组件

This commit is contained in:
HIsheR
2026-10-26 12:08:24 +08:00
parent a650b6d91e
commit 1fe76e26b5
12 changed files with 398 additions and 10 deletions
+29 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T03:53:26.496Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T04:07:52.893Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -1174,6 +1174,33 @@ result({ status: 'success', title: '提交成功', description: '工单 #2049
现场演示:apps/docs/demo.html#sec-result
### transfer — 穿梭框 Transfer
参数:
- dataSource(必填):TransferItem[] —— 全量条目,左右两栏都按是否在 targetKeys 里派生
- targetKeys:Signal<string[]> —— 右侧集合信号;不传则组件内部维护,传了即外部受控
- titles:[string, string] —— 左右栏标题;缺省「待选列表 / 已选列表」
- searchable:boolean —— 是否显示搜索框;缺省 true,逐栏独立过滤
- height:number —— 列表区固定高度像素;缺省走样式表 220,超出滚动
- onChange:(keys: string[]) => void —— 右侧集合变化回调(搬运后触发,传副本)
示例:
```
transfer({ targetKeys: enabled, titles: ['待选', '已启用'], onChange: (keys) => toast.info(`已启用 ${keys.length} 项`), dataSource: [{ key: 'a11y', label: '无障碍语义' }, { key: 'ssr', label: 'SSR(暂不可用)', disabled: true }] })
```
手把手:
1. dataSource 是唯一数据源,条目归属由 targetKeys 决定;搬运只改 targetKeys,不删条目
2. 两栏独立勾选,勾选后点中间 → / ← 整体搬运,搬完两栏勾选自动清空;无勾选时按钮自动禁用
3. 每栏均有搜索框与全选:全选只覆盖当前搜索结果里未禁用的条目,部分勾选时全选框显示半选
4. disabled 条目不可勾选、不计入全选基数、也不会被搬运
5. 传入 targetKeys 信号即为受控用法,外部写入即可程序化搬运(如「一键全选」)
现场演示:apps/docs/demo.html#sec-transfer
API 速览:
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用;type 缺省 button(表单内不隐式提交)
@@ -1222,6 +1249,7 @@ API 速览:
- upload(props):文件选择,点击或拖拽入列,清单可逐个移除,onChange 回传文件数组(不内置上传请求)
- notification(props):右下角通知卡片(标题 + 描述 + 操作区),返回 { el, close } 句柄,缺省常驻需手动关闭
- result(props):结果页,status 四档语义色 + 标题 + 说明 + 操作区,用于提交完成/校验失败等终态
- transfer(props):穿梭框,左右两栏勾选后整体搬运,targetKeys 信号双向绑定,两栏各自搜索与全选(含半选),禁用条目不参与搬运也不可勾选
一行用法: