BizDiffViewer 文本对比

行级文本对比（纯前端零依赖 LCS 算法）：split 左右分栏（删除 + 新增 zip 成对）/ unified 单栏双模式，增删行语义色着色、标题栏 ±统计、ignore-whitespace 忽略空白差异。版本对比、配置变更审计、发布单 diff 预览的标准件；超大输入（>2000×2000 行）自动降级全删全增保证可用。

基础用法（split 分栏）

发布前配置 -5

发布后配置 +6

1-server.port=8080

1server.port=8081

2-server.timeout=30

2server.timeout=60

3-db.host=192.168.1.10

3db.host=192.168.1.20

4db.port=3306

4db.port=3306

5-db.pool.max=20

5db.pool.max=50

6-log.level=info

6db.pool.min=5

7+log.level=warn

old-value / new-title 传文本即比对，标题栏实时统计 +新增 / -删除 行数。

<script setup lang="ts">
/** 基础用法：split 左右分栏对比（配置变更审计场景） */
import { ref } from 'vue'
import { BizDiffViewer } from 'vue3-ep-biz-lib'

const oldText = ref(`server.port=8080
server.timeout=30
db.host=192.168.1.10
db.port=3306
db.pool.max=20
log.level=info`)

const newText = ref(`server.port=8081
server.timeout=60
db.host=192.168.1.20
db.port=3306
db.pool.max=50
db.pool.min=5
log.level=warn`)
</script>

<template>
  <BizDiffViewer :old-value="oldText" :new-value="newText" old-title="发布前配置" new-title="发布后配置" />
</template>

显示代码

unified 单栏 · 忽略空白

v1.0 -2

v1.1 +2

