大家好呀，我是 Lazy熊。
前面我们已经练过让 Codex 读项目，也练过让它改一个按钮文案。如果你还没有开始相关的ai编程工具，可以通过 LetAiCode的 API 快速开始。稳定高可用。
如果你想继续往前走一步，我很建议下一个实战任务选：
怎么用 Codex 给页面加一个空状态提示，并且不影响原来的列表。
这个任务看起来很小。
甚至很多人会觉得：
不就是没有数据时显示一句“暂无数据”吗？
但我反而觉得，它特别适合 AI 编程新手练手。
因为它不是单纯改文案。
它会让你第一次真正接触页面状态：
- 有数据时怎么显示
- 没数据时怎么显示
- 加载中时怎么显示
- 请求失败时怎么显示
- 这些状态之间会不会互相抢位置
一、先说结论：空状态不是随便加一句提示
很多新手第一次做这个任务，会直接对 Codex 说：
这句话不能说完全没用。
但它太粗了。
因为 Codex 还不知道：
- 你说的是哪个页面
- 页面数据从哪里来
- 什么情况下算空
- 现在空数据时会显示什么
- loading 状态是否已经存在
- 接口失败时是否也会被当成空
- 空状态应该放在列表区域，还是整个页面中间
这些问题如果不说清楚，Codex 就会自己猜。
而 AI 一旦开始猜，新手就很容易遇到几种情况：
- 没数据时提示出现了，但有数据时也显示
- loading 时还没加载完，就先显示“暂无数据”
- 接口报错时也显示“暂无数据”，掩盖了真正错误
- 它为了加空状态，顺手重构了整个列表组件
- 它改了样式，结果页面布局变了
所以这个任务虽然小，但流程不能省。
更稳的顺序应该是：
- 先定位页面文件
- 再确认数据来源
- 再判断空状态条件
- 再确认是否已有 loading 或错误状态
- 再让 Codex 做最小改动
- 最后分别验收有数据、无数据、loading、错误状态
说白了就是一句话：
空状态不是加一句文案，而是处理一个页面状态。
二、第一步：先让 Codex 定位页面和数据来源
不要一上来让 Codex 改。
第一步先让它找。
你可以这样问：
我想给当前页面增加空状态提示。 请先不要修改代码。 请帮我定位：1. 当前页面对应哪个文件2. 页面展示的数据从哪里来3. 列表数据变量叫什么4. 目前没有数据时会显示什么5. 当前是否已经有 loading 或错误状态6. 最适合加空状态的位置在哪里这一步的价值很大。
因为空状态要加在哪里，不是凭感觉。
你要先知道这个页面的数据是怎么来的。
比如有些页面的数据来自接口请求。
有些页面的数据来自父组件传入。
有些页面的数据来自本地状态。
有些页面看起来是列表，但其实是多个组件组合出来的。
如果 Codex 连数据来源都没找清楚，就直接改代码，很容易改错地方。
尤其是项目里经常会有多个相似页面。
比如：
- 用户列表
- 订单列表
- 文章列表
- 搜索结果列表
- 弹窗里的小列表
你想改的是主页面列表，
它可能改到了弹窗里的列表。
所以第一步一定要先确认：
它找的是不是你要改的那个页面。
三、第二步：让 Codex 判断“什么才算空”
空状态最容易出问题的地方，就是“空”的判断。
很多新手会以为：
数组长度为 0，就是空。
但真实项目里还要考虑：
- 数据还没加载回来
- 接口请求失败
- 搜索后无结果
- 筛选后无结果
- 权限不足导致没有数据
- 后端返回 null 或 undefined
- 数据结构不是数组，而是分页对象
所以你要让 Codex 先分析条件。
可以这样说：
请先分析这个页面什么时候应该显示空状态。 请区分：1. 首次加载中2. 接口请求失败3. 接口成功但列表为空4. 搜索或筛选后没有结果5. 数据结构异常 请告诉我哪些情况应该显示“暂无数据”，哪些情况不应该显示。 先不要修改代码。这条 Prompt 很适合新手收藏。
因为它能避免一个很常见的错误：
把所有没有内容的情况，都粗暴当成空状态。
比如接口还在 loading 时，不应该立刻显示“暂无数据”。
接口失败时，也不应该只显示“暂无数据”。
因为用户看到“暂无数据”，会以为真的没有数据。
但实际可能是接口挂了。
这就是误导。
所以空状态要和 loading、错误状态区分开。
四、第三步：明确这次只做空状态，不顺手大改
等 Codex 找到页面、数据来源、空状态条件之后，再让它修改。
但修改前要加边界。
比如：
请给这个列表增加空状态提示。 要求：1. 只有在接口成功返回且列表为空时，才显示“暂无数据”2. loading 状态下不要显示空状态3. 接口失败时不要显示空状态，保留原有错误处理4. 有数据时正常显示列表5. 不修改接口逻辑6. 不重构列表组件7. 不调整无关样式8. 优先复用项目现有空状态组件或样式这里最重要的是前四条。
因为它们把状态边界说清楚了。
后四条则是限制 Codex 不要顺手做多。
新手一定要记住：
越小的任务，越要控制改动范围。
你只是加一个空状态。
就不应该顺手改接口、不应该顺手重构列表、不应该顺手换 UI 风格。
如果 Codex 认为必须大改，你可以让它先解释：
如果你认为必须修改列表结构或接口逻辑，请先说明原因。 在我确认前，不要直接执行大改。这句话很有用。
它能防止 AI “好心做多了”。
五、第四步：改完后先看它动了哪些文件
Codex 改完之后，不要立刻看页面效果。
先问：
请列出本次实际修改的文件。 请说明：1. 每个文件为什么需要修改2. 每个文件具体改了什么3. 是否有和空状态无关的改动4. 是否修改了接口、状态管理或公共组件为什么要先看文件？
因为空状态这个任务，理论上改动范围应该很小。
可能只需要改：
- 当前页面文件
- 当前列表组件
- 少量样式
- 或复用已有 Empty 组件
如果它动了很多无关文件，
比如路由、接口封装、全局状态、公共布局，
你就要提高警惕。
不是说一定错，
但你要让它解释清楚：
为什么一个空状态需要改这么多地方。
这就是防翻车的第一步。
六、第五步：验收不能只看“暂无数据”有没有出现
很多人验收空状态，只看一眼：
页面没数据时显示“暂无数据”。
然后就觉得完成了。
这不够。
至少要验 4 种情况：
- 有数据
- 无数据
- loading
- 错误状态
你可以让 Codex 给你验收清单：
请给出这次空状态的验收步骤。 请包括：1. 如何验证有数据时列表正常显示2. 如何验证无数据时显示“暂无数据”3. 如何验证 loading 状态不被空状态覆盖4. 如何验证接口失败时不误显示“暂无数据”5. 如何确认本次没有影响其他页面6. 如果当前不好模拟空数据，应该怎么临时验证这条 Prompt 很适合直接收藏。
它能让你从“看一眼页面”变成真正验收。
尤其是第 6 条。
很多时候本地数据不容易变成空。
你可以让 Codex 告诉你临时验证方式。
但要注意：
临时 mock 或测试代码，验证完要删掉。
不要把测试用的假数据留在正式代码里。
七、如果页面没有显示空状态，怎么让 Codex 排查
有时候 Codex 改完了，
但你打开页面没看到空状态。
这时候不要直接说：
这样容易越改越乱。
更稳的是让它先排查：
我没有看到空状态提示。 请先不要继续修改代码。 请帮我排查：1. 当前页面是否真的进入了空数据状态2. 数据变量是否仍然有内容3. 空状态判断条件是否写错4. 是否被 loading 或错误状态覆盖5. 空状态组件是否渲染了但被样式隐藏6. 是否改到了错误的列表或错误的页面 请先给出排查结论，再决定是否需要修改。这张“跑偏处理卡片”很实用。
因为空状态没出现，原因很多。
不一定是代码没写。
也可能是你根本没有进入空数据场景。
或者页面上有多个列表，Codex 改错了一个。
所以先排查，再继续改。
八、收藏版核心 Prompt
如果你想直接用，可以复制这一整段：
我想给当前页面增加空状态提示。 请先不要修改代码。 请按下面步骤处理：1. 先定位页面文件和数据来源2. 判断什么情况下算“空数据”3. 区分 loading、接口失败、接口成功但无数据这几种状态4. 说明空状态应该显示在哪里5. 确认有数据时不会显示空状态6. 给出最小改动方案7. 等我确认后再修改 限制：1. 不修改接口逻辑2. 不重构页面结构3. 不调整无关样式4. 不影响 loading 和错误状态5. 优先复用现有空状态组件或样式 修改完成后，请补充有数据、无数据、loading、错误状态的验收步骤。 如果需要临时 mock 空数据，请说明怎么验证，并提醒我验证后删除临时代码。这段就是这篇文章最值得收藏的部分。
以后你把“页面空状态”换成“搜索无结果”“筛选无结果”“暂无消息”“暂无订单”，也都可以套这个结构。
九、转发给新手的提醒
空状态最容易漏的不是“没数据时显示提示”，
而是：
有数据时不能误显示，loading 时不能抢状态，接口失败时不能装作没数据。
所以这篇适合转给刚开始做页面功能的新手。
很多新手第一次做页面，只会盯着正常状态。
但真实项目里，页面至少有四类状态：
- 正常有数据
- 正在加载
- 没有数据
- 请求失败
你越早学会区分这些状态，后面做列表、搜索、筛选、详情页都会稳很多。
AI编程实战教程
部署篇
Codex 怎么安装？新手最省事的一套流程
Codex 装好了却还是报错？我把最常见的问题，整理成了一份排查清单。
prompt技巧
一个万能模板：如何描述你的功能需求
Codex改完代码后，新手应该怎么验收？
Codex 常见提示词模版，看这一篇就够了
Codex 修 bug 专用提示词模版清单
Codex-AI 编程篇
新手如何快速上手 Codex？先按这 5 步来
AI 编程新手教程（1）：用 Codex 读懂一个现成项目
AI编程新手教程2: 通过让 Codex 改一个按钮文案，完整走体验AI编程流程
AI编程新手教程3: 最重要的能力，不是提问，而是拆任务。
除了 AI 编程，AI CLI 还可以做哪些事？新手先从这 8 类开始
AI编程实战教程5-Codex 改完代码后，怎么验收才不翻车？
