# 用户端 App 最新参考产品设计

> 本版本保留早期逐稿确认记录。用户已于 2026-09-05 将流程调整为“每种页面类型生成一张并直接保存”；完整页面清单与当前规则请查看 `产品设计说明_用户端APP_v1.1.md`。

## 1. 设计目标

- 以 `doc/用户端APP-产品设计` 中的业务功能和页面流程为基础逐类优化，不删除后续规划功能。
- 视觉与现有用户端 Design System 保持一致，主色使用 `#2563EB`，背景使用 `#F7F8FA`。
- 界面采用正式移动 App 的信息层级、间距和交互组件，不使用紫色、渐变、Emoji、玻璃拟态、三维装饰或夸张 AI 风格元素。
- 每类页面先生成三个独立候选，仅保存用户明确选定的版本。

## 2. 已选页面

| 序号 | 页面类型 | 来源参考 | 入选文件 | 状态 |
| --- | --- | --- | --- | --- |
| 01 | 登录页 | `../用户端APP-产品设计/1.jpg` | `01-登录页.png` | 已选择方案 1 |
| 02 | 智能角阀功能介绍 | `../用户端APP-产品设计/2.jpg`、`3.jpg` | `02-智能角阀功能介绍.png` | 已选择方案 1 |
| 03 | 首页与设备概览 | 当前真实首页、`../用户端APP-产品设计/4.jpg`、`4-1.jpg` | `03-首页.png` | 已选择方案 1 并完成公告区优化 |
| 04 | 智能角阀设备详情与控制 | `03-首页.png`、`../用户端APP-产品设计/4.jpg`、`4-6.jpg` | `04-智能角阀控制.png` | 已选择方案 1 |
| 05 | 一键报修 | `04-智能角阀控制.png`、`../用户端APP-产品设计/4-3.jpg`、`4-4.jpg` | `05-一键报修.png` | 已选择方案 2 |
| 06-1 | 扫码添加确认 | `03-首页.png`、`../用户端APP-产品设计/4-5.jpg` | `06-1-扫码添加确认.png` | 添加设备必需流程 |
| 06-2 | 蓝牙连接设备 | `03-首页.png`、`../用户端APP-产品设计/4-7.jpg` | `06-2-蓝牙连接设备.png` | 添加设备必需流程 |
| 06-3 | 手动输入设备码 | `03-首页.png`、`../用户端APP-产品设计/4-5.jpg`、`4-7.jpg` | `06-3-手动输入设备码.png` | 添加设备必需流程 |

## 3. 产品设计依据

新版产品设计必须同时合并三类依据，任何一类已有能力都不得因视觉改版被删除：

1. 原产品设计图：`doc/用户端APP-产品设计` 中的完整页面和交互流程。
2. 当前真实用户端：`apps/user_app` 已实现的登录、首页、商城、订单和个人中心能力。
3. 正式需求文档：`docs/03-用户端App需求.md` 中已明确的首期功能和后续迭代能力。

### 3.1 当前已实现能力

- 登录、注册、会话恢复和登录后返回原目标页。
- 首页安全内容、安全公告、内容详情和当前服务归属；服务归属分别展示所属气站与服务配送点。
- 商城商品列表、购买确认、地址选择、订单创建和余额支付。
- 商城订单、供气订单、退款记录、服务工单，以及支付宝、微信支付和退款申请入口。
- 个人资料、头像、钱包余额、地址管理、供气合同、钱包流水、申请维修和退出登录。

### 3.2 原设计及需求文档保留能力

- 智能角阀列表、设备详情、在线/离线、开关状态、电量、环境压力、温度、自动关阀时间、燃气检测和最后更新时间。
- 扫码添加、手动输入、蓝牙连接、设备校验、安装地址、设备昵称和重复绑定校验。
- 单设备开关阀、操作确认、命令回执、失败/超时状态，以及高风险事件禁止开阀。
- 厨房、热水器、暖气等设备分组，全开、全关、编辑、删除和逐设备失败明细。
- 气瓶规格、钢瓶号、充装日期、充装单位、充装数量、有效期、制造厂和异常提示。
- 可燃气体报警器列表、最近告警、安全提示、触发报警、紧急电话、一键报修和处理进度。
- 报修类型、故障描述、语音输入、联系人、地址、当前位置和最多三张现场照片。
- 商城分类、搜索、收藏、数量调整、商品详情、购物车、库存、配送费、预约时段和支付方式。
- 订单状态、配送轨迹、确认收货、售后、退款、评价和电子发票。
- 钱包、押金、消息、用气统计、收藏、客服、紧急联系人、家庭共享、通知与通用设置。

