diff --git a/llms-full.txt b/llms-full.txt index 7a91bb5..93f94bc 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -2463,6 +2463,35 @@ dataTable({ columns, data: rows, selectable: true }); // 表格只吃派生出 - 区间类控件都自带先后与越界修正:`slider` 的 `value`/`end` 越界会压平,`datePicker` 点早了会自动交换两端——调用方不要再写 clamp。 - 长候选集给 `option.group` 分块、常用时间段给 `presets`(`days` 相对今天,跨月跨年由组件算),比让用户逐行扫列表更快。 +## 配方 12:命令面板(⌘K 全局操作入口) + +```ts +const cmdkOpen = signal(false); // 面板显隐:快捷键与按钮共用同一份状态 +const cmdk = commandPalette({ + open: cmdkOpen, + items: [ + { id: 'new-order', label: '新建工单', group: '快捷操作', hint: '⌘N' }, + { id: 'export', label: '导出当前列表', group: '快捷操作' }, + { id: 'invite', label: '邀请成员', group: '协作', keywords: ['yaoqing', 'yao qing'] }, + { id: 'theme', label: '切换暗色主题', group: '偏好', keywords: ['dark'] }, + ], + onSelect: (item) => { + if (item.id === 'theme') return toggleTheme(); // 立即型命令:自己带副作用 + if (item.id === 'invite') return inviteModal.open(); // 需要表单的交给已有弹窗,面板只做入口 + toast.success(`已执行:${item.label}`); // 其余执行完给一次轻反馈 + }, +}); +document.body.append(cmdk.el); // 面板是 fixed + 遮罩,挂 body 最省事 +``` + +要点: +- 用 `id` 做命令分发键、`label` 只负责显示:以后改文案不会打断路由;同一 `id` 也是埋点的事件名。 +- 过滤看三层 `label` / `hint` / `keywords`:拼音与别名塞 `keywords`(如 `yaoqing`),用户没切输入法也能命中。 +- 同组必须**连续排列**才会合并成一段标题,`items` 顺序即展示顺序,组件不排序——按「快捷操作 / 跳转 / 偏好」排好再传。 +- 需要二次确认的命令在 `onSelect` 里开 `modal` / `popconfirm`,别在面板内部再叠一层确认,否则 Esc 栈会有两层。 +- 一页只留一个实例用缺省 `hotkey`(⌘K / Ctrl+K),其余传 `hotkey: false` 自己绑,否则一次按键会同时开两个面板。 +- 命令集随权限变化时**重建实例**(`items` 是创建时快照),不要往原数组里 push。 + ## 通用约定 - 状态一律放信号(`signal` / `computed`),组件只读写信号,不持有业务数据副本。 diff --git a/llms.txt b/llms.txt index 8e07b93..b8dbcf9 100644 --- a/llms.txt +++ b/llms.txt @@ -158,3 +158,4 @@ - 配方 9:详情页排版(栅格 + 排版文本 + 描述列表)(3 条要点) - 配方 10:暗色主题切换(只切 data-theme,不改令牌名)(3 条要点) - 配方 11:数据看板筛选区(区间滑块 + 日期预设 + 分组下拉)(3 条要点) +- 配方 12:命令面板(⌘K 全局操作入口)(6 条要点) diff --git a/packages/tools/cli/recipes.md b/packages/tools/cli/recipes.md index 11ec352..b77c3ea 100644 --- a/packages/tools/cli/recipes.md +++ b/packages/tools/cli/recipes.md @@ -230,6 +230,35 @@ dataTable({ columns, data: rows, selectable: true }); // 表格只吃派生出 - 区间类控件都自带先后与越界修正:`slider` 的 `value`/`end` 越界会压平,`datePicker` 点早了会自动交换两端——调用方不要再写 clamp。 - 长候选集给 `option.group` 分块、常用时间段给 `presets`(`days` 相对今天,跨月跨年由组件算),比让用户逐行扫列表更快。 +## 配方 12:命令面板(⌘K 全局操作入口) + +```ts +const cmdkOpen = signal(false); // 面板显隐:快捷键与按钮共用同一份状态 +const cmdk = commandPalette({ + open: cmdkOpen, + items: [ + { id: 'new-order', label: '新建工单', group: '快捷操作', hint: '⌘N' }, + { id: 'export', label: '导出当前列表', group: '快捷操作' }, + { id: 'invite', label: '邀请成员', group: '协作', keywords: ['yaoqing', 'yao qing'] }, + { id: 'theme', label: '切换暗色主题', group: '偏好', keywords: ['dark'] }, + ], + onSelect: (item) => { + if (item.id === 'theme') return toggleTheme(); // 立即型命令:自己带副作用 + if (item.id === 'invite') return inviteModal.open(); // 需要表单的交给已有弹窗,面板只做入口 + toast.success(`已执行:${item.label}`); // 其余执行完给一次轻反馈 + }, +}); +document.body.append(cmdk.el); // 面板是 fixed + 遮罩,挂 body 最省事 +``` + +要点: +- 用 `id` 做命令分发键、`label` 只负责显示:以后改文案不会打断路由;同一 `id` 也是埋点的事件名。 +- 过滤看三层 `label` / `hint` / `keywords`:拼音与别名塞 `keywords`(如 `yaoqing`),用户没切输入法也能命中。 +- 同组必须**连续排列**才会合并成一段标题,`items` 顺序即展示顺序,组件不排序——按「快捷操作 / 跳转 / 偏好」排好再传。 +- 需要二次确认的命令在 `onSelect` 里开 `modal` / `popconfirm`,别在面板内部再叠一层确认,否则 Esc 栈会有两层。 +- 一页只留一个实例用缺省 `hotkey`(⌘K / Ctrl+K),其余传 `hotkey: false` 自己绑,否则一次按键会同时开两个面板。 +- 命令集随权限变化时**重建实例**(`items` 是创建时快照),不要往原数组里 push。 + ## 通用约定 - 状态一律放信号(`signal` / `computed`),组件只读写信号,不持有业务数据副本。