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

This commit is contained in:
HIsheR
2026-10-26 21:30:52 +08:00
parent 55980c5ec1
commit fc8c5ad776
12 changed files with 129 additions and 10 deletions
+22 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T13:28:41.290Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T13:30:37.089Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -2097,6 +2097,26 @@ const cd = countdown({ seconds: 60, onFinish: () => console.log('结束') }); //
现场演示:apps/docs/demo.html#sec-countdown
### kbd — 键盘按键 Kbd
参数:
- keys(必填):string | string[] —— 按键内容:单键字符串或多键组合数组(组合以 + 连接展示)
示例:
```
kbd({ keys: 'Esc' })、kbd({ keys: ['Ctrl', 'K'] })
```
手把手:
1. 传字符串展示单键帽:kbd({ keys: "Esc" }),适合文档里说明单个按键
2. 传数组展示组合键:kbd({ keys: ["Ctrl", "K"] }),键帽之间以弱化的 + 连接(+ 对读屏隐藏)
3. 常与提示文案混排:行内 baseline 对齐,键帽底边加厚一线出立体感
现场演示:apps/docs/demo.html#sec-kbd
API 速览:
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用;type 缺省 button(表单内不隐式提交)
@@ -2174,6 +2194,7 @@ API 速览:
- pinInput(props):验证码输入,N 格单字符数字输入,输入自动进格、退格回删、方向键移格、粘贴自动分发,value 信号双向绑定,mask 可密文显示
- copyButton(props):复制按钮,点击把 text 写入剪贴板并短暂显示已复制,text 可传函数取实时值,clipboard API 不可用时降级 execCommand
- countdown(props):倒计时,秒级递减到 0 自动停表并触发 onFinish,缺省 mm:ss 展示,返回句柄 start/stop/reset
- kbd(props):键盘按键标记,键帽样式展示单个按键或组合键(多键以 + 连接),用于快捷键提示
一行用法: