必须先让Codex分析src/pages/dashboard.tsx主内容区布局结构，再精准调整间距与布局：确认flex容器关系、minmax()列宽、统一gap值、缺失对齐属性；仅用CSS变量或Tailwind类干预间距；强制使用Flex替代浮动/绝对定位；验证响应式断点与375px移动端渲染。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要让Codex精准调整前端页面的布局结构和元素间距，而不是靠它自由发挥——否则它可能重排整个容器、替换Flex为Grid、甚至把间距单位从rem改成em，导致样式失控。
先让Codex读懂当前布局逻辑
在对话框第一行输入：【任务描述】请分析 src/pages/dashboard.tsx 中的主内容区布局结构。重点识别：1. 顶部筛选栏与下方表格是否同属一个 flex 容器；2. 表格列宽是否由 minmax() 控制；3. 表单控件之间是否有统一的 gap 值；4. 是否存在未声明 justify-content 或 align-items 导致对齐异常的 flex 容器。
这一步必须做，否则 Codex 会默认“所有间距都该调大”，直接改 body 的 margin 或全局 font-size。
等它输出结构分析报告后，再发第二条指令。不要跳过这步——【Codex 没读清布局就动手改，90% 的 diff 都是无效回滚】。
只改间距：用 CSS 变量或 Tailwind 类精准干预
方法一：定位到具体元素后，直接追加间距类
找到表格行（tr）或表单项（div.form-group），在其 className 中插入 gap-4（Tailwind）或 margin-bottom: var(--spacing-6)（CSS 变量）。不要写成 margin: 0 0 1rem 0，硬编码值会让后续设计系统升级失效。
方法二：批量统一子元素间距
若父容器已用 display: flex，直接在父元素上加 gap: 1.25rem。这比给每个子元素设 margin 更安全，也避免 margin 折叠问题。
方法三：用 CSS 自定义属性覆盖
在 src/styles/tokens.css 中找到 --spacing-5（通常为1.25rem），把它临时改为 1.5rem；然后在目标组件的 style 属性中写 --spacing-5: 1.5rem。这样改只影响当前组件，不影响全局。
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
调整布局：强制使用 Flex，禁用浮动和绝对定位
第一步：确认当前布局是否合规
运行命令：npx codex check-layout --file src/pages/dashboard.tsx
第二步：若检测出 float 或 position: absolute，立即执行修复
在对应元素的 className 中移除所有 float-*、top/right/bottom/left 类；替换成 flex flex-col 或 flex items-center justify-between。Codex 默认不主动替换布局方式，你必须明确说“把 position: absolute 改为 flex 子项居中”。
第三步：验证响应式断点是否被破坏
检查修改后的代码里是否还保留 @media (max-width: 768px) { ... } 块；如果没有，补一句：“在 768px 下保持 flex-direction: column，gap 不变”。【漏掉这句，Codex 可能删掉整个媒体查询】
移动端 375px 下自动校验按钮与表单
在指令末尾加一句：请基于 Codex Browser Use 插件，模拟 375px 宽度渲染，检查：1. 主按钮是否被截断；2. 输入框是否换行；3. 所有 label 和 input 是否完整可见；4. 是否出现横向滚动条。
它会返回一份可验证的检查清单，而不是直接改代码。你确认无误后再让它执行修改。
这一步做完，Codex 就完成了对页面布局和元素间距的可控调整。
