核心功能

目录

1. 插件化组件开发与动态加载机制
2. 动态路由与菜单生成机制
3. 权限控制系统
4. 多语言支持（i18n）架构
5. 主题定制与CSS变量
6. 流程图设计引擎

插件化组件开发与动态加载机制

本系统通过 vite-plugin-widget-provider 插件实现插件化组件的动态加载与集成。插件位于 script/plugins/vite-plugin-widget-provider.ts，在构建阶段对 src/widgets 目录下的组件进行处理。

该插件的核心功能是解析每个插件组件的 index.ts 文件，提取其 export default 中的配置对象，特别是 canvasView 字段。当检测到组件使用 provider() 包装时，插件会自动注入 @/provider/index 的导入，并确保组件被正确包装，从而实现运行时的上下文注入和状态管理。

插件开发遵循约定式目录结构，每个插件位于 src/widgets/{PluginName} 目录下，包含 index.ts 入口文件和 Views 视图组件。这种设计使得新功能模块可以像插件一样独立开发、测试和部署，极大地提高了系统的可扩展性和维护性。

Section sources

• vite-plugin-widget-provider.ts
• App.vue

动态路由与菜单生成机制

系统的动态路由和菜单是通过构建时脚本 script/generateMenu.js 自动生成的。该脚本在项目构建前执行，扫描 src/widgets 目录下的所有 index.ts 文件，解析其 AST（抽象语法树），提取每个插件的元数据，如名称（name）、路径（path）、图标（icon）和是否为页面组件（notPage）。

提取的元数据被序列化为 src/config/menu.ts 文件中的 menu 和 menuMap 两个导出常量。menu 是一个包含所有菜单项的数组，而 menuMap 是以插件名为键的映射对象，便于快速查找。

在运行时，src/router.ts 文件利用 import.meta.glob 动态导入所有 widgets 目录下的 .vue 和 .tsx 组件，并根据 package.json 中的项目名称和插件名动态生成路由。每个插件的路由路径为 /${packageName}/{pluginName}，并将其 widgetName 存储在路由元信息中，供后续权限和菜单系统使用。

Diagram sources

• generateMenu.js
• router.ts

Section sources

• generateMenu.js
• router.ts
• menu.ts

权限控制系统

基于 src/libs/Permission/Permission.ts 实现了一套细粒度的权限控制机制。该系统主要由 usePermission Hook 和 vPermission 指令构成。

usePermission Hook 用于初始化当前组件的子权限。它接收一个权限映射对象（permissionMap），将权限码（key）和权限名称（value）注册到当前页面的权限列表中。系统会根据当前用户的权限码列表（userInfo.permissions）来判断用户是否拥有执行特定操作的权限。

vPermission 是一个自定义指令，可直接在模板中的元素上使用，如 <el-button v-permission="'user-add'">新增</el-button>。当用户点击该元素时，指令会调用 isPermission 函数进行校验。如果用户没有相应权限，则会阻止事件冒泡并显示“用户没有该权限！”的警告消息。

此外，系统还提供了 vEditionShow 指令，用于基于功能版本（Feature Edition）控制元素的显示。它依赖于全局状态中的 featureMap，通过 isEdition 函数判断当前环境是否启用了特定的功能模块。

Diagram sources

• Permission.ts
• Store.ts

Section sources

• Permission.ts

多语言支持（i18n）架构

系统的多语言支持由 src/libs/Language/Language.ts 模块驱动，并与 sdk 中的 Language 模型集成。语言文件存储在 public/language/ 目录下，采用 namespace.locale.json 的命名约定，例如 lmes.en-US.json。

核心的翻译函数是 _t，它通过 Language._t 或 Language.scope('MesSuite') 获取。scope 函数允许为不同的功能模块（如 "MesSuite"）创建独立的翻译作用域，避免全局命名冲突。

getLang 函数根据当前项目设置的语言（window.app.current.project.current.language）返回对应的语言包对象（如 EN, ZH, TH）和语言键。系统通过 getCurrentLang 函数判断当前语言是中文还是英文，以进行相应的逻辑分支处理。

整个多语言系统在 App.vue 中通过 ElConfigProvider 的 locale 属性与 Element Plus 组件库集成，确保UI组件的内置文本也能正确翻译。

Section sources

• Language.ts
• App.vue
• lmes.en-US.json

主题定制与CSS变量

系统通过 public/theme.css 文件实现主题定制。该文件定义了一系列以 -- 开头的CSS自定义属性（CSS Variables），覆盖了应用的主要颜色方案，如背景色、文字色、边框色、按钮色等。

例如，--module_background 定义了模块的背景色，--elinput 定义了输入框的背景色，--elbutton_popup_cancel 定义了弹窗取消按钮的背景色。这些变量在SCSS文件中通过 var(--variable-name) 的方式被引用，实现了样式的集中管理和动态切换。

public/defaulttheme.css 提供了默认主题，而 theme.css 则是当前激活的主题。通过替换 theme.css 文件，可以实现不同视觉风格的切换。此外，系统还提供了 svgpngbacktheme.json 和 svgpngwhitetheme.json 文件，可能用于管理SVG图标在不同主题下的颜色映射。

Section sources

• theme.css
• defaulttheme.css

流程图设计引擎

系统集成了两大流程图设计引擎：G6Flow 和 LogicFlow，分别位于 src/components/G6Flow 和 src/components/LogicFlow 目录。

G6Flow

基于 AntV G6 图可视化引擎构建，功能更为复杂和强大。它支持节点和边的详细配置（通过 NodeDrawer 和 EdgeDrawer 组件）、拖拽创建节点、复制粘贴节点、一键美化布局、上下文菜单等高级功能。G6Flow 组件通过 createStore 创建一个包含图事件、选中状态、节点/边映射等的全局状态 store，并通过 G6Renderer 组件渲染图数据。它支持 XML 格式的流程数据导入导出，适用于需要复杂交互和数据结构的场景。

LogicFlow

基于 LogicFlow 库构建，设计更为简洁。它提供了 LogicRenderer 组件来渲染流程图，并支持节点和边的双击编辑（通过 NodeDrawer 和 EdgeDrawer）。LogicFlow 组件内置了“一键美化”和“XML”转换按钮，方便用户进行布局调整和数据查看。其核心功能集中在 transformHelp.ts 文件中，负责处理流程数据与XML之间的转换。

两者都通过 getFlowXml API 获取流程