修一个真实 Bug：复现、修改、检查与交付

01 · 记录能复现的条件

不要只说“手机上不好看”。记录页面路径、视口宽度、缺失的元素和桌面预期。这个练习使用“390px 宽度下商品插图消失”作为假设场景；请替换成你项目里的真实组件名。先确认现象是否由响应式 CSS 造成，而非接口没有返回商品。

git status --short
git diff --stat

02 · 把任务限制在相关组件

把复现条件、允许修改范围与验收要求一起交给 Codex。下面的提示词不绑定特定测试框架，要求先复用现有工具。

修复首页在 390px 宽度下商品插图消失的问题。
先查找对应组件和媒体查询，说明实际原因。
保持商品名称、价格、购买链接和桌面布局不变。
仅修改相关组件或 CSS，不引入依赖。
验证 390px 和 1440px 的插图可见、购买入口可点、页面无横向溢出。
列出检查结果；截图未检查时明确说明。

03 · 运行现有检查，查看真实差异

先看 package.json，使用项目已经提供的检查脚本。下面命令仅适用于确有同名脚本的项目。类型检查通过不能证明手机布局正确，还需要浏览器实测。检查差异时特别留意 display:none、高度裁切、隐藏容器与购买链接是否变化。

npm run typecheck
npm run build
git diff --check
git diff --stat
git diff

04 · 按验收条件交付

分别检查手机和桌面，点击购买入口只验证目标地址，不创建真实订单。记录验证宽度、成功与失败项。已有未提交改动时只保留本次修复文件，不使用 git reset --hard 清理整个项目。部署是另一个动作，应核对发布目标与本次改动范围。

常见问题