即时零售系统 Demo · 三端联动
用户端下单、商家端接单、骑手端配送的完整订单流转演示：商品展示、购物车、结算与实时状态时间线。
技术说明
实现思路
- 纯前端单文件实现，零运行时依赖，与博客其余 Demo 同一技术栈，直接以 iframe 嵌入详情页。
- 三端（用户 / 商家 / 骑手）共享同一份内存订单状态，通过角色切换函数 enterRole 重组页面，模拟真实『下单 → 接单 → 配送 → 送达』的状态机流转。
- 购物车以独立状态对象维护，加购 / 加减 / 删除实时更新浮动栏与角标；结算页聚合地址、商品、费用与优惠券，提交后写入订单时间线。
- 视觉已整体换肤为博客设计语言：纸感米白底、苔绿强调、黛蓝次级、近方圆角与思源字体，并在 iframe 内跟随博客明 / 暗主题联动。
- 配送地图用纯 CSS 网格 + 路线渐变模拟，骑手位置以动画标记呈现，无需任何外部地图 SDK。