mirror of
https://github.com/NetEase/tango.git
synced 2026-07-03 06:34:27 +08:00
137 lines
2.9 KiB
Plaintext
137 lines
2.9 KiB
Plaintext
# 基础组件包规范
|
|
|
|
## 目录结构
|
|
|
|
```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` 等。
|