AMS 使用文档

# 组件仓库

组件仓库好比一个数据源，我们可以通过 antd 中获取 button，那么 antd 就是作为 button 的仓库，而 button 则代表组件。那么我们可以通过不同的仓库即可获得不同的组件。目前有以下组件仓库：

html
antd (版本: 4.1.4)
@ant-design/pro-layout (版本: 5.0.9)
@ant-design/icons (版本: 4.1.6)
ams (AMS 内置组件)
ams/projects/cost-per-buy (AMS 定制项目: 买量后台)

阅读至此，开发者需要大致知道的是：

1. 所有的仓库名称必须小写。
2. 仓库名除了特殊对待的几个以外，其他均与 npm 线上仓库名称一致。 3. 仓库 base 代表基础仓库，即 AMS 内部自带的组件仓库

# 组件仓库 - html

html 组件仓库用于表示所有原生 html 元素组件集合，其中所有日常使用的 html 元素如：div、a、span 等。通常来说我们可以进行如下 json 表达， 表达式等效于注释部分：

// <a></a>
{
  "$$$": "component",
  "registryName": "html",
  "componentName": "a",
  ...
}
1
2
3
4
5
6
7
// <div></div>
{
  "$$$": "component",
  "registryName": "html",
  "componentName": "div",
  ...
}
1
2
3
4
5
6
7

# 组件仓库 - antd

antd (ant design) 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。AMS 完整的引入了 antd 并能够使用官网上的所有提供的组件案例。

Ant Design

这是一个最基本的使用样例。AMS 可以通过解析以下 json 还原出等效 React JSX 虚拟 dom 等效表达渲染。

// import { Button } from 'antd';
// <Button type="primary">Primary</Button>
{
  "$$$": "component",
  "registryName": "antd",
  "componentName": "Button",
  "props": {
    "type": "primary"
  },
  "children": [
    "Primary"
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13

Ant Design - Card

以下例子使用 Card 与 Card.Meta 的组件嵌套，只要我们能够正确理解 import { Card } from 'antd' 引入形式，我们也可以用同样的 json 表 等效表达出来。同样的，AMS 也能够支持 Card.Meta 的解析：

// import { Card } from 'antd';
// ReactDOM.render(
//   <Card
//     hoverable
//     style={{ width: 240 }}
//   >
//     <Card.Meta title="Europe Street beat" description="www.instagram.com" />
//   </Card>,
//   mountNode,
// );

{
  "$$$": "component",
  "registryName": "antd",
  "componentName": "Card",
  "props": {
    "hoverable": true,
    "style": {
      "width": 240
    }
  },
  "children": [
    {
      "$$$": "component",
      "registryName": "antd",
      "componentName": "Card.Meta",
      "props": {
        "title": "Europe Street beat",
        "description": "www.instagram.com"
      }
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 组件仓库 - @ant-design/icons

具体使用方式请参考：https://ant.design/components/icon/

# 组件仓库 - @ant-design/pro-layout

具体使用方式请参考：https://prolayout.ant.design/

# 组件仓库 - ams

文档待补全。

← 函数仓库 →