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