SuperAPI AI 工具集

implementing-command-palettes

前端与建站

查看项目

更新于 10-15 16:42

技能介绍

用途:在 React 中构建 Cmd+K / Ctrl+K 命令面板,解决键盘导航、滚动跟随、快捷键过滤和重渲染循环等机制性问题。

主要能力: 键盘导航——用 selectedIndex 跟踪选中项,配合 Math.min/max 做边界限制;ArrowDown/ArrowUp/Enter/Escape 均调用 e.preventDefault(),避免方向键滚动页面。 滚动跟随——通过 refs 数组或单一选中 ref,调用 scrollIntoView({ block: 'nearest', behavior: 'smooth' }),仅在元素不可见时滚动。 过滤——按 label 文本匹配,快捷键去掉空格后再匹配(如输入 gd 匹配 g d),编号项(PR、issue)按数字匹配。 稳定性——图标元素在组件外定义,事件处理用 useCallback,禁用态用 noop 常量;按标签生成稳定 ID 做变更检测,避免重复注册导致无限重渲染。

必要用法: 采用包装组件模式,在渲染前用 if (!isOpen) return null 提前返回,确保键盘副作用只在面板打开时运行;输入框用 autoFocus,键盘监听放在 window.addEventListener 中并在 useEffect 清理函数里移除。更完整代码示例见原页面 Quick Reference 与各章节。

适用场景:React 应用中需要快速跳转、执行操作、检索文件或 PR 的命令面板。

限制:资料未说明适用框架版本、依赖包、样式方案(示例涉及 Tailwind 类名)、测试框架及性能基准;未提供安装命令或 URL 之外的分发方式。