我用 60 行代码重构了 Cmd-K 命令面板

像 Linear、Raycast 和 VS Code 这样的应用都使用了命令面板。你按下 ⌘K，输入几个字母，然后按回车。它看起来很复杂，但实际上只需要 60 行 JavaScript 代码。

以下是构建方法：

  1. 键盘监听器 你需要一个全局监听器。浏览器使用 Ctrl+K 进行搜索，你必须使用 preventDefault 来阻止这一行为。
document.addEventListener("keydown", e => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    openPalette();
  }
});
  1. 命令数据 将每个操作存储为一个对象。UI 保持简洁：它列出这些对象并运行你选择的函数。添加新功能只需在列表中增加一行。
const COMMANDS = [
  { icon: "🌙", label: "Toggle dark mode", group: "Theme", run: toggleDark },
  { icon: "📄", label: "New file",         group: "File",  run: newFile },
];
  1. 模糊搜索 优秀的命令面板使用子序列匹配（subsequence matching）。这意味着字符必须按顺序出现，但不一定需要相邻。输入 "tgldk" 应该能找到 "Toggle dark mode"。
function fuzzy(q, text) {
  let i = 0;
  for (const ch of text.toLowerCase()) {
    if (ch === q[i]) i++;
  }
  return i === q.length;
}

  1. 键盘导航 目标是摆脱鼠标。使用方向键更改选中索引，使用 Enter 键运行命令，使用 Escape 键关闭菜单。

  2. 即时感 在面板打开的一瞬间，立即让输入框获取焦点。这样你就可以直接输入而无需点击。

一个命令面板需要四样东西：

动手实现一次，你就能理解现代高级用户工具的工作原理。

在线体验：https://dev48v.infy.uk/design/day10-command-palette.html

来源：https://dev.to/dev48v/i-rebuilt-the-cmd-k-command-palette-in-60-lines-of-javascript-3a1l