PU 设计系统 · Playground

Muji×Stripe 融合 · 配色 OPaper + Emerald

第六轮 · 工程基建组件

⌘K 命令面板 + 日历 + 快捷键展示。高频工程交互。

本轮 3 个:① Command(⌘K 命令面板)② Calendar(日历选择)③ kbd(快捷键展示)
1Command · ⌘K 命令面板

全局快捷搜索面板。⌘K/Ctrl+K 唤起,模糊搜索页面/任务/操作。中后台效率标配。支持分组、快捷键、recent。

点按钮唤起命令面板:
props: { open; onOpenChange; groups: { label; items: { id; label; icon?; shortcut?; onSelect }[] }[] } | 全局 ⌘K 绑定由 CommandProvider 管理
2Calendar · 日历选择

日期选择。单选 / 范围选 / 带标记点(有任务的日期)。配合 DatePicker(输入框 + 弹层日历)。发布时间、审核日期筛选。

2026 年 7 月
DatePicker 日期选择器
Calendar: { mode?: 'single'|'range'; selected; onSelect; marked?: Date[] } | DatePicker: { value; onChange; mode? }(输入框 + 弹层)
3kbd · 快捷键展示

键盘按键视觉展示。配合快捷键提示、Command 面板、帮助文档。单体 + 组合键。

单体
组合键(KbdGroup 自动加 +)
+Shift+P
props: { children: string } | <KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>(自动加 + 号)