@teamix/pro NPM

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 访问到全局大包：

aliyun hybridcloud teamix pro components ui ui library react frontend protable proform proaction

@teamix/formily @teamix/hooks @teamix/pop-confirm @teamix/pro-field @teamix/pro-page-container @teamix/pro-skeleton @teamix/result @teamix/svg @teamix/utils classnames lodash.clonedeep lodash.debounce lodash.isempty react-helmet

@infinitebrahmanuniverse/nolb-_teami @everything-registry/sub-chunk-900 teamix-app-core @zalastax/nolb-_teami @teamix/pro-dashboard @teamix/page-header @teamix/material

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

7 months ago

10 months ago

10 months ago

10 months ago

7 months ago

10 months ago

11 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

7 months ago

9 months ago

9 months ago

10 months ago

9 months ago

10 months ago

10 months ago

9 months ago

10 months ago

9 months ago

9 months ago

8 months ago

9 months ago

8 months ago

8 months ago

8 months ago

7 months ago

8 months ago

7 months ago

8 months ago

9 months ago

7 months ago

8 months ago

7 months ago

7 months ago

7 months ago

7 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 years ago

2 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago