UI/UE 设计规范与交互逻辑文档
关键数据（设备状态、故障告警、灌溉进度）一眼可见，减少认知负担
操作后1秒内响应，状态变化实时同步，离线时明确提示
关键操作二次确认，批量操作可撤销，误操作有明确恢复路径
桌面端为主（田间管理），平板适配（移动巡检），手机端查看
藏汉双语支持，符合当地操作习惯，支持低带宽环境
高对比度配色，支持键盘操作，屏幕阅读器友好
| 颜色 | 功能 | 使用场景 |
|---|---|---|
| ● 绿色 | 正常/在线/开启 | 设备在线、阀门打开、水泵运行、任务成功 |
| ● 蓝色 | 信息/主操作 | 按钮、链接、选中状态、图表主色 |
| ● 橙色 | 警告/注意 | 信号弱、电量低、非关键告警、维护提醒 |
| ● 红色 | 危险/离线/关闭 | 设备离线、阀门关闭、故障告警、删除操作 |
设备正常运行
设备通信中断
需要关注处理
| 模块 | 功能 | 访问频率 | 权限 |
|---|---|---|---|
| 📊 仪表盘 | 系统概览、关键指标、快捷操作 | 高 | 所有用户 |
| 💧 灌溉管理 | 灌溉计划、任务调度、手动控制 | 高 | 操作员+ |
| 🔧 设备管理 | 设备列表、拓扑图、固件升级 | 中 | 技术员+ |
| 📈 数据分析 | 用水报表、作物生长、效率分析 | 低 | 管理员 |
| ⚙️ 系统设置 | 参数配置、用户管理、日志 | 低 | 管理员 |
鼠标悬停时显示"查看详情"按钮，点击跳转对应模块
新告警右上角弹窗提示，3秒后自动收起，点击可直接处理
每30秒自动刷新，刷新时卡片显示骨架屏，避免闪动
月历形式展示每日灌溉计划，不同颜色代表不同作物区域，点击日期展开当日详细计划
按时间排序的任务列表，显示状态（待执行/执行中/已完成）、区域、预计用水量
向导式创建：选择区域 → 设置时间/时长 → 选择模式（定时/周期/智能）→ 确认
树状图展示灌溉服务器 → 水泵 → 阀门的层级关系，支持展开/收起，节点显示实时状态。
| 功能 | 说明 |
|---|---|
| 搜索/筛选 | 按名称、地址、状态、区域筛选，支持关键字搜索 |
| 批量操作 | 勾选多个设备进行批量开关、升级、重启 |
| 详情抽屉 | 点击行展开右侧抽屉，显示详细参数、历史记录、信号趋势图 |
| 导出 | 导出设备清单、状态报表为Excel/PDF |
按日/周/月统计用水量，对比不同区域、不同作物的用水效率
设备在线率趋势、故障率分析、信号强度分布图
作物生长曲线与灌溉记录叠加分析，优化灌溉策略
系统检测到阀门电量低于20%，右上角弹出告警通知，同时告警图标闪烁
点击通知或告警图标，进入告警列表，显示告警详情和建议处理方案
点击"查看设备"，自动跳转设备管理页并定位到该设备，显示拓扑位置
现场更换电池后，在系统中标记"已处理"，告警关闭并记录处理日志
| 异常场景 | UI表现 | 用户引导 |
|---|---|---|
| 网络断开 | 顶部红色横幅提示，数据区显示"连接中..."骨架屏 | 提示检查网络，自动重试连接，可手动刷新 |
| 操作超时 | 操作按钮恢复可点击，显示"请求超时"Toast提示 | 建议重试，如多次失败联系技术支持 |
| 设备离线 | 设备卡片灰显，状态显示"离线"红色标识 | 提示检查设备供电和网络，提供诊断指南 |
| 权限不足 | 操作按钮禁用或隐藏，点击时提示"无权限" | 说明所需权限，提供申请流程 |
保存、提交、确认
开启、启动、批准
暂停、重置
关闭、删除、停止
趋势数据，支持多条线对比，悬停显示数值
对比数据，支持堆叠，点击可下钻
占比数据，中心显示总计，图例可交互
关键指标，显示当前值与目标值对比
| 断点 | 范围 | 布局调整 |
|---|---|---|
| 桌面大屏 | ≥1440px | 展开侧边栏，多列布局，图表并排 |
| 桌面 | 1024-1439px | 标准布局，部分模块折叠 |
| 平板 | 768-1023px | 侧边栏可收起，单列布局，触摸优化 |
| 手机 | <768px | 底部导航，卡片堆叠，简化图表 |
组合式API，类型安全，组件化开发
成熟的组件库，支持深色主题定制
数据可视化，支持响应式和主题定制
状态管理，模块化store设计
藏区灌溉系统 Web 控制台
以"信息优先、即时反馈、容错设计"为核心，
打造专业可靠的高原农业管理平台
仪表盘3秒概览，异常一眼识别
关键操作多重确认，离线也能用
藏汉双语，低带宽优化
桌面为主，平板巡检，手机查看