JSON 格式化
概述
JSON 格式化工具是一个专注的 JSON 数据格式化和校验工具。当你面对一大段压缩成单行的 JSON 时，它能一键展开成结构清晰的层级树；当你需要快速验证一段 JSON 是否合法时，它会实时给出反馈。它最大的特色是可控展开层级——你可以精确控制折叠深度，让复杂数据结构一目了然，而不是无差别地全部展开。
核心功能
- 实时格式化和校验：输入即格式化，同时自动校验 JSON 合法性，错误位置一目了然
- 可控展开层级：通过滑块或数字输入精确控制展开深度（1–10 级），深层嵌套自动折叠为紧凑格式
- 剪贴板智能监听：开启后自动检测剪贴板中的 JSON 内容，一键填入
- 文件拖拽导入：支持拖拽
.json或.txt文件到输入面板，自动读取内容 - 一键复制与发送：格式化结果一键复制到剪贴板，或直接发送到 AI 聊天会话
快速上手
首次使用 4 步走
第一步：打开工具
在左侧工具列表中找到 JSON 格式化，点击进入。你会看到一个"左输入 + 右输出"的双面板界面，顶部是工具栏。
TODO: 截图 - 工具整体界面，标注输入面板、输出面板和工具栏
第二步：输入 JSON
有三种方式把你的 JSON 弄进去：
- 直接输入：在左侧输入面板中直接键入或粘贴 JSON 文本
- 从剪贴板粘贴：点击工具栏的 粘贴 按钮，自动读取剪贴板内容
- 拖拽文件：将
.json或.txt文件拖放到输入面板区域
内容输入后，工具会自动开始格式化和校验，输出面板会实时更新。
TODO: 截图 - 输入面板粘贴/输入 JSON，输出面板展示格式化结果
第三步：调整展开层级
输入面板上方的工具栏中间有一个展开层级滑块（默认 3 级），拖动滑块或直接在右侧数字框中输入数值来控制 JSON 的展开深度：
- 值较小（如 1）：只展开最外层，深层内容紧凑显示，适合快速浏览整体结构
- 值较大（如 5–10）：展开更多层级，适合查看深层细节
TODO: 截图 - 标注展开层级滑块和数字输入框，展示不同层级下的格式化效果对比
第四步：使用结果
右侧输出面板中的格式化结果，你可以：
- 复制：点击工具栏的 复制 按钮，一键复制到剪贴板
- 发送到聊天：点击 发送到聊天，结果直接进入 AI 聊天会话
- 清空重来：点击 清空 按钮重置输入和输出
TODO: 截图 - 标注工具栏的复制、发送到聊天、清空按钮
功能详解
工具栏
工具栏固定在面板顶部，分为左、中、右三个区域。
左侧操作区
| 操作 | 说明 |
|---|---|
| 粘贴 | 从系统剪贴板读取内容并填入输入面板，自动触发格式化 |
| 复制 | 将输出面板中的格式化结果复制到系统剪贴板 |
| 发送到聊天 | 将格式化后的 JSON 发送到 AI 聊天会话，方便后续基于它继续对话 |
| 监听关 / 监听中 | 切换剪贴板智能监听功能（见下方详细介绍） |
TODO: 截图 - 工具栏左侧区域，标注四个操作按钮
中央展开层级控制
通过 滑块 或 数字输入框 控制 JSON 的展开深度，范围 1–10。两者联动——拖动滑块时数字自动更新，输入数字时滑块同步移动。调整后输出面板会立即重新格式化。
- 1–2：适合超深层嵌套的 JSON，只看顶层的结构骨架
- 3–4：默认范围，兼顾结构与细节的平衡
- 5–10：深层展开，适合需要查看全部细节的场景
TODO: 截图 - 工具栏中央，同时标注滑块和数字输入框
右侧操作区
| 操作 | 说明 |
|---|---|
| 清空 | 一键清空输入面板和输出面板的所有内容 |
输入面板（左栏）
左侧的代码编辑器区域，使用 RichCodeEditor 组件，支持 JSON 语法高亮。你可以：
- 直接输入或粘贴 JSON 文本
- 拖拽文件到输入区域——文件拖入时会有蓝色虚线边框提示，松开后自动读取内容
- 查看字符数：面板顶部的标题栏右侧会实时显示当前输入的字符数量
TIP
支持拖拽的格式为 .json 和 .txt 文件。其他格式文件拖入会被拒绝并提示"仅支持 JSON 或文本文件"。
TODO: 截图 - 拖拽文件到输入面板时的蓝色虚线边框提示效果
输出面板（右栏）
右侧展示格式化后的 JSON 内容。输出面板是只读的，不可编辑。面板顶部的标题会根据当前状态动态变化：
- 格式化输出 - 有效 JSON：当输入为合法 JSON 时显示
- 格式化输出 - 错误：当输入为非法 JSON 时显示（同时面板中会展示红色错误信息）
TODO: 截图 - 有效 JSON 时的输出面板，标注标题"格式化输出 - 有效 JSON"
错误提示
当输入的 JSON 不合法（如缺少逗号、括号不匹配等）时，输出面板会显示红色错误提示框，包含具体的错误信息，帮助你快速定位问题：
JSON 解析错误: Unexpected token '...' at position ...同时输出面板标题变为 格式化输出 - 错误。
TODO: 截图 - 非法 JSON 时的错误提示框，标注红色边框的错误信息
分割线拖拽
输入面板和输出面板之间有一条垂直的分割线。你可以拖拽分割线左右移动，调整两个面板的宽度比例：
- 将分割线拖向左侧：输入面板变窄，输出面板变宽
- 将分割线拖向右侧：输入面板变宽，输出面板变窄
- 每个面板的最小宽度为 100px
TODO: 截图 - 拖拽分割线调整面板宽度的动态效果
在窄屏（宽度小于 768px）时，布局会自动切换为上下结构，分割线变为水平方向，可以上下拖拽调整高度。
剪贴板智能监听
这是一个很有特色的功能——开启后，工具会在后台持续监听系统剪贴板。当检测到剪贴板内容为 JSON 格式时：
- 输入面板为空：自动填入内容并格式化，右下角提示"已自动检测并粘贴 JSON 内容"
- 输入面板已有内容：在屏幕右下角弹出一个通知，点击通知即可替换为新的剪贴板内容
点击工具栏的 监听关 按钮开启监听（按钮变为 监听中 并高亮为黄色），再次点击则关闭。
使用场景
当你需要反复从不同地方（如浏览器、编辑器、API 文档）复制 JSON 过来检查时，开启剪贴板监听可以省去每次手动粘贴的步骤，非常高效。
TODO: 截图 - 剪贴板监听开启时的通知弹窗
高级用法
与 AI 聊天联动
格式化后的 JSON 可以通过 发送到聊天 按钮直接传入 AI 聊天会话。例如：
- 从 API 文档复制一段 JSON 到工具中格式化
- 确认结构无误后，点击 发送到聊天
- 在聊天中追问 AI："帮我分析这个 JSON 的结构" 或 "基于这个 JSON 生成 TypeScript 类型定义"
利用展开层级快速定位数据结构
当处理深度嵌套的 JSON（如复杂的 API 响应）时，可以利用展开层级来快速理解结构：
- 先将展开层级设为 1，只看最顶层有哪些字段
- 逐步增加到 2、3，逐层深入查看子结构
- 找到感兴趣的字段后，增加到更大的值查看其完整内容
常见问题
Q：为什么我输入 JSON 后没有看到格式化效果？
检查一下你输入的 JSON 是否合法。如果 JSON 格式错误，输出面板会显示红色错误提示框，里面会写清楚具体的错误原因。常见错误包括：
- 缺少逗号
- 多余的逗号（如数组或对象的最后一个元素后面有逗号）
- 键名没有用双引号包裹
- 括号不匹配
Q：展开层级调到最大（10）还是显示不全怎么办？
展开层级为 10 时，工具会展开到第 10 层嵌套。如果你的 JSON 嵌套深度超过 10 层，更深的部分会自动以紧凑格式显示（即 JSON 压缩成单行）。这通常是合理的——查看超过 10 层嵌套的数据，反而会让信息密度过高难以阅读。
如果需要查看更底层的内容，可以将目标部分的 JSON 片段单独复制出来格式化。
Q：拖拽文件时没有反应？
请确认你拖拽的是 .json 或 .txt 文件，并且是拖放到输入面板区域（左侧）。拖拽时输入面板会显示蓝色虚线边框作为视觉反馈。如果拖放到输出面板或其他区域则不会有反应。
Q：剪贴板监听会影响正常复制粘贴吗？
不会。剪贴板监听只在 JSON 格式化工具处于打开状态且已手动开启监听时工作。它会智能过滤掉你自己在工具内部的复制操作（不会复制了格式化结果又触发一次替换）。开启监听后，只有当剪贴板中出现的是 JSON 格式的内容时才会触发提示或自动填充，不影响你对其他文本的复制粘贴操作。
Q：支持 JSON 以外的格式吗？
目前工具专注于 JSON 格式的格式化和校验。支持通过拖拽 .txt 文件来输入文本内容，但这些文本内容仍然需要是合法的 JSON 格式才能被正确格式化。如果你需要处理 YAML 或其他数据格式，可以查看 数据筛选工具 等其他工具。