Kbd 键盘提示
Kbd 可以使用 Rue 当前的键帽视觉风格，并补上更适合实际场景的组合键 API。现在既可以写 <Kbd>K</Kbd> ，也可以直接用items或Kbd.Group组织快捷键序列。
何时使用
- 需要展示单个按键、组合键或快捷键列表。
- 希望可以使用 Rue 当前键帽视觉，但让组合表达更语义化、更容易复用。
- 需要在设计页里同时保持静态示例和更贴近真实产品的快捷键场景。
# 推荐写法
根组件直接接收 items，适合大多数快捷键展示场景。
打开命令面板
推荐使用 items 直接表达组合键。
全局搜索
使用 Rue 的键帽视觉，同时让组合表达更直接。
快速提交
对象项可以单独控制某个键帽的 className。
# 组合子组件
Kbd.Combo 负责键序列，Kbd.Group 负责布局容器，Kbd.Separator 负责分隔符外观。
⌘+⇧+PG/ICtrl+Alt+Shift+Delete
Command Palette
Press⌘thenKto focus search
Shortcut List
New file⌘+N
Duplicate line⌥+⇧+↓
# 尺寸体系
展示基础 sizeDemo，并额外补上更顺手的语义尺寸别名。
Daisy 尺寸
XsmallSmallMediumLargeXlarge
语义别名
SmallMiddleMediumLarge
# 文本内嵌
展示基础 in textDemo，用于行文中的单键强调。
# 基础单键
展示基础示例，写法完全不变。
# 组合键
展示基础 key combinationDemo，并与新 API 共存。
ctrl + shift + del
# 功能键
展示基础 function keysDemo。
⌘⌥⇧⌃
# 完整键盘
展示基础 full keyboardDemo，说明 Kbd 仍然适合自由布局。
qwertyuiop
asdfghjkl
zxcvbnm/
# 方向键
展示基础 arrow keysDemo。
▲
◀︎▶︎
▼
API
当前页面展示的是 Kbd 根组件与组合模式的完整可用 API。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
as | 指定根节点标签；单键模式默认渲染 kbd，组合模式默认渲染 span | any | 单键为 `kbd`，组合为 `span` |
children | 单键模式内容，也可作为 Kbd.Group 的自定义内容 | any | - |
className | 根节点扩展类名 | string | - |
direction | Kbd.Group 布局方向，适合快捷键列表等垂直排布场景 | `horizontal` | `vertical` | `horizontal` |
gap | Kbd.Group / Kbd.Combo 的间距预设 | `xs` | `sm` | `md` | `lg` | `sm` |
itemClassName | 组合模式下给每个键帽统一追加类名 | string | - |
items | 组合模式数据源；可传基础值，也可传带 size/className 的对象 | Array<any | { key?: string | number; label?: any; children?: any; size?: KbdSize; className?: string }> | - |
separator | 组合模式分隔符；默认是 `+`，可传自定义节点或 `null` | any | `+` |
separatorClassName | 组合模式下给分隔符统一追加类名 | string | - |
size | 键帽尺寸，支持 xs 到 xl，以及 small / middle / medium / large 别名 | `xs` | `sm` | `md` | `lg` | `xl` | `small` | `middle` | `medium` | `large` | - |
wrap | 组合模式是否允许自动换行 | boolean | false |
复合子组件
Kbd.Combo：显式渲染组合键序列，适合控制separator、wrap和itemClassName。Kbd.Group：显式渲染布局容器，适合用direction和 gap组织多条快捷键。Kbd.Separator：默认输出带弱化样式的分隔符，内容默认是+，也可以换成/、then等文案。FAQ
什么时候用 children，什么时候用 items？
单个键帽或完全自定义布局时，可以用children 最直接；需要表达标准组合键时，优先用items或Kbd.Combo，维护成本更低。
分隔符只能是加号吗？
不是。你可以通过separator传任意节点，也可以直接使用 Kbd.Separator包一层，统一保持当前页面的弱化分隔视觉。
完整键盘这种自由布局还支持吗？
支持。Kbd 本质上仍然是轻量键帽组件，语义 API 只是补充组合键表达，不会限制你自由排布完整键盘。