Cmd+K弹窗需用JavaScript监听window的keydown事件并启用捕获模式，动态挂载原生dialog元素，统一转小写匹配文本，关闭时清空输入并恢复焦点。
Cmd+K 弹窗本质是监听全局快捷键 + 动态渲染搜索框
不是靠 HTML 原生能力实现的，必须用 JavaScript 监听 keydown 事件，捕获 Meta+K（macOS）或 Ctrl+K（Windows/Linux）。浏览器默认不会拦截这个组合键，所以得主动 e.preventDefault()，否则可能触发浏览器地址栏聚焦或其它默认行为。
常见错误：只监听 document，但页面有 iframe 或焦点在 contenteditable 元素里时会失效；正确做法是监听 window，并确保事件捕获阶段也能响应。
- 必须用
window.addEventListener('keydown', handler, true)开启捕获模式，避免被子组件stopPropagation()阻断 - 判断按键要同时检查
e.metaKey || e.ctrlKey和e.key === 'k'，注意大小写（K和k都应接受） - 弹窗 DOM 要挂载到
document.body下，不要嵌在某个局部组件内部，否则 z-index 和定位容易失控
搜索弹窗结构推荐用 dialog 元素而非 div
<dialog> 是原生模态容器，自带焦点管理、ESC 关闭、Backdrop 遮罩，比手写 div + aria-modal 更轻量且可访问性好。但要注意兼容性：Safari 15.4+ 才完全支持，旧版需加 polyfill 或降级为 div[role="dialog"]。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 用
dialog.showModal()触发显示，别用display: block—— 否则键盘焦点不会自动进入弹窗，屏幕阅读器也无法识别 - 弹窗内第一个可聚焦元素（如
<input type="search">）要在showModal()后立刻.focus()，否则用户按 Cmd+K 后还得手动点一下输入框 - 给
<input>加autofocus属性在dialog中不可靠，必须 JS 控制
搜索逻辑不能只靠 indexOf，得处理大小写和空格边界
零基础常直接写 text.indexOf(query) > -1，结果搜 “react” 匹配不到 “React Router” —— 因为大小写不一致；搜 “state” 又会误中 “statement”。真实场景需要更鲁棒的匹配。
简单可行方案：
- 统一转小写：
text.toLowerCase().includes(query.toLowerCase()) - 加词边界保护（避免子串误匹配）：用正则
new RegExp('\b' + query.replace(/[-/\^$*+?.()|[]{}]/g, '\$&') + '\b', 'i')，但注意query为空时要跳过 - 如果内容是静态 HTML 片段，先用
element.textContent提取纯文本再搜，别直接在 innerHTML 上匹配，否则会把标签当文字
关闭弹窗时务必手动清理状态和焦点
很多人关掉弹窗后，输入框还留着上次的值，或者焦点卡在已移除的节点上，下次打开时 Tab 键顺序错乱。这不是 UI 问题，是焦点管理没做完。
关键动作：
- 关闭前清空
<input>的value，并调用inputEl.value = ''+inputEl.dispatchEvent(new Event('input'))，确保绑定的搜索逻辑能重置 - 关闭后调用
dialog.close()，然后立即将焦点交还给原来激活的元素（存document.activeElement在打开前） - 如果用了第三方库（如 Fuse.js），记得销毁实例或清空缓存，否则内存泄漏风险随打开次数上升
最易忽略的一点：Cmd+K 弹窗常被设计成“全局唯一”，但若用户快速连按两次，可能创建两个 dialog 实例。得加个锁变量，比如 if (isSearching) return，否则后续的 close() 可能只关掉后一个，前一个残留后台。
