Core Features

Table of Contents

1. Plugin-based Component Development and Dynamic Loading Mechanism
2. Dynamic Routing and Menu Generation Mechanism
3. Permission Control System
4. Multi-language Support (i18n) Architecture
5. Theme Customization and CSS Variables
6. Flow Chart Design Engine

Plugin-based Component Development and Dynamic Loading Mechanism

This system implements dynamic loading and integration of plugin-based components through the vite-plugin-widget-provider plugin. The plugin is located at script/plugins/vite-plugin-widget-provider.ts and processes components in the src/widgets directory during the build phase.

The core functionality of this plugin is to parse the index.ts file of each plugin component, extract the configuration object from its export default, particularly the canvasView field. When the plugin detects that a component is wrapped using provider(), it automatically injects the import from @/provider/index and ensures the component is correctly wrapped, thereby implementing runtime context injection and state management.

Plugin development follows a convention-based directory structure, with each plugin located in the src/widgets/{PluginName} directory, containing an index.ts entry file and Views view components. This design allows new functional modules to be independently developed, tested, and deployed like plugins, greatly improving the system's extensibility and maintainability.

Section sources

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

Dynamic Routing and Menu Generation Mechanism

The system's dynamic routing and menus are automatically generated through the build-time script script/generateMenu.js. This script executes before project build, scans all index.ts files in the src/widgets directory, parses their AST (Abstract Syntax Tree), and extracts metadata for each plugin, such as name (name), path (path), icon (icon), and whether it's a page component (notPage).

The extracted metadata is serialized into two exported constants in the src/config/menu.ts file: menu and menuMap. menu is an array containing all menu items, while menuMap is a mapping object keyed by plugin name for quick lookups.

At runtime, the src/router.ts file uses import.meta.glob to dynamically import all .vue and .tsx components in the widgets directory, and generates routes dynamically based on the project name in package.json and plugin names. Each plugin's route path is /${packageName}/{pluginName}, with its widgetName stored in route metadata for subsequent permission and menu systems to use.

Diagram sources

• generateMenu.js
• router.ts

Section sources

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

Permission Control System

Based on src/libs/Permission/Permission.ts, a fine-grained permission control mechanism is implemented. This system mainly consists of the usePermission Hook and vPermission directive.

The usePermission Hook is used to initialize sub-permissions for the current component. It receives a permission mapping object (permissionMap), registering permission codes (key) and permission names (value) to the current page's permission list. The system determines whether a user has permission to perform specific operations based on the current user's permission code list (userInfo.permissions).

vPermission is a custom directive that can be used directly on elements in templates, such as <el-button v-permission="'user-add'">Add</el-button>. When a user clicks this element, the directive calls the isPermission function for validation. If the user doesn't have the corresponding permission, it prevents event bubbling and displays a warning message "User does not have this permission!".

Additionally, the system provides a vEditionShow directive for controlling element display based on Feature Edition. It relies on featureMap in global state, using the isEdition function to determine whether the current environment has enabled specific functional modules.

Diagram sources

• Permission.ts
• Store.ts

Section sources

• Permission.ts

Multi-language Support (i18n) Architecture

The system's multi-language support is driven by the src/libs/Language/Language.ts module and integrates with the Language model in sdk. Language files are stored in the public/language/ directory, following the namespace.locale.json naming convention, such as lmes.en-US.json.

The core translation function is _t, which is obtained through Language._t or Language.scope('MesSuite'). The scope function allows creating independent translation scopes for different functional modules (such as "MesSuite"), avoiding global naming conflicts.

The getLang function returns the corresponding language package object (such as EN, ZH, TH) and language key based on the current project's language setting (window.app.current.project.current.language). The system uses the getCurrentLang function to determine whether the current language is Chinese or English for corresponding logic branching.

The entire multi-language system is integrated with the Element Plus component library through the locale property of ElConfigProvider in App.vue, ensuring that built-in text in UI components can also be correctly translated.

Section sources

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

Theme Customization and CSS Variables

The system implements theme customization through the public/theme.css file. This file defines a series of CSS custom properties (CSS Variables) starting with --, covering the application's main color schemes such as background colors, text colors, border colors, button colors, etc.

For example, --module_background defines the module's background color, --elinput defines the input box's background color, and --elbutton_popup_cancel defines the cancel button's background color in popups. These variables are referenced in SCSS files using var(--variable-name), implementing centralized style management and dynamic switching.

public/defaulttheme.css provides the default theme, while theme.css is the currently active theme. By replacing the theme.css file, different visual styles can be switched. Additionally, the system provides svgpngbacktheme.json and svgpngwhitetheme.json files, possibly used for managing SVG icon color mappings under different themes.

Section sources

• theme.css
• defaulttheme.css

Flow Chart Design Engine

The system integrates two major flow chart design engines: G6Flow and LogicFlow, located in the src/components/G6Flow and src/components/LogicFlow directories respectively.

G6Flow

Built on the AntV G6 graph visualization engine, with more complex and powerful functionality. It supports detailed configuration of nodes and edges (through NodeDrawer and EdgeDrawer components), drag-and-drop node creation, copy-paste nodes, one-click beautify layout, context menus, and other advanced features. The G6Flow component creates a global state store containing graph events, selection state, node/edge mappings, etc., through createStore, and renders graph data through the G6Renderer component. It supports importing and exporting process data in XML format, suitable for scenarios requiring complex interactions and data structures.

LogicFlow

Built on the LogicFlow library, with a simpler design. It provides the LogicRenderer component to render flow charts, supporting double-click editing of nodes and edges (through NodeDrawer and EdgeDrawer). The LogicFlow component has built-in "One-Click Beautify" and "XML" conversion buttons, facilitating users to adjust layouts and view data. Its core functionality is concentrated in the transformHelp.ts file, responsible for handling conversions between process data and XML.

Both obtain flow