Entity-Driven UI with MUI 是一套面向 MUI 技术栈的元数据驱动 CRUD 界面构建方案。其核心目标是让一份实体 schema 同时驱动 DataGrid 列、FormEngine 表单、校验、访问控制与向导流程,从而减少重复代码。
用途
该方案用于从实体元数据动态生成完整的 CRUD 界面。开发者定义一次实体元数据(EntityMetadata),即可自动生成数据表格列、表单结构、字段校验、字段级读写权限与多步向导流程。适合需要为多个实体快速搭建后台管理界面的场景。
主要能力
- 实体元数据模型:定义了 DataType(string、number、boolean、date、enum、json)、WidgetType(text、textarea、number、checkbox、switch、select、autocomplete、date、datetime、json-editor、custom)、ValidationRule、AccessRule、FieldMetadata 与 EntityMetadata 等类型,作为整个方案的基础。
- 服务端驱动 CRUD 页面:通过 Next.js 路由 /admin/[entity] 从后端获取实体元数据,并渲染 EntityPage 组件。
- DataGrid 列生成:buildColumns 函数根据字段元数据生成 GridColDef,映射数据类型到列类型,处理枚举值格式化、自定义编辑单元格渲染与共享校验。
- 自定义编辑单元格:renderEditCellForField 根据 widget 类型渲染 Autocomplete、DatePicker、Switch 或 TextField 等编辑控件。
- 共享校验层:validateCell 和 runValidation 实现字段级校验,validateRow 实现行级校验,供 DataGrid、FormEngine 与后端共用同一套规则。
- FormEngine schema 生成:buildFormEngineSchema 将实体元数据转换为 FormEngine JSON schema,支持单步表单与多步向导(通过 layout.step 分组),映射 widget 到对应的 MUI 组件类型。
- 访问控制:字段级 read/write 权限控制列可见性、可编辑性与表单字段的禁用状态。
使用方式
首先定义实体元数据 schema;然后在 Next.js 服务端路由中获取元数据并传入 EntityPage 组件;EntityPage 内部通过 useEntityData 获取数据、buildColumns 生成列、EntityForm 处理表单提交,表单提交时根据是否为新建决定使用 POST 或 PUT 请求。行编辑通过 processRowUpdate 校验并提交数据。
适用场景
适用于使用 React、MUI X DataGrid 与 FormEngine 构建后台管理界面、需要为多个实体快速生成 CRUD 页面的项目,尤其适合希望以元数据为中心统一管理界面、校验与权限的团队。
限制
以上资料未提供该方案的安装方式、依赖版本、收费模式与平台支持信息。示例代码基于 Next.js、MUI 与 FormEngine,具体集成细节需参考相关资料。