### 3.3 导航与页面组织原则

- 保留当前真实 App 的“首页、商城、订单、我的”四栏结构，避免底部导航过度拥挤。
- 智能角阀作为首页核心设备模块及独立详情流程；收藏放入商城和“我的”，不因取消独立底栏入口而删除功能。
- 当前已实现功能在设计稿中按真实可用状态呈现；后续能力按完整交互流程设计，但开发时必须等待真实接口，不使用静态成功结果冒充上线能力。

## 4. 登录页功能范围

- 手机号输入。
- 验证码登录与获取验证码。
- 密码登录切换。
- 记住登录状态。
- 忘记密码。
- 用户协议与隐私政策入口。

## 5. 设计规范

- 品牌主色：`#2563EB`。
- 成功色：`#16875D`。
- 警告色：`#B86400`。
- 危险色：`#C7352A`。
- 页面背景：`#F7F8FA`。
- 最小触控区域：48dp。
- 常规按钮高度：52dp。
- 间距使用 4dp 基础网格。
- 圆角优先使用 10dp、12dp、16dp。

### 5.1 智能角阀功能介绍

- 保留功能介绍、安全案例、法律法规和气价信息四类内容入口。
- 功能介绍保留远程开关阀门、实时状态监控、安全报警提醒和定时关阀设置。
- 使用统一线性图标，移除 Emoji、浏览器浮层、系统状态栏和截图侧边控件。

### 5.2 首页与设备概览

- 保留“当前服务归属”，分别显示所属气站与服务配送点。
- 首页增加厨房智能角阀概览，展示在线状态、开关状态、电量、环境压力、温度、可燃气体状态和最后更新时间。
- 提供扫码添加、蓝牙连接、分组控制和一键报修快捷入口。
- 提供安全记录、最近告警和气瓶信息入口，高风险开阀操作进入设备详情后执行。
- 安全公告使用圆角描边列表卡，展示真实中文摘要、日期和“查看全部”入口。
- 保留当前“首页、商城、订单、我的”四栏底部导航。

### 5.3 智能角阀设备详情与控制

- 展示在线状态、当前开关状态、设备状态说明和最后更新时间。
- 展示电量、环境压力、温度、可燃气体、关阀时间和使用气瓶六项设备数据。
- 开阀前明确校验设备在线、燃气泄漏和传感器状态，不允许绕过安全检查。
- 以单一主按钮执行开阀操作，并提示现场通风和远离明火。
- 保留安全记录、气瓶详情和一键报修入口；设备命令开发时必须展示最终回执或超时待确认状态。

### 5.4 一键报修

- 使用“故障信息、联系与地址、确认提交”三步引导，减少长表单一次性填写压力。
- 支持燃气泄漏、阀门故障、报警器故障和其他问题四类故障。
- 支持故障描述、语音输入和最多三张现场照片，照片记录拍摄时间及当前位置。
- 保留脱敏联系电话、报修地址、定位状态和紧急电话入口。
- 报修提交结果以服务端工单为准，失败时保留已填写内容，避免用户重复录入。

### 5.5 添加设备

- 扫码添加、手动输入和蓝牙连接是三种并存的必需方式，不作为互相替代的视觉候选。
- 扫码识别后展示设备编号、设备昵称、安装地址、安装位置和校验结果，再由用户确认绑定。
- 蓝牙连接展示附近设备、信号强度、连接状态、重新搜索、权限开启和连接帮助。
- 手动输入提供设备编号格式提示、编号位置示例、校验失败处理和其他添加方式入口。
- 绑定前统一校验设备归属、激活状态、服务区域和重复绑定；权限失败不得阻塞手动输入。

## 6. 后续流程

其余页面继续按“原始产品设计图 → 同一功能内容的三个布局候选 → 用户选择 → 保存入选稿”的顺序推进。不同业务方式或流程状态必须分别保留，不得作为互斥候选。全部视觉方案完成后，再据此更新 Flutter 用户端界面和相关功能。