iter(g269): 新增文本差异对比组件

This commit is contained in:
HIsheR
2026-10-26 22:53:49 +08:00
parent dccf79bb01
commit 368d47cbca
12 changed files with 304 additions and 11 deletions
+27 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T14:52:17.882Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T14:53:11.893Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -2233,6 +2233,31 @@ jsonViewer({ value: payload, depth: 2, rootLabel: 'response', maxHeight: 320 })
现场演示:apps/docs/demo.html#sec-jsonviewer
### diffView — 文本差异对比 DiffView
参数:
- before:string —— 旧文本(按行比对,CRLF 与 LF 等价)
- after:string —— 新文本
- showStats:boolean —— 是否在顶部显示 +N / −N 统计条;缺省 true
- ariaLabel:string —— 可访问名;缺省自动播报「新增 N 行,删除 M 行」
示例:
```
diffView({ before: oldText, after: newText })
```
手把手:
1. 把改前 / 改后两份文本整串交给 before 与 after:不用先切行,CRLF 与 LF 视为同一行
2. 行级对齐先剪公共前后缀、再对中间段做 LCS:改两行不会把整篇标成差异
3. 增删行同时有底色与行首 + / − 符号两条通道,色盲用户也能分辨;行号列不参与复制
4. 顶部统计条给 +N / −N,读屏在容器上直接播报同一组数字,不必逐行听
5. 超大文本(中间段行数乘积超过 40 万)会退化成「整段替换」——语义仍对,只是不再逐行对齐;要逐行对齐就先分段比对
现场演示:apps/docs/demo.html#sec-diff
API 速览:
- button(props):按钮,variant 三档视觉强度,disabled / loading 支持布尔或信号动态同步(loading 转圈并禁点),onClick 点击回调
@@ -2315,6 +2340,7 @@ API 速览:
- inputTag(props):标签输入,输入后回车 / 逗号成标签、chip 可单个删除、空框退格删末个,value 信号双向绑定,max 满额自动禁输
- layout(props, ...children):布局骨架,页头 / 侧栏 / 内容 / 页脚四区一次成型,侧栏可折叠(collapsed 信号双向绑定)
- jsonViewer(props):JSON 树查看,按层折叠、分支带计数摘要、叶子按类型着色,只读不编辑
- diffView(props):文本差异对比,行级 LCS 对齐 + 增删着色 + 双行号列,顶部带 +N / −N 统计
一行用法: