如果让 AI 帮你开发一个图书管理功能，你希望最后得到什么？
一组接口、几份代码文件，还是一个打开浏览器就能使用的管理页面？
这次，我们在 CabloyJS 中做一次实操：给 Codex 一句提示词，让它完成图书 CRUD 模块的开发与测试；然后启动服务，进入管理界面，创建一本书，再同时打开编辑、详情和新建任务。
你会看到的不只是 AI 如何写代码，还有功能完成之后的实际体验：列表刷新是什么样的，多个任务如何切换，未提交的表单能否保留输入。
一、从一句提示词开始
在已经准备好的 CabloyJS 项目中打开 Codex，输入：
text
创建独立的 demo-book 模块，实现 book 的 CRUD 功能这句话给出了两个明确的目标：
- 创建一个独立的
demo-book模块。 - 为图书提供 CRUD，也就是新建、查询、更新和删除功能。
我们使用的是 Cabloy Basic 项目，后端由 Vona 承接，前端由 Zova 承接。项目已经具备模块结构、开发命令和 Admin 管理界面，接下来要做的是在这个基础上增加一个业务功能。
你不需要在这句提示词里逐一指定控制器、数据模型、表单组件和页面布局。Codex 会先读取项目约定，了解现有结构和工具，再沿着项目的开发方式执行任务。
AI 会做哪些事情？
这次开发中，Codex 的工作可以归纳为四步：
text
理解项目 → 调用 CRUD 生成器 → 完善业务字段和模块集成 → 执行测试与检查它先检查项目和生成命令，再调用 Vona 的 CRUD 生成器创建模块。随后完善图书字段、校验、菜单和相关配套内容，让这个资源接入已有的 Admin 界面。
最终，图书表单包含三个字段：
| 字段 | 含义 | 要求 |
|---|---|---|
| Title | 书名 | 必填 |
| Author | 作者 | 必填 |
| Description | 描述 | 选填 |
这里有一个很直观的开发体验：定义好业务资源之后，列表、详情和表单可以复用 CabloyJS 已有的 Schema 驱动 CRUD 页面，不必从头搭建一套管理界面。
AI 负责新增业务模块，框架提供通用能力。两者配合，让开发的重点落在"图书需要什么字段和操作"，而不是每次都重复处理页面结构和基础交互。
二、开发完成，测试也一起完成
模块创建之后，Codex 继续执行测试，以及 TypeScript、lint 和格式检查。
这次开发任务耗时 13 分 57 秒。Codex 的完成总结显示：
- 图书模块的 5 项测试全部通过。
- 后端测试套件中，269 项通过、10 项跳过、0 项失败。
- TypeScript、lint 和格式检查通过。
完成的功能包括新建、分页列表、查看、更新、删除，以及事务性批量删除等配套能力。
到这里，开发流程已经从一句业务需求推进到模块实现和自动检查。接下来，我们启动服务，看看它在界面里用起来是什么样的。
三、两条命令，进入图书管理界面
在项目根目录打开第一个终端，启动后端开发服务：
bash
npm run dev再打开第二个终端，启动 Admin 前端开发服务：
bash
npm run dev:zova:admin等服务就绪后，打开管理界面，点击左侧菜单中的 Book（图书）。
图书列表已经出现在现有的后台布局里：左侧是管理菜单，中间是查询条件和数据列表，上方是页面导航。新建、查询和记录操作都在同一个界面中。
这就是新增模块之后的第一个直观结果：不只是多了一些代码文件，而是后台里多了一个可以直接操作的业务入口。
刷新列表，感受 SSR 页面体验
图书列表支持 SSR，也就是服务端渲染。
我们在列表页面刷新浏览器。刷新前后，页面布局没有明显闪动，仍然保持熟悉的后台结构。
对于使用者来说，首先感受到的不是 SSR 的实现细节，而是页面打开和刷新时的呈现效果。对于开发者来说，这个图书模块已经接入了 CabloyJS 的 SSR 管理界面，不需要为了这次 CRUD 功能重新搭建 SSR 机制。
四、新建一本书：从表单到列表
点击 Create（新建），进入图书表单，输入：
text
Title: Book One
Author: KevinDescription 是选填项，这里先留空，然后点击 Submit（提交）。
回到列表，可以看到新建的 Book One，以及它的作者 Kevin。
这个过程很简单，但把前后端功能串在了一起：打开表单、输入字段、提交数据，再查看列表结果。刚才由 AI 创建的模块，已经可以完成一次实际的业务操作。
接下来，我们先不急着结束这本书的操作，而是把它作为第一个任务继续保留。
五、同时打开三个任务，来回切换不丢输入
管理后台里，经常会遇到这样的情况：正在编辑一条记录，需要先看一下详情；或者手头还有一个新建表单没填完，又要临时处理其他事情。
如果每次离开页面都要重新打开，甚至重新填写内容，操作就会被打断。
CabloyJS 的管理界面提供二级任务页签。我们用 Book One 和 Book Two 走一遍这个过程。
1. 打开 Book One 的编辑任务
从列表打开 Book One 的编辑页面，可以看到已有的书名和作者。
再返回图书列表。注意界面上方：Book One 的编辑任务仍然保留在页签里。 返回列表，并不意味着必须关闭编辑页面。
2. 再打开 Book One 的详情任务
接着，从列表打开 Book One 的详情页面。
现在，同一本书有两个任务同时保留：一个用于编辑，一个用于查看详情。你可以按当前需要选择进入哪个任务，不必每次都回到列表重新查找记录。
3. 新建 Book Two，先不提交
再返回列表，点击新建，输入第二本书：
text
Title: Book Two
Author: Tom这一次先不提交，让表单保持在填写状态。
此时，二级页签中同时打开了三个任务：
| 任务 | 内容 |
|---|---|
| 编辑任务 | Book One 的编辑表单 |
| 详情任务 | Book One 的查看页面 |
| 新建任务 | 尚未提交的 Book Two 表单 |
4. 切换回来，继续刚才的输入
先切到 Book One 的编辑任务，再切到详情任务，最后返回 Book Two 的新建任务。
书名仍然是 Book Two，作者仍然是 Tom。编辑和详情任务也都还在，三个任务可以继续来回切换。
Book Two 还没有提交，但输入内容没有因为任务切换而丢失。
这让二级页签不只是几个导航入口，而是可以保留当前工作上下文的任务空间。你可以暂时去查看另一条信息，再回来继续填写，不必为了离开当前页面而提前提交，也不必回来后重新输入。
从使用感受上看，这种能力很接近桌面软件的多任务操作方式：几件事情可以并行处理，而不是每次只能完成一件事再离开。
六、一次实操，认识 CabloyJS 的开发方式
回顾整个过程，我们只从一句业务需求开始：
text
创建独立的 demo-book 模块，实现 book 的 CRUD 功能随后，AI 完成模块开发与检查；启动服务后，我们就能进入图书列表，新建记录，并使用 SSR 页面和多任务页签。
这次实操呈现了 CabloyJS 几个容易直接感受到的特点：
- 模块化开发 ：新增图书功能，以独立的
demo-book模块组织。 - AI 与现有工具协作：AI 先理解项目，再使用生成器和开发命令，而不是另起一套实现方式。
- Schema 驱动管理界面：业务字段进入列表、详情和表单，通用页面能力可以复用。
- SSR 页面体验：新增资源接入已有的 SSR 管理界面。
- 多任务操作：编辑、查看和新建可以同时保留，任务切换时保持表单输入。
CRUD 是这次实操的业务主线，SSR 和多任务则让你看到这个功能进入真实管理界面后的使用方式。
它们并不是 AI 从零重写的基础设施，而是 CabloyJS 已经提供的能力。AI 在框架内完成业务开发，新增功能也随之获得框架承接的页面和交互体验。
结语：给 AI 一个需求，得到一个能操作的功能
如果你想了解 CabloyJS，不妨从这样一个小功能开始。
给 AI 一句明确的需求，看看它如何创建模块、完善字段和运行检查；然后打开浏览器，亲自创建一条记录，刷新列表，再同时打开几个任务。
从"生成了什么代码"到"这个功能用起来怎么样"，走完这一遍，你对框架的认识就不再只是模块、Schema、SSR 这些术语，而是一次具体的开发与操作体验。
这就是本次 AI 编码实战的意义：让需求落到可操作的功能里，也让框架能力变得看得见、用得上。
进一步阅读
- GitHub: github.com/cabloy/cabl...
- Docs: cabloy.com
- Demo: cabloy.com/demo