命令面板

什么时候用

• 功能多到侧栏或顶部导航塞不下的后台、编辑器、工具型产品
• 想让熟练用户完全不离开键盘就能跳转（⌘K / Ctrl+K）
• 需要把「命令」和「跳转」放在同一个入口里检索

适用场景：导航 / 页面 / 表单

推荐取值

快捷键

⌘K（macOS）/ Ctrl+K（Windows、Linux），同时支持 /

结果条数

8–12 条，超出就滚动而不是全塞

过滤

按输入实时过滤，空格分词做模糊匹配

键盘

↑↓ 移动、Enter 确认、Esc 关闭、Tab 不离开面板

进出场

120–200ms，缩放到 0.96 → 1 加透明度

别搞混

• 和「搜索框」的区别

  搜索框在页面里占位置、搜的是内容；命令面板是浮层、搜的是动作与位置，选中就直接执行或跳转，还会把快捷键写在行尾。

• 和「下拉选择」的区别

  下拉选择是「从有限选项里挑一个」；命令面板的结果是动态过滤出来的，而且键盘导航（上下键选中、回车确认、Esc 关闭）是它的核心而不是附加功能。

容易踩的坑

• 键盘导航不能省：上下键移动、回车确认、Esc 关闭，否则命令面板就只是个搜索框
• 打开时立刻把焦点放进输入框，关闭后要把焦点还给触发它的按钮，不然键盘用户会迷路
• 结果列表要限制条数（8–12 条）并高亮当前项，用 aria-activedescendant 或 aria-selected 标出来
• ⌘K / Ctrl+K 要自己监听 keydown（preventDefault，别让浏览器抢走），忘记绑定就会出现「快捷键没反应」
• 浮层要用 z-index 与位置锚定拿住层级，别让页面里的 sticky 元素盖在上面
• prefers-reduced-motion 下关掉进出场缩放，只做透明度切换

无障碍降级

prefers-reduced-motion 下不要做缩放与位移，只保留 100ms 以内的透明度切换。

关键词

• command palette
• command menu
• role="listbox"
• aria-activedescendant
• meta+k
• fuzzy filter
• focus trap
• z-index overlay

参考

• MDN · role="listbox"
• MDN · aria-activedescendant

相关展品

• L-06折叠面板Accordion
• F-06轻提示Toast