工具2026-04-227 min
關於正文
這篇文章按完整正文來整理,從背景、實作到用法都可以串起來讀。
正文
为什么把 JSON 工具做成工作台
01JSON 工具最常见的使用场景,是把 API 返回、配置文件、日志片段或者抓到的对象先整理清楚。很多时候你不是想“写 JSON”,而是想“看懂 JSON”。
所以我把它做成一个多模式工作台:输入、修复、格式化、对比、转换和提取都放在同一页里。
參考檔案src/app/tools/json/json-client.tsxsrc/app/tools/json/page.tsx
为什么要拆成几个功能块
02JSON 的处理其实是多个不同任务的组合:有时你要修坏 JSON,有时要格式化,有时要跑 jq,有时要生成 schema。把这些任务硬塞到一个按钮里,用户只会更乱。
所以我把它拆成编辑器、修复、转换、比较、校验、提取几个区块,用户可以按自己的节奏逐步推进。
參考檔案src/app/tools/json/components/FormatConverter.tsxsrc/app/tools/json/components/JsonDiffPanel.tsxsrc/app/tools/json/components/SchemaValidator.tsx
实现和用法
03实现上我把 JSON 修复、格式转换、jq 查询、schema 校验和字段提取都拆成了独立 hook / component。这样每个功能可以单独测试,也方便以后继续加新模式。
用法上最简单的流程是:粘贴 JSON,先看校验状态,再决定是格式化、修复、转 YAML/TOML,还是直接跑 jq。需要对比时再切到 diff,需要抽字段时再进提取器。
參考檔案src/app/tools/json/hooks/useFormatConvert.tssrc/app/tools/json/hooks/useJqQuery.tssrc/app/tools/json/hooks/useJsonRepair.tssrc/app/tools/json/hooks/useJsonStorage.ts