# JSON 比对工具



## 📋 项目简介

JSON 比对工具是一款专为开发者设计的 uTools 插件，提供强大的 JSON 格式化、比对和分析功能。支持实时差异检测、智能对齐、树形视图等高级特性，让 JSON 数据处理变得简单高效。

## ✨ 功能特性

### 🎯 核心功能

- **📝 双面板编辑器** - 左右对比，直观清晰
- **🔍 实时差异检测** - 输入即比对，差异立即显示
- **🎨 语法高亮** - JSON 格式美化，阅读更轻松
- **📐 智能对齐** - 相同 key 自动对齐，缺失项显示占位
- **🌳 树形视图** - 折叠展开，层次结构一目了然
- **🔄 自动格式化** - 粘贴即格式化，按 key 排序

### 🛠️ 高级特性

- **📁 文件导入** - 支持拖拽和选择文件导入
- **🔍 搜索定位** - 快速搜索键名和值，点击跳转
- **🎯 差异跳转** - 点击差异项直接跳转到对应位置
- **🌙 主题切换** - 深色/浅色模式，护眼舒适
- **⚡ 快捷键** - 全面的键盘快捷键支持
- **🔄 同步滚动** - 左右面板滚动同步

### 🎨 用户体验

- **📱 响应式设计** - 适配不同屏幕尺寸
- **🎭 动画效果** - 平滑的过渡和反馈动画
- **💾 状态保存** - 主题设置自动保存
- **🚀 高性能** - 优化算法，处理大文件流畅

## 📦 安装说明

### 方式一：uTools 插件中心安装

1. 打开 uTools
2. 在插件中心搜索 "JSON比对工具"
3. 点击安装即可

### 方式二：手动安装

1. 下载本项目文件
2. 在 uTools 中选择 "开发者" → "安装本地插件"
3. 选择项目根目录即可

### 系统要求

- **uTools** 版本 ≥ 2.0.0
- **操作系统** Windows / macOS / Linux
- **浏览器内核** Chromium 70+

## 🚀 使用方法

### 基础使用

1. **启动插件**
- 在 uTools 中输入关键词：`JSON比对`、`json compare`、`JSON工具`
- 或使用快捷键呼出 uTools 后搜索

2. **输入 JSON 数据**
- 在左右两个编辑器中输入或粘贴 JSON 数据
- 支持拖拽 `.json` 或 `.txt` 文件导入
- 粘贴时自动格式化并排序

3. **查看比对结果**
- 输入后自动进行实时比对
- 差异行会用红色标识
- 底部显示详细的差异统计

### 高级功能

#### 📁 文件导入
```
支持格式：.json, .txt
导入方式：
- 点击 "📁 导入文件" 按钮选择文件
- 直接拖拽文件到编辑区域
- 支持同时导入多个文件（分别加载到左右两侧）
```

#### 🌳 树形视图
```
切换方式：点击 "🌳 树形视图" 按钮
功能特点：
- 可折叠/展开的树形结构
- 同步滚动支持
- 差异项高亮显示
- 智能 key 对齐
```

#### 🔍 搜索功能
```
搜索选项：
- 区分大小写
- 搜索键名
- 搜索值
- 点击结果跳转到对应行
```

#### 🎯 差异跳转
```
跳转规则：
- 删除项：主要跳转左侧，两侧都高亮
- 新增项：主要跳转右侧，两侧都高亮
- 修改项：两侧都高亮，优先跳转左侧
- 支持文本和树形视图模式
```

## ⌨️ 快捷键

| 快捷键 | 功能 | 说明 |
|--------|------|------|
| `Ctrl + L` | 格式化 | 格式化并排序 JSON |
| `Ctrl + Enter` | 比对 | 手动触发比对 |
| `Ctrl + F` | 搜索 | 打开搜索面板 |
| `Ctrl + D` | 清空 | 清空所有内容 |
| `ESC` | 关闭面板 | 关闭搜索/比对面板 |

## 📸 功能截图

### 文本编辑模式
- 双面板编辑器，实时差异高亮
- 行号显示，差异行红色标识
- 底部差异统计面板

### 树形视图模式
- 层次化结构展示
- 可折叠/展开节点
- 差异项彩色标识
- 同步滚动支持

### 搜索功能
- 快速定位键名和值
- 支持正则表达式
- 点击结果直接跳转

### 主题切换
- 浅色模式：清爽明亮
- 深色模式：护眼舒适
- 一键切换，设置保存

## 🔧 技术实现

### 核心算法

- **差异检测算法** - 深度递归比较 JSON 结构
- **智能对齐算法** - 基于 key 的结构对齐
- **高效渲染** - 虚拟滚动和增量更新
- **内存优化** - 防抖机制和事件管理

### 技术栈

- **前端框架** 原生 JavaScript
- **样式系统** CSS3 + CSS Variables
- **构建工具** 无需构建，直接运行
- **兼容性** 现代浏览器 + uTools 环境

## 📁 项目结构

```
jsonCompare/
├── index.html # 主界面文件
├── script.js # 核心逻辑脚本
├── style.css # 样式文件
├── plugin.json # uTools 插件配置
├── preload.js # 插件预加载脚本
├── logo.png # 插件图标
├── test.html # 浏览器测试页面
├── ROADMAP.md # 功能路线图
└── README.md # 项目说明文档
```

## 🎯 使用场景

### 开发调试
- **API 响应比对** - 比较不同版本的 API 返回数据
- **配置文件检查** - 验证配置文件的差异
- **数据迁移验证** - 确保数据迁移的准确性

### 数据分析
- **JSON 结构分析** - 理解复杂 JSON 的层次结构
- **数据完整性检查** - 发现缺失或多余的字段
- **格式标准化** - 统一 JSON 格式和排序

### 团队协作
- **代码审查** - 比较 JSON 配置的变更
- **文档维护** - 跟踪 JSON Schema 的演进
- **质量保证** - 确保数据格式的一致性

## 🔄 更新日志

### v1.0.0 (2024-01-20)

#### ✨ 新功能
- 🎉 首次发布
- 📝 双面板 JSON 编辑器
- 🔍 实时差异检测和高亮
- 🎨 语法高亮和格式化
- 📐 智能结构对齐
- 🌳 树形视图模式
- 📁 文件拖拽导入
- 🔍 搜索和跳转功能
- 🌙 深色/浅色主题切换
- ⌨️ 完整的快捷键支持

#### 🛠️ 技术特性
- ⚡ 高性能差异算法
- 🔄 同步滚动机制
- 💾 设置持久化保存
- 📱 响应式设计
- 🎭 流畅的动画效果

## 🤝 贡献指南

我们欢迎所有形式的贡献！

### 报告问题
- 在 [Issues](https://github.com/your-repo/json-compare/issues) 中报告 bug
- 提供详细的复现步骤和环境信息

### 功能建议
- 查看 [ROADMAP.md](ROADMAP.md) 了解计划中的功能
- 在 Issues 中提出新的功能建议

### 代码贡献
1. Fork 本仓库
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 🙏 致谢

- 感谢 [uTools](https://u.tools/) 提供的优秀插件平台
- 感谢所有贡献者和用户的支持
- 感谢开源社区的无私分享

## 📞 联系我们

- **项目主页** [GitHub Repository](https://github.com/your-repo/json-compare)
- **问题反馈** [Issues](https://github.com/your-repo/json-compare/issues)
- **功能建议** [Discussions](https://github.com/your-repo/json-compare/discussions)

---