UI Components
命令菜单覆盖层
具有锐利排版、分组结果和键盘快捷键提示的聚光灯式命令面板。
作者:mcpskills
框架
reacttailwind
UI 库
overlay
难度advanced
英文提示词
Build a command palette overlay inspired by Raycast and Linear. Center a rounded-2xl modal on a dark, slightly blurred backdrop (black/60 backdrop-blur). The modal has a white/5 border, dark bg (neutral-900/95), and a soft shadow. At the top is a search input with a simple magnifying-glass SVG on the left, placeholder text 'Search commands...', and a small 'ESC' keyboard hint on the right. Below are grouped sections: Recent, Navigation, Actions, each with a tiny uppercase section label. Each row has a small monochrome SVG icon, the command label, and a right-aligned keyboard shortcut (e.g., '⌘K'). The first row is highlighted with a subtle blue/10 background and blue border-left accent. Add hover states that lightly lift rows. Use clean mono or sans type, generous padding, no emojis. Make it feel fast and precise.
中文提示词
构建一个受 Raycast 和 Linear 启发的命令面板覆盖层。在深色的轻微模糊背景(black/60 backdrop-blur)上居中放置一个 rounded-2xl 模态框。模态框带有 white/5 边框、深色背景(neutral-900/95)和柔和阴影。顶部是一个搜索输入框,左侧放置简单的放大镜 SVG,占位文本为 'Search commands...',右侧放置一个小的 'ESC' 键盘提示。下方按分组展示:Recent、Navigation、Actions,每个分组都有小写的大写标签。每一行包含一个单色 SVG 图标、命令标签和右对齐的键盘快捷键(如 '⌘K')。第一行使用淡淡的 blue/10 背景和左侧蓝色强调线高亮。悬停时行轻微上浮。使用简洁的等宽或无衬线字体、宽松的间距,不使用 emoji。整体应感觉快速且精确。
