物料组件添加流程 - 灵枢低代码平台

步骤	文件路径	操作	作用说明
1	packages/types/widget-pc/WidgetType.ts	修改	在 WidgetType 枚举中添加新组件类型值，作为全局唯一标识
2	packages/form-designer/src/config/widget/<组件名>.vue	新建	实际的 Vue 渲染组件，定义 UI 结构和样式
3	packages/form-designer/src/config/widget-helper/<组件名>Helper.ts	新建	Helper 配置对象，实现 buildMaterialConfig、buildSettings、buildWidget、dragInfo 等接口
4	packages/form-designer/src/config/RegisterWidget.ts	修改	导入 Vue 组件并在 SYS_COMPS_MAP 中注册：[WidgetType.Xxx]: { instance: XxxWidget }
5	packages/form-designer/src/config/RegisterWidgetHelper.ts	修改	导入 Helper 并添加到 SYS_WIDGET_HELPERS 数组
6	packages/form-designer/src/config/Material.ts	修改	在对应分组（通用/容器/导航等）的 widgetTypeList 中添加 WidgetType，使其出现在左侧物料面板
7	packages/form-designer/src/locales/model/Info.json	修改	添加物料显示名称、属性面板文案等国际化文案

架构分层与文件分布

共享契约层
packages/types

WidgetType.tsFieldType.tsSettingType.tsregistry.ts

↓ 类型定义

页面设计器层
packages/form-designer

Material.tsRegisterWidget.tsRegisterWidgetHelper.tswidget/*.vuewidget-helper/*.tsRegisterSettings.tssettings-helper/*.tslocales/Info.json

↓ （纯物料通常不涉及以下层）

业务组件层
packages/business-components

enum/settings/<field>/utils/*Utils.tsservice/*.ts

↓ （纯物料通常不涉及以下层）

建模层
apps/lcdp

FieldType.tshelper/<field>/Schema.tsmodeling.json

↓ （按需）

移动端镜像层
form-designer/widget-mobile

widget/*.vuewidget-helper/*.tsMaterial.ts

■ 高亮文件 = 纯物料组件必改文件 ■ 灰色文件 = 纯物料通常可跳过

注册执行链

RegisterWeb.ts

setPcConfigAll()

↓ 调用 setConfigAll(PC, config)

registry.ts

registerConfigAll(platform)

↓ 依次调用

register/widget.ts

注册 widget 实例

+

register/material.ts

注册物料面板

+

register/setting.ts

注册设置项

+

register/helper.ts

注册 helper

最小验证建议

场景	验证方式
纯物料组件	pnpm form-designer:dev → 访问 `/designer/:pageId` 验证：左侧物料面板出现新组件 → 拖入画布 → 右侧属性面板正常 → 画布渲染正常
运行型物料	额外验证：`/form/:pageId` 或 `/list/:pageId` 验证：运行时页面能正确渲染该组件

设计页面添加物料组件 - 文件改动分析

三种开发场景

🧩 纯物料组件

🔗 字段类型 + 物料组件

📝 纯字段类型

纯物料组件添加流程图（点击节点下钻查看详解）

开始：新增纯物料组件

定义 WidgetType

创建 Vue 组件

创建 Helper 配置

注册组件实例

注册 Helper