原型图 | React + Tailwind
C端普通终端用户的个人中心页面（LINE小程序）。展示用户基本信息、取水统计数据，提供余额、订单、客服、关于等功能入口。支持语言切换（纯样式，不涉及真实翻译）。3个场景：①已登录有余额 ②已登录无余额 ③未登录引导登录。
| 模块 | 说明 |
|---|---|
| 用户信息区 | 头像占位圆 + 昵称 + User ID（6位字母数字，平台生成） |
| 取水统计 | 3个数字卡片：累计取水量(L) / 累计取水次数 / 本月取水量(L) |
| 余额入口 | 蓝色渐变卡片展示当前余额（泰铢）+ "点击查看明细"，点击跳转C11；无余额时展示"暂无余额"+购买按钮 |
| 取水订单入口 | 菜单项，点击跳转C02订单列表 |
| 套餐订单入口 | 菜单项，点击跳转C02订单列表 |
| 联系客服 | 弹窗展示联系邮箱（占位邮箱 support@drovio.com，非真实客服地址） |
| 关于我们 | 弹窗展示版本号(v1.0.0)+公司信息(Drovio Technology Co.,Ltd.)+隐私政策链接(占位)+服务条款链接(占位)+联系邮箱 |
| 语言切换 | 标题栏右侧下拉按钮，6语言（中/英/泰/日/韩/俄），样式与C01一致，纯样式不涉及真实翻译 |
| 未登录状态 | 大头像占位+"登录后查看个人信息"+"登录/注册"按钮 |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 点击余额卡片 | 用户点击余额卡片 | 已登录且有余额 | 页面跳转 | — | 跳转C11套餐详情 |
| 点击取水/套餐订单 | 用户点击菜单项 | 已登录 | 页面跳转 | — | 跳转C02订单列表 |
| 点击联系客服 | 用户点击菜单项 | 已登录 | 弹窗展示邮箱 | — | 弹窗（占位邮箱，点击遮罩关闭） |
| 点击关于我们 | 用户点击菜单项 | 已登录 | 弹窗展示版本/公司/链接 | — | 弹窗（含服务条款→C13） |
| 语言切换 | 用户选择语言 | — | 下拉列表+重新渲染 | — | 纯样式切换，不涉及真实翻译 |
| 底部导航切换 | 用户点击导航项 | — | 页面跳转 | — | 首页→C00，订单→C02 |
| 场景 | 展示内容 |
|---|---|
| 场景① 有余额 | 用户信息 + 取水统计 + 余额蓝色渐变卡片（当前余额泰铢） + 功能菜单 |
| 场景② 无余额 | 用户信息 + 取水统计 + "暂无余额"+购买按钮 + 功能菜单 |
| 场景③ 未登录 | 大头像占位 + "登录后查看个人信息" + 登录/注册按钮 |
C12 我的 ├─ 余额卡片 → C11 套餐详情 ├─ 购买套餐按钮（无余额时）→ C05 套餐购买 ├─ 取水订单菜单 → C02 订单列表 ├─ 套餐订单菜单 → C02 订单列表 ├─ 联系客服 → 弹窗（占位邮箱） ├─ 关于我们 → 弹窗（含服务条款 → C13） ├─ 语言切换 → 当前页面刷新显示语言 ├─ 底部导航 首页 → C00 首页 ├─ 底部导航 订单 → C02 订单列表 └─ 返回箭头 → C00 首页