docs: use dumi alert (#46793)

* docs: use dumi alert

* chore: code clean

.dumi/theme/builtins/Alert/index.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { AlertProps } from 'antd';
-import { Alert } from 'antd';
-
-const MdAlert: React.FC<AlertProps> = ({ style, ...props }) => (
-  <Alert {...props} style={{ margin: '24px 0', ...style }} />
-);
-
-export default MdAlert;

components/collapse/index.en-US.md

@@ -94,7 +94,10 @@ Common props ref：[Common props](/docs/react/common-props)
 
 ### Collapse.Panel
 
-<Alert message="&gt;= 5.6.0 configure the panel by `items`."></Alert>
+<!-- prettier-ignore -->
+:::info{title=Deprecated}
+When using version >= 5.6.0, we prefer to configuring the panel by `items`.
+:::
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |

components/collapse/index.zh-CN.md

@@ -95,7 +95,10 @@ const items: CollapseProps['items'] = [
 
 ### Collapse.Panel
 
-<Alert message="&gt;= 5.6.0 请使用 items 方式配置面板."></Alert>
+<!-- prettier-ignore -->
+:::info{title=已废弃}
+版本 >= 5.6.0 时请使用 items 方式配置面板。
+:::
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |

components/drawer/index.en-US.md

@@ -41,7 +41,10 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 
 Common props ref：[Common props](/docs/react/common-props)
 
-**🚨 Note:** v5 use `rootClassName` & `rootStyle` to config wrapper style instead of `className` & `style` in v4 to align the API with Modal.
+<!-- prettier-ignore -->
+:::info{title=注意}
+v5 use `rootClassName` & `rootStyle` to config wrapper style instead of `className` & `style` in v4 to align the API with Modal.
+:::
 
 | Props | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |

components/drawer/index.zh-CN.md

@@ -40,7 +40,10 @@ demo:
 
 通用属性参考：[通用属性](/docs/react/common-props)
 
-**🚨 注意：** v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
+<!-- prettier-ignore -->
+:::info{title=注意}
+v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
+:::
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |

components/mentions/index.en-US.md

@@ -16,7 +16,11 @@ When you need to mention someone or something.
 
 ### Usage upgrade after 5.1.0
 
-<Alert message="After version 5.1.0, we provide a simpler usage &lt;Mentions options={[...]} /&gt;  with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0."></Alert>
+<!-- prettier-ignore -->
+:::info
+After version 5.1.0, we provide a simpler usage `<Mentions options={[...]} />` with better performance and potential of writing simpler code style in your applications.
+Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0.
+:::
 
 ```jsx
 // works when >=5.1.0, recommended ✅

components/mentions/index.zh-CN.md

@@ -17,7 +17,11 @@ demo:
 
 ### 5.1.0 用法升级
 
-<Alert message="在 5.1.0 版本后，我们提供了 &lt;Mentions options={[...]} /&gt; 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法，你还是可以在 5.x 继续使用，但会在控制台看到警告，并会在 6.0 后移除。"></Alert>
+<!-- prettier-ignore -->
+:::info
+在 5.1.0 版本后，我们提供了 `<Mentions options={[...]} />` 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。
+同时我们废弃了原先的写法，你还是可以在 5.x 继续使用，但会在控制台看到警告，并会在 6.0 后移除。
+:::
 
 ```jsx
 // >=5.1.0 可用，推荐的写法 ✅

components/qr-code/index.en-US.md

@@ -13,7 +13,11 @@ tag: New
 
 Components that can convert text into QR codes, and support custom color and logo. Available since `antd@5.1.0`.
 
-<Alert message="If the QR code cannot be scanned for identification, it may be because the link address is too long, which leads to too dense pixels. You can configure the QR code to be larger through size, or shorten the link through short link services."></Alert>
+<!-- prettier-ignore -->
+:::info
+If the QR code cannot be scanned for identification, it may be because the link address is too long, which leads to too dense pixels.
+You can configure the QR code to be larger through size, or shorten the link through short link services.
+:::
 
 ## When To Use
 

components/qr-code/index.zh-CN.md

@@ -14,7 +14,10 @@ tag: New
 
 能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置，自 `antd@5.1.0` 版本开始提供该组件。
 
-<Alert message="若二维码无法扫码识别，可能是因为链接地址过长导致像素过于密集，可以通过 size 配置二维码更大，或者通过短链接服务等方式将链接变短。"></Alert>
+<!-- prettier-ignore -->
+:::info
+若二维码无法扫码识别，可能是因为链接地址过长导致像素过于密集，可以通过 size 配置二维码更大，或者通过短链接服务等方式将链接变短。
+:::
 
 ## 何时使用
 

components/timeline/index.en-US.md

@@ -15,7 +15,11 @@ Vertical display timeline.
 - When a series of information needs to be ordered by time (ascending or descending).
 - When you need a timeline to make a visual connection.
 
-<Alert message="After version 5.2.0, we provide a simpler usage &lt;Timeline items={[...]} /&gt; with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0."></Alert>
+<!-- prettier-ignore -->
+:::info
+After version 5.2.0, we provide a simpler usage `<Timeline items={[...]} />` with better performance and potential of writing simpler code style in your applications.
+Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0.
+:::
 
 ```jsx
 // works when >=5.2.0, recommended ✅

components/timeline/index.zh-CN.md

@@ -16,7 +16,11 @@ demo:
 - 当有一系列信息需按时间排列时，可正序和倒序。
 - 需要有一条时间轴进行视觉上的串联时。
 
-<Alert message="5.2.0版本之后，我们提供了更简单的用法 &lt;Timeline items={[...]} /&gt; 以获得更好的性能，使您能在应用中编写更简单的代码。与此同时，我们弃用了旧的用法，并且将在下一个 major 版本中删除它。"></Alert>
+<!-- prettier-ignore -->
+:::info
+5.2.0版本之后，我们提供了更简单的用法 `<Timeline items={[...]} />` 以获得更好的性能，使您能在应用中编写更简单的代码。
+与此同时，我们弃用了旧的用法，并且将在下一个 major 版本中删除它。
+:::
 
 ```jsx
 // >=5.2.0 可用，推荐的写法 ✅

docs/react/migrate-less-variables.en-US.md

@@ -7,7 +7,10 @@ title: Less variables to Component Token
 
 This document contains the correspondence between all the less variables related to components in version 4.x and the Component Token in version 5.x. If you are upgrading from version 4.x to version 5.x, you can quickly find the corresponding Component Token through this comparison table.
 
-<Alert message="Note: There are still some less variables that do not have a corresponding Component Token, and these variables have been deprecated in version 5.x."></Alert>
+<!-- prettier-ignore -->
+:::info{title=Note}
+There are still some less variables that do not have a corresponding Component Token, and these variables have been deprecated in version 5.x.
+:::
 
 ## How to use Component Token
 

docs/react/migrate-less-variables.zh-CN.md

@@ -7,7 +7,10 @@ title: 从 Less 变量到 Design Token
 
 本文档包含了所有 4.x 版本中组件相关的 less 变量与 5.x 版本的 Component Token 的对照关系。如果你是从 4.x 版本升级到 5.x 版本，可以通过这份对照表快速找到对应的 Component Token。
 
-<Alert message="注意：仍有部分变量没有对应的 Component Token，这些变量在 5.x 版本中已被废弃。"></Alert>
+<!-- prettier-ignore -->
+:::info{title=注意}
+仍有部分变量没有对应的 Component Token，这些变量在 5.x 版本中已被废弃。
+:::
 
 ## 如何配置 Component Token