跳到主要内容
版本：Next

前端架构

目录​

  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

  • src/App.vue
  • src/main.ts

应用初始化与集成​

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

Section sources

  • src/main.ts
  • src/App.vue

动态路由生成机制​

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

Diagram sources

  • src/router.ts
  • src/config/menu.ts

状态管理方案​

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

Diagram sources

  • src/libs/Store/Store.ts
  • src/libs/Store/globalState.ts

核心功能模块​

基础库架构​

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

Section sources

  • src/libs

权限控制​

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

Diagram sources

  • src/libs/Permission/Permission.ts
  • src/libs/Permission/Permission.d.ts

Socket通信​

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

Diagram sources

  • src/libs/Socket/Socket.ts
  • src/libs/Socket/toast.ts

语言国际化​

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

Diagram sources

  • src/libs/Language/Language.ts
  • src/libs/Language/i18n/langEN.ts
  • src/libs/Language/i18n/langTH.ts
  • src/libs/Language/i18n/langZH.ts

组件通信与提供者模式​

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

Diagram sources

  • src/provider/index.ts
  • src/provider/index.vue