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

apps/demo/main.ts

@@ -25,6 +25,7 @@ import {
   checkbox,
   checkboxGroup,
   colorPicker,
+  commandPalette,
   dataTable,
   datePicker,
   transfer,
@@ -1530,6 +1531,35 @@ const content = h(
       ),
     ),
   ),
+  section(
+    'sec-cmdk',
+    '命令面板',
+    'commandPalette 是 ⌘K / Ctrl+K 唤起的高频入口：输入即过滤（主文案 / 说明 / 关键词三层），↑↓ 环形选择、回车执行、Esc 收起，选中或关闭都归还焦点；组标题按 items 顺序合并，组件不替你排序。',
+    grid({ min: '320px' },
+      card({ title: '⌘K 命令面板' },
+        (() => {
+          const open = signal(false); // 显隐信号：按钮与快捷键共用同一份状态
+          const cmdk = commandPalette({
+            open,
+            items: [
+              { id: 'save', label: '保存当前页面', group: '文件', hint: '⌘S' },
+              { id: 'export', label: '导出为 Markdown', group: '文件', hint: '⌘E' },
+              { id: 'invite', label: '邀请成员', group: '协作', hint: '⌘I', keywords: ['yaoqing'] },
+              { id: 'role', label: '调整成员权限', group: '协作' },
+              { id: 'theme', label: '切换暗色主题', group: '偏好', keywords: ['dark', 'anse'] },
+              { id: 'lang', label: '切换界面语言', group: '偏好', hint: '⌘L' },
+            ],
+            onSelect: (it) => toast.info(`执行：${it.label}`),
+          });
+          return h('div', null, button({ label: '打开命令面板（⌘/Ctrl + K）', onClick: () => open(true) }), cmdk.el);
+        })(),
+        typography({ variant: 'paragraph', type: 'secondary', content: '试试输入「协」或拼音 yaoqing / dark：keywords 让中文别名与拼音也能命中，不用改组件。' }),
+      ),
+      card({ title: '为什么不用原生 input + datalist' },
+        typography({ variant: 'paragraph', type: 'secondary', content: 'datalist 无法分组、不搜说明文字、也控制不了高亮与焦点归还；命令面板要的是「输入即缩小 + 键盘走完整个流程」，所以自绘列表并用 aria-activedescendant 把高亮交给读屏。' }),
+      ),
+    ),
+  ),
 );
 
 // 悬浮按钮：fixed 定位，挂 body 不参与页面布局