长文预警，这个是一个手把手，step by step 教程，适合新手 
文章太长，已经超过最大 6 万字，因此部分代码用图片展示，部分章节有删减 
文章末尾有代码仓库及原文。原文有代码折叠和 diff，排版风味更佳 
无广告，纯公益 

喝完免费的奶茶🧋，是时候整点干货了。 
你有没有好奇过，和 AI 聊天过程中，给他说一句话，商品就发过来了，这是如何实现的？ 
有小伙伴说，“用 iframe“。显然，iframe 难以实现抽屉弹窗效果。 
下面，我将用 5 分钟时间，300 行代码，从 0 开始，教你古法手写实现这个效果，见视频： 
[buy-product-success] 
机器人页面
首先，我们先用 vite 搭一个机器人聊天页面。pnpm，启动！ 
控制台：执行 
pnpm create vite qwen-free-tea --template react-ts --imme...