前端架构

架构目标

前端承担平台管理、设备运维、可视化展示、组态配置和移动端操作等体验入口。整体设计以“统一权限、统一 API、统一组件规范、按业务域组织页面”为原则，保证功能可扩展、交付易维护。

应用结构

工程形态

工程	适用场景	维护重点
Vue2 管理端	当前商业版主要管理端与存量功能	路由权限、页面一致性、组件复用
Vue3 管理端	新功能演进和现代化重构	组合式 API、类型约束、构建优化
可视化大屏	数据大屏、监控看板、展示页面	数据源、组件性能、屏幕适配
Web 组态	设备画面、变量绑定、动画和交互	组件属性、事件、动态数据
H5/移动端	轻量运维、消息查看、个人中心	低带宽、弱网、移动交互

核心模块

• 路由与权限：根据登录状态、角色、菜单权限动态生成可访问页面。
• API 封装：统一请求前缀、Token、错误处理、分页参数和文件上传下载。
• 状态管理：保存用户信息、权限、字典、缓存视图和部分页面状态。
• 组件体系：表格、表单、弹窗、选择器、设备卡片、图表组件等尽量复用。
• 可视化与组态：支持动态数据、公共接口、组件事件、变量绑定和动画配置。
• 视频页面：对接流媒体播放、分屏、全屏、倍速、语音对讲和录像。

页面组织建议

页面类型	建议
列表页	固定查询区、表格、批量操作和分页，避免复杂逻辑分散在模板中
表单页	将校验规则、默认值和提交逻辑集中管理，减少重复判断
详情页	明确基础信息、运行状态、历史数据、告警记录和操作日志分区
可视化页面	优先保证渲染性能、响应式尺寸和数据刷新节奏
配置页面	保留操作确认、默认值说明和错误提示，降低误操作成本

UI 优化方向

• 导航分组应围绕用户任务组织，例如设备接入、平台操作、开发扩展、资料支持。
• 表单和表格保持字段命名一致，减少“同一概念多种叫法”。
• 高风险操作使用二次确认，并展示影响范围。
• 大屏和组态编辑器优先保证控件稳定尺寸，避免拖拽、缩放和动态内容导致布局跳动。
• 移动端页面减少长表格，使用卡片、筛选抽屉和分段信息块提升可读性。

联调关注点

1. 前端菜单权限和后端接口权限必须同步验证。
2. WebSocket、MQTT WS、视频流等长连接要确认代理路径和超时配置。
3. 可视化组件的数据刷新频率要结合接口性能设置，避免无意义轮询。
4. 构建产物部署到 Nginx 后，需要验证静态资源路径、接口前缀和刷新路由。