# [TeamixPro](https://teamixpro.dg.aliyun-inc.com/components/quick-start)

TeamixPro 是基于 [@alicloudfe/components](https://github.com/aliyun/cloud-design/tree/master/base-components) 而开发的模版组件，提供了更高级别的抽象支持，开箱即用。并提供更贴近云管业务的 demo 已经丰富完整的文档帮助大家快速上手。可以显著的提升制作云管相关页面的体验&效率，更加专注于页面。

- [ProField](/components/field) 主要为了简化 UI 渲染能力，为其他组件提供原子的数据输入、数据展示能力，内置丰富的样式类型，也可单独使用。
- [ProAction](/components/actions) 主要为了简化页面逻辑编写，为其他组件提供通用的「执行操作」逻辑，内置丰富的操作类型。
- [ProSkeleton](/components/skeleton) 为其他组件提供原子骨架屏能力，也可单独作为页面级别的骨架屏使用。
- [ProCard](/components/card) 提供卡片切分以及栅格布局能力。
- [ProForm](/components/form) 表单模板组件，是基于 [Formily](https://v2.formilyjs.org/zh-CN) 的 JSON Schema 开发方式进行了封装，简化了 Schema 语法，内置了一些属性配置，帮助我们快速的开发一个表单。
- [ProTable](/components/table) 表格模板组件，集成了 ProField、ProAction、ProSkeleton、ProForm。并抽象网络请求和表格格式化，帮助我们快速的开发一个表格页。
- [ProInfo](/components/info) 详情模版组件，API 与 ProTable 一致,将业务中需要使用的详情列表抽象为描述详情、页头详情、表格详情。并内置了响应式规则。
- [ProPageContainer](/components/page-container) 提供了页面多个模块之间的排列布局信息以及间距，不含每个模块内容的具体实现。

> TeamixPro 内置了 [ahooks](https://ahooks.js.org/zh-CN/hooks/async)，可以直接通过 `import { usePrevious } from '@teamix/pro'` 引入

## 安装

### 使用 npm 或 yarn 安装

在项目中我们推荐通过安装大包的方式引入：

```bash | pure
$ npm install @teamix/pro --save
```

```bash | pure
$ yarn add @teamix/pro
```

安装后我们就可以引入相关组件及对应的类型定义：

```js | pure
import {
  ProPageContainer,
  ProPageHeader,
  ProTable,
  ProTableColumnProps,
  ProFormSchema,
} from '@teamix/pro';

import '@teamix/pro/dist/pro.css'; // 引入css
```

同时对于一些没有依赖关系的组件，我们为其单独发了包，可以单独安装引入：

```js | pure
// ProField
$ npm i @teamix/pro-field --save

// ProPageContainer
$ npm i @teamix/pro-page-container --save

// ProSkeleton
$ npm i @teamix/pro-skeleton --save

// Utils
$ npm i @teamix/utils --save
```

### 浏览器引入

如果想将大包 external 出去减少构建体积或者其他用途，可以在 HTML 模版上面通过 CDN 外链引入：

```html
<!-- 引入样式资源 -->
<link
  rel="stylesheet"
  href="https://gw.alipayobjects.com/os/lib/teamix/pro/1.1.6/dist/pro.min.css"
/>
<!-- 引入js资源 -->
<script src="https://gw.alipayobjects.com/os/lib/teamix/pro/1.1.6/dist/pro.min.js"></script>
```

关于每个版本的 CDN 地址请参考[这里](https://yuyan.antfin-inc.com/lib/version?name=%40teamix%2Fpro)，默认导出名称为 `TeamixPro`
其中 @teamix/pro 默认 external 了这些依赖：react、react-dom、moment、prop-types、@alicloudfe/components 、react-router-dom
参考 html 如下：

```html
<script src="https://gw.alipayobjects.com/os/lib/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://gw.alipayobjects.com/os/lib/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<script src="https://gw.alipayobjects.com/os/lib/prop-types/15.7.2/prop-types.min.js"></script>
<script src="https://gw.alipayobjects.com/os/lib/moment/2.29.1/moment.js"></script>
<script src="https://gw.alipayobjects.com/os/lib/react-router-dom/5.3.0/umd/react-router-dom.min.js"></script>
<script src="https://gw.alipayobjects.com/os/lib/alicloudfe/components/1.2.12/dist/index.js"></script>
```

采用 Teamix 工程体系的在 build.json 中 external 中增加配置:

```json
{
  "externals": {
    ...
+    "react-router-dom": "ReactRouterDOM",
+   "@teamix/pro": "TeamixPro",
  }
}
```

external 之后即可通过 `window.TeamixPro` 访问到全局大包：

<img src="https://img.alicdn.com/imgextra/i4/O1CN012HZmZw1WUmX6OIWEV_!!6000000002792-2-tps-1134-530.png" width="50%" />