Codex通过三步精准同步接口字段变更：先识别JSX中真实渲染orderStatus的位置，再定向替换为status并处理条件逻辑，最后构建验证+Playwright测试确保页面正常运行。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
接口字段变更后，Codex如何同步修改前端页面组件
当后端把 orderStatus 改成 status，前端页面里所有读取 item.orderStatus 的地方都会报 undefined，但你不可能靠全局搜索+肉眼判断哪处是真实渲染、哪处是旧注释或 mock 数据——Codex 能直接定位到 JSX 中真正消费该字段的模板路径，并按数据流向逐层更新。
第一步：让 Codex 先识别影响范围
打开终端，进入项目根目录 → 运行 codex 启动会话 → 等待提示 “已加载 X 个文件，识别到 React + TypeScript 技术栈”。【必须等加载完成再提问，否则它会基于空上下文胡写】
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
输入：请分析字段 orderStatus 在当前项目中的全部引用位置，特别标注出在 JSX 模板中作为渲染值使用的路径（如 src/pages/OrderList.tsx 中的 {item.orderStatus}）。
这一步不能跳过。很多人一上来就让改代码，结果 Codex 把测试文件里的字符串字面量、README 里的示例、甚至 console.log 里的拼接都替换了，Git Diff 里全是噪音。
第二步：指定页面组件执行精准替换
方法一：单文件定向修复
输入：请修改 src/components/OrderCard.tsx，将所有 item.orderStatus 的读取路径改为 item.status；若存在条件渲染（如 item.orderStatus === 'paid'），同步更新为 item.status === 'paid'；不改动 import、props 类型声明和 useEffect 内部逻辑。
方法二：跨组件批量同步（需确认类型定义已更新）
输入：请在以下三个文件中同步更新 orderStatus → status 的使用：① src/pages/OrderDetail.tsx（JSX 渲染处）；② src/components/OrderStatusBadge.vue（插值表达式 {{ orderStatus }}）；③ src/features/order/hooks/useOrderSummary.ts（返回值解构）。
注意：如果 useOrderSummary.ts 里还依赖旧 interface，Codex 会报错并提示“类型不匹配”，这时必须先补全 src/types/order.ts 的修改，否则后续步骤无法推进。
第三步：验证页面是否真能跑通
第一步：在 Codex 会话中运行 npm run build 或 pnpm build，观察控制台是否报 TS2339 错误。
第二步：若构建通过，再执行 npx playwright test src/tests/order-card.spec.ts，检查关键断言是否仍命中（例如 expect(locator).toHaveText('已发货')）。
第三步：若测试失败，把错误日志复制进 Codex 新对话框，追加提问：上述测试失败原因是元素文本变为 'undefined'，请检查 src/components/OrderCard.tsx 中 status 字段是否被正确传入，是否遗漏了 props 解构或默认值设置。
