或按 Ctrl + K
ESC
操作
导航
无匹配命令
↑↓ 导航 ↵ 执行 esc 关闭
<div class="demo-row"> <button class="btn btn-primary" data-command-palette-open="demo-cp">打开命令面板</button> <span class="dim" style="font-size:12px;align-self:center">或按 <kbd class="kbd kbd--sm">Ctrl</kbd> + <kbd class="kbd kbd--sm">K</kbd></span></div> <div class="command-palette-backdrop" data-command-palette="demo-cp" hidden> <div class="command-palette"> <div class="command-palette-search"> <span class="command-palette-search-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg></span> <input class="command-palette-input" placeholder="输入命令名或关键字…" /> <kbd class="command-palette-esc">ESC</kbd> </div> <div class="command-palette-body"> <div class="command-palette-group"> <p class="command-palette-group-label">操作</p> <button class="command-palette-item" type="button" data-command-palette-keyword="create new"> <span class="command-palette-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span> <span class="command-palette-item-label">新建项目</span> <kbd class="command-palette-item-kbd">⌘N</kbd> </button> <button class="command-palette-item" type="button" data-command-palette-keyword="open file"> <span class="command-palette-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg></span> <span class="command-palette-item-label">打开文件</span> <kbd class="command-palette-item-kbd">⌘O</kbd> </button> <button class="command-palette-item" type="button" data-command-palette-keyword="search find"> <span class="command-palette-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg></span> <span class="command-palette-item-label">全局搜索</span> </button> </div> <div class="command-palette-group"> <p class="command-palette-group-label">导航</p> <button class="command-palette-item" type="button" data-command-palette-keyword="goto dashboard home"> <span class="command-palette-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></span> <span class="command-palette-item-label">回到首页</span> <span class="command-palette-item-hint">/</span> </button> <button class="command-palette-item" type="button" data-command-palette-keyword="settings preferences config"> <span class="command-palette-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></span> <span class="command-palette-item-label">打开设置</span> </button> <button class="command-palette-item" type="button" data-command-palette-keyword="theme dark light color"> <span class="command-palette-item-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg></span> <span class="command-palette-item-label">切换主题</span> <span class="command-palette-item-hint">预设 6 种</span> </button> </div> <div class="command-palette-empty" hidden>无匹配命令</div> </div> <div class="command-palette-foot"> <span class="command-palette-foot-hint"> <kbd>↑↓</kbd> 导航 <kbd>↵</kbd> 执行 <kbd>esc</kbd> 关闭 </span> </div> </div></div>安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import '@icen.ai/ui/kit/command-palette';也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add command-palette
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/command-palette.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
import { initCommandPalette } from '@icen.ai/ui/behaviors/command-palette';initCommandPalette(); // 全局 ⌘K / Ctrl+K 自动触发 // 命令项可加 data-command-palette-keyword 补充关键字// 加 data-command-palette-keep-open 执行后不关闭面板