# json-diff

**Repository Path**: kaysenliang/json-diff

## Basic Information

- **Project Name**: json-diff
- **Description**: Monaco Editor JSON Diff Pro
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-14
- **Last Updated**: 2026-01-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JSON Diff Pro

一个基于 Monaco Editor 的高级在线 JSON 数据对比工具，提供 VS Code 级别的编辑体验和强大的差异对比功能。

## ✨ 核心特性

- **🚀 Monaco Editor 内核**：集成 VS Code 的核心编辑器，支持语法高亮、代码折叠、智能提示和错误检查。
- **� 单/双栏无缝切换**：
  - **默认单栏模式**：专注编辑、格式化和查看单个 JSON 文件。
  - **双栏对比模式**：一键开启 Side-by-side Diff，实时高亮显示差异（新增/删除/修改）。
- **🎨 现代化 UI**：
  - **全屏沉浸式布局**：最大化工作区域。
  - **独立操作栏**：工具按钮紧贴编辑器，视觉对齐，操作便捷。
  - **深色模式**：完美适配 Dark/Light 主题。
  - **交互优化**：使用 Toast 提示替代原生弹窗，体验更流畅。
- **🛠️ 智能工具箱**：
  - **智能格式化**：自动递归排序 JSON 键 (Sort Keys)，确保无序 JSON 也能准确对比。
  - **文件导入/导出**：
    - 📂 **导入**：支持点击按钮上传或直接**拖拽**文件进入编辑器。
    - 💾 **下载**：一键将当前编辑器内容保存为本地 JSON 文件。
  - **容错解析**：自动移除 JSON 中的注释 (`//` 或 `/* */`)，支持非标准 JSON。
- **⚡ 高性能**：
  - 纯静态页面，无后端依赖，本地运算确保数据安全。
  - 使用国内镜像源 (npmmirror) 加速资源加载。

## 🖥️ 快速开始

### 方法一：直接运行
由于项目使用了 CDN 资源，您只需下载项目后直接双击 `index.html` 即可在浏览器中运行（需联网加载 Monaco Editor）。

### 方法二：本地服务器
为了获得最佳体验，建议使用本地服务器运行：

```bash
# Python 3
python3 -m http.server 8000

# Node.js
npx http-server
```
然后访问 `http://localhost:8000`

## 📦 技术栈

- **Core**: HTML5, CSS3, ES6+
- **Editor**: [Monaco Editor](https://microsoft.github.io/monaco-editor/) (via `registry.npmmirror.com`)
- **Style**: Flexbox, CSS Variables (Theming)
- **Deployment**: 纯静态部署 (Gitee Pages / GitHub Pages / Vercel)

## 📝 使用指南

1. **编辑模式**：
   - 默认进入单栏模式，可作为高级 JSON 编辑器使用。
   - 输入或粘贴 JSON，支持实时语法检查。
2. **开启对比**：
   - 点击顶部 **「开启对比」** 按钮进入双栏模式。
   - 左侧为原始版本 (Original)，右侧为修改版本 (Modified)。
3. **文件操作**：
   - **导入**：点击 � 图标或拖拽文件。
   - **下载**：点击 ⬇️ 图标保存文件。
   - **格式化**：点击 ✨ 图标美化并排序代码。
4. **个性化**：
   - 点击顶部 🌙/☀️ 图标切换日夜间模式。
   - 在下拉菜单中调整缩进大小 (2/4 空格)。

## 🤝 贡献

欢迎提交 Issue 或 Pull Request 来改进这个工具！

---
© 2024 JSON Diff Pro