JSON-Viewer（JSON可视化工具）
痛点分析
{
"state": "Done",
"createdDate": "Jan 6, 2023 5:23:36 PM",
"finishedDate": "Jan 6, 2023 5:23:36 PM",
"result": "{\"com.syscxp.header.hybd.cpe.APIQueryCpeArchitectureReply\":{\"inventories\":[{\"uuid\":\"vcpe-x86\",\"createDate\":\"Sep 20, 2022 5:41:41 PM\",\"lastOpDate\":\"Sep 20, 2022 5:41:41 PM\"},{\"uuid\":\"arm\",\"createDate\":\"Aug 25, 2022 6:57:14 PM\",\"lastOpDate\":\"Aug 25, 2022 6:57:14 PM\"},{\"uuid\":\"x86\",\"createDate\":\"Aug 25, 2022 6:57:14 PM\",\"lastOpDate\":\"Aug 25, 2022 6:57:14 PM\"}],\"total\":3,\"success\":true}}"
}
最近再与后端对接口过程中，后端返回的数据如上，主要数据在result对应的字符串中， 每次查看结构需要借助《FeHelper：JSON格式化》工具， 复制粘贴格式化两次才能看到想看的，这显然不太优雅！
需求分析
- 可以自定义经常要格式化的字段名，复制粘贴一次搞定
- 再搞个可视化数据结构查看，让网站看起来更酷酷的
- 拓展JSON相关功能：编辑、导入、导出、清空
- 拓展可视化相关功能：搜索、保存图片、放大缩小
技术选型：Vue 3 + Vite +TypeScript + Antv/G6 + Pinia +vue3-json-editor
技术实现
撸起袖子开干！
- 最后实现发现节点间距根据不同数据计算不好实现，实现了性能也不好， 干脆把这个配置开放给用户吧，就整了画布数据布局配置调整，用户可以根据自己数据选择布局和配置节点间距
- 最后发现既然要酷一点那暗黑主题切换不能少，然后就新增了3款骚气的主题！
实现功能：
- JSON编辑生成对应视图
- 布局配置调整更新视图
- 节点收起、展开
- 导入、导出JSON
- 指定额外解析字段
- 4种主题随意切换
- 视图节点聚焦搜索
- 视图导出为图片
- 点击节点查看节点详情
- 画布操作（放大/缩小/居中/全屏/退出全屏） (内含Github自动部署工作流）
预览地址：
Bilibili演示：Bilibili演示视频地址
Github Pages
Gitee Pages
源码分享
Github
Gitee
预览截图
灵感来源
JSON Crack: 一个丝滑且大气的React+TypeScript项目JSON可视化项目。
