开发预览更新于 2026-05-10

JsonDiff JSON 对比

对两个 JSON 值做行级 LCS diff，按 add / del / eq 三种状态着色，类似 git diff。

基础用法

CfJsonDiff 把 left / right 两个值各自 JSON.stringify 成多行字符串，再做一遍最长公共子序列 diff。

新增行：绿底 + 前缀
删除行：红底 - 前缀
共同行：透明底前缀

适合做配置版本对比、审计 diff、API 响应回放对照。

1 {
2-  "name": "ChuFix",
3-  "version": "0.1.0",
4+  "name": "ChuFix UI",
5+  "version": "0.2.0",
6   "features": [
7     "theme",
8-    "density"
9-  ]
10+    "density",
11+    "i18n"
12+  ],
13+  "beta": false
14 }

<CfJsonDiff :left="left" :right="right" />

<CfJsonDiff left={left} right={right} />

关闭行号

行号默认开启 — 一些嵌入文档或评论场景里行号反而是噪音，关掉只留 diff 文本本身。

 {
   "user": {
     "id": "u_001",
-    "plan": "free"
+    "plan": "pro",
+    "renewedAt": "2026-05-01"
   },
   "settings": {
-    "theme": "dark",
+    "theme": "light",
     "density": "comfortable"
   }
 }

<CfJsonDiff :left="before" :right="after" :line-numbers="false" />

<CfJsonDiff left={before} right={after} lineNumbers={false} />

大小变体

3 档字号同其他 JSON 系列组件保持一致。

size = sm

1 {
2   "id": 1,
3-  "status": "pending"
4+  "status": "approved",
5+  "approvedBy": "admin"
6 }

size = md

1 {
2   "id": 1,
3-  "status": "pending"
4+  "status": "approved",
5+  "approvedBy": "admin"
6 }

size = lg

1 {
2   "id": 1,
3-  "status": "pending"
4+  "status": "approved",
5+  "approvedBy": "admin"
6 }

<CfJsonDiff :left="left" :right="right" size="sm" />
<CfJsonDiff :left="left" :right="right" size="md" />
<CfJsonDiff :left="left" :right="right" size="lg" />

<CfJsonDiff left={left} right={right} size="sm" />
<CfJsonDiff left={left} right={right} size="md" />
<CfJsonDiff left={left} right={right} size="lg" />

API

属性	类型	默认值	说明
`left`	`unknown`	`—`	旧值，渲染在删除行
`right`	`unknown`	`—`	新值，渲染在新增行
`lineNumbers`	`boolean`	`true`	显示行号
`bordered`	`boolean`	`true`	边框
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	字号
`className`	`string`	`—`	透传到根 `<pre>`

类型导出：

type DiffOp = 'eq' | 'add' | 'del';
interface DiffLine { op: DiffOp; text: string; depth: number; }