Codex修改页面时易破坏交互逻辑，需先锁定事件监听器基线、确认代码上下文与工作区干净，再限制修改类型为仅CSS/属性级变更，并通过手动点击与自动化测试双重验证交互存活。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
当你在Codex中修改一个已渲染的页面，比如调整按钮样式或重排卡片布局，最怕的是视觉改对了，但点击跳转、表单提交、下拉展开这些原有交互突然失效。这通常不是Codex故意删逻辑，而是它在重写HTML或CSS时，无意中覆盖了绑定事件的class名、移除了data属性、或替换了包含内联脚本的模板片段。
先锁定交互行为基线
打开Codex内置浏览器，右键点击目标页面 → 选择“检查元素” → 在Elements面板中，逐个点击关键可交互节点（如登录按钮、筛选下拉、分页链接），观察右侧Event Listeners标签页里是否挂载了click、submit、change等监听器。记下触发这些行为的DOM选择器和对应事件类型。
运行命令：/status确认当前会话已加载完整项目上下文；再执行git diff --staged确保工作区干净——【若存在未提交修改，Codex可能基于错误快照分析交互依赖】。
输入指令：“请列出 src/pages/Dashboard.tsx 中所有带 onClick、onSubmit、onChange 属性的 JSX 元素，及其绑定的函数名、调用路径和是否被条件渲染包裹。不要推测，只基于代码字面量提取。”
限制Codex的修改动作类型
方法一：禁止替换含交互逻辑的JSX结构
在任务开头明确声明：“本次只允许修改 style、className、aria-* 属性及静态文本内容。禁止重写包含 onClick/onSubmit 的 JSX 标签；禁止删除、移动或包裹已有交互节点；禁止将内联函数改为箭头函数或提取为useCallback——除非你确认该函数未被其他组件复用。”
通过 codex-reset-radar.pages.dev 监控 Codex 使用重置窗口。轮询 current.json，检测窗口开启/关闭、预测等级变化以及概率跳变。
方法二：用空间圈选+保留指令微调
在内置浏览器中，直接鼠标圈选目标按钮 → 输入：“把背景色改成#4a5568，文字加粗，保持onClick绑定不变，不改动父容器的flex布局和overflow设置。”Codex会自动避开事件绑定层，仅注入CSS变更。
【圈选后若Codex仍尝试重写JSX，请立即用引导（Steer）输入：“停，只改CSS，不要碰JSX结构”】
验证交互是否存活
第一步：执行修改后，不要关闭内置浏览器。
第二步：手动点击所有被修改过的可交互元素，观察控制台是否报错、网络面板是否发出请求、URL是否跳转、状态是否更新。
第三步：运行验证命令：“请执行 src/pages/Dashboard.test.tsx 中所有 describe('交互行为'...) 测试块，并输出失败项与对应行号。”
如果测试通过但手动点击无效，说明测试覆盖不全。此时让它生成最小回归脚本：
“请生成 verify-interaction.mjs：遍历页面上所有带data-test-id属性的按钮和表单，模拟click/submit事件，捕获console.error和未处理的Promise rejection，打印结果。”
