vtj/ui 包提供了 Vue 3 组件的全面集合，这些组件构成了 VTJ 低代码平台用户界面的基础。该库包括表单控件、数据网格、对话框、布局组件和专用交互式元素，旨在在 VTJ 生态系统中无缝工作。
有关如何将这些组件集成到可视化设计器中的信息，请参阅设计器和渲染器 。有关图表特定组件的详细信息，请参阅图表和可视化 。
包体系结构
UI 组件库组织为一个模块化系统，其中组件可以独立工作或相互集成以创建复杂的用户界面。该包遵循 Vue 3 组合式 API 模式，并始终提供 TypeScript 支持。
UI 组件包结构
核心组件类别
表单和输入组件
该库提供了一组丰富的表单组件，这些组件使用 VTJ 特定的功能扩展了 Element Plus。XPicker 组件通过将多个 UI 元素组合到一个复杂的数据选择界面中来举例说明这种方法。
XPicker 组件架构
XPicker 演示了关键的 UI 库模式：
| 模式 | 实现 | 位置 |
| 组合式 API | 使用 useOptions、useGridColumns、useModel 钩子 | packages/ui/src/components/picker/hooks.ts |
| 类型 安全 | 全面的 TypeScript 接口 | packages/ui/src/components/picker/types.ts |
| 事件系统 | 具有有效负载类型的结构化发出定义 | packages/ui/src/components/picker/types.ts |
| Prop 验证 | 类型的详细 prop 定义 | packages/ui/src/components/picker/props.ts |
数据显示组件
XGrid 组件用作主要数据显示组件，与 VXE 表集成以提供高级网格功能，包括虚拟滚动、编辑、筛选和分页。
与 UI 组件的网格集成
对话框和模态组件
XDialog 组件提供了整个 UI 库中使用的模态基础，具有一致的样式和行为模式。
组件集成模式
数据加载模式
XPicker 和 XGrid 等组件使用加载器函数实现标准化的数据加载模式：
// Loader function interface from types type PickerLoader = (params: PickerState) => Promise<{ list: any[]; total: number; }>;
数据加载流程
事件系统模式
组件使用具有类型化有效负载的一致事件发出模式：
| 元件 | 重要事件 | 负载类型 |
| XPicker | 更改 ， 选取 | [value: any, data: any] |
| XGrid | 已加载 ，cell-dblclick | 特定于网格的事件类型 |
| XQueryForm | submit | 表单模型数据 |
样式和主题
组件使用带有 BEM 方法的 SCSS 和 CSS 自定义属性进行主题设置：
@include b(picker) { .el-select__popper { display: none !important; } .x-picker__tigger { background: var(--el-fill-color); border-radius: 4px; // ... responsive sizing } }
材料集成
UI 组件与 VTJ 材质系统集成，以便在可视化设计器中使用。每个组件都有相应的材质描述，用于定义其属性、事件和配置选项。
组件材料结构
Material System 允许从组件调色板中拖动组件，并在设计器中直观地进行配置。
使用示例
基本 XPicker 实现
<XPicker v-model="selectedValue" :columns="gridColumns" :fields="searchFields" :loader="dataLoader" value-key="id" label-key="name" query-key="name" @picked="onDataPicked" @change="onValueChange" />
使用格式设置的高级多选
<XPicker v-model="multipleValues" multiple append raw :formatter="valueParser" :value-formatter="valueSerializer" :columns="columns" :fields="fields" :loader="asyncLoader" />
UI 组件库为在 VTJ 生态系统中构建复杂的用户界面提供了强大的基础，并为数据处理、事件管理和可视化集成提供了一致的模式。
源码仓库
