Components

CommandPalette 命令面板

面向开发者工具的全局导航与操作入口；支持分组、模糊检索、键盘导航与可选快捷键。

命令与导航

按下 Ctrl/⌘ K 或点击按钮，使用方向键和 Enter 选择命令。

<script setup lang="ts">
import { ref } from 'vue'
import type { CommandGroup, CommandItem } from '@recloudstudio/ui'

const open = ref(false)
const groups: CommandGroup[] = [{
  heading: '操作',
  items: [{ id: 'refresh', label: '刷新数据', shortcut: ['R'] }]
}]

function selectCommand(item: CommandItem) {
  refreshData()
}
</script>

<template>
  <Button @click="open = true">打开命令面板</Button>
  <CommandPalette
    v-model:open="open"
    :groups="groups"
    shortcut="mod+k"
    @select="selectCommand"
  />
</template>

API 参考

属性	类型	默认值	说明
`groups`	`CommandGroup[]`	`—`	分组命令数据；条目支持 id、label、description、keywords、shortcut、icon、disabled、keepOpen。
`v-model:open`	`boolean`	`false`	控制命令面板开关。
`v-model:query`	`string`	`—`	可选的受控查询文本。
`shortcut`	`string`	`—`	可选全局快捷键，如 mod+k、shift+mod+p。
`filter`	`(items, query) => CommandItem[]`	`内置模糊匹配`	替换检索与排序策略。
`select`	`(item: CommandItem) => void`	`—`	选择非禁用命令时触发。