开发预览更新于 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 }

<script setup lang="ts">
import { CfJsonDiff } from '@chufix-design/vue';

const left = {
  name: 'ChuFix',
  version: '0.1.0',
  features: ['theme', 'density'],
};
const right = {
  name: 'ChuFix UI',
  version: '0.2.0',
  features: ['theme', 'density', 'i18n'],
  beta: false,
};
</script>

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

<script setup>
import { CfJsonDiff } from '@chufix-design/vue';

const left = {
  name: 'ChuFix',
  version: '0.1.0',
  features: ['theme', 'density'],
};
const right = {
  name: 'ChuFix UI',
  version: '0.2.0',
  features: ['theme', 'density', 'i18n'],
  beta,
};
</script>

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

<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"
   }
 }

<script setup lang="ts">
import { CfJsonDiff } from '@chufix-design/vue';

const before = {
  user: { id: 'u_001', plan: 'free' },
  settings: { theme: 'dark', density: 'comfortable' },
};
const after = {
  user: { id: 'u_001', plan: 'pro', renewedAt: '2026-05-01' },
  settings: { theme: 'light', density: 'comfortable' },
};
</script>

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

<script setup>
import { CfJsonDiff } from '@chufix-design/vue';

const before = {
  user: { id: 'u_001', plan: 'free' },
  settings: { theme: 'dark', density: 'comfortable' },
};
const after = {
  user: { id: 'u_001', plan: 'pro', renewedAt: '2026-05-01' },
  settings: { theme: 'light', density: 'comfortable' },
};
</script>

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

<CfJsonDiff left={before} right={after} lineNumbers={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 }

<script setup lang="ts">
import { CfJsonDiff } from '@chufix-design/vue';

const left = { id: 1, status: 'pending' };
const right = { id: 1, status: 'approved', approvedBy: 'admin' };
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 12px;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">size = sm</div>
      <CfJsonDiff :left="left" :right="right" size="sm" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">size = md</div>
      <CfJsonDiff :left="left" :right="right" size="md" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">size = lg</div>
      <CfJsonDiff :left="left" :right="right" size="lg" />
    </div>
  </div>
</template>

<script setup>
import { CfJsonDiff } from '@chufix-design/vue';

const left = { id: 1, status: 'pending' };
const right = { id: 1, status: 'approved', approvedBy: 'admin' };
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 12px;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">size = sm</div>
      <CfJsonDiff :left="left" :right="right" size="sm" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">size = md</div>
      <CfJsonDiff :left="left" :right="right" size="md" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">size = lg</div>
      <CfJsonDiff :left="left" :right="right" size="lg" />
    </div>
  </div>
</template>

<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; }