#2. 做列表页和详情页

这一章把两张表接到页面上。完成后，你可以选择客户、创建订单，再点击订单号打开独立详情页。

#本章目标与起点

先确认上一章的两张表和客户数据已准备好。本章完成后，你可以从菜单进入列表、创建一张订单、打开详情地址，再刷新确认数据仍在。

#页面与接口怎样配合

列表用于比较多张订单，详情用于集中查看一张订单。详情地址包含订单 ID，因此你可以收藏这个地址，也可以从后面的审批通知中直接打开它。

表单中的客户名称供人选择，保存时传递的是客户 ID。服务端还要检查这个 ID 对应的客户是否存在；页面选择框不能替代服务端校验。

页面需要区分“没有订单”和“读取失败”：前者允许继续新增，后者需要提示检查权限或接口。保存失败时保留输入，避免用户重新填写整张表单。

#让 AI Agent 接上页面和接口

读取当前应用的客户端路由、页面、国际化和服务端接口 Skill，继续使用 tutorialCustomers 和 tutorialOrders。

增加“教程订单”菜单，列表路径为 /tutorial-orders，详情路径为 /tutorial-orders/:id。页面必须读取实际数据库，不使用固定数组或浏览器本地存储。路由使用应用现有懒加载方式，不硬编码 /main。

列表显示订单号、客户名称、金额和状态。提供创建订单表单：订单号、客户下拉选择、金额（元）。详情显示订单号、客户、联系人、金额、状态、版本和审批意见，并能返回列表。

创建时服务端验证订单号唯一、客户存在、金额大于零；从登录身份写入 ownerId，初始化 draft、version=0 和空审批意见。不要接收客户端传来的 ownerId、status 或 version。所有接口要求登录。

金额界面按元输入和显示，数据库按整数分保存。处理空列表、加载失败、无权访问和订单不存在；按钮文字使用应用的中英文翻译资源。

这一步先用当前管理员检查页面是否接通。下一章再给普通账号配置权限，并用普通账号创建验收订单。如果页面因为缺少权限而拒绝访问，让 AI Agent 注册所需资源并给测试管理员配置访问权限，不要移除接口权限检查。

#创建一张订单

在“教程订单”中填写：

点击“创建订单”。新订单应显示为“草稿”。点击订单号，检查详情里的客户、联系人和金额。

“提交审批”操作将在审批章节中添加。

#检查持久化和地址

1. 刷新详情页，确认仍能打开同一张订单。
2. 返回列表，确认这张订单仍存在。
3. 再次使用 SO-001 创建订单，应提示重复，不能产生第二张同号订单。
4. 把金额改成负数，保存应失败；直接请求接口也应被拒绝。
5. 打开一个不存在的详情 ID，应显示明确结果，不能继续显示上一张订单。

让 AI Agent 核对数据库中的 amountCents 为 128000。不要只看页面显示的数字判断是否保存正确。

下一步：加上权限。