跳到主要内容
Termlib

UI 组件 · 导航

命令面板

Command Palette

也叫：命令菜单、快捷搜索、Cmd+K 菜单、Command Menu

按快捷键（常见是 Ctrl+K 或 ⌘K）弹出的搜索框，输入关键字就能快速跳转页面或执行操作。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

加一个命令面板：按 Ctrl+K 或 ⌘K 在页面上方居中弹出，宽 560px，顶部是搜索输入框，下面按「页面」「操作」分组列出结果，每项左侧图标、右侧显示快捷键；支持方向键选择、回车执行、Esc 关闭，没有结果时显示「未找到相关内容」。

发给

01判断

你的内容是这样吗？

对照两列，确认命令面板是不是你要找的。

符合这些情况，用命令面板

  • 功能和页面很多的工具类产品，需要一个快速直达的入口
  • 用户习惯用键盘操作，希望不碰鼠标就能跳转或执行命令
  • 文档站需要一个随时可以呼出的站内搜索

是这些情况，换成别的

  • 功能很少的简单网站，几个导航链接就能覆盖

  • 主要面向不熟悉快捷键的普通用户，且页面上没有其他可见入口

    改用快捷键

  • 需要展示完整搜索结果并支持筛选分页

    改用搜索结果页

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    只能用快捷键打开，页面上没有任何可见的入口按钮

  2. 02

    不支持方向键和回车，只能用鼠标点，失去了键盘操作的效率

  3. 03

    快捷键和浏览器或输入框的默认快捷键冲突

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由遮罩、居中弹窗、顶部搜索输入框和下方分组的结果列表组成，列表项含图标、名称和快捷键提示。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1页面上方居中的一个大搜索框浮层，背后有遮罩
  2. 2输入框下方是分组的结果列表，其中一项高亮
  3. 3列表项右侧有 ⌘K、Enter 之类的按键提示

04解释

详细解释

命令面板是一个在页面上方居中弹出的搜索框：按 Ctrl+K（Mac 上是 ⌘K）打开，输入几个字，下面实时列出匹配的页面、功能和最近记录，用方向键上下选择、回车执行、Esc 关闭。VS Code、Linear、Notion、GitHub 都有，很多文档站的站内搜索也是这种形式。React 里常用 cmdk 库实现，shadcn/ui 的 Command 组件就基于它。

它和普通 搜索框 的区别：搜索框放在页面上，搜的是内容，结果显示在搜索结果页；命令面板平时隐藏，既能搜内容也能执行操作（「新建文档」「切换深色模式」），面向经常使用、习惯键盘的用户。它是锦上添花的快捷入口，不能替代页面上可见的导航和按钮。

开发者信息
术语 ID
component-command-palette
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • [cmdk-root]
  • [cmdk-dialog]
  • [data-slot="command"]
  • .DocSearch-Modal
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • command-palette
  • cmdk
  • command-menu
  • spotlight
  • command-bar
  • quick-open
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • CommandPalette
  • CommandDialog
  • CommandMenu
  • Spotlight
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 浮在内容上
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30