前端架构

目录

1. 项目结构
2. 核心架构模式
3. 应用初始化与集成
4. 动态路由生成机制
5. 状态管理方案
6. 核心功能模块
7. 权限控制
8. Socket通信
9. 语言国际化
10. 组件通信与提供者模式

项目结构

lmes-web-base 前端项目采用模块化分层架构，主要目录结构如下：

Diagram sources

• src

核心架构模式

lmes-web-base 采用基于 Vue 3 组合式 API 的 MVVM 架构模式。该架构通过数据绑定和响应式系统实现视图与模型的自动同步，将业务逻辑与界面展示分离。

架构核心特点：

• 使用 Vue 3 的 Composition API 组织代码逻辑
• 基于响应式系统实现数据驱动的视图更新
• 采用模块化设计，各功能组件职责分明
• 通过自定义 Hook 实现逻辑复用

Diagram sources

• App.vue
• main.ts

应用初始化与集成

应用的初始化过程在 main.ts 文件中完成，通过 createApp 函数创建 Vue 应用实例，并集成路由和状态管理。

Section sources

• main.ts
• App.vue

动态路由生成机制

系统采用基于 import.meta.glob 的动态路由生成机制，自动扫描 widgets 目录下的组件文件并生成路由配置。

Diagram sources

• router.ts
• menu.ts

状态管理方案

系统采用基于 Vue Use 的全局状态管理方案，通过 createGlobalState 创建全局可共享的状态。

Diagram sources

• Store.ts
• globalState.ts

核心功能模块

基础库架构

src/libs 目录包含系统核心功能模块，采用模块化设计：

Section sources

• libs

权限控制

系统实现了一套完整的权限控制系统，包括指令式权限和版本功能控制。

Diagram sources

• Permission.ts
• Permission.d.ts

Socket通信

系统通过 SignalR 实现 WebSocket 通信，封装了连接管理、事件注册和重连机制。

Diagram sources

• Socket.ts
• toast.ts

语言国际化

系统实现多语言支持，通过 Language 模块管理不同语言环境下的文本。

Diagram sources

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

组件通信与提供者模式

系统通过 provider 函数实现组件间的通信和嵌套，支持灵活的组件组合。

Diagram sources

• provider.ts
• index.vue