大家好呀我是 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 改完代码后怎么验收才不翻车