# 基础组件包规范 | 使用 Tango 构建你的低代码生产力工具
目录结构

跳到主要内容
🏗 当前版本为 alpha 版本，相关文档正在编写之中，敬请期待！

# 基础组件包规范

## 目录结构​

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