背景
需求简介
-
首页展示单品返子玩法商品POP，包括：弹窗前置动画、动画与POP过度、关闭弹窗收入二排动画等； -
首页Feeds展示单品返子玩法商品卡片，包括：单商品卡片和多商品卡片两种样式。
|
单品返首页弹窗 |
单品返首页插卡 |
 |
 |
AI Coding实践
-
需求澄清
-
首页新增一个Pop（需要回调疲劳度、动画、Pop上需要展示商品）-只在老版本； -
首页Feeds增加单品返商品插卡（可复用首页渠道插卡） – 新老版本都需要； -
首页Feeds和单品返插卡商品双向去重 – 新老版本都需要。
-
创建变更
 |
 |
-
AI初版方案
-
方案Review
-
弹窗样式细节调整
-
动效实现
 |
 |
那这里就需要拆成两步，基础实现+微调。基础的功能实现交给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接口是异步的，会存在预加载失败的问题，应该等待首次请求结束后，再执行预加载。
2. 首页Feeds直通车回退插卡，导致单品返插卡商品刷新
问题表现是：直通车回退时，商品卡片商品刷新。先和cursor交互，先定位问题，梳理逻辑，再解决问题。
再确认逻辑，确认其他优化：
-
数据请求失败，不清空数据，只清楚标识，允许重试
-
updateFeedsData事件：清空数据
问题总结：
-
核心问题：单品返渠道插卡作为主页Feeds依赖的子组件，数据只需要请求一次，但因为依赖数组中包含了首页曝光商品，直通车回退时
-
曝光商品改变
-
组件重新挂载（点击的商品在渠道卡片之前），导致状态丢失，接口重新请求
-
解决方式：将渠道卡片的Feeds请求的状态和数据提升到父组件中，保证当前会话不变。
3. 页面加载状态优化
因为首页需要商品去重，首页单品返渠道卡片Feeds的请求和主页Feeds存在时序，cursor一开始实现时，采用双状态：page1Loaded、page2Loaded来分别记录页面的加载状态，但综合来开，最后对状态的使用时机，单个状态即可满足要求，让AI帮忙优化。
加载单品返Feeds判断
紧急撤回…
给我急得…
都这么说了，蒜了蒜了
4. 单品渠道卡片区分单商品和多商品，组件优化
AI在实现时，是根据不同的渠道卡片不同的biztype，使用不同的css样式，来完成不同卡片样式的渲染，但服务端的经验告诉我们，应该抽出可复用的组件。让cursor抽取组件相同的样式文件、公共参数等，使得结构更加清晰。
|
|
|
|
▐ STEP 5: 视觉验收、埋点
验收过程，测试阶段，通过截图或者让视觉体验，发现问题，根据要求修改。
|
|
|
|
埋点，让PD梳理好埋点相关信息，让AI执行，去埋点平台验证。
总结
AI coding充满想象力，也不断拓展着技术的边界。从这个具体的业务需求实践去看，虽然遇到了各种各样的问题，但借助AI去梳理逻辑、定位问题，在不需要完备的知识体系背景下，也能最终解决问题，达到预期效果，但还是会走不少弯路。所以全栈交付的过程中，还是建议去多了解技术栈的基础知识，再搭配AI工具，会更加的游刃有余。
还有一个AI coding问题排查的心得：描述问题，让AI去增加日志埋点，然后直接把控制台的输出丢给他。
