业务流程:浏览菜品 → 分类筛选 → 加入购物车 → 调整数量 → 结算下单
模块 功能点
顶部导航 地址展示(深圳·南山科技园)、搜索框、购物车角标(实时数量)
分类筛选 6 个分类:全部 / 米饭套餐 / 粉面汤粥 / 小吃炸串 / 饮品甜点 / 火锅冒 菜,点击切换
菜品展示 15 道菜品卡片,含 AI 生成图片、名称、描述、价格、月销量、标签(招牌/爆款/人气/热销)
购物车 右侧固定面板,支持加减数量、实时总价计算(含 ¥3 配送费)、清空购物车
下单结算 弹窗确认订单明细(商品列表 + 合计金额 + 预计送达时间 30-45 分钟)
交互反馈 Toast 提示"已加入购物车"、悬停动效、空购物车引导
维度 说明
架构模式 纯前端单文件(HTML + CSS + JS 内联),无模块化拆分
数据管理 菜品数据以 JavaScript 对象数组形式硬编码在前端,购物车状态由内存变量 cart[] 管理
渲染方式 数据驱动 DOM 渲染,renderMenu() / updateCart() 全量重绘
状态流转 无路由、无后端 — 用户在单页面内完成从浏览到下单的完整闭环
部署方式 零依赖,任意浏览器直接打开即可使用