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

packages/skin/ui/src/index.ts

@@ -73,3 +73,4 @@ export { timePicker } from './timePicker.js';
 export { pinInput } from './pinInput.js';
 export { copyButton } from './copyButton.js';
 export { countdown } from './countdown.js';
+export { kbd } from './kbd.js';

packages/skin/ui/src/kbd.ts

@@ -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);
+}

packages/skin/ui/src/types.ts

@@ -281,6 +281,11 @@ export interface CountdownHandle {
   reset: () => void;    // 复位到总时长并停表
 }
 
+/*** 键盘按键入参 ***/
+export interface KbdProps {
+  keys: string | string[]; // 按键内容：单键字符串或多键组合数组（组合以 + 连接展示）
+}
+
 /*** 空状态入参 ***/
 export interface EmptyProps {
   title?: string;       // 主标题；缺省不渲染

packages/skin/ui/ua.manifest.json

@@ -87,7 +87,8 @@
       "timePicker(props)：时间选择，时 / 分两列弹层，value 信号双向绑定 HH:mm，分钟可配步长，Esc 收起",
       "pinInput(props)：验证码输入，N 格单字符数字输入，输入自动进格、退格回删、方向键移格、粘贴自动分发，value 信号双向绑定，mask 可密文显示",
       "copyButton(props)：复制按钮，点击把 text 写入剪贴板并短暂显示已复制，text 可传函数取实时值，clipboard API 不可用时降级 execCommand",
-      "countdown(props)：倒计时，秒级递减到 0 自动停表并触发 onFinish，缺省 mm:ss 展示，返回句柄 start/stop/reset"
+      "countdown(props)：倒计时，秒级递减到 0 自动停表并触发 onFinish，缺省 mm:ss 展示，返回句柄 start/stop/reset",
+      "kbd(props)：键盘按键标记，键帽样式展示单个按键或组合键（多键以 + 连接），用于快捷键提示"
     ],
     "keyTypes": [
       "ButtonProps",
@@ -3846,6 +3847,25 @@
           "归零自动停表并触发 onFinish；之后 start() 会重开一轮，reset() 复位到总时长",
           "format 自定义展示：如只显示秒 (s) => `${s}s`，或带上小时位"
         ]
+      },
+      {
+        "id": "kbd",
+        "title": "键盘按键 Kbd",
+        "demo": "sec-kbd",
+        "props": [
+          {
+            "n": "keys",
+            "t": "string | string[]",
+            "r": 1,
+            "d": "按键内容：单键字符串或多键组合数组（组合以 + 连接展示）"
+          }
+        ],
+        "example": "kbd({ keys: 'Esc' })、kbd({ keys: ['Ctrl', 'K'] })",
+        "steps": [
+          "传字符串展示单键帽：kbd({ keys: \"Esc\" })，适合文档里说明单个按键",
+          "传数组展示组合键：kbd({ keys: [\"Ctrl\", \"K\"] })，键帽之间以弱化的 + 连接（+ 对读屏隐藏）",
+          "常与提示文案混排：行内 baseline 对齐，键帽底边加厚一线出立体感"
+        ]
       }
     ]
   }

packages/skin/ui/ui.css

@@ -5202,3 +5202,30 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
 .ua-countdown {
   font-variant-numeric: tabular-nums; /* 数字等宽：秒跳不抖动 */
 }
+
+/* ---- 键盘按键标记（kbd） ---- */
+.ua-kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ua-space-05);
+  vertical-align: middle;
+}
+.ua-kbd-key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--ua-control-h-sm);
+  height: var(--ua-control-h-sm);
+  padding: 0 var(--ua-space-15);
+  border: 1px solid var(--ua-color-border);
+  border-bottom-width: 2px; /* 底边加厚一线：键帽立体感 */
+  border-radius: var(--ua-radius-sm);
+  background: var(--ua-color-surface);
+  color: var(--ua-color-text);
+  font-size: var(--ua-font-size-sm);
+  line-height: var(--ua-leading-none);
+}
+.ua-kbd-sep {
+  color: var(--ua-color-text-muted);
+  font-size: var(--ua-font-size-xs);
+}