XKeyboard — 键盘示意图

纯 SVG 键盘示意图组件，零三方依赖。内置 5 种布局预设，支持按键连线标注、分区标签、悬停与点击联动高亮，适用于产品说明、快捷键文档、操作指引等场景。

实时演示

vue

<XKeyboard
  type="full"
  :keys="{ Esc: '退出/返回', Win: '开始菜单', Space: '空格键' }"
  :show-group-label="true"
/>

Props

属性	类型	默认值	说明
`type`	`string`	`'full'`	布局预设（见下表）
`keys`	`Record<string, string>`	`{}`	按键标注 `{ 键名: 文案 }`，键名须与布局一致
`width`	`number`	`920`	最大宽度（px），容器更窄时等比缩小
`height`	`number`	`0`	高度（px）；`0` 表示按 viewBox 比例自适应
`keyColor`	`string`	`''`	键帽填充色，留空取 `--surface`
`keyTextColor`	`string`	`''`	键面文字色，留空取 `--text-1`
`accentColor`	`string`	`''`	强调色，留空取 `--brand-1`
`lineColor`	`string`	`''`	标注连线颜色，留空取 `--brand-1`
`labelColor`	`string`	`''`	标注文字色，留空取 `--text-2`
`showKeyLabel`	`boolean`	`true`	是否绘制键面文字
`showGroupLabel`	`boolean`	`false`	是否显示分区标签
`annotations`	`boolean`	`true`	是否绘制标注连线与标签
`highlightKeys`	`string[]`	`[]`	需要高亮的键名数组

Events

事件	回调参数	说明
`select`	`(name: string)`	点击任意键时触发，返回该键键名

布局预设

`type`	构成	画布比例
`alpha`	字母三行（QWERTY / ASDF / ZXCV）	宽扁
`numeric`	数字小键盘（`NumLk`/四则运算/双高 `+` `Enter`）	近正方
`full`	功能键行 + 主键盘 + 编辑键 + 方向键 + 数字键盘	宽扁
`laptop`	功能键行 + 主键盘（`Menu` 换 `Fn`）+ 方向键	宽扁
`laptopTouch`	同 `laptop`，键盘下方绘制触摸板	略高

注意事项

颜色类 props 留空时回退到主题 CSS 变量，深色模式无需额外配置。
标注键按其相对键盘中心的方位归到边，同边标签沿边铺开避让。
键名须与布局完全一致才生效（如 Bksp 而非 Backspace、↑ 而非 Up）。
完全纯 SVG，缩放不失真，无需 ResizeObserver。