Skip to main content
Version: Next

Component Architecture

Directory​

  1. Project Structure
  2. Core Basic Components
  3. BaseTable Architecture Analysis
  4. Complex UI Component Architecture
  5. Component Communication and State Management
  6. Accessibility and Internationalization
  7. Theme and Configuration Management

Project Structure​

The lmes-web-base component library adopts a modular layered architecture, with core components concentrated in the src/components directory. The project structure clearly divides basic components, business components, and complex UI components to support the scalability requirements of enterprise-level MES systems.

Diagram sources

Section sources

Core Basic Components​

lmes-web-base provides a series of reusable basic UI components, encapsulated using Vue 3's Composition API to ensure high cohesion and low coupling design principles.

BaseDialog Component​

The BaseDialog component is a secondary encapsulation based on Element Plus's el-dialog, providing unified dialog styles and interaction specifications. The component receives configuration properties through props and triggers events like close, confirm, and open through emits, implementing a standardized dialog interaction pattern.

The component supports configurations such as custom titles, hiding the close button, and hiding the bottom action bar, enabling flexible content customization through the slot mechanism. Internationalization support is implemented through the _t function, ensuring text display consistency in multi-language environments.

Section sources

BaseConfigProvider​

The BaseConfigProvider component serves as the injection point for global configuration, encapsulating Element Plus's el-config-provider to unify component namespaces. This component passes configuration downwards through the provide/inject mechanism, ensuring consistent component behavior throughout the application.

Section sources

BaseTable Architecture Analysis​

BaseTable is one of the most complex basic components in lmes-web-base. It adopts a modular design idea, separating different responsibilities into independent module files to achieve a high cohesion and low coupling architecture.

Overall Architecture Design​

Diagram sources

Theme and Configuration Management​

The component architecture relies on shared configuration providers and global theme assets to keep UI behavior consistent across modules. BaseConfigProvider standardizes Element Plus configuration, while component styles consume shared theme variables so that visual changes can be applied without rewriting individual components.

Section sources

Section sources

Type Definition System​

The BaseTable component establishes a complete type definition system, defining all relevant interface types in the BaseTable.d.ts file, including table properties, column configurations, scope types, etc. This type-driven design ensures component type safety and development experience.

Diagram sources

Section sources

State Management Mechanism​

BaseTable uses the Composition API's reactive system for state management, creating and injecting shared state through the useState.ts module. State management uses Symbol as the key for provide/inject to avoid naming conflicts.

Diagram sources

Section sources

Column Rendering Mechanism​

BaseTable's column rendering mechanism is implemented through the useColumns.tsx module, using scoped slots to handle cell content rendering. For custom columns, the component automatically creates corresponding slot mappings.

Diagram sources

Section sources

Data Loading Process​

BaseTable supports remote data loading via URL. The loading process is implemented through the onInitData and getList functions in useHook.ts, supporting parameter passing and data transformation.

Diagram sources

Section sources

Complex UI Component Architecture​

G6Flow Flowchart Component​

The G6Flow component is a complex process orchestration component built on the G6 graphics engine, adopting a layered architecture design, including core logic, rendering layer, tool layer, and drawer configuration layer.

Diagram sources

Section sources

LogicFlow Component​

The LogicFlow component is another flowchart implementation, lighter than G6Flow, focusing on core process display and simple editing functions.

Diagram sources

Section sources

Component Communication and State Management​

Component Communication Patterns​

lmes-web-base components adopt various communication patterns, including props/events, slots, and provide/inject mechanisms.

Diagram sources

Section sources

State Management Integration​

The component library uses the Composition API's reactive system for state management, implementing state sharing through the createState/injectState pattern.

Diagram sources

Section sources

Accessibility and Internationalization​

Internationalization Implementation​

The component library implements internationalization support through the @/libs/Language/Language module, with all user-visible text translated via the _t function.

Diagram sources

Last updated on