Codex 必须基于本地可 import 的 TS/JS 接口函数（如 fetchUserList）才能生成真实请求逻辑；需运行 codex analyze 验证识别，缺失则 codex add 注册；生成组件前须安装 @tanstack/react-query，queryKey 需与接口参数严格一致；HTML 场景需手动处理响应结构（如 res.data）；验证需查 Network、全局变量 CODER_DATA 及 DOM 元素与字段名匹配。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要在 Codex 项目中让前端页面真实渲染后端接口返回的数据，不是静态模拟，而是走通从请求、解析、状态管理到 DOM 更新的完整链路。这要求 Codex 真正读取你的 API 定义文件、识别响应结构、生成符合 TypeScript 类型约束的请求逻辑，并把数据注入已有或新创建的组件中。
确认接口定义是否已被 Codex 识别
打开项目根目录下的 src/api/ 或 api.ts 文件，检查是否存在导出的函数（如 fetchUserList）或 axios 实例封装的调用方法。Codex 不会凭空猜接口，它只处理你已写进代码里的定义。如果只有 Postman 收藏或 Swagger 链接，它无法自动拉取——【必须存在本地可 import 的 TS/JS 接口函数】。
运行命令 codex analyze --module api，观察终端输出是否列出你目标接口的路径、方法、参数类型和响应示例。若未出现，说明 Codex 没扫描到该文件，需手动用 codex add api.ts 显式注册。
生成带错误边界与加载态的 React 组件
在项目对话中输入明确指令：“基于 fetchUserList 接口，在 src/pages/UserList.tsx 中生成一个 React 函数组件，使用 React Query 管理请求状态，包含 loading 骨架屏、空数据提示、网络错误重试按钮。”
Codex 会自动生成完整组件，含 useQuery 调用、QueryClientProvider 上下文包裹、以及 errorBoundary fallback UI。注意：它默认不引入 @tanstack/react-query，若项目未安装，生成代码会报错——【执行前先运行 npm install @tanstack/react-query】。
生成后检查组件内 queryKey 是否与接口签名一致。例如接口是 fetchUserList({ page: 1, size: 10 })，则 queryKey 必须为 ['userList', { page, size }]，否则缓存失效，重复请求。
将数据绑定到现有 HTML 页面（非 React 场景）
方法一：纯 JS + Fetch 注入
在目标 HTML 文件（如 report.html）的 <body> 底部添加 <script> 标签，内部调用 fetch('/api/v1/reports')，解析 JSON 后用 document.getElementById('data-container').innerHTML = ... 插入表格。
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
方法二：Codex 自动生成模板化渲染器
输入提示词：“为 /api/v1/reports 接口生成一个轻量级 HTML 渲染器，不依赖框架，支持分页、搜索关键词高亮、导出 CSV 按钮。输出为单个 renderer.js 文件，放在 src/utils/ 下。”
Codex 会生成含 renderTable(data)、searchFilter()、exportToCSV() 的完整脚本。把它引入 HTML 即可：<script src="./src/utils/renderer.js"></script>。注意：该脚本默认假设接口返回数组，若实际返回 { data: [...], total: 123 }，需手动修改解析逻辑为 res.data。
验证接口数据是否真实展示
第一步：启动本地开发服务器（如 vite dev 或 npm start）；
第二步：在浏览器打开页面，打开 DevTools → Network 标签页，筛选 XHR/Fetch，确认请求已发出且状态码为 200；
第三步：切换到 Console，输入 window.__CODER_DATA__（Codex 在调试模式下会挂载原始响应到全局变量），检查返回值是否为预期结构；
第四步：若页面空白，检查 DOM 中是否存在 ID 为 data-container 的元素（方法一）或是否漏掉 <script> 引入（方法二）；
第五步：若数据显示但格式错乱，打开生成的组件文件，定位 map 循环部分，确认字段名（如 item.userName）与接口响应中的实际 key（如 item.user_name）拼写一致。
