原型图 | React + Tailwind
C 端小程序首页，用户扫码进入后的第一个页面。根据用户身份（新用户/普通用户/套餐用户）展示不同内容，核心入口为扫码取水。
| 模块 | 说明 | 场景差异 |
|---|---|---|
| 用户信息区 | 头像、昵称、会员状态 | 新用户不展示 |
| 套餐卡片 | 套餐余额、已用量、总量（L），不折算金额 | 仅套餐用户 |
| 扫码取水 | 核心操作入口，全场景展示 | 场景①~④ |
| 进行中取水卡片 | 设备信息+状态+时间，点击返回c07出水页，取水完成后自动消失 | 仅场景⑤ |
| 功能入口 | 购买套餐、订单记录等快捷入口 | 普通/新用户展示，套餐用户不展示 |
| 语言切换 | 状态栏左侧下拉菜单，支持6种语言（中/英/泰/日/韩/俄），默认中文 | 所有场景 |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 点击扫码取水 | 用户点击按钮 | 用户已登录 | LINE系统相机弹出 | 扫码失败/取消：返回C00；设备不可售水：C06异常提示拦截 | 调用 liff.scanCode() 原生扫码，识别设备二维码后跳转C06选档位页 |
| 点击购买套餐 | 用户点击入口 | 用户已登录 | 跳转套餐购买页 | 未登录：引导登录 | 跳转套餐购买页 |
| 点击查看全部 | 用户点击链接 | 用户有历史订单 | 跳转订单列表 | 无异常，空列表也跳转 | 跳转 C02 订单列表 |
| 新用户首次进入 | 首次扫码进入小程序 | 用户未注册 | 展示欢迎引导页 | - | 需完成注册绑定后才能使用 |
| 套餐余额展示 | 页面加载 | 用户有生效套餐 | 展示剩余/已用/总量（L） | 套餐已过期：不展示卡片 | 以 L 为单位，不折算金额 |
| 切换语言 | 用户点击语言切换按钮 | - | 下拉菜单展开，选中项高亮 | - | 页面所有文本切换为对应语言 |
| URL参数语言初始化 | 从柜机扫码进入（?lang=xx） | URL含有效lang参数 | 自动切换到指定语言 | 无参数或无效参数：默认中文 | 读取URL lang参数初始化语言 |
| 场景 | 展示内容 |
|---|---|
| 场景① 已登录无套餐 | 用户信息 + 扫码取水 + 购买套餐 + 最近订单 |
| 场景② 已登录有套餐 | 用户信息 + 套餐卡片 + 扫码取水 + 最近订单 |
| 场景③ 未登录 | 品牌展示 + 平台简介 + LINE一键登录按钮 |
| 场景④ 已登录套餐已用完 | 用户信息 + 灰色套餐卡片(0L) + 额度用完引导 + 扫码取水 + 最近订单 |
| 场景⑤ 存在进行中取水 | 用户信息 + 可选套餐卡片 + 进行中取水卡片 + 最近订单 |
C00 首页 ├─ 扫码取水 → C06 选档位页（柜机扫码触发） ├─ 购买套餐/立即购买 → C05 套餐购买 ├─ 查看全部 → C02 订单列表 ├─ 进行中取水卡片 → C07 出水页 ├─ 套餐卡片 → C11 套餐详情 └─ 底部导航 → 首页(C00) / 订单(C02) / 我的(C12)