DiffViewer
比较文本或代码差异。中文惯用名：差异对比。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.diff-viewer |
| 名称 | DiffViewer |
| 二级分类 | 媒体与内容（media） |
| 用途 | 比较文本或代码差异 |
| 描述 | 中文惯用名：差异对比。 |
预览
静态结构：等宽字体卡片（font-mono text-xs）；统一视图每行 [+/-/空格] 符号槽 + 文本，add 行 bg-success/10、del 行 bg-destructive/10；分栏视图 del 只占左栏、add 只占右栏（另一侧 bg-muted 占位），same 两栏同行，可带 oldTitle / newTitle 栏头。diff 算法为 LCS 行级比较（diffLines）。
DSL 结构
{
"type": "DiffViewer",
"props": {
"oldText": "const title = \"旧版本\";",
"newText": "const title = \"新版本\";",
"split": true,
"oldTitle": "上一版",
"newTitle": "当前版"
}
}何时用
何时使用
- 比较文本或代码差异：版本对比、配置变更审查、AI 修改建议确认。
- 统一视图（+/- 行）或左右分栏视图（split）。
何时不用
- 结构化对象对比：先序列化为文本（JSON.stringify 缩进）再比较。
- 大文件三路合并：本组件是只读对比，不做合并。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 统一视图 | +/- 单列行 | 变更量小、顺序重要 |
| 分栏视图 | 左右对照 | 整段替换、版本对比 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
oldText | string | '' | 旧文本（按行比较） |
newText | string | '' | 新文本（按行比较） |
split | boolean | false | 左右分栏视图 |
oldTitle / newTitle | string | — | 分栏视图栏目标题 |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- 比较粒度为整行，行内差异不单独标注（换行即拆成 del + add）。
- 大文本（数千行以上）LCS 计算成本随乘积增长，应服务端先 diff 或截断。
- 分栏视图务必配 oldTitle / newTitle 标明左右。
正例
- ✓ 配置变更审查：发布前 old/new 配置分栏对比。
- ✓ AI 改写确认：原文与改写结果统一视图查看增删。
反例
- ✕ 用 DiffViewer 做在线合并（只读）。
- ✕ 直接对比两份整库导出（应先限定范围）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。