SuperAPI AI 工具集

canvas-component-metadata

编程与开发

查看项目

更新于 10-15 11:26

技能介绍

用途

canvas-component-metadata 用于定义 Canvas 组件所需的 component.yml 元数据,确保组件在 Canvas 编辑器中具有合法、可用的属性、插槽与枚举配置。适用于创建新组件、增加或修改属性与插槽等场景。

文件结构

每个 component.yml 必须包含以下顶层键:name(人类可读的显示名称)、machineName(kebab-case 机器名)、status(组件是否启用)、required(必填 prop 名称数组)、props(属性定义,位于 properties 下)、slots(无插槽时写 [],否则使用对象映射)。

Props 要求

每个 prop 定义必须包含 title,用于 UI 标签。examples 数组对必填 prop 是必需的,对其他 prop 建议提供;Drupal Canvas 只使用第一个示例值。若某个 prop 被列入 required,则不要在该 prop 的 React 组件签名中提供回退/默认值——必填的 Canvas 属性应由元数据或编辑器输入提供,而非静默的 JSX 默认值。

prop ID 必须是其 title 的 camelCase 转换结果,且只有面向用户、可在 Canvas 编辑器中编辑的属性才写入 component.yml,仅供实现使用的 React 属性应保留在 JSX 中,不写入元数据。永远不要在 component.yml 中包含 className,它被视为面向开发者的组合属性,而非 Canvas 编辑器控件。

Prop 类型

文档列出了以下类型:文本(type: string)、格式化文本(type: string,contentMediaType: text/html,x-formatting-context: block)、链接(type: string,format: uri-reference,也可用 uri 仅接受绝对 URL;必须使用真实路径示例,不要用 # 或空字符串)、图片(type: object,$ref 指向 canvas.module/image,仅文件 URL 必须存在,其余元数据可选)、视频(type: object,$ref 指向 canvas.module/video)、布尔(type: boolean)、整数(type: integer)、数字(type: number)、文本列表(type: string 配 enum 与 meta:enum)、整数列表(type: integer 配 enum 与 meta:enum)。

枚举

枚举值必须使用小写、机器友好的标识符,通过 meta:enum 提供人类可读的显示标签。枚举值不能包含点号,examples 的值必须是枚举值本身而非显示标签。当 JSX 组件中使用 class-variance-authority(CVA)或类似库时,变体键必须与 component.yml 中定义的枚举值完全一致。

Slots

插槽允许其他组件嵌入当前组件。在 React 中,每个插槽以与插槽键同名的 prop 接收。本节是插槽 schema 的权威来源,其他技能应引用这些规则而非重新定义。创建插槽前应先与用户确认,除非用例明显属于组合性质(如富嵌套内容或可重复嵌入的组件);对于简单文本类值,优先使用 prop。不要默认将 Canvas 插槽映射到 children prop;如果插槽键是 content,应在 JSX 中按 content 消费。使用名为 children 的插槽键技术上可行但不推荐,因为插槽命名常流入面向用户的 Canvas 标签,建议使用 content、media、actions 等明确键名。slots 必须是按插槽名索引的对象映射,或在无插槽时为 [],不要使用插槽对象数组。

限制

资料未提供该技能的收费、价格、运行平台、支持的 Canvas/Drupal 版本、安装命令或性能效果等信息,这些内容暂未提供。