仅桌面端保证样式
CommandPalette 命令面板
⌘K 风格的命令面板：关键词过滤（名称 + 关键词 + 分组）、分组渲染、↑↓/Enter/Esc 全键盘操作。适合中后台的全局快捷入口与动作搜索。
基础用法
面板由 v-model 控制开关；动作执行后自动关闭，action 返回 false 可保持面板打开（如需二次确认的场景）：
快捷键唤起
页面级接入通常配合全局快捷键，注意在卸载时移除监听：
vue
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
const open = ref(false)
const onKeydown = (e) => {
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
e.preventDefault()
open.value = !open.value
}
}
onMounted(() => window.addEventListener('keydown', onKeydown))
onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
</script>
<template>
<eb-command-palette v-model="open" :commands="commands" />
</template>CommandPalette Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| modelValue | 面板开关（v-model） | boolean | false |
| commands | 命令清单，项结构见下表 | array | [] |
| placeholder | 搜索框占位文案 | string | 输入命令或搜索… |
Command 项结构
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| id | 命令唯一标识 | string | number | — |
| label | 命令名称（参与过滤） | string | — |
| icon | 图标名 | string | — |
| group | 分组名（相邻同组合并展示，缺省为「命令」） | string | — |
| hotkey | 右侧快捷键标记（仅展示） | string | — |
| hint | 次级说明文案 | string | — |
| keywords | 补充搜索关键词 | string[] | [] |
| action | 执行函数；返回 false 时执行后不关闭面板 | () => any | — |
CommandPalette Exposes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| open | 打开面板 | () => void | — |
| close | 关闭面板 | () => void | — |