← 返回提示词
Navigation

命令面板

一个带键盘快捷键、分组结果和最近命令的可搜索命令面板。

作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a command palette modal triggered by ⌘K. Include a search input at the top, grouped results (Recent, Pages, Actions), keyboard navigation with arrow keys, highlighted selection, and a footer showing keyboard shortcuts. Use shadcn/ui Dialog, Command, and Badge components and Tailwind CSS. Make it accessible with focus trapping and Escape to close.
中文提示词
创建一个通过 ⌘K 触发的命令面板弹窗。顶部包含搜索输入、分组结果(Recent、Pages、Actions)、方向键键盘导航、高亮选择和显示键盘快捷键的页脚。使用 shadcn/ui Dialog、Command 和 Badge 组件以及 Tailwind CSS。使其可访问,包含焦点捕获和 Escape 关闭。
命令面板 screenshot 1
## 概述 一个供高级用户快速导航和执行操作的命令面板。包含搜索、分组和键盘快捷键。 ## 功能特性 - ⌘K 键盘触发 - 搜索输入 - 分组命令结果 - 方向键导航 - 高亮选择 - 快捷键提示页脚 - 焦点捕获和 Escape 关闭 ## 使用方法 将提示词复制到 v0 或 Cursor 中。将命令连接到你的应用路由和操作。 ## 自定义选项 修改提示词以: - 添加命令图标 - 支持嵌套命令页面 - 显示最近搜索 - 添加模糊搜索匹配