MobileNavigation.tsx
修复后的导航组件
全部案例
示例工作流 · 代码修改
定位移动端回归问题，修改代码并完成验证
这个示例展示 Agent 如何在已有 React 仓库中读取约定、复现问题、完成小范围修改，并运行测试和浏览器检查。
这是基于模拟仓库构建的工程示例，不对应真实客户代码。
MobileNavigation.tsx+12 −5
useEffect(() => {
+ const releaseScrollLock = () => {
+ document.body.style.overflow = ''
+ }
if (open) lockScroll()
- return unlockOnUnmount
+ return releaseScrollLock
}, [open])
验证结果
18 项测试通过
构建完成
移动端已检查
输入目标
“移动端菜单关闭后页面仍然不能滚动。修复这个回归，不改变导航组件的公开 API，补充测试，并验证桌面端没有受到影响。”
提供的材料
frontend repository
包含 React、Vite 和现有组件测试
reproduction.md
问题步骤、期望行为和浏览器环境
mobile-error.mp4
触发问题的短录屏
Agent 的处理过程
- 1
复现问题
启动项目并确认滚动锁在菜单关闭后没有释放。
- 2
定位根因
检查 effect 清理和多个关闭路径，找到遗漏分支。
- 3
实施修复
集中管理滚动锁，并补充打开、关闭和卸载测试。
- 4
运行验证
执行测试、构建，并在桌面与移动视口检查页面。
最终结果
变更范围、验证结果和剩余风险都可见
修改只涉及导航的滚动锁生命周期；测试覆盖用户点击、路由切换与组件卸载，并记录了浏览器验证结果。
MobileNavigation.test.tsx
新增回归测试
verification.md
测试、构建和浏览器检查结果
change-summary.md
根因、行为变化与剩余风险
这个示例说明了什么
可靠修改需要先理解项目约定和现有状态管理。
工具成功不等于任务完成，测试和真实浏览器行为都需要检查。
范围清晰的变更说明让人工评审更快。
在你的仓库里解决一个真实问题
连接代码仓库并提供目标、复现步骤和约束。