DiffView.tsx

基本信息

• 类型: React 组件 (自定义)
• 路径: ./src/components/ui/diff-view.tsx

功能描述

文本差异对比组件，使用 LCS（最长公共子序列）算法进行逐字比较。支持统计信息显示、代码高亮、并排对比等功能。

导出内容

• DiffView - 差异对比组件（行内模式）
• SideBySideDiff - 并排对比组件

Props 接口

DiffView

属性	类型	必填	默认值	说明
original	string	是	-	原始文本
modified	string	是	-	修改后的文本
className	string	否	-	自定义CSS类名
mode	`'line' \	'word' \	'inline'`	否	'word'	对比模式
language	`'json' \	'yaml' \	null`	否	-	代码语言（用于代码高亮）

SideBySideDiff

属性	类型	必填	默认值	说明
original	string	是	-	原始文本
modified	string	是	-	修改后的文本
className	string	否	-	自定义CSS类名

依赖

• next-intl - 国际化
• @/lib/utils - 工具函数 (cn)

使用示例

import { DiffView, SideBySideDiff } from "@/components/ui/diff-view";

// 行内差异对比
<DiffView
  original={originalText}
  modified={modifiedText}
  mode="word"
/>

// 代码差异对比（带语法高亮）
<DiffView
  original={originalJson}
  modified={modifiedJson}
  language="json"
  className="my-4"
/>

// YAML 差异对比
<DiffView
  original={originalYaml}
  modified={modifiedYaml}
  language="yaml"
/>

// 并排对比
<SideBySideDiff
  original={originalText}
  modified={modifiedText}
/>