U03 · 格式化失败时，原文不能跟着消失

v0.4 · 先修：函数、异常、DOM；Vue 版先读手册 16。工作台。产品参考：IT-Tools，不复制其源码。

你拿到一段挤成一行的合成 JSON，想看清它的结构。做一个只有输入、格式化、输出的小工具。先不做工具市场、登录或云同步，让一个动作可靠地完成。

动手路线：每一步都有文件和结果

先完成 统一启动与恢复手册 的首次准备。以下命令均在自己的练习根目录执行；原文中的 api/web/desktop 概念对应本节列出的现成文件，不需要猜测如何搭空项目。

1. 打开 u03/starter/model.ts，按 formatJson → convertInput 的顺序逐个实现。下面第1节起解释规则；每完成一个函数就重跑样例/测试。
2. 执行以下三条，分别核对样例、行为和类型。初次运行 node tools/try.mjs u03 出现 TODO: convertInput、行为测试因未实现的 TODO 失败是预期起点，不是安装失败；完成自己的实现后，行为测试应为 fail 0。类型检查通过不表示功能已完成：

node tools/try.mjs u03
node tools/check.mjs u03
npm run check

1. 打开 runtime/web/u03.js，找到对自己规则函数的调用。先用一句话记录输入从哪里来、结果写到哪里；读不懂的语法回到本节先修对应章节。

2. 构建并启动自己的作品：

node tools/build-app.mjs u03
node tools/lab.mjs start u03

1. 实际操作：先输入 {"name":"中文"} 并格式化，确认结果有两空格缩进；再输入单个 {，确认显示错误、原文保留且旧结果清空；最后输入 false，确认输出为 false、旧错误消失。点击复制前必须有有效结果。

2. 解释与再做一次：错误时保留输入与保留上次输出分别会造成什么影响？ 在自己的 LEARNING.md 先写答案，再选本节末尾的变式，列一个新失败例子后修改。保持原用例通过。仅跑通配套界面、没有完成规则与解释，记录为“参考演示已观察”，不记录为自己完成作品。

卡在规则时按“函数输入→分支条件→返回值→参考实现”逐级看提示；卡在运行时按 故障表 定位。若想单独观察参考成品，在构建命令后加 --reference；页面会明确标出参考演示。观察完再去掉该参数重建，继续自己的 starter。

1. 看清 JSON 与普通文字的区别

打开 u03/sample.json，它调用 convertInput。输入 { "name": "demo" } 应得到缩进两空格的结果；JSON.parse 负责理解 JSON，JSON.stringify 负责重新输出。不是用字符串替换在每个逗号后塞换行，因为字符串内部也可能包含逗号。

完成 formatJson：空白输入报告 EMPTY_INPUT，解析失败向上抛出，成功统一缩进。数组、数字、false、null 都可以是合法 JSON，不只接受对象。运行 node tools/try.mjs u03 观察固定样例。

2. 把失败变成可显示的状态

完成 convertInput，返回 source/output/error。成功时 error 是 null；失败时原始 source 完整保留、output 为空、error 有明确说明。这里没有把所有异常当成成功结果，也不让旧的格式化结果继续冒充新输入的结果。

执行 node tools/check.mjs u03 与类型检查。独立试 {"x":"<b>字</b>"}：它是合法 JSON，输出里可以含尖括号；页面接下来负责把结果当文字显示。

3. 建一个只有两块文本的页面

按手册 13/14 建 index.html/app.js，输入用 textarea，输出用 readonly textarea 或 pre.textContent，另有 button 与 role=status 的提示区。点击按钮读取 source，调用规则，按结果更新三块状态。不要使用 innerHTML 展示 JSON。

初始页不显示红色错误；用户提交坏输入后才显示。再输入有效 JSON，旧错误必须清除。用键盘操作一次，确认按钮可达、提示与输出能看见。

4. 增加复制与导出

只在存在有效 output 时启用复制和下载。复制调用浏览器剪贴板 API，要等待成功再显示“已复制”，失败则提示手动选择；不能点击就无条件宣布成功。下载用文本 Blob，文件名固定 demo.json，下载后释放临时 URL。

本节不要求所有浏览器都允许自动复制。检查时记录浏览器和本机启动方式；功能受限时仍可从输出框选择复制，输入不会丢失。

5. 再做 Vue 版，比较哪些东西变了

按手册 16 的配置建立 Vue/TS 作品，将 model.ts 放入 web/src，输入与结果用响应式状态绑定，按钮仍只调用同一规则。保留原生版作为比较。写下“事件入口、状态、渲染、纯函数”各在哪个文件；不是把所有东西塞进模板表达式。

熟悉项目阅读后可按 IT-Tools 自身 README 的新工具入口探索一个工具。该扩展不是本节完成前置，涉及原仓源码时保留其许可与来源，不把本部独立实现标成原项目贡献。

6. 自检与变式

独立变式：提供 2 空格/4 空格选项，保持默认行为，给两种模式补预期输出。暂停时保存文件即可。完整成果需有页面操作记录；核心测试不验证剪贴板。下一步可走 U07 或 U13。