### [AI 制作复杂网页：先拆页面状态，再划分组件边界](https://alyyhw.com/article/5239)

**Published:** 2026-08-06T17:13:15

**Author:** AI菜鸟网

**Excerpt:** 面对表单、筛选、权限和多种异常状态时，用状态表和组件边界控制复杂网页的可维护性。

复杂网页的问题通常不在于代码量，而在于状态太多：数据还没加载、筛选条件已改变、用户没有权限、提交正在进行、接口返回空结果。让 AI 直接生成整页，很容易漏掉其中某个状态。更稳的方法是先把状态写出来，再划分组件边界。

## 先画页面状态表

以一个带筛选和提交的资源页面为例，至少要考虑首次加载、加载失败、结果为空、结果正常、提交中、提交成功和提交失败。每个状态都要写明可见内容、可操作按钮和下一步，而不是只画一张“正常页面”。

![复杂网页状态与组件关系示意图](https://login.alyyhw.com/wp-content/uploads/2026/08/ai-long-image-layout-20260802.jpg)

| 状态  | 用户看到什么 | 允许的操作 |
| --- | --- | --- |
| 加载中 | 骨架或进度提示 | 取消或等待 |
| 空结果 | 筛选条件和说明 | 清空筛选、修改关键词 |
| 无权限 | 原因与申请入口 | 登录、申请权限 |
| 提交失败 | 失败原因和保留的输入 | 重试、修改后再提交 |

## 组件边界要围绕责任划分

把负责取数的部分、负责筛选的部分、负责展示列表的部分和负责提交的部分分开。组件之间用明确的数据和事件连接，不要让一个按钮同时修改多个隐含状态。这样 AI 修改一个区域时，不会把整页逻辑一起重写。

```
页面容器：管理请求状态和权限
筛选区：只输出筛选条件
列表区：只负责展示结果和空状态
提交区：只负责校验、提交和回执
```

## 让 AI 一次只完成一个边界

1.  先让 AI 根据状态表生成数据模型。
2.  再生成一个只读列表和空状态。
3.  加入筛选，并用固定数据测试。
4.  最后接入提交和权限流程。

每次修改后保留可运行版本，记录改动的原因和影响。不要在出现错误时让 AI 重写整个项目，这会让问题更难定位。

## 复杂表单要保留用户输入

提交失败后清空表单，会让用户失去信任。明确哪些字段需要重新校验、哪些内容可以保留，并在提交按钮上显示进行中状态，避免重复提交。

## 用真实数据做多状态验收

-   正常数据、空数据和超长文本。
-   网络慢、接口失败和重复点击。
-   登录、未登录和权限不足。
-   桌面宽度、窄屏和键盘操作。

如果项目后续需要变成完整网页应用，可继续参考站内的[AI网页页面结构方法](https://alyyhw.com/article/5231)；上线时再结合[AI网页部署与回滚流程](https://alyyhw.com/article/5225)。

复杂网页的质量，来自状态和边界被明确写出来，而不是来自一次生成了多少代码。

**Tags:** AI工作流, AI方法论, AI编程, Claude

**Categories:** AI编程

---