# 基础组件包规范

## 目录结构

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

## 组件包入口

### 默认入口

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

### 设计视图入口

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

```ts
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`

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

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

### 组件默认入口文件

`src/button/index.ts`

```ts
export * from './view';
```

### 组件设计器视图文件

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

`src/button/designer.tsx`

```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`

```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` 等。
