这叫啥 UI？
← 返回组件目录

COMPONENT 19 · Actions & Menus

命令面板

Command Palette

也叫Command MenuQuick Open命令菜单快捷命令

通过可搜索浮层快速查找并执行应用命令。

A searchable overlay for finding and running application commands.

ANATOMY & USAGE

结构与使用建议

组成部分

  • 打开触发器
  • 搜索框
  • 命令结果列表

适合使用

  • 功能较多且熟练用户需要快速执行跨区域操作时。

不建议使用

  • 只有少量操作或命令名称难以理解时。

键盘与无障碍

  • 浮层使用 dialog 语义；打开后聚焦搜索框，支持 Escape、结果键盘导航和焦点恢复。

DESCRIBE IT TO AI

这样告诉编程助手

实现命令面板（Command Palette）：通过可搜索浮层快速查找并执行应用命令。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY
<div class="demo stack">
  <button id="open-commands" type="button">打开命令面板</button>
  <dialog aria-labelledby="command-title">
    <h2 id="command-title">快速操作</h2>
    <label for="command-search">搜索命令</label>
    <input id="command-search" type="search">
    <div id="command-list">
      <button type="button">新建项目</button>
      <button type="button">打开设置</button>
    </div>
    <button id="close-commands" type="button">关闭</button>
  </dialog>
  <output>尚未执行命令</output>
</div>