Preview Updated 2026-05-10

Command palette

Cmd+K global command search with grouped lists, character match highlighting, and keyboard navigation.

Basic usage

Each entry in items can carry a group for automatic grouping and a shortcut for the right-aligned hint. Typed characters fuzzy-match against label / description / keywords, and matched characters are bolded in the accent color.

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfCommandPalette, CfButton } from '@chufix-design/vue';
const open = ref(false);
const items = [
  { id: 'new', label: 'New File', group: 'Commands', shortcut: '⌘N' },
  { id: 'open', label: 'Open File…', group: 'Commands', shortcut: '⌘O' },
  { id: 'save', label: 'Save', group: 'Commands', shortcut: '⌘S' },
  { id: 'find', label: 'Find in Files', group: 'Commands', shortcut: '⌘⇧F' },
  { id: 'theme', label: '切换主题', group: 'Settings' },
  { id: 'density', label: '切换密度', group: 'Settings' },
  { id: 'orders', label: '/v1/orders', group: 'Requests', description: 'GET' },
  { id: 'login', label: '/v1/login', group: 'Requests', description: 'POST' },
];
</script>

<template>
  <div class="demo-row">
    <CfButton @click="open = true">⌘K 打开</CfButton>
    <CfCommandPalette
      :open="open"
      :items="items"
      @update:open="(v) => open = v"
      @select="(id) => alert(`Picked: ${id}`)"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfCommandPalette, CfButton } from '@chufix-design/vue';
const open = ref(false);
const items = [
  { id: 'new', label: 'New File', group: 'Commands', shortcut: '⌘N' },
  { id: 'open', label: 'Open File…', group: 'Commands', shortcut: '⌘O' },
  { id: 'save', label: 'Save', group: 'Commands', shortcut: '⌘S' },
  { id: 'find', label: 'Find in Files', group: 'Commands', shortcut: '⌘⇧F' },
  { id: 'theme', label: '切换主题', group: 'Settings' },
  { id: 'density', label: '切换密度', group: 'Settings' },
  { id: 'orders', label: '/v1/orders', group: 'Requests', description: 'GET' },
  { id: 'login', label: '/v1/login', group: 'Requests', description: 'POST' },
];
</script>

<template>
  <div class="demo-row">
    <CfButton @click="open = true">⌘K 打开</CfButton>
    <CfCommandPalette
      :open="open"
      :items="items"
      @update:open="(v) => open = v"
      @select="(id) => alert(`Picked: ${id}`)"
    />
  </div>
</template>

<CfCommandPalette
open={open}
onOpenChange={setOpen}
items={items}
onSelect={(id) => onPick(id)}
/>

<CfCommandPalette
open={open}
onOpenChange={setOpen}
items={items}
onSelect={(id) => onPick(id)}
/>

hide-footer hides the bottom “up/down to navigate, enter to select, Esc to close” hint to save vertical space.

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfCommandPalette, CfButton } from '@chufix-design/vue';
const open = ref(false);
const items = [
  { id: 'theme-dark', label: '切换到深色主题', group: '主题', shortcut: '⌘D' },
  { id: 'theme-light', label: '切换到浅色主题', group: '主题', shortcut: '⌘L' },
  { id: 'theme-warm', label: '切换到暖色暗', group: '主题' },
  { id: 'density-c', label: '舒适密度', group: '密度' },
  { id: 'density-co', label: '紧凑密度', group: '密度' },
];
</script>

<template>
  <div class="demo-row">
    <CfButton @click="open = true">不显示底部提示</CfButton>
    <CfCommandPalette
      :open="open"
      :items="items"
      hide-footer
      placeholder="hide-footer = true 节省空间"
      @update:open="(v) => open = v"
      @select="(id) => alert(`Picked: ${id}`)"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfCommandPalette, CfButton } from '@chufix-design/vue';
const open = ref(false);
const items = [
  { id: 'theme-dark', label: '切换到深色主题', group: '主题', shortcut: '⌘D' },
  { id: 'theme-light', label: '切换到浅色主题', group: '主题', shortcut: '⌘L' },
  { id: 'theme-warm', label: '切换到暖色暗', group: '主题' },
  { id: 'density-c', label: '舒适密度', group: '密度' },
  { id: 'density-co', label: '紧凑密度', group: '密度' },
];
</script>

<template>
  <div class="demo-row">
    <CfButton @click="open = true">不显示底部提示</CfButton>
    <CfCommandPalette
      :open="open"
      :items="items"
      hide-footer
      placeholder="hide-footer = true 节省空间"
      @update:open="(v) => open = v"
      @select="(id) => alert(`Picked: ${id}`)"
    />
  </div>
</template>

<CfCommandPalette ... hideFooter />

<CfCommandPalette ... hideFooter />

API

Prop	Type	Default	Description
`open` / `v-model:open`	`boolean`	—
`items`	`CommandPaletteItem[]`	—	`{ id, label, description?, group?, shortcut?, keywords?, disabled? }`
`placeholder`	`string`	`'Search commands, requests, settings…'`
`emptyText`	`string`	`'No matches'`
`closeOnSelect`	`boolean`	`true`
`hideFooter`	`boolean`	`false`

Keyboard: up/down navigate, enter select, Esc close.

Command palette

Basic usage

Hide the footer

API

Command palette · Discussion