认识沙盒环境

本教程每个示例都可以直接运行：右上角是代码工作区，右下角是运行结果，右侧抽屉是示例数据预览。无需注册登录——数据库跑在你自己浏览器里（PGlite，WASM 版 PostgreSQL），打开页面即开箱。

开箱即用，数据留在浏览器

• 首次点「运行」时，页面会加载内置数据库并自动灌入本教程的示例数据（如 book / book_store / author 等）；
• 你的操作只影响自己浏览器里的这份数据，不会上传到任何服务器，也不会影响他人；
• 浏览器数据会持续累积（贴近本地开发体验）；想回到初始状态，用工作区上方的重置数据库按钮。

工作区文件

工作区默认两个文件：

• infra/sql-client.ts（只读）——提供示例所需的 sqlClient 接线（指向本地数据库），无需额外配置连接；
• main.ts（可编辑）—— 示例入口，模型、视图、查询都写在这里。每个文档页进入时自动预填当前节的示例 main；你在某节改过 main 后，该节的修改会被记住（切走再回来仍是你的代码，并提示已保留），点工作区右上角的 reset 图标即可恢复该节教程示例。

运行与结果

点右上角「运行」按钮，浏览器会在本地完成 编译 + 执行（首次运行需加载数据库与编译器，稍慢；之后很快）。完成后即可在结果面板查看 console 输出与耗时。

每次运行都会产生 SQL 追踪：ts-grm 生成的每条 SQL 及其参数都会显示出来——这是理解 ORM 行为的窗口，请善用它（例如第一次查询后你会看到 loadAssociation 的追加查询）。

数据库抽屉

右侧「数据库」抽屉展示当前页面示例涉及的表（浏览器本地数据，直读）：

• 只读页（如本教程查询页）：表格只读展示，点开才拉数据（懒加载）；
• 写类页（后续「变更 API」一章）：表格可编辑，但只能改声明允许的表；
• 改坏数据想复原：点工作区上方的重置数据库，即可恢复到教学 seed。

使用边界

• 示例客户端已经准备好，通常不需要自行创建连接；
• 本地库是单实例且持续累积，重置按钮可随时回到初始示例状态；
• 代码全部在本机编译运行，请放心尝试——最坏情况点一下重置即可。

下一步

环境讲完了，接下来进入快速上手：安装 → 模型 → 视图 → 查询四步，跑通你的第一个 ts-grm 示例。