添加物料与属性面板

在文本物料已可编辑后，公告物料把编辑协议和 Vue 组件放在同一份定义里：

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,
}

type 是持久化 Schema 标识，不能随意改名。defaultProps 在拖入时复制给新节点，formSchema 决定选中节点后右侧显示哪些字段。

将所有定义收集为设计器输入：

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

export const guideWidgetMetas = getWidgetMetas(guideWidgetDefinitions)
export const guideComponentMap = buildComponentMap(guideWidgetDefinitions)

公告中的 Asset 不是内置字段。示例把它注册到字段 adapter map：

export function createGuideFieldComponentMap(): FieldComponentMap {
  return {
    ...createAntDesignVueFields(),
    Asset: {
      component: AssetField,
      modelPropName: 'modelValue',
      updateEventName: 'onUpdate:modelValue',
    },
  }
}

拖入公告后，右侧可以编辑文案、色调和精选状态；打开“使用背景图”后才显示资产字段。页面级配置则通过 globalConfigSchema 放在右侧的全局页签。

框架负责	宿主负责
物料创建、行为约束、字段绑定和 change 管线	物料 props、资源选择器、异步选项和业务校验

可复用字段使用字符串键和 fieldComponentMap。当前表单专用的说明、分割线或轻量操作区才使用 render factory；函数式 Vue 组件也必须先注册为字段 adapter。

完成检查：拖入公告后能编辑文案、色调和背景图，且页面标题与背景色可以从全局页签修改。

下一步：保存草稿并预览运行时。

添加物料与属性面板 ​

添加物料与属性面板