Frontend Architecture

Table of Contents

1. Project Structure
2. Core Architecture Pattern
3. Application Initialization and Integration
4. Dynamic Route Generation Mechanism
5. State Management Scheme
6. Core Function Modules
7. Permission Control
8. Socket Communication
9. Language Internationalization
10. Component Communication and Provider Pattern

Project Structure

The lmes-web-base frontend project adopts a modular layered architecture. The main directory structure is as follows:

Diagram sources

• src

Core Architecture Pattern

lmes-web-base adopts the MVVM architecture pattern based on Vue 3 Composition API. This architecture achieves automatic synchronization between view and model through data binding and reactivity system, separating business logic from interface display.

Core architecture features:

• Use Vue 3 Composition API to organize code logic
• Implement data-driven view updates based on the reactivity system
• Adopt modular design with clear responsibilities for each functional component
• Implement logic reuse through custom Hooks

Diagram sources

• App.vue
• main.ts

Application Initialization and Integration

The initialization process of the application is completed in the main.ts file, creating a Vue application instance through the createApp function, and integrating routing and state management.

Section sources

• main.ts
• App.vue

Dynamic Route Generation Mechanism

The system adopts a dynamic route generation mechanism based on import.meta.glob, automatically scanning component files under the widgets directory and generating route configurations.

Diagram sources

• router.ts
• menu.ts

State Management Scheme

The system adopts a global state management scheme based on Vue Use, creating global sharable state through createGlobalState.

Diagram sources

• Store.ts
• globalState.ts

Core Function Modules

Base Library Architecture

The src/libs directory contains the core function modules of the system, adopting a modular design:

Section sources

• libs

Permission Control

The system implements a complete permission control system, including directive-based permission and version function control.

Diagram sources

• Permission.ts
• Permission.d.ts

Socket Communication

The system implements WebSocket communication through SignalR, encapsulating connection management, event registration, and reconnection mechanisms.

Diagram sources

• Socket.ts
• toast.ts

Language Internationalization

The system implements multi-language support, managing text in different language environments through the Language module.

Diagram sources

• Language.ts
• langEN.ts
• langTH.ts
• langZH.ts

Component Communication and Provider Pattern

The system implements communication and nesting between components through the provider function, supporting flexible component combinations.

Diagram sources

• provider.ts
• index.vue