Frontend Architecture
Architecture Goals
The frontend provides experience entry points for platform management, device operations, visualization, Web configuration, and mobile usage. It follows the principles of unified permissions, unified APIs, unified component conventions, and business-domain-based page organization to keep features extensible and delivery maintainable.
Application Structure
Project Forms
| Project | Scenario | Maintenance Focus |
|---|---|---|
| Vue2 admin UI | Main commercial admin UI and existing functions | Route permissions, page consistency, component reuse |
| Vue3 admin UI | New feature evolution and modernization | Composition API, type constraints, build optimization |
| Visualization dashboards | Data dashboards, monitoring boards, display pages | Data sources, component performance, screen adaptation |
| Web configuration | Device panels, variable binding, animation, interaction | Component properties, events, dynamic data |
| H5/mobile | Lightweight operations, messages, personal center | Low bandwidth, weak network, mobile interaction |
Core Modules
- Routes and permissions: dynamically generate accessible pages based on login state, roles, and menu permissions.
- API wrapper: unify request prefixes, tokens, error handling, pagination parameters, and file upload/download.
- State management: store user information, permissions, dictionaries, cached views, and partial page state.
- Component system: reuse tables, forms, dialogs, selectors, device cards, chart components, and other common UI elements.
- Visualization and configuration: support dynamic data, public APIs, component events, variable binding, and animation configuration.
- Video pages: integrate media playback, split-screen, fullscreen, playback speed, voice intercom, and recording.
Page Organization Suggestions
| Page Type | Suggestion |
|---|---|
| List page | Keep a fixed query area, table, batch actions, and pagination; avoid spreading complex logic across templates |
| Form page | Manage validation rules, defaults, and submit logic together to reduce repeated checks |
| Detail page | Clearly separate basic information, runtime status, history data, alarm records, and operation logs |
| Visualization page | Prioritize rendering performance, responsive sizing, and data refresh rhythm |
| Configuration page | Keep operation confirmation, default descriptions, and error prompts to reduce mistakes |
UI Optimization Direction
- Navigation groups should follow user tasks, such as device access, platform operations, development, and resources.
- Forms and tables should use consistent field names to avoid multiple terms for the same concept.
- High-risk operations should require confirmation and show the affected scope.
- Dashboards and configuration editors should keep stable control dimensions to avoid layout shifts during dragging, scaling, or dynamic content updates.
- Mobile pages should reduce long tables and use cards, filter drawers, and segmented information blocks for readability.
Integration Checklist
- Frontend menu permissions and backend API permissions must be verified together.
- Long connections such as WebSocket, MQTT WS, and video streams need proxy paths and timeout settings checked.
- Visualization refresh rates should match API performance to avoid unnecessary polling.
- After deploying build output to Nginx, verify static asset paths, API prefixes, and route refresh behavior.