TeamixPro

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

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

TeamixPro 内置了 ahooks，可以直接通过 import { usePrevious } from '@teamix/pro' 引入

安装

使用 npm 或 yarn 安装

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

$ npm install @teamix/pro --save

$ yarn add @teamix/pro

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

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

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

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

// 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 外链引入：

<!-- 引入样式资源 -->
<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 地址请参考这里，默认导出名称为 TeamixPro 其中 @teamix/pro 默认 external 了这些依赖：react、react-dom、moment、prop-types、@alicloudfe/components 、react-router-dom 参考 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 中增加配置:

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

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