与 AI 协作修复社区瀑布流：一次软件工程实践
一、项目介绍
Echidna 是一个面向图像生成的 Web 应用。用户可以输入提示词、编辑布局并生成图片，也可以查看生成历史、分享作品和浏览社区。管理员负责内容分级和分享审核。
项目采用前后端分离架构：前端使用 React、TypeScript 和 Vite，后端使用 Python 和 FastAPI。
在这次软件工程实践中，我负责提出需求、体验页面和反馈问题，AI 负责分析代码、修改实现和执行测试。我选择的具体需求是：
改善社区瀑布流的懒加载，让用户向上、向下浏览时都能加载更多图片，并减少新数据返回时的画面跳动。
二、选定需求与功能验收
社区采用多列瀑布流，允许用户上下循环滚动。图片按需加载，而不是一次性下载全部作品。
本次功能的验收标准是：
- 向上、向下滚动都能触发分页加载，包括慢速上滚。
- 快速滚动时提前请求数据和图片，降低出现空白的概率。
- 新一页返回时，当前可见图片不突然移位或被替换。
- 新图片能在继续滚动后出现，加载失败时可以重试。
这些功能已经在本地 WebUI 中部署，可以实际演示。不过，提前加载不能消除所有网络等待，网络过慢时仍可能先看到已有图片循环展示。
演示步骤
- 打开本地 WebUI，进入社区页面。
- 分别向下、向上滚动，观察是否持续出现作品。
- 尝试快速滚动、小幅度慢速上滚和中途换向。
- 在浏览器开发者工具中观察分页请求，并模拟较慢网络。
- 对比新数据返回前后的可见图片位置，确认画面没有突然跳动；继续滚动，确认新作品能够出现。
三、迭代记录
第一轮：解决快速滚动时加载跟不上的问题
我给 AI 的修改要求：
我发现滚动过快时，页面似乎先循环展示旧图片，懒加载却没有及时跟上，因此要求 AI 修复。
AI 实际改了什么：
- 根据滚动速度动态增加分页和图片加载的提前量。
- 对已进入预加载范围的图片直接启动加载，避免再等待浏览器的懒加载判断。
- 限制预加载范围，避免为了流畅而一次加载全部图片。
这一轮的结果：
快速滚动的预取能力得到改善，但随后我发现：慢速向上滚动仍然不能正常触发加载。这说明第一轮并没有完整解决双向滚动问题。
第二轮：修复慢速上滚不触发加载
我给 AI 的修改要求：
“你现在的 bug 是，你往上滚的时候不会触发 lazy 加载。”
AI 实际改了什么：
- 调整向上滚动的加载判断，从进入上一轮图片的边界开始计算，不再要求先滚过很长距离。
- 避免用户停住后持续请求所有剩余页面。
- 调整新数据接入时的位置保持逻辑，优先参考视口中部的图片。
这一轮的结果：
桌面和手机端的慢速上滚测试通过，新数据可以正常请求。但之后继续使用时，我仍然发现社区加载存在异常，于是进行了第三轮排查。
第三轮：修复循环接缝处的图片跳动
我给 AI 的修改要求：
“我们继续看看社区界面的 lazy 加载，现在存在 bug。”
AI 实际改了什么：
AI 模拟延迟返回下一页，发现当屏幕同时显示上一轮末尾和下一轮开头时，新数据会改变整轮瀑布流的高度。即使固定住其中一张图片，另一侧的图片仍可能移动。
修复方式是：
- 新数据可以先下载下来。
- 当循环接缝仍在视口中时，暂时保持现有排列。
- 等接缝离开视口后，再接入新的排列。
- 分页判断使用已经下载的数据量，避免等待接入期间重复请求。
这一轮的结果：
修复前，实测的 13 张可见卡片中有 5 张发生移位或替换；修复后，同一复现场景中的 13 张卡片全部保持原位。
四、验证说明：我是怎么确认结果正确的？
我没有只根据 AI 的“已经修复”来判断成功，而是结合自己的页面体验和 AI 提供的测试结果进行确认。
首先，我在使用过程中发现了慢速上滚的问题。这个操作和快速滚动不同，因此暴露了第一轮验证没有覆盖到的情况。
其次，AI 执行的浏览器回归覆盖了以下场景：
- 桌面和手机端的分页加载、失败重试。
- 快速向上、向下滚动。
- 小幅度、慢速向上滚动。
- 下一页延迟返回时，可见图片是否保持位置。
- 离开接缝并改变滚动方向后，新图片能否正常出现。
最后，针对图片跳动问题，使用了前后对比：记录加载前后可见图片的标识和屏幕坐标，而不只是检查接口是否返回成功。这让“画面稳定”变成了可以检查的结果。
最终这一轮有 7 项 Chromium 浏览器回归通过，生产构建通过，修复也已经更新到本地页面。这是针对当前需求的验证，不能等同于整个项目、所有浏览器的完整测试都通过。
五、协作心得
本次最大的意外是：接口请求成功，不代表用户看到的效果正确。
我最初以为问题只是“图片加载太晚”。经过几轮修改才发现，分页请求、图片加载和循环布局更新是相互影响的。提前请求解决不了所有问题，新数据回来后如何接入画面同样重要。
AI 让我惊喜的地方，是它能把模糊的“画面不对劲”转化成可重复的场景，并通过图片位置对比定位原因。
让我失望的地方，是它前几轮宣布修复时，验证范围还不够完整。例如，快速上滚通过了，并不代表慢速上滚也正确；固定住一张图片，也不代表其他可见图片都没有移动。
这次协作让我认识到：我不能只负责提一个需求，然后接受 AI 的结论。我还需要明确验收条件、尝试不同操作，并要求 AI 提供能够对应到实际问题的验证证据。
