docs: update sidebar style of website (#48224)

* docs: update GetRef/GetProp/GetProps docs

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

.dumi/hooks/useMenu.tsx

@@ -1,12 +1,25 @@
 import React, { useMemo } from 'react';
 import type { MenuProps } from 'antd';
 import { Tag, version } from 'antd';
+import { createStyles } from 'antd-style';
+import classnames from 'classnames';
 import { useFullSidebarData, useSidebarData } from 'dumi';
 
 import Link from '../theme/common/Link';
 import useLocation from './useLocation';
 
-const MenuItemLabelWithTag: React.FC<{
+const useStyle = createStyles(({ css }) => ({
+  link: css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  `,
+  tag: css`
+    margin-inline-end: 0;
+  `,
+}));
+
+interface MenuItemLabelProps {
   before?: React.ReactNode;
   after?: React.ReactNode;
   link: string;
@@ -15,18 +28,14 @@ const MenuItemLabelWithTag: React.FC<{
   search?: string;
   tag?: string;
   className?: string;
-}> = ({ before, after, link, title, subtitle, search, tag = '', className }) => {
+}
+
+const MenuItemLabelWithTag: React.FC<MenuItemLabelProps> = (props) => {
+  const { styles } = useStyle();
+  const { before, after, link, title, subtitle, search, tag, className } = props;
   if (!before && !after) {
     return (
-      <Link
+      <Link to={`${link}${search}`} className={classnames(className, { [styles.link]: tag })}>
-        to={`${link}${search}`}
-        style={
-          tag
-            ? { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }
-            : undefined
-        }
-        className={className}
-      >
         <span>
           {title}
           {subtitle && <span className="chinese">{subtitle}</span>}
@@ -34,8 +43,8 @@ const MenuItemLabelWithTag: React.FC<{
         {tag && (
           <Tag
             bordered={false}
-            color={tag === 'New' ? 'success' : 'processing'}
+            className={classnames(styles.tag)}
-            style={{ marginBlockEnd: 0 }}
+            color={tag.startsWith('5.') || tag === 'New' ? 'success' : 'processing'}
           >
             {tag.replace('VERSION', version)}
           </Tag>

components/_util/index.en-US.md

@@ -5,6 +5,7 @@ description: Utilities are used to assist development and provide some common ut
 showImport: false
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
+tag: 5.13.0
 demo:
   cols: 2
 group:
@@ -12,12 +13,15 @@ group:
   order: 99
 ---
 
+Available since `5.13.0`.
+
 ## GetRef
 
 Get the `ref` property definition of the component, which is very useful for components that are not directly exposed or child components.
 
 ```tsx
-import type { GetRef, Select } from 'antd';
+import { Select } from 'antd';
+import type { GetRef } from 'antd';
 
 type SelectRefType = GetRef<typeof Select>; // BaseSelectRef
 ```
@@ -27,7 +31,8 @@ type SelectRefType = GetRef<typeof Select>; // BaseSelectRef
 Get the `props` property definition of the component:
 
 ```tsx
-import type { Checkbox, GetProps } from 'antd';
+import { Checkbox } from 'antd';
+import type { GetProps } from 'antd';
 
 type CheckboxGroupType = GetProps<typeof Checkbox.Group>;
 ```
@@ -37,7 +42,8 @@ type CheckboxGroupType = GetProps<typeof Checkbox.Group>;
 Get the single `props` property definition of the component. It has encapsulated `NonNullable`, so you don't have to worry about being empty:
 
 ```tsx
-import type { GetProp, Select, SelectProps } from 'antd';
+import { Select } from 'antd';
+import type { GetProp, SelectProps } from 'antd';
 
 // Both of this can work
 type SelectOptionType1 = GetProp<SelectProps, 'options'>[number];

components/_util/index.zh-CN.md

@@ -6,6 +6,7 @@ description: 辅助开发，提供一些常用的工具方法。
 showImport: false
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
+tag: 5.13.0
 demo:
   cols: 2
 group:
@@ -13,12 +14,15 @@ group:
   order: 99
 ---
 
+自 `5.13.0` 版本开始提供这些方法。
+
 ## GetRef
 
 获取组件的 `ref` 属性定义，这对于未直接暴露或者子组件的 `ref` 属性定义非常有用。
 
 ```tsx
-import type { GetRef, Select } from 'antd';
+import { Select } from 'antd';
+import type { GetRef } from 'antd';
 
 type SelectRefType = GetRef<typeof Select>; // BaseSelectRef
 ```
@@ -28,7 +32,8 @@ type SelectRefType = GetRef<typeof Select>; // BaseSelectRef
 获取组件的 `props` 属性定义：
 
 ```tsx
-import type { Checkbox, GetProps } from 'antd';
+import { Checkbox } from 'antd';
+import type { GetProps } from 'antd';
 
 type CheckboxGroupType = GetProps<typeof Checkbox.Group>;
 ```
@@ -38,7 +43,8 @@ type CheckboxGroupType = GetProps<typeof Checkbox.Group>;
 获取组件的单个 `props` 属性定义。它已经将 `NonNullable` 进行了封装，所以不用在考虑为空的情况：
 
 ```tsx
-import type { GetProp, Select, SelectProps } from 'antd';
+import { Select } from 'antd';
+import type { GetProp, SelectProps } from 'antd';
 
 // 以下两种都可以生效
 type SelectOptionType1 = GetProp<SelectProps, 'options'>[number];

components/app/index.en-US.md

@@ -7,9 +7,11 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oC92TK44Ex8AAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
-tag: New
+tag: 5.1.0
 ---
 
+Available since `5.1.0`.
+
 ## When To Use
 
 - Provide reset styles based on `.ant-app` element.
@@ -125,6 +127,8 @@ export default () => {
 
 Common props ref：[Common props](/docs/react/common-props)
 
+> This component is available since `antd@5.1.0`.
+
 ### App
 
 | Property | Description | Type | Default | Version |

components/app/index.zh-CN.md

@@ -8,9 +8,11 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oC92TK44Ex8AAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
-tag: New
+tag: 5.1.0
 ---
 
+自 `5.1.0` 版本开始提供该组件。
+
 ## 何时使用
 
 - 提供可消费 React context 的 `message.xxx`、`Modal.xxx`、`notification.xxx` 的静态方法，可以简化 useMessage 等方法需要手动植入 `contextHolder` 的问题。
@@ -126,6 +128,8 @@ export default () => {
 
 通用属性参考：[通用属性](/docs/react/common-props)
 
+> 自 `antd@5.1.0` 版本开始提供该组件。
+
 ### App
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |

components/color-picker/index.en-US.md

@@ -4,7 +4,7 @@ title: ColorPicker
 description: Used for color selection.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PpY4RYNM8UcAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EHL-QYJofZsAAAAAAAAAAAAADrJ8AQ/original
-tag: New
+tag: 5.5.0
 demo:
   cols: 2
 group:

components/color-picker/index.zh-CN.md

@@ -5,7 +5,7 @@ subtitle: 颜色选择器
 description: 用于选择颜色。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PpY4RYNM8UcAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EHL-QYJofZsAAAAAAAAAAAAADrJ8AQ/original
-tag: New
+tag: 5.5.0
 demo:
   cols: 2
 group:

components/flex/index.en-US.md

@@ -5,7 +5,7 @@ title: Flex
 description: A flex layout container for alignment.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original
-tag: New
+tag: 5.10.0
 ---
 
 Available since `5.10.0`.

components/flex/index.zh-CN.md

@@ -6,7 +6,7 @@ subtitle: 弹性布局
 description: 用于对齐的弹性布局容器。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original
-tag: New
+tag: 5.10.0
 ---
 
 自 `5.10.0` 版本开始提供该组件。

components/float-button/index.en-US.md

@@ -7,7 +7,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tXAoQqyr-ioAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*hSAwR7cnabwAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
-tag: New
+tag: 5.0.0
 ---
 
 Available since `5.0.0`.

components/float-button/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tXAoQqyr-ioAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*hSAwR7cnabwAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
-tag: New
+tag: 5.0.0
 ---
 
 自 `5.0.0` 版本开始提供该组件。

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

@@ -9,7 +9,7 @@ demo:
 group:
   title: Data Display
   order: 5
-tag: New
+tag: 5.1.0
 ---
 
 Available since `antd@5.1.0`.

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

@@ -10,7 +10,7 @@ demo:
 group:
   title: 数据展示
   order: 5
-tag: New
+tag: 5.1.0
 ---
 
 自 `antd@5.1.0` 版本开始提供该组件。

components/tour/index.en-US.md

@@ -7,7 +7,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NMvqRZpuJfQAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*D70qQJJmzhgAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
-tag: New
+tag: 5.0.0
 ---
 
 Available since `5.0.0`.

components/tour/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NMvqRZpuJfQAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*D70qQJJmzhgAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
-tag: New
+tag: 5.0.0
 ---
 
 自 `5.0.0` 版本开始提供该组件。

components/watermark/index.en-US.md

@@ -7,9 +7,10 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wr1ISY50SyYAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*duAQQbjHlHQAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 1
+tag: 5.1.0
 ---
 
-Available since `5.0.0`.
+Available since `5.1.0`.
 
 ## When To Use
 
@@ -29,7 +30,7 @@ Available since `5.0.0`.
 
 Common props ref：[Common props](/docs/react/common-props)
 
-> This component is available since `antd@5.0.0`.
+> This component is available since `antd@5.1.0`.
 
 ### Watermark
 

components/watermark/index.zh-CN.md

@@ -8,10 +8,10 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wr1ISY50SyYAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*duAQQbjHlHQAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 1
-tag: New
+tag: 5.1.0
 ---
 
-自 `5.0.0` 版本开始提供该组件。
+自 `5.1.0` 版本开始提供该组件。
 
 ## 何时使用
 
@@ -31,7 +31,7 @@ tag: New
 
 通用属性参考：[通用属性](/docs/react/common-props)
 
-> 自 `antd@5.0.0` 版本开始提供该组件。
+> 自 `antd@5.1.0` 版本开始提供该组件。
 
 ### Watermark