Skip to content

业务物料

当页面需要新的业务组件时,一个普通物料需要同时声明编辑协议和实际 Vue 组件。公告物料的完整定义在贯穿示例中:

ts
export const noticeWidgetDefinition: WidgetDefinition<DesignerWidgetMeta> = {
  meta: {
    type: 'notice',
    title: '公告',
    group: 'marketing',
    defaultProps: {
      text: '夏日活动已经开始',
      tone: 'warm',
      hasImage: false,
      image: '',
      featured: false,
    },
    formSchema: {
      sections: [{
        title: '公告内容',
        fields: [
          { key: 'text', label: '文案', component: 'Input' },
          {
            key: 'tone',
            label: '色调',
            component: 'Select',
            componentProps: {
              options: [
                { label: '暖色', value: 'warm' },
                { label: '冷色', value: 'cool' },
              ],
            },
          },
          { key: 'hasImage', label: '使用背景图', component: 'Switch' },
          {
            key: 'image',
            label: '背景图',
            component: 'Asset',
            visible: (ctx: FormContext) => ctx.values.hasImage === true,
          },
          { key: 'featured', label: '标记为精选', component: 'Switch' },
        ],
      }],
    },
    material: {
      description: '在页面中展示活动信息',
      tags: ['营销'],
      keywords: ['notice', 'announcement'],
    },
  },
  component: NoticeWidget,
}

creatableselectabledraggablesortabledeletablemask 可以写成布尔值或 predicate。把规则放在 metadata,物料栏、画布和结构树才会得到同一套判断。

物料注册表把 metadata 和组件映射一起生成:

ts
export const guideWidgetDefinitions: WidgetDefinition<DesignerWidgetMeta>[] = [
  pageHeaderWidgetDefinition,
  textWidgetDefinition,
  noticeWidgetDefinition,
  columnContainerDefinition,
]

export const guideWidgetMetas = getWidgetMetas(guideWidgetDefinitions)
export const guideComponentMap = buildComponentMap(guideWidgetDefinitions)
框架负责宿主负责
创建节点、复制默认值、行为约束和画布交互组件实现、props 语义、资产协议和业务内容主题

type 是持久化标识。改名需要服务端和 Schema 迁移策略,不能只改 Vue 组件名称。需要承载其他物料时,不要给普通物料增加 children;使用 页面布局与容器

由页面模板、Schema import 或 migration 提供,而不能由设计者创建的物料,改用 authoring: 'schema-managed'。这不是 creatable 的业务创建条件:它会从标准物料面板隐藏,并且永久禁止 ADD_NODE 与 duplicate;已有节点仍可按策略选中和配置。完整的能力矩阵、工具栏状态和初始 Schema 范例见 动作与业务策略

完成检查:新 type 出现在物料栏,拖入后按默认 props 渲染,且右侧只显示该物料声明的字段。

下一步:表单与字段;公开类型见 @dragcraft/designer