业务物料
当页面需要新的业务组件时,一个普通物料需要同时声明编辑协议和实际 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,
}creatable、selectable、draggable、sortable、deletable 和 mask 可以写成布尔值或 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。