iter(g238): 新增 highlight 关键词高亮,命中片段包 mark 并随信号实时联动(75 组件)

This commit is contained in:
HIsheR
2026-10-26 21:35:18 +08:00
parent 5f150dccaa
commit 226271986e
12 changed files with 150 additions and 10 deletions
+23 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T13:30:37.089Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T13:32:36.756Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -2117,6 +2117,27 @@ kbd({ keys: 'Esc' })、kbd({ keys: ['Ctrl', 'K'] })
现场演示:apps/docs/demo.html#sec-kbd
### highlight — 关键词高亮 Highlight
参数:
- text(必填):string | Signal<string> —— 原文;传信号则随信号变化响应式重画
- keyword(必填):string | Signal<string> —— 关键词(大小写不敏感、全部命中,首尾空白忽略);空串不高亮、原样展示
示例:
```
highlight({ text: 'Alpha Beta', keyword: 'beta' })
```
手把手:
1. 传 text + keyword 即可,命中片段以淡黄 mark 底展示,适合搜索结果 / 补全列表的匹配说明
2. 两个入参都接受信号:搜索框输入实时联动高亮,无需手动重渲染
3. 大小写不敏感且全部命中(非只第一处);关键词两侧空白自动忽略
现场演示:apps/docs/demo.html#sec-highlight
API 速览:
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用;type 缺省 button(表单内不隐式提交)
@@ -2195,6 +2216,7 @@ API 速览:
- copyButton(props):复制按钮,点击把 text 写入剪贴板并短暂显示已复制,text 可传函数取实时值,clipboard API 不可用时降级 execCommand
- countdown(props):倒计时,秒级递减到 0 自动停表并触发 onFinish,缺省 mm:ss 展示,返回句柄 start/stop/reset
- kbd(props):键盘按键标记,键帽样式展示单个按键或组合键(多键以 + 连接),用于快捷键提示
- highlight(props):关键词高亮,命中片段包 mark(大小写不敏感全部命中),text / keyword 支持信号响应式刷新
一行用法: