步骤详解 - 定义 WidgetType 枚举

📋 功能描述

WidgetType 是整个低代码平台中物料组件的唯一类型标识。它定义了所有可在设计器中使用的组件类型，是类型系统的源头。新增任何物料组件都必须先在此枚举中添加对应的类型值。

🧩 模块描述

该文件位于 packages/types 共享契约层，被以下模块引用：

form-designer - 页面设计器层，用于组件注册和物料面板配置
widget-pc - PC 端组件库，用于组件映射
lowcode-create - 渲染引擎，用于运行时组件识别
business-components - 业务组件层，用于字段类型映射

📁 文件信息

文件路径

packages/types/widget-pc/WidgetType.ts

操作类型

修改 - 在已有枚举中添加新值

影响范围

全局类型定义，修改后所有引用处自动获得类型提示

所属层级

共享契约层 (packages/types)

💻 代码示例

在 WidgetType 枚举中添加新组件类型：

// packages/types/widget-pc/WidgetType.ts

export enum WidgetType {
  // 布局组件
  Root = 'Root',
  Row = 'Row',
  Col = 'Col',
  Tabs = 'Tabs',
  TabPane = 'TabPane',

  // 容器组件
  GroupPanel = 'GroupPanel',
  FlexLayout = 'FlexLayout',

  // 通用组件
  CommonTxt = 'CommonTxt',
  CommonBtn = 'CommonBtn',
  CommonImg = 'CommonImg',
  CommonLink = 'CommonLink',

  // ← 在此处添加你的新组件类型
  MyNewComponent = 'MyNewComponent',
}
            

📝 命名规范

使用 PascalCase 命名，与 Vue 组件名保持一致
枚举值（字符串）应与枚举名相同
示例：MyNewComponent = 'MyNewComponent'
参考现有命名：CommonBtn、GroupPanel、FlexLayout 等

⚠️ 注意事项

重要提醒

必须在 packages/types/widget-pc/WidgetType.ts 中定义，不要在 form-designer 本地的 types 中定义。真正的类型源头在共享契约层 packages/types。

修改此文件后需要重新构建 types 包
确保类型名不与现有类型冲突
类型添加后需要在后续步骤中完成所有注册

➡️ 下一步

完成 WidgetType 定义后，继续执行：

步骤 2：创建 Vue 渲染组件 (form-designer/src/config/widget/xxx.vue)
步骤 3：创建 Helper 配置文件 (form-designer/src/config/widget-helper/xxxHelper.ts)