什么是组件物料？

组件物料包括两部分:

• 组件库
• 组件描述

组件库和组件描述之间 通过 componentName 来一一绑定对应

组件库

组件库就是组件的 JS 运行库, 比如 Ant Design、ElemtnUI、Vant UI 等等，它们是可以被运行的 JS 代码库。

组件描述

如果想要编辑器知道组件的具体功能，比如支持那些属性，那些事件等等，则需要一份对应的描述文件详细描述了组件的 props 的各种行为，以及数据结构，这样编辑器才能对组件进行控制编辑。这份描述文件就是组件描述。

物料协议请参考 Schema 文档

Example:

对 Ant Design UI 库的 Button 组件的物料描述:

Editor.tsx

import { CMaterialType } from '@chamn/model';

export const ButtonMeta: CMaterialType = {
  title: 'Button',
  componentName: 'Button',
  npm: {
    package: 'antd',
    exportName: 'Button',
    destructuring: true,
    version: '1.0.0',
  },
  icon: 'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_button.png',
  // 对 Button 属性的行为描述
  props: [
    {
      name: 'type',
      title: '按钮类型',
      valueType: 'string',
      // 用于配制用那些输入控件来接收 props 的值
      setters: [
        {
          componentName: 'SelectSetter',
          props: {
            options: [
              {
                value: 'primary',
                label: 'primary',
              },
              {
                value: 'link',
                label: 'link',
              },
              {
                value: '',
                label: 'Default',
              },
            ],
          },
        },
      ],
    },
    {
      name: 'block',
      title: '块状按钮',
      valueType: 'boolean',
      setters: ['BooleanSetter'],
      // 用于支持联动，当某些 key 的值变化后，控制当前属性是否显示的逻辑判断
      condition: (state) => {
        if (state.type === 'primary') {
          return true;
        }
        return false;
      },
    },
    {
      name: 'children',
      title: '文本',
      valueType: 'string',
      // 支持多种值的输入控件
      setters: ['StringSetter', 'ExpressionSetter'],
    },
    {
      name: 'onClick',
      title: '点击时',
      valueType: 'function',
      setters: ['FunctionSetter', 'ExpressionSetter'],
    },
    {
      name: 'text1',
      title: '联动文本1',
      valueType: 'string',
      setters: [
        {
          componentName: 'StringSetter',
        },
      ],
      condition: (state) => {
        if (state.type === 'primary1') {
          return true;
        }
        return false;
      },
    },
    {
      name: 'text2',
      title: '联动文本2',
      valueType: 'string',
      setters: [
        {
          componentName: 'StringSetter',
        },
      ],
      condition: (state) => {
        if (state.text1 === '1') {
          return true;
        }
        return false;
      },
    },
    {
      name: 'text3',
      title: '联动文本3',
      valueType: 'string',
      setters: [
        {
          componentName: 'StringSetter',
        },
        'ExpressionSetter',
      ],
    },
  ],
  // 组件 schema 片段，会被展示在组件库中
  snippets: [
    {
      title: '基础按钮',
      snapshot: 'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_button.png',
      category: '基础控件2',
      // 当被拖入到画布上时会将对应的 schema 添加到 页面级别的 Schema 中, 如果 schema 没有componentName， 会默认添加当前组件的 componentName
      schema: {
        props: {
          type: 'primary',
        },
        children: ['I am a Button'],
      },
    },
    {
      title: '基础按钮',
      snapshot: 'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_button.png',
      category: '基础控件3',
      schema: {
        props: {
          type: 'primary',
        },
        children: ['I am a Button'],
      },
    },
    {
      title: '基础按钮',
      snapshot: 'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_button.png',
      category: '基础控件4',
      schema: {
        props: {
          type: 'primary',
        },
        children: ['I am a Button'],
      },
    },
  ],
};