Codex需先分析状态分布再归类迁移：①跨组件长生命周期状态提至Zustand；②单组件闭环用useState；③后端读写对封装为React Query；④纯UI切换用useDisclosure。迁移后须验证refetch触发、临时字段清空及useEffect清理。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
当你面对一个包含表单、弹窗、筛选器、分页和实时数据更新的复杂页面时，Codex 容易把状态散落在组件内部、useEffect 里、甚至硬编码在事件回调中，导致后续维护困难、状态不一致、调试成本飙升。你真正需要的不是“加个 useState”，而是让 Codex 帮你把整个页面的状态流理清楚、归类好、边界划明白。
先让 Codex 理清当前状态分布
打开 Codex CLI 或 IDE 插件，在当前项目根目录下执行：codex /plan → 输入提示词：“请分析 src/pages/dashboard.tsx 中所有可变状态，按来源分类：用户输入（如搜索框、筛选项）、服务响应（如列表数据、权限信息）、UI 行为（如弹窗开关、折叠展开）、临时中间态（如 loading、error、debounce 缓存值）。不要修改代码，只输出结构化清单。”
这一步必须做。跳过它直接让 Codex “重构状态管理”，它大概率会把 【useEffect 里手动 set 的 loading】 和 【Zustand store 里已存在的全局 loading】 当成两个独立状态重复定义。
明确状态归属原则再动手
在 Plan 模式返回的清单基础上，追加指令：“根据以下原则归类并标注风险：① 跨组件共享且生命周期长 → 提到 Zustand/Pinia；② 单组件内闭环使用 → 保留 useState；③ 与后端强绑定的读写对 → 封装为 React Query queryKey + mutation；④ 仅用于 UI 切换（如 drawer open）→ useDisclosure 或局部 useState。请逐条对照原清单，标出每项应归属的位置及迁移方式。”
Codex 会生成带注释的映射表。注意看它是否把“筛选条件”和“筛选结果”拆成了两个状态——如果混在一起，后续分页刷新或重置筛选时必然出错。
通过 Codex CLI 生成图片，支持尺寸控制和批量模式。依赖：codex (npm)。代理默认启用。用 generate.sh 生成单张，batch_generate.sh 批量生成游戏 UI 素材，gen_size.sh 指定尺寸。所有输出保存至 ~/.codex/generated_images/。
生成可验证的状态迁移方案
确认 Plan 内容无误后，执行迁移：
第一步：运行 codex --apply → 它会自动创建 src/stores/dashboard.store.ts（若不存在），将标记为 Zustand 的状态移入，并生成对应 action。
第二步：用 @src/pages/dashboard.tsx 显式提供上下文 → 这样 Codex 才能精准定位 JSX 中哪些 useState 可安全删除，哪些 useQuery 需要同步更新变量名。
第三步：要求 Codex 补全验证环节：“在迁移完成后，检查三处是否一致：① 所有筛选条件变更是否触发 query.refetch；② 弹窗关闭后，store 中相关临时字段是否清空；③ 页面卸载时，是否有未取消的 useEffect 请求。”
这一步不能省。Codex 默认不会主动校验副作用清理，【漏掉 abortController 或 cleanup 函数会导致内存泄漏】，而这类问题上线后极难复现。
