步骤详解 - 注册 Helper 到 RegisterWidgetHelper.ts

📋 功能描述

在 RegisterWidgetHelper.ts 中将新创建的 Helper 导入并添加到 SYS_WIDGET_HELPERS 数组中。注册后，系统能够根据 Helper 配置生成右侧属性面板、处理拖拽行为、构造默认 widget 数据等。

🧩 模块描述

RegisterWidgetHelper.ts 是 Helper 注册的统一入口：

导入所有 Helper - 集中管理所有内置组件的 Helper 导入
导出 SYS_WIDGET_HELPERS - 系统 Helper 数组，按类型分组
延迟加载支持 - 复杂 Helper 使用 createLazyXxxHelper 避免循环依赖
分组注释 - 按布局、容器、表单字段、通用控件等分类组织

📁 文件信息

文件路径

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

操作类型

修改 - 添加 import 和数组项

注册位置

SYS_WIDGET_HELPERS 数组

所属层级

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

💻 修改示例

1. 在文件顶部添加导入：

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

// 在已有 imports 中添加：
import MyNewComponentHelper from '~@/config/widget-helper/MyNewComponentHelper'
            

2. 在 SYS_WIDGET_HELPERS 数组中添加：

export const SYS_WIDGET_HELPERS = [
  // 布局
  RowHelper,
  TabsHelper,

  // 容器
  RootHelper,
  ColHelper,
  GroupPanelHelper,

  // 通用组件
  FormCommonTxtHelper,
  FormCommonBtnHelper,

  // ← 添加新 Helper（根据组件类型放在对应分组）
  MyNewComponentHelper,
]
            

⚠️ 注意事项

分组放置

根据组件类型（布局/容器/表单/通用/业务等）将 Helper 放在对应的注释分组下，便于维护。

导入路径使用 ~@/config/widget-helper/ 别名
对于可能产生循环依赖的复杂 Helper，参考 ListVxeColumnHelper 使用延迟加载模式
确保 Helper 的 type 属性与 WidgetType 枚举值一致

➡️ 下一步

完成 Helper 注册后，继续执行：

步骤 6：在 Material.ts 中注册物料面板分组
步骤 7：在 Info.json 中补充国际化文案