# 认识沙盒环境

本教程每个示例都可以直接运行：右上角是代码工作区，右下角是运行结果，右侧抽屉是示例数据预览。**无需注册登录**——数据库跑在你自己浏览器里（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 示例。