步骤详解 - 注册组件实例到 RegisterWidget.ts

📋 功能描述

在 RegisterWidget.ts 中将新创建的 Vue 组件实例注册到 SYS_COMPS_MAP 系统组件映射表中。这一步建立了 WidgetType → Vue Component 的映射关系，使低代码渲染引擎能够根据 schema 中的 type 字段找到并渲染对应的 Vue 组件。

🧩 模块描述

RegisterWidget.ts 是 PC 端组件注册的统一入口，负责：

导入所有 widget 组件 - 集中管理所有内置组件的导入
构建 SYS_COMPS_MAP - 系统组件映射表，type → component 映射
延迟初始化 - 使用 ensureInitialized() 实现按需注册
关键组件预加载 - 首屏必需组件（Root、Row、Col 等）同步注册
异步组件支持 - 不常用组件可使用 defineAsyncComponent 动态导入

📁 文件信息

文件路径

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

操作类型

修改 - 添加 import 和注册项

注册位置

ensureInitialized() 函数内的 Object.assign

所属层级

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

💻 修改示例

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

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

// 在已有 imports 中添加：
import MyNewComponent from './widget/MyNewComponent.vue'
            

2. 在 ensureInitialized() 中注册：

export function ensureAllWidgetsInitialized() {
  ensureInitialized()
}

function ensureInitialized() {
  if (_initialized) return
  _initialized = true

  Object.assign(SYS_COMPS_MAP, {
    // 布局组件
    [WidgetType.Root]: { instance: Root },
    [WidgetType.Row]: { instance: Row },

    // 通用组件
    [WidgetType.CommonTxt]: { instance: CommonTxt },
    [WidgetType.CommonBtn]: { instance: CommonBtn },

    // ← 添加新组件
    [WidgetType.MyNewComponent]: { instance: MyNewComponent },
  })
}
            

⚠️ 注意事项

导入位置

import 语句放在文件顶部的 import 区域，与其他 widget imports 一起。注册项放在 ensureInitialized() 函数的 Object.assign 中。

对于不常用的组件（如审批类），可使用 defineAsyncComponent 动态导入
确保 WidgetType 与组件实例正确对应
不要删除已有的注册项，只添加新的

➡️ 下一步

完成组件注册后，继续执行：

步骤 5：在 RegisterWidgetHelper.ts 中注册 Helper
步骤 6：在 Material.ts 中注册物料面板分组