组件架构
目录
项目结构
lmes-web-base 组件库采用模块化分层架构，核心组件集中于 src/components 目录。项目结构清晰划分了基础组件、业务组件和复杂UI组件，支持企业级MES系统的可扩展性需求。
Diagram sources
Section sources
核心基础组件
lmes-web-base 提供了一系列可复用的基础UI组件，采用Vue 3的Composition API进行封装，确保高内聚低耦合的设计原则。
BaseDialog 对话框组件
BaseDialog 组件基于Element Plus的el-dialog进行二次封装，提供统一的对话框样式和交互规范。组件通过props接收配置属性，通过emits触发close、confirm、open等事件，实现标准化的对话框交互模式。
组件支持自定义标题、隐藏关闭按钮、隐藏底部操作栏等配置，通过插槽机制实现内容的灵活定制。国际化支持通过_t函数实现，确保多语言环境下的文本显示一致性。
Section sources
BaseConfigProvider 配置提供者
BaseConfigProvider 组件作为全局配置的注入点，封装了Element Plus的el-config-provider，统一设置组件命名空间。该组件通过provide/inject机制向下传递配置，确保整个应用的组件行为一致性。
Section sources
BaseTable 架构分析
BaseTable 是lmes-web-base中最复杂的基础组件之一，采用模块化设计思想，将不同职责分离到独立的模块文件中，实现高内聚低耦合的架构。
整体架构设计
Diagram sources
- BaseTable.tsx
- Props.ts
- useState.ts
- useUtils.ts
- useColumns.tsx
- useEvent.ts
- useHook.ts
- api.ts
- BaseTable.d.ts
Section sources
类型定义体系
BaseTable 组件建立了完整的类型定义体系，通过BaseTable.d.ts文件定义了所有相关的接口类型，包括表格属性、列配置、作用域类型等。这种类型驱动的设计确保了组件的类型安全性和开发体验。
Diagram sources
Section sources
状态管理机制
BaseTable 采用Composition API的响应式系统进行状态管理，通过useState.ts模块创建和注入共享状态。状态管理采用Symbol作为provide/inject的key，避免命名冲突。
Diagram sources
Section sources
列渲染机制
BaseTable 的列渲染机制通过useColumns.tsx模块实现，采用作用域插槽的方式处理单元格内容渲染。对于自定义列，组件自动创建对应的插槽映射。
Diagram sources
Section sources
数据加载流程
BaseTable 支持通过URL进行远程数据加载，加载流程通过useHook.ts中的onInitData和getList函数实现，支持参数传递和数据转换。
Diagram sources
Section sources
复杂UI组件架构
G6Flow 流程图组件
G6Flow 组件是基于G6图形引擎构建的复杂流程编排组件，采用分层架构设计，包含核心逻辑、渲染层、工具层和抽屉配置层。
Diagram sources
Section sources
LogicFlow 组件
LogicFlow 组件是另一个流程图实现，相比G6Flow更加轻量，专注于核心流程展示和简单编辑功能。
Diagram sources
Section sources
组件通信与状态管理
组件通信模式
lmes-web-base 组件采用多种通信模式，包括props/events、插槽和provide/inject机制。
Diagram sources
Section sources
状态管理集成
组件库采用Composition API的响应式系统进行状态管理，通过createState/injectState模式实现状态共享。
Diagram sources
Section sources
可访问性与国际化
国际化实现
组件库通过@/libs/Language/Language模块实现国际化支持，所有用户可见文本都通过_t函数进行翻译。
Diagram sources
- [BaseTable.tsx](file://src/components/Base