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	—	选择非禁用命令时触发。