Code Diff代码差异

查看源码components/code_diff.go

双栏差异#

绿色表示本地新增，红色表示服务器内容已删除；两栏共享滚动并保留行号对应。

启用 JavaScript 后可运行预览；源码和安装命令仍可直接查看。

diff.Paint(canvas, theme, bounds, components.CodeDiffSnapshot{
    Result: components.DiffCodeLines(serverValue, localValue),
    ID: field, Value: localValue,
    VerticalScrollbarID: vertical,
    HorizontalScrollbarID: horizontal,
})

安装

将组件源码复制到自己的项目，直接修改。

go run ./cmd/viva add --out ./components/local code-diff

行对齐的源码对比#

CodeDiff 根据调用方持有的 CodeDiffResult 绘制两栏并同步滚动。左栏是固定基准版本，右栏连接与 CodeEditor、Textarea 相同的平台文本编辑器。

用 DiffCodeLines 生成新增、删除与修改行，不改变任一源码字符串。
长行共享横向偏移，两栏共享纵向偏移。
新增和删除行除背景色外，还提供符号与行号提示。

编辑与滚动#

右栏保留基于字节偏移的选区、组合输入与插入点位置，左栏保持只读对齐。

鼠标滚轮和滚动条拖动会更新共享偏移。
只读预览不向平台暴露编辑器。
应用应合并高频重算并丢弃较旧文本产生的结果。

键盘操作

Tab 在控件间移动；Ctrl/⌘ K 搜索组件。进入预览后，键盘事件由 Go 运行时处理。