1-function greet(name) {

2- console.log('hello, ' + name)

1+function greet(name, greeting) {

2+ console.log(greeting + ', ' + name)

3 return true

4}

mode="unified" 类 git diff 单栏视图；ignore-whitespace 忽略行首尾空白差异；css 变量控制最大高度。

<script setup lang="ts">
/** 进阶：unified 单栏 + ignoreWhitespace + 自定义高度 */
import { BizDiffViewer } from 'vue3-ep-biz-lib'

const oldText = `function greet(name) {
  console.log('hello, ' + name)
  return true
}`

const newText = `function greet(name, greeting) {
  console.log(greeting + ', ' + name)
  return true
}`
</script>

<template>
  <BizDiffViewer
    :old-value="oldText"
    :new-value="newText"
    mode="unified"
    old-title="v1.0"
    new-title="v1.1"
    ignore-whitespace
    style="--biz-diff-viewer-height: 260px"
  />
</template>

显示代码

JSON 配置对比

当前配置 -3

待发布配置 +4

1{

1{

2 "app": "gateway",

2 "app": "gateway",

3- "replicas": 2,

3 "replicas": 4,

4- "timeout": 30,

4 "timeout": 60,

5 "features": {

5 "features": {

6 "cache": true,

6 "cache": true,

7- "retry": false

7 "retry": true,

8+ "circuit": true

8 }

9 }

9}

10}

配置发布单：stringify(obj, null, 2) 后行级比对（运维发布场景）。

<script setup lang="ts">
/** JSON 对比：配置发布单（stringify 后行级 diff） */
import { computed } from 'vue'
import { BizDiffViewer } from 'vue3-ep-biz-lib'

const oldConfig = computed(() =>
  JSON.stringify({ app: 'gateway', replicas: 2, timeout: 30, features: { cache: true, retry: false } }, null, 2)
)
const newConfig = computed(() =>
  JSON.stringify({ app: 'gateway', replicas: 4, timeout: 60, features: { cache: true, retry: true, circuit: true } }, null, 2)
)
</script>

<template>
  <BizDiffViewer :old-value="oldConfig" :new-value="newConfig" old-title="当前配置" new-title="待发布配置" style="--biz-diff-viewer-height: 300px" />
</template>

显示代码

忽略空白差异

原（2 空格） -0

新（4 空格） +0

1function calc(a, b) {

1function calc(a, b) {

2const sum = a + b

2const sum = a + b

3return sum

3return sum

4}

4}

ignore-whitespace：仅缩进变化不算 diff（格式化 / 编辑器空格风格差异场景）

ignore-whitespace：缩进风格变化不算修改。

<script setup lang="ts">
/** 空白差异忽略对比：同内容缩进变化不视为修改 */
import { BizDiffViewer } from 'vue3-ep-biz-lib'

const a = `function calc(a, b) {
const sum = a + b
return sum
}`

const b = `function calc(a, b) {
    const sum = a + b
    return sum
}`
</script>

<template>
  <div>
    <BizDiffViewer :old-value="a" :new-value="b" old-title="原（2 空格）" new-title="新（4 空格）" ignore-whitespace />
    <div class="tip">ignore-whitespace：仅缩进变化不算 diff（格式化 / 编辑器空格风格差异场景）</div>
  </div>
</template>

<style scoped>
.tip {
  margin-top: 8px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

字段级对照（table 模式）

显示未变更字段

变更前 +0~3-0

仓库名称

华东 1 号仓

→

华东 1 号冷链仓

修改

温度上限(℃)

8

→

6

修改

告警手机

13800000001

→

13800000002

修改

mode="table"：old-value / new-value 传对象（非字符串），逐字段对照——修改高亮、删除划线、新增绿底、未变灰底；fields 限定字段与显示名，show-equal 切换是否显示未变更字段（默认只看变更）。适合配置变更、档案修改的前后对比。

<script setup lang="ts">
/** 场景：对象字段级对照（table 模式）——配置变更、档案修改的前后对比 */
import { ref } from 'vue'
import { BizDiffViewer } from 'vue3-ep-biz-lib'

const oldConfig = {
  siteName: '华东 1 号仓',
  temperatureMax: 8,
  temperatureMin: 2,
  alertPhone: '13800000001',
  autoLock: true,
  keeper: '王仓管',
}

const newConfig = {
  siteName: '华东 1 号冷链仓',
  temperatureMax: 6,
  temperatureMin: 2,
  alertPhone: '13800000002',
  autoLock: true,
  keeper: '王仓管',
}

const showEqual = ref(false)
</script>

<template>
  <div style="max-width: 720px">
    <el-switch v-model="showEqual" active-text="显示未变更字段" style="margin-bottom: 10px" />
    <BizDiffViewer
      mode="table"
      :old-value="oldConfig"
      :new-value="newConfig"
      :show-equal="showEqual"
      :fields="[
        { field: 'siteName', label: '仓库名称' },
        { field: 'temperatureMax', label: '温度上限(℃)' },
        { field: 'temperatureMin', label: '温度下限(℃)' },
        { field: 'alertPhone', label: '告警手机' },
        { field: 'autoLock', label: '超温自动锁仓' },
        { field: 'keeper', label: '保管人' },
      ]"
    />
  </div>
</template>

显示代码

发布确认

线上版本 -2

本次变更 +3

1-server.port=8080

1server.port=8081

2-db.pool.max=20

2db.pool.max=50

3+db.pool.min=5

3log.level=info

4log.level=info

+0-0不变 0

stats 统计徽标 + 确认弹窗组成发布链路。

<script setup lang="ts">
/** 发布确认：diff 预览 + 统计徽标 + 确认弹窗链路 */
import { computed, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { BizDiffViewer } from 'vue3-ep-biz-lib'

const oldValue = ref('server.port=8080\ndb.pool.max=20\nlog.level=info')
const newValue = ref('server.port=8081\ndb.pool.max=50\ndb.pool.min=5\nlog.level=info')

const diffRef = ref<InstanceType<typeof BizDiffViewer> | null>(null)
const stats = computed(() => (diffRef.value?.stats ?? { added: 0, removed: 0, unchanged: 0 }))

const confirmRelease = (): void => {
  void ElMessageBox.confirm(`新增 ${stats.value.added} 行 / 删除 ${stats.value.removed} 行，确认发布？`, '发布确认', { type: 'warning' })
    .then(() => ElMessage.success('已发布（应用中心配置生效）'))
    .catch(() => undefined)
}
</script>

<template>
  <div>
    <BizDiffViewer ref="diffRef" :old-value="oldValue" :new-value="newValue" old-title="线上版本" new-title="本次变更" />
    <div class="ops">
      <ElTag type="success" size="small">+{{ stats.added }}</ElTag>
      <ElTag type="danger" size="small">-{{ stats.removed }}</ElTag>
      <ElTag type="info" size="small">不变 {{ stats.unchanged }}</ElTag>
      <ElButton type="primary" size="small" style="margin-left: auto" @click="confirmRelease">发布</ElButton>
    </div>
  </div>
</template>

<style scoped>
.ops {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
</style>

显示代码

代码评审（unified）

HEAD~1 -4

工作区 +2

1-export const sum = (list) => {

2- let total = 0

3- for (const n of list) total += n

4- return total

1+export const sum = (list: number[]): number => {

2+ return list.reduce((total, n) => total + n, 0)

5}

单栏 git diff 风格，适合提交记录对比。

<script setup lang="ts">
/** 代码评审：unified 模式 + 大高度（提交记录对比） */
import { BizDiffViewer } from 'vue3-ep-biz-lib'

const before = `export const sum = (list) => {
  let total = 0
  for (const n of list) total += n
  return total
}`

const after = `export const sum = (list: number[]): number => {
  return list.reduce((total, n) => total + n, 0)
}`
</script>

<template>
  <BizDiffViewer :old-value="before" :new-value="after" mode="unified" old-title="HEAD~1" new-title="工作区" style="--biz-diff-viewer-height: 240px" />
</template>

显示代码

Props

属性名	类型	默认值	说明
old-value	string	''	原文本
new-value	string	''	新文本
mode	'split' | 'unified' | 'table'	'split'	对比视图：split 左右分栏 / unified 单栏 / table 对象字段级对照
old-title	string	'原始内容'	左栏标题
new-title	string	'修改内容'	右栏标题
ignore-whitespace	boolean	false	忽略行首尾空白差异

最大高度经 css 变量 --biz-diff-viewer-height（默认 480px）调整。

Events

事件名	参数	说明
—	—	无

Slots

插槽名	说明
—	无插槽

Expose

属性/方法	说明
rows	diff 行序列（BizDiffRow[]，含类型与行号）
stats	{ added, removed, unchanged } 统计

工具函数 diffLines(oldText, newText, ignoreWhitespace) / diffStats(rows) / toSplitRows(rows) 一并从库导出，纯函数可单测或自定义渲染。