组件 · 浮层
命令面板 CommandPalette
⌘K：搜命令、跳页面；支持分组、最近使用、异步加载。
演示
<button class="xxd-btn" onclick="Xxd.openCommandPalette({ recentKey: 'xxd-site-demo', items: [{ label: '新建文章', hint: '⌘N', group: '写作', run(){} }, { label: '写入 X', group: '写作', run(){} }, { label: '切换主题', group: '外观', run(){ XxdTheme.set({ theme: XxdTheme.read().theme === 'dark' ? 'light' : 'dark' }) } }, { label: '切换圆角', group: '外观', run(){ XxdTheme.set({ corners: XxdTheme.read().corners === 'rounded' ? 'square' : 'rounded' }) } }] })">命令面板 ⌘K</button>属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| 类名 | xxd-palette xxd-palette__search xxd-palette__list xxd-palette__empty |
JS
Xxd.openCommandPalette({ items: [{ label, hint, group, run }], recentKey: "my-ext-recent", loading: false })
Xxd.bindCommandPalette(items) // ⌘K / Ctrl+K键盘与读屏
- 输入框 role=combobox，列表 role=listbox，高亮项 aria-activedescendant
- ↑ ↓ 移动，Enter 运行，Esc 关闭并把焦点还回去
规则
- 按 group 分组，带组标题
- recentKey：没有输入时「最近使用」排最前
- loading：先显示「正在加载…」，再 setItems