2026-08-17 16:19:31 +08:00

DiffLens

精美酷炫的开源文本差异化对比桌面应用 Text Diff Desktop App — built with TypeScript + React + Electron

DiffLens 是一款跨平台桌面文本对比工具,帮助你快速定位两份文件之间的所有差异。它采用暗色科幻视觉风格,提供行级 + 词级内联高亮的双栏并排视图与流畅的差异导航,操作简单、开箱即用。


特性

  • 双栏并排对比:左(原文件)右(对比文件)对照,行号清晰对齐
  • 行级 + 词级双重高亮:整行增删一目了然,同一行内的细微改动也能被精确定位
  • 虚拟滚动:仅渲染可见行,数万行大文件滚动依然流畅
  • 后台差异计算:大文件的差异计算在 Worker 线程后台进行(去抖合并输入、worker 按需创建、过期任务丢弃;重输入判定兼顾行数与字符级字符量,少行大文件同样后台计算),界面始终保持流畅响应
  • 差异导航:一键“上一处 / 下一处”在差异之间跳跃,支持 F7 / Shift+F7 快捷键
  • 仅看差异:一键过滤未更改行,连续相同内容折叠为提示行,专注浏览差异
  • 交换左右侧:一键互换两侧内容与视角
  • 智能编码识别:自动探测 UTF-8 / UTF-16 / GBK(含 BOM),中文文档不乱码
  • 忽略选项:支持“忽略行首尾空白”“忽略大小写”“忽略空行”“忽略所有空白”(空格/制表符/全角空格不参与判等,仅比较实际文字),适配弱差异场景
  • 字符级对比:空白与换行结构全部不参与判等,两侧归一化为字符流 diff——跨行重组(如排版重排、换行位置变化)也能判等;字符差异精确回映射到行内高亮;内容超 3 万字符或差异过大时自动降级行级对比并提示(编辑距离封顶,最坏约 2 秒出结果,不会卡死)
  • 选项联动透明:开启字符级对比时,被包含的空白选项灰显勾选并标注“已包含”(点击有解释提示,关闭字符级即恢复独立设置);内容或差异过大自动降级时开关旁标注“已降级”,状态一目了然
  • 手动粘贴对比:无需文件,直接粘贴两侧文本即可开始对比
  • 偏好记忆:比较选项与"仅看差异"开关自动保存,窗口尺寸/位置与上次打开文件目录一并记忆,下次启动自动恢复(损坏数据自动回退默认)
  • 防误触清空:清空前二次确认(提示窗口内再次点击才执行),粘贴输入的手动文本不因误点丢失
  • 原生暗色适配:系统标题栏等原生控件跟随应用暗色科幻主题
  • 大文件防护:超过 10MB 的文件自动拦截并提示;行数过多时给出耗时预警;超长单行自动跳过词级高亮,避免卡顿
  • 二进制文件预警:疑似二进制内容给出乱码提示,避免误读为差异
  • 差异统计徽章:实时统计新增 / 删除 / 修改行数
  • 导出一键报告:将对比结果导出为 HTML / 纯文本 / Markdown 三种格式(始终包含全量行)。HTML 报告为"给人看"设计:一句话结论、文件卡片、统计概览、图例说明、差异分块目录导航,相同内容段自动折叠(点击展开零丢失),并支持打印与窄屏
  • 拖拽与按钮双入口:支持文件拖拽导入,也可通过界面按钮选择文件或粘贴文本
  • 滚动联动:左右两个面板滚动位置自动同步

🧰 技术栈

层次 技术
语言 TypeScript
UI React 18
桌面壳 Electron
构建 electron-vite (Vite 5)
打包 electron-builder
Diff 引擎 jsdiff(行级 LCS + 词级词法 diff + 字符级 diff 与行回映射)
后台计算 Web WorkerVite 内联打包)
编码 iconv-lite

🚀 快速开始

# 安装依赖
npm install

# 启动开发模式(打开 Electron 窗口)
npm run dev

# 类型检查
npm run typecheck

# 运行测试(Vitest 单元 + 组件测试)
npm test

# 生产构建
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/     # 主进程:窗口、菜单、文件读取与编码探测、IPC
├── preload/  # 预加载:contextBridge 安全桥,仅暴露最小 API
└── renderer/ # 渲染进程:React 界面与全部 diff 逻辑
    ├── diff/         # diff 引擎(行级 + 词级高亮、Worker 后台计算)
    ├── hooks/        # 状态 hooks(diff 计算调度、下拉关闭)
    ├── components/   # 界面组件(DiffView / Toolbar 等)
    └── styles/       # 全局主题样式

安全设计:渲染进程通过 contextBridge 隔离,不直接接触 Node 能力;文件读取等系统操作统一收敛在主进程,仅经 IPC 白名单暴露。


📦 发布

  • 作者:thzxx
  • 组织:MetonaTeam
  • 许可证:MIT License(见 LICENSE
  • 版本:0.5.5

📝 License

MIT © 2026 thzxx 团队(MetonaTeam

S
Description
DiffLens - 精美酷炫的文本对比桌面应用 (Text Diff Desktop App built with TypeScript + React + Electron)
Readme MIT
7.2 MiB
2026-08-20 13:55:49 +08:00
Languages
TypeScript 96.2%
CSS 3.7%