Jsonify - JSON 格式化工具

一个轻量级的 JSON 格式化与可视化工具，支持递归解析多层嵌套的 JSON 字符串，并提供文件批量处理能力。

功能特性

• 智能解析：自动递归解析嵌套的 JSON 字符串（支持最多 10 层深度）
• 自动修复：自动修复常见 JSON 格式问题（缺少引号、单引号、末尾逗号等）
• 精确错误定位：解析失败时显示具体的行号和列号，快速定位问题
• 可视化展示：以色彩高亮的树形视图展示不同数据类型
• 关键字搜索：支持按键名或值的关键字搜索，快速定位感兴趣的数据
• 路径筛选：支持路径表达式（如 data.items[0].name）精确提取节点
• URL 加载：直接输入 URL 远程加载 JSON 数据
• 暗色模式：支持亮色/暗色主题切换，自动跟随系统偏好
• 文件批量处理：支持上传 CSV / Excel 文件，对指定列进行 JSON 格式化
• 一键导出：格式化结果可导出为 Excel 文件

技术栈

• React 18
• Vite
• Tailwind CSS
• Radix UI / shadcn/ui
• PapaParse (CSV 解析)
• SheetJS (Excel 读写)

快速开始

环境要求

• Node.js >= 18

安装依赖

npm install

启动开发服务器

npm run dev

应用默认运行在 http://localhost:8080。

构建生产版本

npm run build

构建产物输出到 dist/ 目录，可部署到任意静态资源服务器（Nginx、Vercel、Netlify、GitHub Pages 等）。

预览生产构建

npm run preview

部署

本项目构建后为纯静态文件，可以部署到任何支持静态文件托管的平台：

• Nginx：将 dist/ 目录下的文件部署到 Nginx 的 web 目录
• Vercel / Netlify：直接连接 Git 仓库，自动构建部署
• GitHub Pages：使用 GitHub Actions 自动部署
• Docker：使用 Nginx 镜像托管静态文件

项目结构

src/
├── components/
│   ├── JsonFormatter.jsx    # JSON 格式化主组件
│   ├── JsonPathFilter.jsx   # 关键字搜索与路径筛选组件
│   ├── UrlLoader.jsx        # URL 远程加载组件
│   ├── ThemeToggle.jsx      # 暗色模式切换组件
│   ├── ColumnFormatter.jsx  # 文件列格式化组件
│   ├── FileUploader.jsx     # 文件上传组件
│   └── ui/                  # shadcn/ui 基础组件
├── pages/
│   └── Index.jsx            # 主页面
├── lib/
│   ├── json-parser.js       # JSON 解析核心逻辑（纯函数）
│   └── utils.js             # 通用工具函数
├── App.jsx                  # 应用入口
├── main.jsx                 # 渲染入口
└── index.css                # 全局样式

License

MIT