719681a366a4c9c96dba7ead4e941591eb146b86
DiffLens
精美酷炫的开源文本差异化对比桌面应用 Text Diff Desktop App — built with TypeScript + React + Electron
DiffLens 是一款跨平台桌面文本对比工具,帮助你快速定位两份文件之间的所有差异。它采用暗色科幻视觉风格,提供行级 + 词级内联高亮的双栏并排视图与流畅的差异导航,操作简单、开箱即用。
✨ 特性
- 双栏并排对比:左(原文件)右(对比文件)对照,行号清晰对齐
- 行级 + 词级双重高亮:整行增删一目了然,同一行内的细微改动也能被精确定位
- 文件夹对比:选择两个文件夹递归对比全部文件——相同 / 语义同 / 不同 / 仅左 / 仅右 / 无法读取六种状态、字节级内容判定(超大文件采样近似判定并标注)、大小一致条目并发比对(大目录扫描不逐文件等待)、扫描进度反馈(比对阶段实时显示"已比对 N / M")、子目录树形展示(目录聚合子树状态,点击折叠展开)、文件名搜索与状态精确过滤(点击统计徽章)与扩展名多选过滤、忽略规则(gitignore 简化子集含高级 glob:
node_modules/目录整树剪枝、*.log通配、lo?g单字符、*.[ch]字符类(范围与取反)、src/temp多段路径、build/**/cache跨段、!keep.log否定规则(最后匹配优先);无效规则实时提示不再静默丢弃;规则随偏好记忆)、双击目录行聚合对比(差异文件导航限定在该子树内批量审查)、单文件被锁/权限不足自动降级标记不中断整体扫描;双击任一文件进入单文件对比,差异文件导航(Alt+↓/Alt+↑),一键返回文件夹列表;增量重扫——重新扫描只对变更文件重判(size+mtime 指纹一致的条目零 IO 沿用判定,语义判等开关切换零 IO 纯内存组合,"重新扫描"按钮不重选目录直接刷新);增量缓存跨会话持久化(扫描缓存落盘 userData,重启后同目录对自动增量重扫) - 快照基线与内容级对照:把当前文件夹对比结果保存为快照(JSON 文件,可选携带差异条目的双侧文件内容,保存期间批量读取实时显示"已读取 N / M"进度,保存中防重复触发),日后加载与最新结果对照——已修复 / 新增差异 / 新文件 / 已移除 / 仍有差异 / 保持一致六类状态变迁统计与条目标注,点击徽章按变迁过滤,对照结果随重扫自动刷新;对照模式双击含基线内容的条目进入"快照基线 vs 当前文件"的单文件内容对比(完整复用比较选项/字符级/搜索/导出能力,一眼看穿"从什么变成了什么");内容体积双限防膨胀(单文件 2MB、总量 32MB 超限降级为纯状态快照,保存永不失败);大快照专用读取通道(加载上限 128MB,通用文件的 10MB 上限不拦截自家保存的大快照,且不污染文件对话框的目录记忆);对照模式导出的文件夹报告附逐条变迁对照表(变迁 / 当前状态 / 基线状态 / 大小,三格式);快照目录对匹配做路径归一化(Windows 同目录异写不误拦),截断的扫描结果禁止保存快照、当前结果截断时也禁止加载对照(双侧防对照误报),快照与当前语义判等口径不一致时加载提示甄别,v1 旧快照兼容加载(纯状态对照)
- 语义判等:换行符(CRLF/LF)、缩进、空行、排版重排差异的文本文件计为“语义同”,不计入差异——消除跨平台/编辑器换行符误报;可开关(默认开启),判定在后台 worker 解码完成
- 文件夹报告导出:对比结果导出为 HTML / 纯文本 / Markdown 三格式(全量条目 + 判定口径 + 统计概览)
- 虚拟滚动:仅渲染可见行,数万行大文件滚动依然流畅
- 后台差异计算:大文件的差异计算在 Worker 线程后台进行(去抖合并输入、worker 按需创建、过期任务丢弃;重输入判定兼顾行数与字符级字符量,少行大文件同样后台计算),界面始终保持流畅响应
- 后台文件解码:大文件解码与编码探测在主进程 worker 线程后台进行(GBK 大文件解码不再阻塞界面响应),解码失败自动回退同步路径
- 差异导航:一键“上一处 / 下一处”在差异之间跳跃,支持 F7 / Shift+F7 快捷键
- 视图内文本搜索:单文件对比视图内搜索任意内容——Ctrl+F 聚焦、大小写不敏感即时命中计数、Enter / Shift+Enter 在命中行间循环跳转(虚拟滚动下精确定位)、行内命中子串高亮、Esc 清空;搜索基于全量行,与“仅看差异”视图过滤互不影响
- 仅看差异:一键过滤未更改行,连续相同内容折叠为提示行,专注浏览差异
- 交换左右侧:一键互换两侧内容与视角
- 智能编码识别:自动探测 UTF-8 / UTF-16 / GBK(含 BOM),中文文档不乱码
- 忽略选项:支持“忽略行首尾空白”“忽略大小写”“忽略空行”“忽略所有空白”(空格/制表符/全角空格不参与判等,仅比较实际文字),适配弱差异场景
- 字符级对比:空白与换行结构全部不参与判等,两侧归一化为字符流 diff——跨行重组(如排版重排、换行位置变化)也能判等;字符差异精确回映射到行内高亮;相同内容自动锚定跳过计算(行锚定 + 变更组分块),大文件不再整篇受限;变更组逐组预算制(预算随输入规模自适应)——单组过大 / 编辑距离超限 / 预算耗尽的块仅按行级配对输出(部分降级,界面与报告标注),不再牵连其余块;预算下限与历史固定值一致(小输入行为不变),大输入按总组流比例放宽(上限封顶,最坏总耗时仍有界);全部块降级时自动降级行级对比并提示(编辑距离封顶,不会卡死);重算期间保留旧结果撑住滚动位置,切换选项不再回弹到顶部
- 选项联动透明:开启字符级对比时,被包含的空白选项灰显勾选并标注“已包含”(点击有解释提示,关闭字符级即恢复独立设置);差异过大自动降级时开关旁标注“已降级”,状态一目了然
- 手动粘贴对比:无需文件,直接粘贴两侧文本即可开始对比
- 偏好记忆:比较选项与"仅看差异"开关自动保存,窗口尺寸/位置与上次打开文件目录一并记忆,下次启动自动恢复(损坏数据自动回退默认)
- 防误触清空:清空前二次确认(提示窗口内再次点击才执行),粘贴输入的手动文本不因误点丢失
- 原生暗色适配:系统标题栏等原生控件跟随应用暗色科幻主题
- 大文件防护:超过 10MB 的文件自动拦截并提示;行数过多时给出耗时预警;超长单行自动跳过词级高亮,避免卡顿
- 二进制文件预警:疑似二进制内容给出乱码提示,避免误读为差异
- 渲染异常兜底:任何组件渲染错误由顶层 ErrorBoundary 捕获,显示可复制的错误信息与一键重载按钮,不白屏死机
- 差异统计徽章:实时统计新增 / 删除 / 修改行数
- 导出一键报告:单文件与文件夹对比均可导出 HTML / 纯文本 / Markdown 三种格式。单文件报告始终包含全量行,HTML 为"给人看"设计:一句话结论、文件卡片、统计概览、图例说明、差异分块目录导航,相同内容段自动折叠(点击展开零丢失),并支持打印与窄屏;文件夹报告含判定口径说明与全量条目清单
- 拖拽与按钮双入口:支持文件拖拽导入(E2E 覆盖真实拖放链路),也可通过界面按钮选择文件或粘贴文本
- 右键菜单键盘导航:行级右键菜单支持 ↑/↓ 移动高亮(跳过禁用项、首尾循环)、Enter 触发、Esc 关闭,鼠标悬停与键盘高亮同步
- 滚动联动:左右两个面板滚动位置自动同步
- 性能基准 E2E:5 万行差异计算与 300KB GBK 解码带耗时上限断言(真实 Electron 链路),性能回归在发布前即可拦截
- 关于弹框:header 右侧 ⓘ 图标一键查看应用介绍、版本号、作者(thzxx)、联系邮箱、组织(MetonaTeam)、开源地址与许可证;邮箱/地址点击复制到剪贴板
🧰 技术栈
| 层次 | 技术 |
|---|---|
| 语言 | TypeScript |
| UI | React 18 |
| 桌面壳 | Electron |
| 构建 | electron-vite (Vite 5) |
| 打包 | electron-builder |
| Diff 引擎 | jsdiff(行级 LCS + 词级词法 diff + 字符级 diff 与行回映射) |
| 后台计算 | Web Worker(Vite 内联打包) |
| 编码 | iconv-lite |
🚀 快速开始
# 安装依赖
npm install
# 启动开发模式(打开 Electron 窗口)
npm run dev
# 类型检查
npm run typecheck
# 运行测试(Vitest 单元 + 组件测试)
npm test
# 运行 E2E 验收(先构建再对产物启动真实 Electron;发布前必跑)
npm run test:e2e
# 生产构建
npm run build
打包安装包
npm run build:win # Windows NSIS 安装包(需在 Windows 上执行)
npm run build:mac # macOS DMG
npm run build:linux # Linux AppImage / deb
🏗️ 架构
采用 Electron 经典三进程模型:
src/
├── main/ # 主进程:窗口、菜单、文件/文件夹读取与编码探测(解码 worker 化)、批量读取与进度推送 IPC
├── preload/ # 预加载:contextBridge 安全桥,仅暴露最小 API
├── shared/ # 两进程共用的纯逻辑源码(忽略规则匹配器:主进程扫描剪枝 + 渲染端无效规则提示)
└── renderer/ # 渲染进程:React 界面与全部 diff 逻辑
├── diff/ # diff 引擎(行级 + 词级高亮、字符级分块、报告与快照纯逻辑)
├── hooks/ # 状态 hooks(diff 计算调度、下拉关闭)
├── components/ # 界面组件(DiffView / FolderView / Toolbar 等)
└── styles/ # 全局主题样式
e2e/ # Playwright E2E(对构建产物启动真实 Electron 验收主链路)
安全设计:渲染进程通过 contextBridge 隔离,不直接接触 Node 能力;文件读取等系统操作统一收敛在主进程,仅经 IPC 白名单暴露。
📦 发布
- 作者:thzxx
- 组织:MetonaTeam
- 许可证:MIT License(见 LICENSE)
- 版本:0.10.2
📝 License
MIT © 2026 thzxx 团队(MetonaTeam)