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
+49 -2
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T03:53:26.496Z",
"generatedAt": "2026-10-26T04:07:52.893Z",
"repoRoot": ".",
"packages": [
{
@@ -187,7 +187,8 @@
"tree(props):树形,递归节点 + 箭头展开/收起 + 点选节点,键盘 Enter 选中、→ 展开、← 收起,禁用节点不响应",
"upload(props):文件选择,点击或拖拽入列,清单可逐个移除,onChange 回传文件数组(不内置上传请求)",
"notification(props):右下角通知卡片(标题 + 描述 + 操作区),返回 { el, close } 句柄,缺省常驻需手动关闭",
"result(props):结果页,status 四档语义色 + 标题 + 说明 + 操作区,用于提交完成/校验失败等终态"
"result(props):结果页,status 四档语义色 + 标题 + 说明 + 操作区,用于提交完成/校验失败等终态",
"transfer(props):穿梭框,左右两栏勾选后整体搬运,targetKeys 信号双向绑定,两栏各自搜索与全选(含半选),禁用条目不参与搬运也不可勾选"
],
"keyTypes": [
"ButtonProps",
@@ -2054,6 +2055,52 @@
"extra 放操作区,常见为主按钮 + 幽灵按钮;不传则不渲染",
"组件自带 role=\"status\",插入页面后读屏会播报终态文案"
]
},
{
"id": "transfer",
"title": "穿梭框 Transfer",
"demo": "sec-transfer",
"props": [
{
"n": "dataSource",
"t": "TransferItem[]",
"r": 1,
"d": "全量条目,左右两栏都按是否在 targetKeys 里派生"
},
{
"n": "targetKeys",
"t": "Signal<string[]>",
"d": "右侧集合信号;不传则组件内部维护,传了即外部受控"
},
{
"n": "titles",
"t": "[string, string]",
"d": "左右栏标题;缺省「待选列表 / 已选列表」"
},
{
"n": "searchable",
"t": "boolean",
"d": "是否显示搜索框;缺省 true,逐栏独立过滤"
},
{
"n": "height",
"t": "number",
"d": "列表区固定高度像素;缺省走样式表 220,超出滚动"
},
{
"n": "onChange",
"t": "(keys: string[]) => void",
"d": "右侧集合变化回调(搬运后触发,传副本)"
}
],
"example": "transfer({ targetKeys: enabled, titles: ['待选', '已启用'], onChange: (keys) => toast.info(`已启用 ${keys.length} 项`), dataSource: [{ key: 'a11y', label: '无障碍语义' }, { key: 'ssr', label: 'SSR(暂不可用)', disabled: true }] })",
"steps": [
"dataSource 是唯一数据源,条目归属由 targetKeys 决定;搬运只改 targetKeys,不删条目",
"两栏独立勾选,勾选后点中间 → / ← 整体搬运,搬完两栏勾选自动清空;无勾选时按钮自动禁用",
"每栏均有搜索框与全选:全选只覆盖当前搜索结果里未禁用的条目,部分勾选时全选框显示半选",
"disabled 条目不可勾选、不计入全选基数、也不会被搬运",
"传入 targetKeys 信号即为受控用法,外部写入即可程序化搬运(如「一键全选」)"
]
}
]
},