ICEN UI
ICEN UI 命令面板
Docs ⌘K
Core · 稳定

命令面板

⌘K 命令面板：搜索即执行的全局命令入口。

Preview
浮层 command-palette
或按 Ctrl + K
html
<div class="demo-row">  <button class="icen-btn icen-btn-primary" data-icen-command-palette-open="demo-cp">打开命令面板</button>  <span class="icen-dim" style="font-size:12px;align-self:center">或按 <kbd class="icen-kbd icen-kbd--sm">Ctrl</kbd> + <kbd class="icen-kbd icen-kbd--sm">K</kbd></span></div><div class="icen-command-palette-backdrop" data-icen-command-palette="demo-cp" hidden>  <div class="icen-command-palette">    <div class="icen-command-palette-search">      <span class="icen-command-palette-search-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M13.3 13.3 17 17M14.5 8.5a6 6 0 1 1-12 0 6 6 0 0 1 12 0"></path></svg></span>      <input class="icen-command-palette-input" placeholder="输入命令名或关键字…" />      <kbd class="icen-command-palette-esc">ESC</kbd>    </div>    <div class="icen-command-palette-body">      <div class="icen-command-palette-group">        <p class="icen-command-palette-group-label">操作</p>        <button class="icen-command-palette-item" type="button" data-icen-command-palette-keyword="create new">          <span class="icen-command-palette-item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M10 4v12M4 10h12"></path></svg></span>          <span class="icen-command-palette-item-label">新建项目</span>          <kbd class="icen-command-palette-item-kbd">⌘N</kbd>        </button>        <button class="icen-command-palette-item" type="button" data-icen-command-palette-keyword="open file">          <span class="icen-command-palette-item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M6 2.5h5.5L16 7v9.5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-12a2 2 0 0 1 2-2ZM11.5 2.5V7H16"></path></svg></span>          <span class="icen-command-palette-item-label">打开文件</span>          <kbd class="icen-command-palette-item-kbd">⌘O</kbd>        </button>        <button class="icen-command-palette-item" type="button" data-icen-command-palette-keyword="search find">          <span class="icen-command-palette-item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M13.3 13.3 17 17M14.5 8.5a6 6 0 1 1-12 0 6 6 0 0 1 12 0"></path></svg></span>          <span class="icen-command-palette-item-label">全局搜索</span>        </button>      </div>      <div class="icen-command-palette-group">        <p class="icen-command-palette-group-label">导航</p>        <button class="icen-command-palette-item" type="button" data-icen-command-palette-keyword="goto dashboard home">          <span class="icen-command-palette-item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M3.5 10.25 10 4l6.5 6.25M5.75 8.75v7a.75.75 0 0 0 .75.75h7.5a.75.75 0 0 0 .75-.75v-7"></path></svg></span>          <span class="icen-command-palette-item-label">回到首页</span>          <span class="icen-command-palette-item-hint">/</span>        </button>        <button class="icen-command-palette-item" type="button" data-icen-command-palette-keyword="settings preferences config">          <span class="icen-command-palette-item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M3.5 5.5h13M3.5 10h13M3.5 14.5h13M7 4v3M12.5 8.5v3M8 13v3"></path></svg></span>          <span class="icen-command-palette-item-label">打开设置</span>        </button>        <button class="icen-command-palette-item" type="button" data-icen-command-palette-keyword="theme dark light color">          <span class="icen-command-palette-item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M13.5 10a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0M10 1.75v1.5M10 16.75v1.5M1.75 10h1.5M16.75 10h1.5M4.17 4.17l1.06 1.06M14.77 14.77l1.06 1.06M4.17 15.83l1.06-1.06M14.77 5.23l1.06-1.06"></path></svg></span>          <span class="icen-command-palette-item-label">切换主题</span>          <span class="icen-command-palette-item-hint">预设 6 种</span>        </button>      </div>      <div class="icen-command-palette-empty" hidden>无匹配命令</div>    </div>    <div class="icen-command-palette-foot">      <span class="icen-command-palette-foot-hint">        <kbd>↑↓</kbd> 导航 <kbd>↵</kbd> 执行 <kbd>esc</kbd> 关闭      </span>    </div>  </div></div>

特性

接口

初始化
initCommandPalette()（kit 一行入口可直接命名导入）
导出
closeCommandPaletteinitCommandPaletteopenCommandPalette
事件
icen:command-palette-closeicen:command-palette-open detail 契约见 IcenEventMap
类型
dist/behaviors/command-palette.d.mts（随 npm 包发布，含全部 JSDoc 约束）

安装

bun add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

js
import '@icen.ai/ui/kit/command-palette';

也可以用脚手架直接打印引入行：

bash
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 项目无此问题。

用法

js
import { initCommandPalette } from '@icen.ai/ui/behaviors/command-palette';initCommandPalette(); // 全局 ⌘K / Ctrl+K 自动触发// 命令项可加 data-icen-command-palette-keyword 补充关键字// 加 data-icen-command-palette-keep-open 执行后不关闭面板