iter(g269): 新增文本差异对比组件
This commit is contained in:
+27
-1
@@ -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 统计
|
||||
|
||||
一行用法:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user