步骤详解 - 注册物料面板到 Material.ts

📋 功能描述

在 Material.ts 的 getMaterialPanelConfig() 函数返回值中，将 WidgetType 添加到对应分组的 widgetTypeList 数组中。完成后，用户就能在页面设计器的左侧物料面板中看到并拖拽该组件。

🧩 模块描述

Material.ts 定义了物料面板的分组结构，包含以下分组：

分组名称	枚举值	典型组件
通用字段	GeneralField	输入框、文本域、数字、日期、选择器等
业务字段	BusinessField	人员、组织、数据引用、单据引用等
单据体	DocumentBody	BillBody、BillBodyChild、BillBodyTree 等
通用组件	Common	CommonTxt、CommonBtn、CommonImg、CommonLink、Icon 等
容器组件	Container	Row、FlexLayout、GroupPanel、PartitionContainer
导航组件	Navigation	Tabs、Toolbar、Anchor
审批组件	ApproveProcess	ApproveBtnGroup、ApproveRecord、ApproveFlowChart
列表组件	ListVxe	ListVxeColumn、ListVxeAction、ListVxeGroup 等

📁 文件信息

文件路径

packages/form-designer/src/config/Material.ts

操作类型

修改 - 在对应分组 widgetTypeList 中添加

修改位置

getMaterialPanelConfig() 返回值中的对应分组

所属层级

页面设计器层 (packages/form-designer)

💻 修改示例

根据组件类型，在对应分组的 widgetTypeList 中添加：

// packages/form-designer/src/config/Material.ts

export function getMaterialPanelConfig() {
  return [
    // 通用字段分组
    { name: MaterialCollapseTypeEnum.GeneralField, widgetTypeList: [...] },

    // 业务字段分组
    { name: MaterialCollapseTypeEnum.BusinessField, widgetTypeList: [...] },

    // 通用组件分组 ← 如果你的组件是 CommonBtn 类型
    {
      name: MaterialCollapseTypeEnum.Common,
      widgetTypeList: [
        WidgetType.CommonTxt,
        WidgetType.CommonBtn,
        WidgetType.CommonImg,
        WidgetType.CommonLink,
        WidgetType.Icon,
        // ← 添加新组件
        WidgetType.MyNewComponent,
      ],
    },

    // 容器组件分组 ← 如果你的组件是 GroupPanel 类型
    {
      name: MaterialCollapseTypeEnum.Container,
      widgetTypeList: [
        WidgetType.Row,
        WidgetType.FlexLayout,
        WidgetType.GroupPanel,
        // ← 添加新容器组件
        WidgetType.MyContainerComponent,
      ],
    },
  ]
}
            

⚠️ 分组选择指南

展示型组件（文本、图片、链接）→ Common 分组
交互型组件（按钮、搜索框）→ Common 分组
容器型组件（面板、布局）→ Container 分组
导航型组件（Tab、工具栏）→ Navigation 分组
表单字段（输入框、选择器）→ GeneralField 分组
业务引用（人员、组织、数据）→ BusinessField 分组

➡️ 下一步

完成物料面板注册后，执行最后一步：

步骤 7：在 Info.json 中补充国际化文案