Command Palette是一种轻量、可搜索、键盘优先的快捷操作入口，非系统弹窗或下拉菜单；它通过语义化DOM结构（如role="dialog"、role="listbox"）、精准键盘交互（Ctrl/Cmd+K呼出、上下键导航、Enter执行）及动态命令管理实现高效操作。
command palette 是什么，为什么不用 select 或 dialog
它不是系统级弹窗，也不是下拉菜单，而是一个轻量、可搜索、键盘优先的快捷操作入口。用户按 Cmd+K（macOS）或 Ctrl+K（Windows/Linux）呼出后，输入关键词就能触发命令——比如“跳转到设置”“刷新页面”“复制 URL”。用 select 无法支持模糊匹配和实时过滤；原生 dialog 缺乏键盘导航逻辑（如上下键切换、Enter 确认、Esc 关闭），也难控制焦点流和滚动行为。
核心 DOM 结构怎么搭才不翻车
必须用语义化 + 可访问结构：外层是 div[role="dialog"]，加 aria-modal="true" 和 aria-labelledby；内部要有搜索框（input[type="text"]）、结果列表（ul[role="listbox"]）、每个选项用 li[role="option"] 包裹。别漏掉 tabindex="-1" 给外层容器，否则键盘打开后焦点会卡在页面顶部。
常见错误：
- 用
div套div模拟列表，导致屏幕阅读器读不出选项数量和当前选中项 - 搜索框没设
aria-controls指向结果列表，NVDA/JAWS 无法联动播报变化 - 没在打开时用
element.focus()主动聚焦到输入框，用户还得手动点一下
CommandPalette 的键盘交互逻辑怎么写
重点不是监听所有按键，而是守住几个关键行为：打开/关闭、移动焦点、执行命令。绑定在 document 上的全局快捷键要用 event.preventDefault() 阻止默认行为（比如 Ctrl+K 在 Chrome 里会唤出地址栏）；列表内上下键切换时，得用 aria-selected="true" 标记当前高亮项，并同步滚动可视区域（element.scrollIntoView({ block: 'nearest' })）；回车或鼠标点击都应触发同一函数，避免逻辑分裂。
实操建议：
- 用
keydown监听Escape关闭面板，同时恢复上一个聚焦元素（存document.activeElement） - 上下键遍历时，跳过禁用项（
aria-disabled="true"），别让焦点卡住 - 输入过程中防抖 200ms 再过滤数据，不然快速打字会频繁重绘列表
- 执行命令后立刻关闭面板，别等动画结束——用户已经点了，就该立刻响应
怎么让命令列表动态加载又不卡顿
静态命令可以初始化时塞进数组，但像“最近打开的文件”“Git 分支列表”这类需异步获取的内容，不能等面板打开后再发请求——用户按下 Ctrl+K 后的等待感极强。推荐在页面空闲时（requestIdleCallback）或路由切换后预加载，存进内存缓存（Map 或普通对象）。如果命令数超 50 条，列表渲染必须用虚拟滚动（只 render 可见区域的 li），否则 Chrome 渲染帧率会掉到 30fps 以下。
性能陷阱：
- 每次输入都重新生成整个
ulDOM —— 改用DocumentFragment批量更新 - 命令对象带大段描述文本或图标 base64，导致过滤时字符串比对变慢 —— 提前提取关键词字段做索引
- 没加
key（比如用数组索引）导致 React/Vue 更新错乱，实际纯 HTML 也要靠data-id对齐状态
真正难的不是渲染，是命令注册机制的设计：谁来管理命令生命周期？怎么处理同名命令覆盖？这些细节一旦松动，后期加个“插件系统”就会崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
