iter(g188): 新增命令面板组件

This commit is contained in:
HIsheR
2026-10-26 17:50:22 +08:00
parent 276a46cccb
commit 7e47a54ca5
12 changed files with 445 additions and 10 deletions
+52 -1
View File
@@ -82,7 +82,8 @@
"treeSelect(props):树形选择,按钮触发弹层并复用 tree(搜索 / 多选 / 级联),单选选中即收起、多选保持展开,Esc 与点外收起",
"link(props):链接,站内跳转与站外跳转统一入口,external 自动补 ↗ 与 rel=noopener noreferrer 并给读屏播报",
"avatarGroup(props):头像组,横向叠放并在超出 max 时折叠成 +N,整组 title 列出全部姓名",
"virtualList(props):虚拟列表,固定行高长列表只渲染可视窗口 + 上下缓冲条,万级数据滚动不随总量掉帧;返回 { el, scrollTo } 句柄"
"virtualList(props):虚拟列表,固定行高长列表只渲染可视窗口 + 上下缓冲条,万级数据滚动不随总量掉帧;返回 { el, scrollTo } 句柄",
"commandPalette(props):命令面板,⌘K / Ctrl+K 唤起,输入即过滤(主文案/说明/关键词三层),↑↓ 环形选择 + 回车执行 + Esc 收起,选中与关闭都归还焦点;返回 { el, open, close } 句柄"
],
"keyTypes": [
"ButtonProps",
@@ -3574,6 +3575,56 @@
"数据整体变化(换数据源)请销毁重建实例:items 是创建时快照,不响应外部数组突变",
"滚动事件内部已 rAF 合帧,滚动回调无需节流"
]
},
{
"id": "commandPalette",
"title": "命令面板 CommandPalette",
"demo": "sec-cmdk",
"props": [
{
"n": "open",
"t": "Signal<boolean>",
"r": 1,
"d": "显隐信号:外部写 true 唤起,组件内部关闭也会写回"
},
{
"n": "items",
"t": "CommandPaletteItem[]",
"r": 1,
"d": "全量命令,创建时快照;含 id / label / group / hint / keywords"
},
{
"n": "placeholder",
"t": "string",
"d": "搜索框占位文案;缺省「搜索命令…」"
},
{
"n": "emptyText",
"t": "string",
"d": "无匹配时的空状态文案;缺省「没有匹配的命令」"
},
{
"n": "hotkey",
"t": "boolean",
"d": "是否注册 ⌘K / Ctrl+K 全局唤起;缺省 true,多实例场景可关掉自己绑",
"df": "true"
},
{
"n": "onSelect",
"t": "(item) => void",
"r": 1,
"d": "回车或点击选中后回调:先收起并归还焦点,再回调"
}
],
"example": "const cmdk = commandPalette({ open: signal(false), items: [{ id: 'save', label: '保存当前页', group: '文件', hint: '⌘S' }, { id: 'invite', label: '邀请成员', group: '成员' }], onSelect: (it) => toast.info(`执行 ${it.label}`) }); document.body.append(cmdk.el); cmdk.open();",
"steps": [
"把返回的 el 挂到 body(面板是 fixed + 遮罩,挂在 section 里也定位正确),之后用 open 信号或句柄 open()/close() 控制显隐",
"items 是创建时快照:命令表变化(权限变化后菜单增减)请重建实例,不要直接改数组",
"过滤看 label / hint / keywords 三层:中文别名与拼音首字母塞进 keywords 即可支持,不必改组件",
"同组连续排列才合并成一段并画组标题;分组顺序按 items 顺序,组件不排序",
"键盘:↑↓ 环形选择、Home/End 跳首尾、回车执行、Esc 交给弹层栈(嵌套弹窗时只关最上层);鼠标划过即高亮",
"hotkey 缺省注册 ⌘K / Ctrl+K,同一页面多个面板请只留一个开 hotkey,其余传 hotkey: false"
]
}
]
}