一、什么是Ant Design Mobile

Ant Design Mobile是由支付宝设计团队基于蚂蚁集团的众多业务实践和亿万用户的验证反馈，抽象构建出的移动端UI组件库。它是Ant Design的移动端版本，专注于为移动端应用和网页设计提供一套丰富且易于使用的组件。Ant Design Mobile基于React技术栈开发，支持TypeScript，并遵循Ant Design的设计规范。

Ant Design Mobile适用于各种类型的移动应用开发项目，无论是企业级应用还是个人项目，都可以通过其丰富的组件库快速构建出功能完备、美观易用的移动端界面。它帮助开发者和设计师将创意快速转化为实际应用，提升开发效率和用户体验。

二、主要特点

高性能：无需复杂配置，即可拥有最佳的包体积大小和最优的性能。
可定制：基于CSS变量，可以灵活地调整组件外观或自由创造自己的主题。
原子化：每个组件提供的功能恰到好处地满足业务所需。
流畅：拥有流畅的手势交互和细致的动画展示，助力打造极致的用户体验。
美观易用：遵循精心设计的视觉规范，拥有简洁美观的外观和易于使用的交互体验，适用于iOS和Android用户。
快速开发：提供了大量现成的UI组件和模板，使得开发过程更加高效。

三、antd-mobile和antd有什么区别？

Ant Design（简称antd）和Ant Design Mobile（简称antd-mobile）都是由蚂蚁金服设计团队开发的UI组件库，但它们在设计目标和应用场景上有所不同：

3.1 设计目标和应用场景

Ant Design（antd）：
- 主要针对PC端和平板浏览器设计。
- 提供了丰富的桌面端UI组件，适用于构建企业级的Web应用。
Ant Design Mobile（antd-mobile）：
- 专注于移动端浏览器。
- 提供了适合移动端使用的轻量级UI组件，适用于构建移动端Web应用。

3.2组件差异

组件类型和交互方式：
- antd的组件更符合桌面端用户的交互习惯，例如使用鼠标点击、拖拽等操作。
- antd-mobile的组件则更注重移动端用户的交互体验，如手指滑动、触摸等操作。
组件的外观和布局：
- antd的组件通常具有较大的尺寸和间距，以适应桌面屏幕的显示。
- antd-mobile的组件则设计得更加紧凑，以适应移动设备的屏幕尺寸。

四、安装

4.1 安装

npm install antd-mobile

大战bug-「有些版本的依赖库找不到」
下载较低版本的：
npm view antd-mobile versions
运行上面的命令可以查看当前源所支持的版本。

这里我选择了5.0.0的版本：
npm install antd-mobile@5.0.0
安装成功。

官网提示：对于 React，我们兼容的版本是 ^16.8.0 ^17.0.0 ^18.0.0。

所以要安装制定的react版本来适配。

npm i react-dom@18.0.0
npm i react@18.0.0

五、使用

主要参考官网。

5.1 表格渲染（使用antd，antd-mobile没有表格组件）

5.1.1 引入Ant Design表格组件

首先，确保你已经安装了Ant Design Mobile，并在你的React组件中引入了表格组件。例如：

import { Table } from 'antd';

5.1.2 定义表格列

你需要定义表格的列结构，包括每列的标题和数据索引。例如：

const columns = [
    {
        title: '告警字段名称',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '告警字段值',
        dataIndex: 'value',
        key: 'value',
    },
];

title：列的标题，显示在表头。例如，“告警字段名称”和“告警字段值”。

dataIndex：指定数据对象中对应的字段名。Table 组件会根据这个字段名从 dataSource 中获取数据。例如，dataIndex: 'name' 表示从数据对象中获取 name 字段的值作为该列的内容。

key：每一列的唯一标识符。在 React 中，通常需要为列表中的每个元素提供一个唯一的 key 属性，以便 React 能够高效地更新和渲染列表。虽然在这里 key 和 dataIndex 相同，但它们的作用不同。

5.1.3 数据源转换

为了使 Table 组件能够正确地显示数据，我们需要将原始数据转换为 Table 组件所需的格式。原始数据是一个包含多个对象的数组，每个对象代表一个字段和其值。我们需要将这些对象转换为包含 name 和 value 属性的对象，以便 Table 组件能够根据 dataIndex 获取到正确的数据。

const dataSource = data.map((item, index) => {
    const key = Object.keys(item)[0];
    return {
        key: index,
        name: key,
        value: item[key] || '无',
    };
});

key：为每个数据项提供一个唯一的标识符，通常可以使用索引或数据中的某个唯一字段。

name：从原始数据对象中获取键名作为字段名称。

value：从原始数据对象中获取对应的值。如果值为 null 或 undefined，可以显示为“无”。

通过这样的定义和数据转换，Table 组件能够正确地渲染出包含“告警字段名称”和“告警字段值”的表格。

5.1.4 渲染

const AlertTable = () => (
    <Table
        columns={columns}
        dataSource={dataSource}
        bordered
        pagination={false}
    />
);

export default AlertTable;