Package Specification

目录结构

+ src
  + button
    - view.tsx     // 默认视图文件
    - index.ts     // 渲染视图入口文件
    - designer.ts  // 设计器视图入口文件
    - prototype.ts // 组件描述文件
  + date-picker
  - index.ts       // 组件包默认入口文件
  - designer.ts    // 组件包设计器视图入口文件

组件包入口

默认入口

src/index.ts 是组件包的默认出口文件。

设计视图入口

src/designer.ts 是组件包的设计视图出口文件。您至少应该导出 menuData 和 prototypes 两个模块：

export { Button } from './button';
export { Card } from './card';
//...

// 组件的配置描述列表
export const prototypes = [
  {
    title: '按钮',
    name: 'Button',
    props: [
      {
        name: 'size',
        setter: 'textSetter',
      },
      //...
    ],
  },
  //...
];

export const menuData = {
  // 常用组件
  common: [
    {
      title: '基本',
      items: ['Button'],
    },
  ],
};

其中 menuData 的 key 可选列表如下：

key	分类标题
common	常用组件
atom	原子组件
snippet	组合
block	区块

组件入口

组件默认视图文件

src/button/view.tsx

export function Button({ children, ...rest }) {
  return <button {...rest}>{children}</button>;
}

需要注意的是，你需要将组件多余的属性 ...rest 透传给跟结点 <button {...rest}>，以便于在设计器中时组件能够接收到跟踪信息。

组件默认入口文件

src/button/index.ts

export * from './view';

组件设计器视图文件

设计器视图是您的组件在 tango 设计器中进行展示的视图，大部分情况下，您无需关注此逻辑，特殊情况下，您的组件可能需要在设计器下有不一样的展现和数据透出，此时可以定义该视图文件实现。

src/button/designer.tsx

import { withDnd } from '@music/tango-apps-shared';
import { Button as ButtonBase } from './view';

export const Button = withDnd({
  // 组件名
  name: 'Button',
  // 是否在设计器中有包裹层，用于设置 dnd 的追踪信息
  hasWrapper: false,
})(ButtonBase);

组件描述文件

src/button/prototype.ts

import { ComponentPrototypeType } from '@music/tango-apps-shared';

export const Button: ComponentPrototypeType = {
  title: '按钮',
  name: 'Button',
  exportType: 'namedExport',
  icon: 'icon-anniu',
  type: 'element',
  package: '@music163/antd',
  hasChildren: false,
  props: [
    {
      name: 'children',
      title: '文案',
      setter: 'textSetter',
      initValue: '按钮',
    },
  ],
};

依赖说明

如果您的组件会视图组件，推荐您的组件基于 @music163/antd 或 @music163/antd 的最新版本进行开发，且不要依赖其他 UI 组件包，例如 antd, fusion 等。