跳到主要内容

Diff 对比

Diff 对比功能让您可以直观地查看两个版本之间的内容差异，支持多种格式和操作方式。

功能概述​

Schema Element Editor 提供强大的 Diff 对比能力：

  • 📊 可视化差异 - 高亮显示新增和删除的内容
  • 🔄 格式转换 - 支持 AST/RawString 格式切换
  • 🛠️ 工具操作 - 同时对左右两侧内容进行格式化、转义等操作
  • 📝 版本选择 - 录制模式下可选择任意两个版本对比

进入 Diff 模式​

点击工具栏的「Diff」按钮进入对比模式。

对比内容​

Diff 对比在不同模式下的行为有所不同：

普通模式​

在普通编辑模式下，Diff 用于对比编辑前后的变化：

  • 左侧：原始加载的数据（打开抽屉时的初始内容）
  • 右侧：当前编辑的内容

使用场景：

  • 查看自己做了哪些修改
  • 确认修改范围
  • 避免误改

录制模式​

在录制模式下，Diff 用于对比不同时间点的版本：

  • 通过版本选择器选择任意两个版本进行对比
  • 支持查看数据的演变过程
  • 可以对比任意时间点的快照

使用场景：

  • 追踪数据变化过程
  • 对比不同时间点的内容
  • AI 对话过程中的内容演变
  • 调试数据更新问题

详见 录制模式。

内容格式切换​

在 Diff 模式下，可以通过工具栏的 AST/RawString 切换按钮改变显示格式：

格式说明适用场景
AST 格式以 AST 结构展示，格式化后的 JSONElements[] 类型数据
RawString以原始字符串展示，保持原始格式Markdown 格式数据

💡 切换格式会同时转换左右两侧的内容，便于在不同视角下查看差异。

工具栏操作​

在 Diff 模式下，工具栏提供以下操作，会同时应用到左右两侧：

按钮说明示例
AST/RawString切换 AST 结构或原始字符串显示JSON ↔ Markdown
格式化格式化 JSON（美化缩进）压缩的 JSON → 带缩进的 JSON
压缩将 JSON 压缩成一行多行 JSON → 单行
转义将内容包装成字符串值{...} → "{...}"
去转义移除外层引号和转义"{...}" → {...}
解析解析多层嵌套/转义的 JSON"{\"a\":1}" → {"a":1}

⚠️ 重要提示：这些操作是临时的视图变换，不会影响实际编辑器中的内容。退出 Diff 模式后，编辑器内容保持不变。

操作示例​

场景 1：对比压缩和格式化后的差异

原始内容（左右两侧都是压缩的）：
{"type":"paragraph","children":[{"text":"Hello"}]}

点击「格式化」后（左右两侧同时格式化）：
{
  "type": "paragraph",
  "children": [
    {
      "text": "Hello"
    }
  ]
}

场景 2：对比转义前后的差异

原始内容：
{"text": "Hello \"World\""}

点击「转义」后：
"{\"text\": \"Hello \\\"World\\\"\"}"

Diff 显示​

差异以颜色高亮显示：

颜色含义说明
🟢 绿色背景新增的内容右侧版本中新增的行
🔴 红色背景删除的内容左侧版本中被删除的行
⚪ 无背景未改变的内容两侧版本中相同的行

退出 Diff 模式​

再次点击「Diff」按钮返回编辑模式。

使用场景​

场景 1：确认修改内容​

在保存前使用 Diff 确认所有修改：

  1. 编辑完成后，点击「Diff」按钮
  2. 查看左右两侧的差异
  3. 确认无误后点击「保存」

场景 2：追踪数据变化​

在录制模式下追踪数据演变：

  1. 开启录制模式捕获数据变化
  2. 停止录制后，选择任意两个版本
  3. 对比查看具体变化内容
  4. 定位数据问题或分析变化趋势

详见 录制模式 - 使用场景。

场景 3：格式化对比​

当需要对比内容而非格式时：

  1. 进入 Diff 模式
  2. 点击「格式化」统一格式
  3. 专注于内容差异，忽略格式差异

场景 4：复杂数据调试​

处理多层转义的数据时：

  1. 进入 Diff 模式
  2. 使用「去转义」或「解析」简化视图
  3. 更清晰地看到实际内容差异

最佳实践​

1. 选择合适的格式​

  • AST 格式：适合查看结构化数据的差异，层次清晰
  • RawString 格式：适合查看 Markdown 内容的差异，符合原始格式

2. 善用工具栏操作​

  • 对比前先统一格式（都格式化或都压缩），减少无意义的格式差异
  • 多层转义的数据先「解析」，更容易看清实际内容

3. 结合预览功能​

  • 在 Diff 模式下确认结构变化
  • 退出 Diff 后使用预览查看实际渲染效果
  • 两者结合，全面验证修改

4. 录制模式下的版本管理​

  • 定期停止录制，避免版本过多
  • 关注关键节点的版本对比
  • 使用描述性的时间戳定位版本

故障排除​

工具栏操作无效​

问题：点击工具栏按钮后没有变化

可能原因：

  1. 内容格式不正确（如非 JSON 数据点击了「压缩」）
  2. 数据类型不支持当前操作

解决方案：

  1. 检查内容是否为有效的 JSON
  2. 查看浏览器控制台是否有错误提示
  3. 尝试其他操作或格式

录制模式下无法选择版本​

问题：版本选择器为空或无法切换

可能原因：

  1. 未在录制模式下
  2. 还没有录制到版本快照

解决方案：

  1. 确认已进入录制模式（红色高亮框）
  2. 等待录制到足够的版本
  3. 检查录制配置是否正确

详见 录制模式 - 故障排除。

相关文档​