开发预览更新于 2026-05-10

CommandPalette 命令面板

⌘K 全局命令搜索，分组列表 + 命中字符高亮 + 键盘导航。

基础用法

items 中每项可带 group 自动分组、shortcut 右侧提示。键入字符在 label / description / keywords 上做模糊匹配，命中字符以 accent 色加粗高亮。

背景

<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 隐藏底部”↑↓ 导航 · ↵ 选择 · Esc 关闭”提示，节省竖向空间。

背景

<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

属性	类型	默认值	说明
`open` / `v-model:open`	`boolean`	—
`items`	`CommandPaletteItem[]`	—	`{ id, label, description?, group?, shortcut?, keywords?, disabled? }`
`placeholder`	`string`	`'搜索命令、请求、设置…'`
`emptyText`	`string`	`'无匹配结果'`
`closeOnSelect`	`boolean`	`true`
`hideFooter`	`boolean`	`false`

键盘：↑↓ 导航 · ↵ 选中 · Esc 关闭。