iter(g237): 新增 kbd 键盘按键标记，键帽样式支持单键与组合键（74 组件）

2026-10-26 21:30:52 +08:00
parent 55980c5ec1
commit fc8c5ad776
12 changed files with 129 additions and 10 deletions
@@ -0,0 +1,10 @@
+import { h } from '@ui-arch/frame';
+import type { KbdProps } from './types.js';
+
+/*** 键盘按键标记：键帽样式展示单个按键或组合键（多键以 + 连接），用于快捷键提示 ***/
+export function kbd(props: KbdProps): HTMLElement {
+  const keys = Array.isArray(props.keys) ? props.keys : [props.keys]; // 统一成数组：单键 / 组合键同一渲染路径
+  const parts: (Node | null)[] = keys.map((k, i) => (i > 0 ? h('span', { class: 'ua-kbd-sep', 'aria-hidden': 'true' }, '+') : null)); // 分隔符占位
+  keys.forEach((k, i) => parts[i * 2 + 1] = h('kbd', { class: 'ua-kbd-key' }, k)); // 键帽交错插入：sep, key, sep, key…
+  return h('span', { class: 'ua-kbd' }, ...parts);
+}