前端架构
架构目标
前端承担平台管理、设备运维、可视化展示、组态配置和移动端操作等体验入口。整体设计以“统一权限、统一 API、统一组件规范、按业务域组织页面”为原则，保证功能可扩展、交付易维护。
应用结构
工程形态
| 工程 | 适用场景 | 维护重点 |
|---|---|---|
| Vue2 管理端 | 当前商业版主要管理端与存量功能 | 路由权限、页面一致性、组件复用 |
| Vue3 管理端 | 新功能演进和现代化重构 | 组合式 API、类型约束、构建优化 |
| 可视化大屏 | 数据大屏、监控看板、展示页面 | 数据源、组件性能、屏幕适配 |
| Web 组态 | 设备画面、变量绑定、动画和交互 | 组件属性、事件、动态数据 |
| H5/移动端 | 轻量运维、消息查看、个人中心 | 低带宽、弱网、移动交互 |
核心模块
- 路由与权限：根据登录状态、角色、菜单权限动态生成可访问页面。
- API 封装：统一请求前缀、Token、错误处理、分页参数和文件上传下载。
- 状态管理：保存用户信息、权限、字典、缓存视图和部分页面状态。
- 组件体系：表格、表单、弹窗、选择器、设备卡片、图表组件等尽量复用。
- 可视化与组态：支持动态数据、公共接口、组件事件、变量绑定和动画配置。
- 视频页面：对接流媒体播放、分屏、全屏、倍速、语音对讲和录像。
页面组织建议
| 页面类型 | 建议 |
|---|---|
| 列表页 | 固定查询区、表格、批量操作和分页，避免复杂逻辑分散在模板中 |
| 表单页 | 将校验规则、默认值和提交逻辑集中管理，减少重复判断 |
| 详情页 | 明确基础信息、运行状态、历史数据、告警记录和操作日志分区 |
| 可视化页面 | 优先保证渲染性能、响应式尺寸和数据刷新节奏 |
| 配置页面 | 保留操作确认、默认值说明和错误提示，降低误操作成本 |
UI 优化方向
- 导航分组应围绕用户任务组织，例如设备接入、平台操作、开发扩展、资料支持。
- 表单和表格保持字段命名一致，减少“同一概念多种叫法”。
- 高风险操作使用二次确认，并展示影响范围。
- 大屏和组态编辑器优先保证控件稳定尺寸，避免拖拽、缩放和动态内容导致布局跳动。
- 移动端页面减少长表格，使用卡片、筛选抽屉和分段信息块提升可读性。
联调关注点
- 前端菜单权限和后端接口权限必须同步验证。
- WebSocket、MQTT WS、视频流等长连接要确认代理路径和超时配置。
- 可视化组件的数据刷新频率要结合接口性能设置，避免无意义轮询。
- 构建产物部署到 Nginx 后，需要验证静态资源路径、接口前缀和刷新路由。