【AI Coding】借助cursor实现业务需求全栈交付实践

那这里就需要拆成两步，基础实现+微调。基础的功能实现交给AI：

pop弹窗和lottie动画的衔接处理：增加弹窗状态，通过lottie动画组件回调控制弹窗的隐藏和可见。

在onLoad中设置sleep，大致在动画播放完成时正好让弹窗可见，达到视觉效果。

动画结束位置、阴影表达：通过布局样式定位。

最外层样式itemsPop设置position：relative；动画和pop主体平级，动画样式设置position：absolute。

使用relative为子组件提供一个“锚点”

通过过程中和AI的不断交互，补充知识盲区，最终实现效果。

2. 飞入动画实现

原始诉求：点击或者关闭时，Pop需要缩放收入二排的单品返坑位。

具体实现：计算飞入动画的开始和结束位置，调用飞入动画函数，给定动画时间，复用已有的飞入动画组件。

AI实现过程遇到的问题（谁写的Bug谁修  ...AI修）：

• 先关闭了弹窗，然后再获取起始位置，导致无法获取开始位置，动画不生效

  

• 动画重复，一个弹窗缩放的，一个飞入二排的

  

• Pop动画和商品加载完成后，点击Pop无跳转效果

• 怀疑是动画添加后，覆盖了什么组件，导致点击事件失效；

• 让cursor增加点击事件日志，根据控制台输出的日志，排查问题；

• 调整lottie动画的z-index：1，Pop其他组件z-index调高，避免被覆盖。

• Feeds商品插卡-签到首页Feeds和渠道卡片商品去重

Feeds去重服务端处理，但需要前端请求Feeds接口时带上已曝光的商品列表

• 签到首页：携带单品返现渠道卡片曝光商品

• 单品返渠道卡片：携带首页Feeds曝光商品

实现过程中遇到的问题与优化：

1. 预期的预加载的逻辑和实际不符

签到首页Feeds有预加载逻辑，在首次进入页面或者下拉刷新时，请求Feeds第一页时，会预加载第二页请求，通过Feeds插件配置实现，但实际表现是：当用户在首页加载完成后，滑动页面，加载完第二页后，才会加载单品返现插卡商品。

写让cursor确认下逻辑

看起来链路上一切都没问题，那就继续找吧

说是状态判断的问题：

修复了之后依旧有问题，继续找

重复请求的问题fix了，没解决滑动加载的问题

给出了修复方案，但依旧未解决，甚至罢工了。。。。

AI解决不了，那就“开发”看看...

看组件的实现逻辑，FeedsList -> hudong-common-feeds中的InfiniteList -> coinhub-react-infinite-list中waterfallList

hudong-common-feeds:

coinhub-react-infinite-list包：

找到Feeds初始化逻辑

让cursor帮忙确认这里逻辑：

到这里，大概明确了问题原因，CSR链路下，在预发环境下，受Feeds接口请求耗时的影响，预加载会失效，只有等待用户翻页，才会继续请求，SSR链路下，没问题。总结：组件的代码，首次请求和预加载的执行是同步的，但请求feeds接口是异步的，会存在预加载失败的问题，应该等待首次请求结束后，再执行预加载。

验收过程，测试阶段，通过截图或者让视觉体验，发现问题，根据要求修改。

埋点，让PD梳理好埋点相关信息，让AI执行，去埋点平台验证。

总结

AI coding充满想象力，也不断拓展着技术的边界。从这个具体的业务需求实践去看，虽然遇到了各种各样的问题，但借助AI去梳理逻辑、定位问题，在不需要完备的知识体系背景下，也能最终解决问题，达到预期效果，但还是会走不少弯路。所以全栈交付的过程中，还是建议去多了解技术栈的基础知识，再搭配AI工具，会更加的游刃有余。

还有一个AI coding问题排查的心得：描述问题，让AI去增加日志埋点，然后直接把控制台的输出丢给他。