Merge branch 'master' into formitem-layout-height

2025-01-22 08:53:29 +08:00 · 2025-01-08 14:19:52 +08:00 · 2025-01-08 14:19:52 +08:00 · a8631c1d81
commit a8631c1d81
parent 89dc024095 280d788645
35 changed files with 852 additions and 228 deletions
--- a/.dumi/theme/builtins/ComponentMeta/index.tsx
+++ b/.dumi/theme/builtins/ComponentMeta/index.tsx
@ -154,7 +154,9 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
      colon={false}
      column={1}
      style={{ marginTop: token.margin }}
-      labelStyle={{ paddingInlineEnd: token.padding, width: 56 }}
+      styles={{
+        label: { paddingInlineEnd: token.padding, width: 56 },
+      }}
      items={
        [
          {
--- a/.dumi/theme/builtins/Previewer/CodeBlockButton.tsx
+++ b/.dumi/theme/builtins/Previewer/CodeBlockButton.tsx
@ -0,0 +1,69 @@
+import React, { Suspense, useEffect, useState } from 'react';
+import { Tooltip } from 'antd';
+import { FormattedMessage } from 'dumi';
+
+import { ping } from '../../utils';
+
+let pingDeferrer: PromiseLike<boolean>;
+
+function useShowCodeBlockButton() {
+  const [showCodeBlockButton, setShowCodeBlockButton] = useState(false);
+
+  useEffect(() => {
+    pingDeferrer ??= new Promise<boolean>((resolve) => {
+      ping((status) => {
+        if (status !== 'timeout' && status !== 'error') {
+          return resolve(true);
+        }
+
+        return resolve(false);
+      });
+    });
+    pingDeferrer.then(setShowCodeBlockButton);
+  }, []);
+
+  return showCodeBlockButton;
+}
+
+interface CodeBlockButtonProps {
+  title?: string;
+  dependencies: Record<PropertyKey, string>;
+  jsx: string;
+}
+
+const CodeBlockButton: React.FC<CodeBlockButtonProps> = ({ title, dependencies = {}, jsx }) => {
+  const showCodeBlockButton = useShowCodeBlockButton();
+
+  const codeBlockPrefillConfig = {
+    title: `${title} - antd@${dependencies.antd}`,
+    js: `${
+      /import React(\D*)from 'react';/.test(jsx) ? '' : `import React from 'react';\n`
+    }import { createRoot } from 'react-dom/client';\n${jsx.replace(
+      /export default/,
+      'const ComponentDemo =',
+    )}\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n`,
+    css: '',
+    json: JSON.stringify({ name: 'antd-demo', dependencies }, null, 2),
+  };
+
+  return showCodeBlockButton ? (
+    <Tooltip title={<FormattedMessage id="app.demo.codeblock" />}>
+      <div className="code-box-code-action">
+        <img
+          alt="codeblock"
+          src="https://mdn.alipayobjects.com/huamei_wtld8u/afts/img/A*K8rjSJpTNQ8AAAAAAAAAAAAADhOIAQ/original"
+          className="code-box-codeblock"
+          onClick={() => {
+            openHituCodeBlock(JSON.stringify(codeBlockPrefillConfig));
+          }}
+        />
+      </div>
+    </Tooltip>
+  ) : null;
+};
+
+export default (props: CodeBlockButtonProps) => (
+  <Suspense>
+    <CodeBlockButton {...props} />
+  </Suspense>
+);
--- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
+++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
@ -8,7 +8,6 @@ import classNames from 'classnames';
 import { FormattedMessage, useLiveDemo, useSiteData } from 'dumi';
 import LZString from 'lz-string';

-import RiddleButton from './RiddleButton';
 import useLocation from '../../../hooks/useLocation';
 import BrowserFrame from '../../common/BrowserFrame';
 import ClientOnly from '../../common/ClientOnly';
@ -20,6 +19,7 @@ import ExternalLinkIcon from '../../icons/ExternalLinkIcon';
 import DemoContext from '../../slots/DemoContext';
 import type { SiteContextProps } from '../../slots/SiteContext';
 import SiteContext from '../../slots/SiteContext';
+import CodeBlockButton from './CodeBlockButton';
 import type { AntdPreviewerProps } from './Previewer';

 const { ErrorBoundary } = Alert;
@ -95,7 +95,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {

  const entryName = 'index.tsx';
  const entryCode = asset.dependencies[entryName].value;
-
+  
  const previewDemo = useRef<React.ReactNode>(null);
  const demoContainer = useRef<HTMLElement>(null);
  const {
@ -253,6 +253,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
      .join(';'),
    js_pre_processor: 'typescript',
  };
+
  // Reorder source code
  let parsedSourceCode = suffix === 'tsx' ? entryCode : jsx;
  let importReactContent = "import React from 'react';";
@ -403,13 +404,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
                <CodeSandboxIcon className="code-box-codesandbox" />
              </Tooltip>
            </form>
-            <RiddleButton
-              title={localizedTitle}
-              dependencies={dependencies}
-              jsx={jsx}
-              track={track}
-              asset={asset}
-            />
+            <CodeBlockButton title={localizedTitle} dependencies={dependencies} jsx={jsx} />
            <Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
              <span
                className="code-box-code-action"
--- a/.dumi/theme/common/styles/Demo.tsx
+++ b/.dumi/theme/common/styles/Demo.tsx
@ -282,12 +282,13 @@ const GlobalDemoStyles: React.FC = () => {
            cursor: pointer;
          }

-          &-riddle {
-            width: 14px;
-            height: 14px;
+           &-codeblock {
+            width: 16px;
+            height: 16px;
            overflow: hidden;
            border: 0;
            cursor: pointer;
+            max-width: 100% !important;
          }

          &-codesandbox {
--- a/.dumi/theme/locales/en-US.json
+++ b/.dumi/theme/locales/en-US.json
@ -35,7 +35,7 @@
  "app.demo.codepen": "Open in CodePen",
  "app.demo.codesandbox": "Open in CodeSandbox",
  "app.demo.stackblitz": "Open in Stackblitz",
-  "app.demo.riddle": "Open in Riddle",
+  "app.demo.codeblock": "Open in Hitu",
  "app.demo.separate": "Open in a new window",
  "app.demo.online": "Online Address",
  "app.home.introduce": "A design system for enterprise-level products. Create an efficient and enjoyable work experience.",
--- a/.dumi/theme/locales/zh-CN.json
+++ b/.dumi/theme/locales/zh-CN.json
@ -35,7 +35,7 @@
  "app.demo.codepen": "在 CodePen 中打开",
  "app.demo.codesandbox": "在 CodeSandbox 中打开",
  "app.demo.stackblitz": "在 Stackblitz 中打开",
-  "app.demo.riddle": "在 Riddle 中打开",
+  "app.demo.codeblock": "在海兔中打开",
  "app.demo.separate": "在新窗口打开",
  "app.demo.online": "线上地址",
  "app.home.introduce": "企业级产品设计体系，创造高效愉悦的工作体验",
--- a/.dumirc.ts
+++ b/.dumirc.ts
@ -7,6 +7,12 @@ import rehypeAntd from './.dumi/rehypeAntd';
 import remarkAntd from './.dumi/remarkAntd';
 import { version } from './package.json';

+const codeBlockJs =
+  'https://renderoffice.a' +
+  'lipay' +
+  'objects.com/p' +
+  '/yuyan/180020010001206410/parseFileData.js';
+
 export default defineConfig({
  plugins: ['dumi-plugin-color-chunk'],

@ -183,6 +189,7 @@ export default defineConfig({
      document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
    })();
    `,
+    codeBlockJs,
  ],
  scripts: [
    {
--- a/.github/workflows/site-deploy.yml
+++ b/.github/workflows/site-deploy.yml
@ -117,7 +117,7 @@ jobs:
          cd ..

      - name: Upload to Release
-        uses: softprops/action-gh-release@7b4da11513bf3f43f9999e90eabced41ab8bb048 # v2.2.0
+        uses: softprops/action-gh-release@01570a1f39cb168c169c802c3bceb9e93fb10974 # v2.1.0
        with:
          fail_on_unmatched_files: true
          files: website.tar.gz
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,57 @@ tag: vVERSION

 ---

+## 5.23.0
+
+`2024-01-06`
+
+- 🔥 TreeSelect support `maxCount` to limit the maximum number of selections. [#51759](https://github.com/ant-design/ant-design/pull/51759) [@aojunhao123](https://github.com/aojunhao123)
+- 🔥 Modal `width` support responsive size. [#51653](https://github.com/ant-design/ant-design/pull/51653) [@zombieJ](https://github.com/zombieJ)
+- 🔥 Splitter support `lazy` mode. [#51557](https://github.com/ant-design/ant-design/pull/51557) [@OysterD3](https://github.com/OysterD3)
+- Button
+  - 🔥 Button `color` support full color palette. [#51550](https://github.com/ant-design/ant-design/pull/51550) [@OysterD3](https://github.com/OysterD3)
+    <img width="520" alt="Button Colors" src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ApyYQpXQQfgAAAAAAAAAAAAADgCCAQ/original">
+  - 🆕 Button support `loading={{ icon: ReactNode }}` to customize loading icon. [#51758](https://github.com/ant-design/ant-design/pull/51758) [@zhangchao-wooc](https://github.com/zhangchao-wooc)
+- Menu
+  - 🐞 Fix Menu `extra` font size and vertical align issue. [#52217](https://github.com/ant-design/ant-design/pull/52217) [@guoyunhe](https://github.com/guoyunhe)
+  - 🆕 Menu add token `subMenuItemSelectedColor` to resolve submenu title color being overrided by `itemSelectedColor`. [#52182](https://github.com/ant-design/ant-design/pull/52182) [@afc163](https://github.com/afc163)
+- 🆕 Semantic Props
+  - 🆕 ConfigProvider support Empty semantic props `classNames` and `styles`. [#52208](https://github.com/ant-design/ant-design/pull/52208) [@thinkasany](https://github.com/thinkasany)
+  - 🆕 ConfigProvider support Popconfirm semantic props `classNames` and `styles`. [#52126](https://github.com/ant-design/ant-design/pull/52126) [@thinkasany](https://github.com/thinkasany)
+  - 🆕 ConfigProvider support Popover semantic props `classNames` and `styles`. [#52110](https://github.com/ant-design/ant-design/pull/52110) [@thinkasany](https://github.com/thinkasany)
+  - 🆕 ConfigProvider support Tooltip semantic props `classNames` and `styles`. [#51872](https://github.com/ant-design/ant-design/pull/51872) [@thinkasany](https://github.com/thinkasany)
+  - 🆕 ConfigProvider support Descriptions semantic props `classNames` and `styles`. [#52120](https://github.com/ant-design/ant-design/pull/52120) [@thinkasany](https://github.com/thinkasany)
+  - 🆕 ConfigProvider support Slider semantic props `classNames` and `styles`. [#52185](https://github.com/ant-design/ant-design/pull/52185) [@thinkasany](https://github.com/thinkasany)
+- 🆕 Transfer support `showSearch` config `defaultValue` & `placeholder`. [#52125](https://github.com/ant-design/ant-design/pull/52125) [@EmilyyyLiu](https://github.com/EmilyyyLiu)
+- 🆕 Calendar now supports `showWeek` prop. [#52072](https://github.com/ant-design/ant-design/pull/52072) [@afc163](https://github.com/afc163)
+- 🆕 Mentions support `onPopupScroll` props. [#51858](https://github.com/ant-design/ant-design/pull/51858) [@OysterD3](https://github.com/OysterD3)
+- 🆕 Card support `bodyPaddingSM`, `headerPaddingSM`, `bodyPadding`, `headerPadding` component token. [#51762](https://github.com/ant-design/ant-design/pull/51762) [@thinkasany](https://github.com/thinkasany)
+- 🆕 ColorPicker `presets` support `key` prop. [#51794](https://github.com/ant-design/ant-design/pull/51794) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 Cascader support `optionSelectedColor` token. [#51769](https://github.com/ant-design/ant-design/pull/51769) [@thinkasany](https://github.com/thinkasany)
+- Tree
+  - 🛠 Refactor Tree part code to Function Component for React 19 perf preparing. [#52209](https://github.com/ant-design/ant-design/pull/52209) [@li-jia-nan](https://github.com/li-jia-nan)
+  - 💄 Optimize Tree `disabled` & `selected` node display style. [#52173](https://github.com/ant-design/ant-design/pull/52173) [@EmilyyyLiu](https://github.com/EmilyyyLiu)
+- 🐞 Fix Slider crash when `tipFormatter` is undefined. [#52184](https://github.com/ant-design/ant-design/pull/52184) [@thinkasany](https://github.com/thinkasany)
+- 🐞 Fix Layout.Sider `trigger` style not correct. [46a8eff](https://github.com/ant-design/ant-design/commit/46a8eff) [@Wxh16144](https://github.com/Wxh16144)
+- Table
+  - 🐞 Fix Table `fixed：right` is not working in `expandable`. [#52176](https://github.com/ant-design/ant-design/pull/52176) [@afc163](https://github.com/afc163)
+  - 🐞 Fix Table sticky scrollbar not working in rtl direction. [#52176](https://github.com/ant-design/ant-design/pull/52176) [@afc163](https://github.com/afc163)
+- 💄 Optimize Flex to always reset `margin` & `padding` for customize component. [#52170](https://github.com/ant-design/ant-design/pull/52170) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🐞 Fix DatePicker.RangePicker `needConfirm` sometime can switch panel without confirm. [#52102](https://github.com/ant-design/ant-design/pull/52102) [@Zyf665](https://github.com/Zyf665)
+- 💄 Optimize Collapse focus styles and items border radius. [#52086](https://github.com/ant-design/ant-design/pull/52086) [@aojunhao123](https://github.com/aojunhao123)
+- ⌨️ Add Radio.Group default `name` prop to improve a11y. [#52076](https://github.com/ant-design/ant-design/pull/52076) [@aojunhao123](https://github.com/aojunhao123)
+- ⌨️ Input.Search add `type=search` by default. [#52083](https://github.com/ant-design/ant-design/pull/52083) [@Kaikiat1126](https://github.com/Kaikiat1126)
+- ⌨️ Improve Tabs focus style for keyboard operation. [#52002](https://github.com/ant-design/ant-design/pull/52002) [@aojunhao123](https://github.com/aojunhao123)
+- Segmented
+  - ⌨️ Optimize Segmented focus style to improve a11y. [#51934](https://github.com/ant-design/ant-design/pull/51934) [@aojunhao123](https://github.com/aojunhao123)
+  - ⌨️ Segmented support `name` prop to improve a11y. [#51725](https://github.com/ant-design/ant-design/pull/51725) [@thinkasany](https://github.com/thinkasany)
+- 📦 MISC: Reduce bundle size by replacing `@ctrl/tinycolor` with `@ant-design/fast-color`. [#52190](https://github.com/ant-design/ant-design/pull/52190) [#52157](https://github.com/ant-design/ant-design/pull/52157) [@aojunhao123](https://github.com/aojunhao123)
+- ⌨️ Adjust Input, InputNumber, Mentions, Textarea clear icon from `span` to `button` to improve a11y. [#52180](https://github.com/ant-design/ant-design/pull/52180) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🐞 MISC: Fix build error when using React 19. [#52168](https://github.com/ant-design/ant-design/pull/52168) [@zombieJ](https://github.com/zombieJ)
+- TypeScript
+  - 🤖 Adjust Table `ref` type to React.Ref. [#52205](https://github.com/ant-design/ant-design/pull/52205) [@li-jia-nan](https://github.com/li-jia-nan)
+  - 🤖 Calendar export CalendarMode type. [#52160](https://github.com/ant-design/ant-design/pull/52160) [@Kaikiat1126](https://github.com/Kaikiat1126)
+
 ## 5.22.7

 `2024-12-27`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,57 @@ tag: vVERSION

 ---

+## 5.23.0
+
+`2024-01-06`
+
+- 🔥 TreeSelect 新增 `maxCount` 属性以限制最大选择数量。[#51759](https://github.com/ant-design/ant-design/pull/51759) [@aojunhao123](https://github.com/aojunhao123)
+- 🔥 Modal `width` 支持响应式尺寸。[#51653](https://github.com/ant-design/ant-design/pull/51653) [@zombieJ](https://github.com/zombieJ)
+- 🔥 Splitter 增加 `lazy` 模式。[#51557](https://github.com/ant-design/ant-design/pull/51557) [@OysterD3](https://github.com/OysterD3)
+- Button
+  - 🔥 Button `color` 属性支持完整色板。[#51550](https://github.com/ant-design/ant-design/pull/51550) [@OysterD3](https://github.com/OysterD3)
+  <img width="520" alt="Button Colors" src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ApyYQpXQQfgAAAAAAAAAAAAADgCCAQ/original">
+  - 🆕 Button 组件新增 `loading={{ icon: ReactNode }}` 以自定义加载图标。[#51758](https://github.com/ant-design/ant-design/pull/51758) [@zhangchao-wooc](https://github.com/zhangchao-wooc)
+- Menu
+  - 🆕 Menu 新增 token `subMenuItemSelectedColor`，避免 `itemSelectedColor` 覆盖子菜单标题样式。[#52182](https://github.com/ant-design/ant-design/pull/52182) [@afc163](https://github.com/afc163)
+  - 🐞 修复 Menu `extra` 字体大小和垂直居中对齐问题。[#52217](https://github.com/ant-design/ant-design/pull/52217) [@guoyunhe](https://github.com/guoyunhe)
+- 🆕 语义化
+  - 🆕 ConfigProvider 支持 Empty 组件语义化 `classNames` 和 `styles`。[#52208](https://github.com/ant-design/ant-design/pull/52208) [@thinkasany](https://github.com/thinkasany)
+  - 🆕 ConfigProvider 支持 Slider 组件语义化 `classNames` 和 `styles`。[#52185](https://github.com/ant-design/ant-design/pull/52185) [@thinkasany](https://github.com/thinkasany)
+  - 🆕 ConfigProvider 支持 Popconfirm 组件语义化 `classNames` 和 `styles`。[#52126](https://github.com/ant-design/ant-design/pull/52126) [@thinkasany](https://github.com/thinkasany)
+  - 🆕 ConfigProvider 支持 Popover 组件语义化 `classNames` 和 `styles`。[#52110](https://github.com/ant-design/ant-design/pull/52110) [@thinkasany](https://github.com/thinkasany)
+  - 🆕 ConfigProvider 支持 Tooltip 组件语义化 `classNames` 和 `styles`。[#51872](https://github.com/ant-design/ant-design/pull/51872) [@thinkasany](https://github.com/thinkasany)
+  - 🆕 ConfigProvider 支持 Descriptions 组件语义化 `classNames` 和 `styles`。[#52120](https://github.com/ant-design/ant-design/pull/52120) [@thinkasany](https://github.com/thinkasany)
+- Tree
+  - 🛠 重构 Tree 部分代码为 Function Component 以为 React 19 做更好性能准备。[#52209](https://github.com/ant-design/ant-design/pull/52209) [@li-jia-nan](https://github.com/li-jia-nan)
+  - 💄 优化 Tree `disabled` 与 `selected` 节点状态下的颜色展示。[#52173](https://github.com/ant-design/ant-design/pull/52173) [@EmilyyyLiu](https://github.com/EmilyyyLiu)
+- 🆕 Transfer 支持 `showSearch` 配置 `defaultValue` 和 `placeholder`。[#52125](https://github.com/ant-design/ant-design/pull/52125) [@EmilyyyLiu](https://github.com/EmilyyyLiu)
+- 🆕 Calendar 支持 `showWeek` 属性用于显示周数列。[#52072](https://github.com/ant-design/ant-design/pull/52072) [@afc163](https://github.com/afc163)
+- 🆕 Mentions 新增 `onPopupScroll` 属性。[#51858](https://github.com/ant-design/ant-design/pull/51858) [@OysterD3](https://github.com/OysterD3)
+- 🆕 Card 增加 `bodyPaddingSM`、`headerPaddingSM`、`bodyPadding`、`headerPadding` 组件 token。[#51762](https://github.com/ant-design/ant-design/pull/51762) [@thinkasany](https://github.com/thinkasany)
+- 🆕 ColorPicker `presets` 支持传入 `key`。[#51794](https://github.com/ant-design/ant-design/pull/51794) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 Cascader 新增 `optionSelectedColor` token。[#51769](https://github.com/ant-design/ant-design/pull/51769) [@thinkasany](https://github.com/thinkasany)
+- 🐞 修复 Layout.Sider `trigger` 样式不正确的问题。[46a8eff](https://github.com/ant-design/ant-design/commit/46a8eff) [@Wxh16144](https://github.com/Wxh16144)
+- Table
+  - 🐞 修复 Table `expandable` 中设置 `fixed：right` 不生效的问题。[#52176](https://github.com/ant-design/ant-design/pull/52176) [@afc163](https://github.com/afc163)
+  - 🐞 修复 Table `sticky` 模式下水平固定滚动条在 rtl 模式下不生效的问题。[#52176](https://github.com/ant-design/ant-design/pull/52176) [@afc163](https://github.com/afc163)
+- 💄 优化 Flex 使其在自定义渲染组件时总是重置 `margin`、`padding` 样式。[#52170](https://github.com/ant-design/ant-design/pull/52170) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🐞 修复 DatePicker.RangePicker `needConfirm` 模式偶尔在不确认仍然可以切换面板的问题。[#52102](https://github.com/ant-design/ant-design/pull/52102) [@Zyf665](https://github.com/Zyf665)
+- 🐞 修复 Slider 当 `tipFormatter` 未定义时导致崩溃的问题。[#52184](https://github.com/ant-design/ant-design/pull/52184) [@thinkasany](https://github.com/thinkasany)
+- 💄 优化 Collapse 聚焦样式以及折叠项圆角。[#52086](https://github.com/ant-design/ant-design/pull/52086) [@aojunhao123](https://github.com/aojunhao123)
+- ⌨️ 为 Radio.Group 添加默认 `name` 属性以提升无障碍体验。[#52076](https://github.com/ant-design/ant-design/pull/52076) [@aojunhao123](https://github.com/aojunhao123)
+- ⌨️ Input.Search 添加默认 `type=search` 类型。[#52083](https://github.com/ant-design/ant-design/pull/52083) [@Kaikiat1126](https://github.com/Kaikiat1126)
+- ⌨️ 优化 Tabs 键盘操作时的焦点样式。[#52002](https://github.com/ant-design/ant-design/pull/52002) [@aojunhao123](https://github.com/aojunhao123)
+- Segmented
+  - ⌨️ 优化 Segmented 聚焦样式以提升无障碍体验。[#51934](https://github.com/ant-design/ant-design/pull/51934) [@aojunhao123](https://github.com/aojunhao123)
+  - ⌨️ Segmented 支持 `name` 属性以提升无障碍体验。[#51725](https://github.com/ant-design/ant-design/pull/51725) [@thinkasany](https://github.com/thinkasany)
+- 📦 MISC: 用 `@ant-design/fast-color` 替换 `@ctrl/tinycolor` 以降低打包体积。[#52190](https://github.com/ant-design/ant-design/pull/52190) [#52157](https://github.com/ant-design/ant-design/pull/52157) [@aojunhao123](https://github.com/aojunhao123)
+- ⌨️ 调整 Input、InputNumber、Mentions、Textarea 组件清除图标从 `span` 元素更改为 `button` 元素，提高了可访问性和交互性。[#52180](https://github.com/ant-design/ant-design/pull/52180) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🐞 MISC: 修复 React 19 下构建报错的问题。[#52168](https://github.com/ant-design/ant-design/pull/52168) [@zombieJ](https://github.com/zombieJ)
+- TypeScript
+  - 🤖 调整 Table `ref` 类型为 React.Ref。[#52205](https://github.com/ant-design/ant-design/pull/52205) [@li-jia-nan](https://github.com/li-jia-nan)
+  - 🤖 Calendar 导出 CalendarMode 类型。[#52160](https://github.com/ant-design/ant-design/pull/52160) [@Kaikiat1126](https://github.com/Kaikiat1126)
+
 ## 5.22.7

 `2024-12-27`
@ -110,7 +161,7 @@ tag: vVERSION

 - Form
  - 🆕 Form.Item 支持隐藏 label。[#51524](https://github.com/ant-design/ant-design/pull/51524) [@crazyair](https://github.com/crazyair)
-  - 🐞 Form  移除了用于撑开 error 高度的 div，将 errorDom 和 extraDom 用一个 div 包裹，并为该 div 设置了最小高度。[#51254](https://github.com/ant-design/ant-design/pull/51254) [@hongzzz](https://github.com/hongzzz)
+  - 🐞 Form 移除了用于撑开 error 高度的 div，将 errorDom 和 extraDom 用一个 div 包裹，并为该 div 设置了最小高度。[#51254](https://github.com/ant-design/ant-design/pull/51254) [@hongzzz](https://github.com/hongzzz)
  - 🐞 修复 Form 在字段触发 change 但是值没有变化时，`onValuesChange` 仍然会触发的问题。[#51437](https://github.com/ant-design/ant-design/pull/51437) [@crazyair](https://github.com/crazyair)
  - 🆕 Form 支持在表单验证失败时，scrollToFirstError 中的 focus 属性。[#51231](https://github.com/ant-design/ant-design/pull/51231) [@nathanlao](https://github.com/nathanlao)
 - Table
@ -184,6 +235,7 @@ tag: vVERSION
 - 💄 修改 Button `textHoverBg` 在悬浮状态下的背景色为 `colorFillTertiary`。[#51187](https://github.com/ant-design/ant-design/pull/51187) [@coding-ice](https://github.com/coding-ice)
 - TypeScript
  - 🤖 优化 Switch `eventHandler` 类型。[#51165](https://github.com/ant-design/ant-design/pull/51165) [@thinkasany](https://github.com/thinkasany)
+
 ## 5.21.3

 `2024-10-09`
@ -232,17 +284,17 @@ tag: vVERSION
  <img width="520" alt="Splitter" src="https://github.com/user-attachments/assets/25fc4e3c-1aa5-41bb-8f39-f34f7149e0f6">
 - Button
  - 🔥 Button 支持 `variant` 变体和 `color` 颜色属性，以支持更多组合样式。[#50051](https://github.com/ant-design/ant-design/pull/50051) [@coding-ice](https://github.com/coding-ice)
-    <img width="420" alt="Button" src="https://github.com/user-attachments/assets/cd5cb7fb-25e8-445f-b217-7fdd4ae0f9b4">
+  <img width="420" alt="Button" src="https://github.com/user-attachments/assets/cd5cb7fb-25e8-445f-b217-7fdd4ae0f9b4">
  - 💄 Button 添加 `textColor`、`textHoverColor` 和 `textActiveColor` 三个 token。[#47870](https://github.com/ant-design/ant-design/pull/47870) [@madocto](https://github.com/madocto)
 - FloatButton
  - 🆕 FloatButton 组件支持 `placement` 属性，支持从四个方向弹出菜单。（实现方式改为 `position: absolute` + flex 布局，可能会对你现有的布局造成 breaking change，请注意兼容）[#50407](https://github.com/ant-design/ant-design/pull/50407) [@li-jia-nan](https://github.com/li-jia-nan)
-    <img width="300" alt="float button" src="https://github.com/user-attachments/assets/4b53c0f6-7bdd-4e2a-91cc-2fb804f6e6d3" />
+  <img width="300" alt="float button" src="https://github.com/user-attachments/assets/4b53c0f6-7bdd-4e2a-91cc-2fb804f6e6d3" />
  - 💄 统一 FloatButton 和 FloatButton.Group 的按钮圆角。[#50513](https://github.com/ant-design/ant-design/pull/50513) [@Layouwen](https://github.com/Layouwen)
  - 💄 FloatButton 组件的 `z-index` 加入 `useZIndex` 管理，兼容弹层类组件。[#50311](https://github.com/ant-design/ant-design/pull/50311) [@li-jia-nan](https://github.com/li-jia-nan)
  - 🆕 FloatButton 支持传入 `htmlType` 属性。[#50892](https://github.com/ant-design/ant-design/pull/50892) [@li-jia-nan](https://github.com/li-jia-nan)
 - Menu
  - 🆕 Menu.Item 和 Dropdown 的 menu 支持 `extra` 属性。[#50431](https://github.com/ant-design/ant-design/pull/50431) [@coding-ice](https://github.com/coding-ice)
-    <img width="259" alt="menu extra" src="https://github.com/user-attachments/assets/fee57c43-b948-4f98-8a6b-0d94094a8a65">
+  <img width="259" alt="menu extra" src="https://github.com/user-attachments/assets/fee57c43-b948-4f98-8a6b-0d94094a8a65">
  - 🐞 修复 Menu `popupStyle` 在 SubMenu 上失效的问题。[#50922](https://github.com/ant-design/ant-design/pull/50922) [@Wxh16144](https://github.com/Wxh16144)
 - Table
  - 🆕 Table 列支持配置 `minWidth` 属性。[#50416](https://github.com/ant-design/ant-design/pull/50416) [@linxianxi](https://github.com/linxianxi)
--- a/components/config-provider/tests/snapshots/components.test.tsx.snap
+++ b/components/config-provider/tests/snapshots/components.test.tsx.snap
@ -41520,7 +41520,7 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
          >
            <div
              aria-expanded="false"
-              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
+              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -41586,7 +41586,7 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
          >
            <div
              aria-expanded="false"
-              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
+              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -41680,7 +41680,7 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
          >
            <div
              aria-expanded="false"
-              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
+              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -41746,7 +41746,7 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
          >
            <div
              aria-expanded="false"
-              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
+              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -41840,7 +41840,7 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
          >
            <div
              aria-expanded="false"
-              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
+              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -41906,7 +41906,7 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
          >
            <div
              aria-expanded="false"
-              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
+              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -42000,7 +42000,7 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
          >
            <div
              aria-expanded="false"
-              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
+              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -42066,7 +42066,7 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
          >
            <div
              aria-expanded="false"
-              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
+              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -42160,7 +42160,7 @@ exports[`ConfigProvider components Tree configProvider componentSize small 1`] =
          >
            <div
              aria-expanded="false"
-              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
+              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -42226,7 +42226,7 @@ exports[`ConfigProvider components Tree configProvider componentSize small 1`] =
          >
            <div
              aria-expanded="false"
-              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
+              class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -42320,7 +42320,7 @@ exports[`ConfigProvider components Tree normal 1`] = `
          >
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -42386,7 +42386,7 @@ exports[`ConfigProvider components Tree normal 1`] = `
          >
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -42480,7 +42480,7 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
          >
            <div
              aria-expanded="false"
-              class="prefix-Tree-treenode prefix-Tree-treenode-switcher-close prefix-Tree-treenode-leaf-last"
+              class="prefix-Tree-treenode prefix-Tree-treenode-switcher-close prefix-Tree-treenode-leaf-last prefix-Tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -42546,7 +42546,7 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
          >
            <div
              aria-expanded="false"
-              class="prefix-Tree-treenode prefix-Tree-treenode-switcher-close prefix-Tree-treenode-leaf-last"
+              class="prefix-Tree-treenode prefix-Tree-treenode-switcher-close prefix-Tree-treenode-leaf-last prefix-Tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -42686,7 +42686,7 @@ exports[`ConfigProvider components TreeSelect configProvider 1`] = `
                >
                  <div
                    aria-expanded="false"
-                    class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
+                    class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last config-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -42897,7 +42897,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize large
                >
                  <div
                    aria-expanded="false"
-                    class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
+                    class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last config-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -43043,7 +43043,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize middl
                >
                  <div
                    aria-expanded="false"
-                    class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
+                    class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last config-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -43189,7 +43189,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize small
                >
                  <div
                    aria-expanded="false"
-                    class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
+                    class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last config-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -43335,7 +43335,7 @@ exports[`ConfigProvider components TreeSelect normal 1`] = `
                >
                  <div
                    aria-expanded="false"
-                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-active ant-select-tree-treenode-leaf-last"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-active ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -43481,7 +43481,7 @@ exports[`ConfigProvider components TreeSelect prefixCls 1`] = `
                >
                  <div
                    aria-expanded="false"
-                    class="prefix-TreeSelect-tree-treenode prefix-TreeSelect-tree-treenode-switcher-close prefix-TreeSelect-tree-treenode-active prefix-TreeSelect-tree-treenode-leaf-last"
+                    class="prefix-TreeSelect-tree-treenode prefix-TreeSelect-tree-treenode-switcher-close prefix-TreeSelect-tree-treenode-active prefix-TreeSelect-tree-treenode-leaf-last prefix-TreeSelect-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
--- a/components/descriptions/tests/index.test.tsx
+++ b/components/descriptions/tests/index.test.tsx
@ -311,7 +311,10 @@ describe('Descriptions', () => {
  it('number 0 should render correct', () => {
    const wrapper = render(
      <Descriptions>
-        <Descriptions.Item label={0} labelStyle={{ color: 'red' }} contentStyle={{ color: 'red' }}>
+        <Descriptions.Item
+          label={0}
+          styles={{ label: { color: 'red' }, content: { color: 'red' } }}
+        >
          {0}
        </Descriptions.Item>
      </Descriptions>,
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@ -69,7 +69,7 @@ v5 uses `rootClassName` & `rootStyle` to configure the outermost element style,
 | placement | The placement of the Drawer | `top` \| `right` \| `bottom` \| `left` | `right` |  |
 | push | Nested drawers push behavior | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
 | rootStyle | Style of wrapper element which **contains mask** compare to `style` | CSSProperties | - |  |
-| style | Style of Drawer panel. Use `bodyStyle` if want to config body only | CSSProperties | - |  |
+| style | Style of Drawer panel. Use `styles.body` if want to config body only | CSSProperties | - |  |
 | styles | Semantic structure style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.10.0 |
 | size | preset size of drawer, default `378px` and large `736px` | 'default' \| 'large' | 'default' | 4.17.0 |
 | title | The title for Drawer | ReactNode | - |  |
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@ -69,7 +69,7 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
 | push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
 | rootStyle | 可用于设置 Drawer 最外层容器的样式，和 `style` 的区别是作用节点包括 `mask` | CSSProperties | - |  |
 | size | 预设抽屉宽度（或高度），default `378px` 和 large `736px` | 'default' \| 'large' | 'default' | 4.17.0 |
-| style | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用 `bodyStyle` | CSSProperties | - |  |
+| style | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用 `styles.body` | CSSProperties | - |  |
 | styles | 语义化结构 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.10.0 |
 | title | 标题 | ReactNode | - |  |
 | loading | 显示骨架屏 | boolean | false | 5.17.0 |
--- a/components/form/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/form/tests/snapshots/demo-extend.test.ts.snap
@ -28392,7 +28392,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
                            >
                              <div
                                aria-expanded="false"
-                                class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                                class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                                draggable="false"
                                role="treeitem"
                              >
--- a/components/select/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/select/tests/snapshots/demo-extend.test.ts.snap
@ -8589,7 +8589,7 @@ Array [
                        </div>
                        <div
                          aria-expanded="false"
-                          class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
+                          class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
                          draggable="false"
                          role="treeitem"
                        >
@ -8621,7 +8621,7 @@ Array [
                        </div>
                        <div
                          aria-expanded="false"
-                          class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
+                          class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
                          draggable="false"
                          role="treeitem"
                        >
@ -8653,7 +8653,7 @@ Array [
                        </div>
                        <div
                          aria-expanded="false"
-                          class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                          class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                          draggable="false"
                          role="treeitem"
                        >
--- a/components/space/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/space/tests/snapshots/demo-extend.test.ts.snap
@ -8581,7 +8581,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
                        </div>
                        <div
                          aria-expanded="false"
-                          class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-selected"
+                          class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-selected ant-select-tree-treenode-leaf"
                          draggable="false"
                          role="treeitem"
                        >
@ -8612,7 +8612,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
                        </div>
                        <div
                          aria-expanded="false"
-                          class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                          class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                          draggable="false"
                          role="treeitem"
                        >
@ -8691,7 +8691,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
                        </div>
                        <div
                          aria-expanded="false"
-                          class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                          class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                          draggable="false"
                          role="treeitem"
                        >
--- a/components/splitter/tests/index.test.tsx
+++ b/components/splitter/tests/index.test.tsx
@ -475,7 +475,7 @@ describe('Splitter', () => {
      expectClick(container.querySelector('.ant-splitter-bar-collapse-start')!, [50, 50]);
    });

-    it('collapsible with min', async () => {
+    it('collapsible with cache', async () => {
      const onResize = jest.fn();
      const onResizeEnd = jest.fn();

@ -509,8 +509,55 @@ describe('Splitter', () => {
      onResize.mockReset();
      onResizeEnd.mockReset();
      fireEvent.click(container.querySelector('.ant-splitter-bar-collapse-end')!);
-      expect(onResize).toHaveBeenCalledWith([5, 95]);
-      expect(onResizeEnd).toHaveBeenCalledWith([5, 95]);
+      expect(onResize).toHaveBeenCalledWith([20, 80]);
+      expect(onResizeEnd).toHaveBeenCalledWith([20, 80]);
+      expect(container.querySelector('.ant-splitter-bar-dragger-disabled')).toBeFalsy();
+
+      // Collapse right
+      onResize.mockReset();
+      onResizeEnd.mockReset();
+      fireEvent.click(container.querySelector('.ant-splitter-bar-collapse-end')!);
+      expect(onResize).toHaveBeenCalledWith([100, 0]);
+      expect(onResizeEnd).toHaveBeenCalledWith([100, 0]);
+      expect(container.querySelector('.ant-splitter-bar-dragger-disabled')).toBeTruthy();
+    });
+
+    it('collapsible with fallback', async () => {
+      const onResize = jest.fn();
+      const onResizeEnd = jest.fn();
+
+      const { container } = render(
+        <SplitterDemo
+          items={[
+            {
+              defaultSize: 10,
+              collapsible: true,
+              min: 15,
+            },
+            {
+              collapsible: true,
+              min: '80%',
+            },
+          ]}
+          onResize={onResize}
+          onResizeEnd={onResizeEnd}
+        />,
+      );
+
+      await resizeSplitter();
+
+      // Collapse left
+      fireEvent.click(container.querySelector('.ant-splitter-bar-collapse-start')!);
+      expect(onResize).toHaveBeenCalledWith([0, 100]);
+      expect(onResizeEnd).toHaveBeenCalledWith([0, 100]);
+      expect(container.querySelector('.ant-splitter-bar-dragger-disabled')).toBeTruthy();
+
+      // Collapse back
+      onResize.mockReset();
+      onResizeEnd.mockReset();
+      fireEvent.click(container.querySelector('.ant-splitter-bar-collapse-end')!);
+      expect(onResize).toHaveBeenCalledWith([2.5, 97.5]);
+      expect(onResizeEnd).toHaveBeenCalledWith([2.5, 97.5]);
      expect(container.querySelector('.ant-splitter-bar-dragger-disabled')).toBeFalsy();

      // Collapse right
--- a/components/splitter/hooks/useResize.ts
+++ b/components/splitter/hooks/useResize.ts
@ -29,6 +29,7 @@ export default function useResize(

  // Real px sizes
  const [cacheSizes, setCacheSizes] = React.useState<number[]>([]);
+  const cacheCollapsedSize = React.useRef<number[]>([]);

  /**
   * When start drag, check the direct is `start` or `end`.
@ -129,6 +130,7 @@ export default function useResize(
      // Collapse directly
      currentSizes[currentIndex] = 0;
      currentSizes[targetIndex] += currentSize;
+      cacheCollapsedSize.current[index] = currentSize;
    } else {
      const totalSize = currentSize + targetSize;

@ -141,8 +143,23 @@ export default function useResize(
      const limitEnd = Math.min(currentSizeMax, totalSize - targetSizeMin);
      const halfOffset = (limitEnd - limitStart) / 2;

-      currentSizes[currentIndex] -= halfOffset;
-      currentSizes[targetIndex] += halfOffset;
+      const targetCacheCollapsedSize = cacheCollapsedSize.current[index];
+      const currentCacheCollapsedSize = totalSize - targetCacheCollapsedSize;
+
+      const shouldUseCache = 
+        targetCacheCollapsedSize &&
+        targetCacheCollapsedSize <= targetSizeMax &&
+        targetCacheCollapsedSize >= targetSizeMin &&
+        currentCacheCollapsedSize <= currentSizeMax &&
+        currentCacheCollapsedSize >= currentSizeMin;
+
+      if (shouldUseCache) {
+        currentSizes[targetIndex] = targetCacheCollapsedSize;
+        currentSizes[currentIndex] = currentCacheCollapsedSize;
+      } else {
+        currentSizes[currentIndex] -= halfOffset;
+        currentSizes[targetIndex] += halfOffset;
+      }
    }

    updateSizes(currentSizes);
--- a/components/table/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/table/tests/snapshots/demo-extend.test.ts.snap
@ -10360,7 +10360,7 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                    >
                                      <div
                                        aria-expanded="false"
-                                        class="ant-tree-treenode ant-tree-treenode-switcher-close"
+                                        class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
                                        draggable="false"
                                        role="treeitem"
                                      >
@ -10448,7 +10448,7 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                      </div>
                                      <div
                                        aria-expanded="false"
-                                        class="ant-tree-treenode ant-tree-treenode-switcher-close"
+                                        class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
                                        draggable="false"
                                        role="treeitem"
                                      >
@ -10486,7 +10486,7 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                      </div>
                                      <div
                                        aria-expanded="false"
-                                        class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+                                        class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
                                        draggable="false"
                                        role="treeitem"
                                      >
@ -10578,7 +10578,7 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                      </div>
                                      <div
                                        aria-expanded="false"
-                                        class="ant-tree-treenode ant-tree-treenode-switcher-close"
+                                        class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
                                        draggable="false"
                                        role="treeitem"
                                      >
@ -10616,7 +10616,7 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                      </div>
                                      <div
                                        aria-expanded="false"
-                                        class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+                                        class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
                                        draggable="false"
                                        role="treeitem"
                                      >
@ -11328,7 +11328,7 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl
                                    >
                                      <div
                                        aria-expanded="false"
-                                        class="ant-tree-treenode ant-tree-treenode-switcher-close"
+                                        class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
                                        draggable="false"
                                        role="treeitem"
                                      >
@ -11362,7 +11362,7 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl
                                      </div>
                                      <div
                                        aria-expanded="false"
-                                        class="ant-tree-treenode ant-tree-treenode-switcher-close"
+                                        class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
                                        draggable="false"
                                        role="treeitem"
                                      >
@ -11396,7 +11396,7 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl
                                      </div>
                                      <div
                                        aria-expanded="false"
-                                        class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+                                        class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
                                        draggable="false"
                                        role="treeitem"
                                      >
--- a/components/transfer/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/transfer/tests/snapshots/demo-extend.test.ts.snap
@ -11839,7 +11839,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                  >
                    <div
                      aria-expanded="false"
-                      class="ant-tree-treenode ant-tree-treenode-switcher-close"
+                      class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -11927,7 +11927,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-tree-treenode ant-tree-treenode-switcher-close"
+                      class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -11965,7 +11965,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+                      class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -12003,7 +12003,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-tree-treenode ant-tree-treenode-switcher-close"
+                      class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -12037,7 +12037,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-tree-treenode ant-tree-treenode-switcher-close"
+                      class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -12071,7 +12071,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+                      class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
--- a/components/transfer/tests/snapshots/demo.test.ts.snap
+++ b/components/transfer/tests/snapshots/demo.test.ts.snap
@ -7885,7 +7885,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                  >
                    <div
                      aria-expanded="false"
-                      class="ant-tree-treenode ant-tree-treenode-switcher-close"
+                      class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -7973,7 +7973,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-tree-treenode ant-tree-treenode-switcher-close"
+                      class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -8011,7 +8011,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+                      class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -8049,7 +8049,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-tree-treenode ant-tree-treenode-switcher-close"
+                      class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -8083,7 +8083,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-tree-treenode ant-tree-treenode-switcher-close"
+                      class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -8117,7 +8117,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+                      class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
--- a/components/tree-select/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/tree-select/tests/snapshots/demo-extend.test.ts.snap
@ -171,7 +171,7 @@ exports[`renders components/tree-select/demo/async.tsx extend context correctly
                    </span>
                  </div>
                  <div
-                    class="ant-select-tree-treenode ant-select-tree-treenode-leaf-last"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -405,7 +405,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                  </div>
                  <div
                    aria-expanded="false"
-                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -436,7 +436,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                  </div>
                  <div
                    aria-expanded="false"
-                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -467,7 +467,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                  </div>
                  <div
                    aria-expanded="false"
-                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -498,7 +498,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                  </div>
                  <div
                    aria-expanded="false"
-                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -529,7 +529,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                  </div>
                  <div
                    aria-expanded="false"
-                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -560,7 +560,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                  </div>
                  <div
                    aria-expanded="false"
-                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -639,7 +639,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                  </div>
                  <div
                    aria-expanded="false"
-                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -1714,7 +1714,7 @@ exports[`renders components/tree-select/demo/multiple.tsx extend context correct
                  </div>
                  <div
                    aria-expanded="false"
-                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -1745,7 +1745,7 @@ exports[`renders components/tree-select/demo/multiple.tsx extend context correct
                  </div>
                  <div
                    aria-expanded="false"
-                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -1824,7 +1824,7 @@ exports[`renders components/tree-select/demo/multiple.tsx extend context correct
                  </div>
                  <div
                    aria-expanded="false"
-                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -2156,7 +2156,7 @@ Array [
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
+                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -2187,7 +2187,7 @@ Array [
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -2266,7 +2266,7 @@ Array [
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -2471,7 +2471,7 @@ exports[`renders components/tree-select/demo/render-panel.tsx extend context cor
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -2988,7 +2988,7 @@ Array [
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
+                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -3019,7 +3019,7 @@ Array [
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -3098,7 +3098,7 @@ Array [
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -3345,7 +3345,7 @@ Array [
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
+                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -3376,7 +3376,7 @@ Array [
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -3455,7 +3455,7 @@ Array [
                    </div>
                    <div
                      aria-expanded="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                      draggable="false"
                      role="treeitem"
                    >
@ -3656,7 +3656,7 @@ exports[`renders components/tree-select/demo/treeData.tsx extend context correct
                  </div>
                  <div
                    aria-expanded="false"
-                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -3684,7 +3684,7 @@ exports[`renders components/tree-select/demo/treeData.tsx extend context correct
                  </div>
                  <div
                    aria-expanded="false"
-                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
@ -3712,7 +3712,7 @@ exports[`renders components/tree-select/demo/treeData.tsx extend context correct
                  </div>
                  <div
                    aria-expanded="false"
-                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
                    draggable="false"
                    role="treeitem"
                  >
--- a/components/tree/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/tree/tests/snapshots/demo-extend.test.ts.snap
@ -153,7 +153,7 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -195,7 +195,7 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -294,7 +294,7 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -498,7 +498,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -539,7 +539,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -580,7 +580,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -679,7 +679,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -720,7 +720,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -761,7 +761,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -802,7 +802,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -894,7 +894,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1029,7 +1029,7 @@ exports[`renders components/tree/demo/block-node.tsx extend context correctly 1`
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1068,7 +1068,7 @@ exports[`renders components/tree/demo/block-node.tsx extend context correctly 1`
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1221,7 +1221,7 @@ exports[`renders components/tree/demo/customized-icon.tsx extend context correct
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1272,7 +1272,7 @@ exports[`renders components/tree/demo/customized-icon.tsx extend context correct
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1459,7 +1459,7 @@ exports[`renders components/tree/demo/directory.tsx extend context correctly 1`]
            </span>
          </div>
          <div
-            class="ant-tree-treenode ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -1532,7 +1532,7 @@ exports[`renders components/tree/demo/directory.tsx extend context correctly 1`]
            </span>
          </div>
          <div
-            class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -1695,7 +1695,7 @@ exports[`renders components/tree/demo/directory.tsx extend context correctly 1`]
            </span>
          </div>
          <div
-            class="ant-tree-treenode ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -1768,7 +1768,7 @@ exports[`renders components/tree/demo/directory.tsx extend context correctly 1`]
            </span>
          </div>
          <div
-            class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -2151,7 +2151,7 @@ Array [
            </div>
            <div
              aria-expanded="true"
-              class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
+              class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable ant-tree-treenode-leaf"
              draggable="true"
              role="treeitem"
            >
@ -2232,7 +2232,7 @@ Array [
            </div>
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable ant-tree-treenode-leaf"
              draggable="true"
              role="treeitem"
            >
@ -2313,7 +2313,7 @@ Array [
            </div>
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
              draggable="true"
              role="treeitem"
            >
@ -2491,7 +2491,7 @@ Array [
            </div>
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
              draggable="true"
              role="treeitem"
            >
@ -2662,7 +2662,7 @@ Array [
            </div>
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
              draggable="true"
              role="treeitem"
            >
@ -2922,7 +2922,7 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -2976,7 +2976,7 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -3030,7 +3030,7 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -3155,7 +3155,7 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -3273,7 +3273,7 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -3454,7 +3454,7 @@ exports[`renders components/tree/demo/dynamic.tsx extend context correctly 1`] =
            </span>
          </div>
          <div
-            class="ant-tree-treenode ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -3836,7 +3836,7 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
            </div>
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -3887,7 +3887,7 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
            </div>
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -3943,7 +3943,7 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
            </div>
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -4304,7 +4304,7 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -4346,7 +4346,7 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -4445,7 +4445,7 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -4683,7 +4683,7 @@ exports[`renders components/tree/demo/search.tsx extend context correctly 1`] =
            </div>
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -4852,7 +4852,7 @@ exports[`renders components/tree/demo/switcher-icon.tsx extend context correctly
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -4887,7 +4887,7 @@ exports[`renders components/tree/demo/switcher-icon.tsx extend context correctly
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -4922,7 +4922,7 @@ exports[`renders components/tree/demo/switcher-icon.tsx extend context correctly
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
--- a/components/tree/tests/snapshots/demo.test.ts.snap
+++ b/components/tree/tests/snapshots/demo.test.ts.snap
@ -153,7 +153,7 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -195,7 +195,7 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -294,7 +294,7 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -496,7 +496,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -537,7 +537,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -578,7 +578,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -677,7 +677,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -718,7 +718,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -759,7 +759,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -800,7 +800,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -892,7 +892,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1025,7 +1025,7 @@ exports[`renders components/tree/demo/block-node.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1064,7 +1064,7 @@ exports[`renders components/tree/demo/block-node.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1215,7 +1215,7 @@ exports[`renders components/tree/demo/customized-icon.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1266,7 +1266,7 @@ exports[`renders components/tree/demo/customized-icon.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1451,7 +1451,7 @@ exports[`renders components/tree/demo/directory.tsx correctly 1`] = `
            </span>
          </div>
          <div
-            class="ant-tree-treenode ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -1524,7 +1524,7 @@ exports[`renders components/tree/demo/directory.tsx correctly 1`] = `
            </span>
          </div>
          <div
-            class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -1687,7 +1687,7 @@ exports[`renders components/tree/demo/directory.tsx correctly 1`] = `
            </span>
          </div>
          <div
-            class="ant-tree-treenode ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -1760,7 +1760,7 @@ exports[`renders components/tree/demo/directory.tsx correctly 1`] = `
            </span>
          </div>
          <div
-            class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -2141,7 +2141,7 @@ Array [
            </div>
            <div
              aria-expanded="true"
-              class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
+              class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable ant-tree-treenode-leaf"
              draggable="true"
              role="treeitem"
            >
@ -2222,7 +2222,7 @@ Array [
            </div>
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable ant-tree-treenode-leaf"
              draggable="true"
              role="treeitem"
            >
@ -2303,7 +2303,7 @@ Array [
            </div>
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
              draggable="true"
              role="treeitem"
            >
@ -2481,7 +2481,7 @@ Array [
            </div>
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
              draggable="true"
              role="treeitem"
            >
@ -2652,7 +2652,7 @@ Array [
            </div>
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
              draggable="true"
              role="treeitem"
            >
@ -2910,7 +2910,7 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -2964,7 +2964,7 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -3018,7 +3018,7 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -3143,7 +3143,7 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -3261,7 +3261,7 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
            draggable="true"
            role="treeitem"
          >
@ -3440,7 +3440,7 @@ exports[`renders components/tree/demo/dynamic.tsx correctly 1`] = `
            </span>
          </div>
          <div
-            class="ant-tree-treenode ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -3723,7 +3723,7 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
            </div>
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -3774,7 +3774,7 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
            </div>
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -3830,7 +3830,7 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
            </div>
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -4189,7 +4189,7 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -4231,7 +4231,7 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -4330,7 +4330,7 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -4566,7 +4566,7 @@ exports[`renders components/tree/demo/search.tsx correctly 1`] = `
            </div>
            <div
              aria-expanded="false"
-              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
              draggable="false"
              role="treeitem"
            >
@ -4733,7 +4733,7 @@ exports[`renders components/tree/demo/switcher-icon.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -4768,7 +4768,7 @@ exports[`renders components/tree/demo/switcher-icon.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -4803,7 +4803,7 @@ exports[`renders components/tree/demo/switcher-icon.tsx correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
--- a/components/tree/tests/snapshots/directory.test.tsx.snap
+++ b/components/tree/tests/snapshots/directory.test.tsx.snap
@ -177,7 +177,7 @@ exports[`Directory Tree DirectoryTree should expend all when use treeData and de
            </span>
          </div>
          <div
-            class="ant-tree-treenode ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -343,7 +343,7 @@ exports[`Directory Tree defaultExpandAll 1`] = `
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -394,7 +394,7 @@ exports[`Directory Tree defaultExpandAll 1`] = `
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -512,7 +512,7 @@ exports[`Directory Tree defaultExpandAll 1`] = `
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -563,7 +563,7 @@ exports[`Directory Tree defaultExpandAll 1`] = `
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -905,7 +905,7 @@ exports[`Directory Tree expand with state control click 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1068,7 +1068,7 @@ exports[`Directory Tree expand with state control doubleClick 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1298,7 +1298,7 @@ exports[`Directory Tree expandedKeys update 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1349,7 +1349,7 @@ exports[`Directory Tree expandedKeys update 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1512,7 +1512,7 @@ exports[`Directory Tree group select 1`] = `
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1563,7 +1563,7 @@ exports[`Directory Tree group select 1`] = `
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1681,7 +1681,7 @@ exports[`Directory Tree group select 1`] = `
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1732,7 +1732,7 @@ exports[`Directory Tree group select 1`] = `
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1895,7 +1895,7 @@ exports[`Directory Tree group select 2`] = `
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -1946,7 +1946,7 @@ exports[`Directory Tree group select 2`] = `
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -2064,7 +2064,7 @@ exports[`Directory Tree group select 2`] = `
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -2115,7 +2115,7 @@ exports[`Directory Tree group select 2`] = `
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -2366,7 +2366,7 @@ exports[`Directory Tree selectedKeys update 1`] = `
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -2417,7 +2417,7 @@ exports[`Directory Tree selectedKeys update 1`] = `
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -2535,7 +2535,7 @@ exports[`Directory Tree selectedKeys update 1`] = `
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -2586,7 +2586,7 @@ exports[`Directory Tree selectedKeys update 1`] = `
          </div>
          <div
            aria-expanded="true"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
--- a/components/tree/tests/snapshots/index.test.tsx.snap
+++ b/components/tree/tests/snapshots/index.test.tsx.snap
@ -293,7 +293,7 @@ exports[`Tree showLine is object type should render correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -328,7 +328,7 @@ exports[`Tree showLine is object type should render correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -363,7 +363,7 @@ exports[`Tree showLine is object type should render correctly 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -712,7 +712,7 @@ exports[`Tree switcherIcon in Tree could be string 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
@ -740,7 +740,7 @@ exports[`Tree switcherIcon in Tree could be string 1`] = `
          </div>
          <div
            aria-expanded="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
            draggable="false"
            role="treeitem"
          >
--- a/docs/blog/visual-regression.en-US.md
+++ b/docs/blog/visual-regression.en-US.md
@ -0,0 +1,49 @@
+---
+title: 👀 Visual Regression Testing
+date: 2025-01-05
+author: Wxh16144
+---
+
+Visual Regression Testing is a software testing technique that focuses on detecting visual changes and differences in the user interface of web applications or websites. It involves capturing screenshots of web pages at different stages of development and comparing them to identify any unexpected visual regressions caused by code changes or updates.
+
+## Baseline Screenshots
+
+The main goal of Ant Design's visual regression testing is to detect visual changes in components and avoid visual issues introduced by PR changes. We use [jest-puppeteer](https://jestjs.io/docs/puppeteer) as our testing framework. By combining Puppeteer with Jest, we take screenshots of each component demo and compare them with baseline screenshots.
+
+You can find visual regression test code in `__tests__/image.test.ts` under each component. You can run visual screenshots in the antd repository using the following command:
+
+```bash
+npm run test:image # Screenshots will be saved in the imageSnapshots directory. For specific component screenshots, use: npm run test:image -- components/button
+```
+
+## Visual Regression Solutions
+
+### Argos
+
+Initially, we used [Argos](https://argos-ci.com/) as our visual regression testing solution. However, Argos changed their pricing strategy, and with antd triggering visual regression tests on every PR, comparing nearly 6,000 screenshots each time, the cost became unsustainable for us.
+
+### Self-hosted
+
+We built our own visual regression testing solution using jest-puppeteer mentioned earlier. We take screenshots of each component demo using four themes: `dark`, `light`, `compact`, and `cssVar`, then upload these screenshots to [Alibaba Cloud OSS](https://www.aliyun.com/product/oss) as baseline screenshots.
+
+Using GitHub Actions for continuous integration, we automatically capture and upload screenshots to OSS whenever the base branch code changes, ensuring the baseline screenshots stay up-to-date.
+
+For branches requiring visual regression testing, we use [pixelmatch](https://github.com/mapbox/pixelmatch) to compare current screenshots with baseline screenshots. If differences are found, difference screenshots are generated, and the difference report is uploaded to OSS.
+
+Further leveraging GitHub Actions, we implement baseline screenshot comparison in PRs. If visual differences are detected, the CI uploads the difference screenshots and report to OSS, displays the visual differences in the PR, and marks it as failed, requiring developers to fix the issues.
+
+![https://github.com/ant-design/ant-design/pull/52210#issuecomment-2567659292](https://github.com/user-attachments/assets/8a5c4e0a-3686-4b1c-aa32-930505173abe)
+
+## Local Visual Regression Testing
+
+When developing locally and preparing to submit a PR contribution, we can run visual regression tests in advance using the following command:
+
+```bash
+npm run test:visual-regression:local # Follow the prompts to select components for visual regression testing
+```
+
+## References
+
+- For visual regression CI implementation, refer to [.github/workflows/visual-regression-\*.yml](https://github.com/search?q=repo%3Aant-design%2Fant-design%20path%3A%2F%5E%5C.github%5C%2Fworkflows%5C%2F%2F%20Visual%20Regression&type=code)
+- For baseline screenshot implementation, refer to [tests/shared/imageTest.tsx](https://github.com/ant-design/ant-design/blob/46a8eff/tests/shared/imageTest.tsx#L38)
+- For visual regression test code implementation, refer to [scripts/visual-regression](https://github.com/ant-design/ant-design/tree/46a8eff/scripts/visual-regression)
--- a/docs/blog/visual-regression.zh-CN.md
+++ b/docs/blog/visual-regression.zh-CN.md
@ -0,0 +1,49 @@
+---
+title: 👀 视觉回归测试
+date: 2025-01-05
+author: Wxh16144
+---
+
+视觉回归测试（Visual Regression Testing）是一种软件测试技术，专注于检测 Web 应用程序或网站的用户界面中的视觉变化和差异, 它涉及在不同的开发阶段捕获网页的屏幕截图，并进行比较，用来识别由代码更改或更新引起的任何意外的视觉回归。
+
+## 基准截图
+
+Ant Design 视觉回归测试的主要目标是检测组件的视觉变化，避免 PR 改动引入的视觉问题。我们使用 [jest-puppeteer](https://jestjs.io/docs/puppeteer) 作为测试框架。将 Puppeteer 与 Jest 结合使用，对每一个组件 Demo 进行截图，然后与基准截图进行比较。
+
+可以看到每个组件下的 `__tests__/image.test.ts` 里面包含了视觉回归测试的代码, 你可以通过以下命令在 antd 仓库中运行视觉截图:
+
+```bash
+npm run test:image # 截图将会保存在 imageSnapshots 目录下, 指定组件截图可以使用 npm run test:image -- components/button
+```
+
+## 视觉回归方案
+
+### Argos
+
+早期使用我们使用 [Argos](https://argos-ci.com/) 作为视觉回归测试的方案，但是 Argos 修改了收费策略，antd 在每次 PR 中都会触发视觉回归测试，每次对比将近 6,000 张截图，这样的费用是我们无法承受的。
+
+### Self-hosted
+
+我们自建了视觉回归测试的方案，利用前面提到的 jest-puppeteer，将每一个组件的 Demo 分别使用 `dark`、`light`、`compact` 以及 `cssVar` 四种主题进行截图，然后将截图上传到 [阿里云 OSS](https://www.aliyun.com/product/oss) 中，作为基准截图。
+
+利用 GitHub Actions 持续集成，可以在每次基准分支的代码变动时，自动截图并上传到 OSS 中，这样就保证了基准截图的实时性。
+
+对于需要进行视觉回归测试的分支，我们使用 [pixelmatch](https://github.com/mapbox/pixelmatch) 将当前截图与基准截图进行比较，如果有差异，将会生成差异截图，并将差异报告上传到 OSS 中。
+
+进一步利用 GitHub Actions，实现在 PR 中对比基准截图，如果有视觉差异，CI 会将 PR 中的差异截图和报告上传到 OSS 中，在 PR 中展示视觉差异，同时标记为失败，需要开发者进行修复。
+
+![https://github.com/ant-design/ant-design/pull/52210#issuecomment-2567659292](https://github.com/user-attachments/assets/8a5c4e0a-3686-4b1c-aa32-930505173abe)
+
+## 本地视觉回归测试
+
+在本地开发，准备提交 PR 贡献时，我们也可以通过以下命令来事先进行视觉回归测试:
+
+```bash
+npm run test:visual-regression:local # 按照提示选择组件进行视觉回归测试
+```
+
+## 以上
+
+- 视觉回归持续集成方案，可以参考 [.github/workflows/visual-regression-\*.yml](https://github.com/search?q=repo%3Aant-design%2Fant-design%20path%3A%2F%5E%5C.github%5C%2Fworkflows%5C%2F%2F%20Visual%20Regression&type=code)
+- 基准截图实现，可以参考 [tests/shared/imageTest.tsx](https://github.com/ant-design/ant-design/blob/46a8eff/tests/shared/imageTest.tsx#L38)
+- 视觉回归测试的代码实现，可以参考 [scripts/visual-regression](https://github.com/ant-design/ant-design/tree/46a8eff/scripts/visual-regression)
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "5.22.7",
+  "version": "5.23.0",
  "description": "An enterprise-class UI design language and React components implementation",
  "license": "MIT",
  "funding": {
@ -91,6 +91,7 @@
    "test:site-update": "npm run site && npm run test:site -- -u",
    "test:update": "jest --config .jest.js --no-cache -u",
    "test:visual-regression": "tsx scripts/visual-regression/build.ts",
+    "test:visual-regression:local": "tsx scripts/visual-regression/local.ts",
    "token:meta": "tsx scripts/generate-token-meta.ts",
    "token:statistic": "tsx scripts/collect-token-statistic.ts",
    "tsc": "tsc --noEmit",
@ -120,7 +121,7 @@
    "classnames": "^2.5.1",
    "copy-to-clipboard": "^3.3.3",
    "dayjs": "^1.11.11",
-    "rc-cascader": "~3.32.0",
+    "rc-cascader": "~3.33.0",
    "rc-checkbox": "~3.5.0",
    "rc-collapse": "~3.9.0",
    "rc-dialog": "~9.6.0",
@ -135,7 +136,7 @@
    "rc-motion": "^2.9.5",
    "rc-notification": "~5.6.2",
    "rc-pagination": "~5.0.0",
-    "rc-picker": "~4.9.0",
+    "rc-picker": "~4.9.1",
    "rc-progress": "~4.0.0",
    "rc-rate": "~2.13.0",
    "rc-resize-observer": "^1.4.3",
@ -148,8 +149,8 @@
    "rc-tabs": "~15.5.0",
    "rc-textarea": "~1.9.0",
    "rc-tooltip": "~6.3.2",
-    "rc-tree": "~5.12.4",
-    "rc-tree-select": "~5.26.0",
+    "rc-tree": "~5.13.0",
+    "rc-tree-select": "~5.27.0",
    "rc-upload": "~4.8.1",
    "rc-util": "^5.44.3",
    "scroll-into-view-if-needed": "^3.1.0",
@ -234,6 +235,7 @@
    "dotenv": "^16.4.5",
    "dumi": "~2.4.17",
    "dumi-plugin-color-chunk": "^1.1.2",
+    "env-paths": "^3.0.0",
    "eslint": "^9.15.0",
    "eslint-plugin-compat": "^6.0.1",
    "eslint-plugin-jest": "^28.9.0",
@ -263,7 +265,7 @@
    "jsdom": "^25.0.1",
    "jsonml-to-react-element": "^1.1.11",
    "jsonml.js": "^0.1.0",
-    "lint-staged": "^15.2.10",
+    "lint-staged": "^15.3.0",
    "lodash": "^4.17.21",
    "lunar-typescript": "^1.7.5",
    "lz-string": "^1.5.0",
@ -274,6 +276,7 @@
    "open": "^10.1.0",
    "ora": "^8.1.0",
    "p-all": "^5.0.0",
+    "package-manager-detector": "^0.2.8",
    "pixelmatch": "^6.0.0",
    "pngjs": "^7.0.0",
    "prettier": "^3.4.1",
--- a/scripts/check-repo.ts
+++ b/scripts/check-repo.ts
@ -17,9 +17,25 @@ function exitProcess(code = 1) {

 async function checkVersion() {
  spinner.start('正在检查当前版本是否已经存在');
-  const { versions } = await fetch('http://registry.npmjs.org/antd').then((res: Response) =>
-    res.json(),
+
+  const checkUrls = ['https://registry.npmmirror.com/antd', 'http://registry.npmjs.org/antd'];
+  const promises = checkUrls.map(
+    (url) =>
+      new Promise<Record<string, any>>((resolve) => {
+        fetch(url)
+          .then((res: Response) => res.json())
+          .then(({ versions }) => {
+            resolve(versions);
+          })
+          .catch(() => {
+            // Do nothing.
+          });
+      }),
  );
+
+  // Any one of the promises resolved, we can continue.
+  const versions = Promise.race(promises);
+
  if (version in versions) {
    spinner.fail(chalk.yellow('😈 Current version already exists. Forget update package.json?'));
    spinner.info(`${chalk.cyan(' => Current:')}: version`);
--- a/scripts/generate-component-changelog.ts
+++ b/scripts/generate-component-changelog.ts
@ -144,7 +144,7 @@ const miscKeys = [
      }

      // Filter not is changelog
-      if (!line.trim().startsWith('-') && !line.includes('github.')) {
+      if (!line.trim().startsWith('-') && !line.includes('github.') && !line.includes('img')) {
        continue;
      }

--- a/scripts/visual-regression/build.ts
+++ b/scripts/visual-regression/build.ts
@ -270,13 +270,21 @@ function generateReport(
    return [mdStr, markdown2Html(mdStr)];
  }

-  let reportMdStr = `
-${commonHeader}
-${fullReport}
-
+  const summaryHeader = '<!-- summary -->';
+  const tableHeader = `
 | Expected (Branch ${targetBranch}) | Actual (Current PR) | Diff |
 | --- | --- | --- |
-    `.trim();
+  `.trim();
+
+  let reportMdStr = [
+    commonHeader,
+    isLocalEnv ? false : `${fullReport}`,
+    summaryHeader,
+    '\n',
+    tableHeader,
+  ]
+    .filter(Boolean)
+    .join('\n');

  reportMdStr += '\n';

@ -316,9 +324,9 @@ ${fullReport}
  // tips for comment `Pass Visual Diff` will pass the CI
  if (!passed) {
    const summaryLine = [
-      changedCount > 0 && `🔄 **${changedCount}** changed`,
-      removedCount > 0 && `🛑 **${removedCount}** removed`,
-      addedCount > 0 && `🆕 **${addedCount}** added`,
+      changedCount > 0 && `🔄 \`${changedCount}\` changed`,
+      removedCount > 0 && `🛑 \`${removedCount}\` removed`,
+      addedCount > 0 && `🆕 \`${addedCount}\` added`,
    ]
      .filter(Boolean)
      .join(', ');
@ -333,6 +341,9 @@ ${fullReport}
    ]
      .filter(Boolean)
      .join('\n');
+
+    reportMdStr = reportMdStr.replace(summaryHeader, `> **📊 Summary:** ${summaryLine}`);
+    fullVersionMd = fullVersionMd.replace(summaryHeader, `> **📊 Summary:** ${summaryLine}`);
  }

  // convert fullVersionMd to html
@ -411,7 +422,6 @@ async function boot() {
      const currentImgExists = await fse.exists(currentImgPath);
      if (!currentImgExists) {
        console.log(chalk.red(`⛔️ Missing image: ${compareImgName}\n`));
-        // base img would use twice so we cannot move it
        await fse.copy(baseImgPath, path.join(baseImgReportDir, compareImgName));
        return {
          type: 'removed',
@ -432,10 +442,8 @@ async function boot() {
          chalk.yellow(compareImgName),
          `${(mismatchedPxPercent * 100).toFixed(2)}%\n`,
        );
-        // copy/move compare imgs(x2) to report dir
-        // base img would use twice so we cannot move it
        await fse.copy(baseImgPath, path.join(baseImgReportDir, compareImgName));
-        await fse.move(currentImgPath, path.join(currentImgReportDir, compareImgName));
+        await fse.copy(currentImgPath, path.join(currentImgReportDir, compareImgName));

        return {
          type: 'changed',
@ -473,7 +481,7 @@ async function boot() {
  }

  const newImgTask = newImgs.map((newImg) => async () => {
-    await fse.move(
+    await fse.copy(
      path.join(currentImgSourceDir, newImg),
      path.resolve(currentImgReportDir, newImg),
    );
--- a/scripts/visual-regression/local.ts
+++ b/scripts/visual-regression/local.ts
@ -0,0 +1,255 @@
+/**
+ * 本地运行视觉回归测试
+ */
+import path from 'path';
+import fs from 'fs-extra';
+import simpleGit from 'simple-git';
+import envPaths from 'env-paths';
+import fg from 'fast-glob';
+import minimist from 'minimist';
+import { Readable } from 'stream';
+import { finished } from 'stream/promises';
+import { extract } from 'tar';
+import { Octokit } from '@octokit/rest';
+import { spawnSync } from 'child_process';
+import difference from 'lodash/difference';
+import open from 'open';
+import { select, input, checkbox, confirm } from '@inquirer/prompts';
+import { detectSync, resolveCommand } from 'package-manager-detector';
+
+const ROOT = path.resolve(__dirname, '../../');
+// ==================== 环境变量 ====================
+const GITHUB_TOKEN = process.env.GITHUB_ACCESS_TOKEN;
+const GITHUB_OWNER = process.env.GITHUB_OWNER || 'ant-design';
+const GITHUB_REPO = process.env.GITHUB_REPO || 'ant-design';
+
+// ==================== 阿里云 OSS 配置 ====================
+const ALI_OSS_BUCKET = process.env.ALI_OSS_BUCKET || 'antd-visual-diff';
+const ALI_OSS_REGION = process.env.ALI_OSS_REGION || 'oss-accelerate';
+const OSS_DOMAIN = `https://${ALI_OSS_BUCKET}.${ALI_OSS_REGION}.aliyuncs.com`;
+
+// ==================== 本地存储路径 ====================
+const _VISUAL_STORE_PATH = envPaths('visual-regression').cache;
+const STORE_PATH = path.join(_VISUAL_STORE_PATH, GITHUB_OWNER, GITHUB_REPO);
+
+// ==================== 初始化 ====================
+fs.ensureDirSync(STORE_PATH);
+const git = simpleGit(ROOT);
+const octokit = new Octokit({ auth: GITHUB_TOKEN });
+const packageManager = detectSync({ cwd: ROOT });
+const components = fg.sync('components/*/index.ts[x]', { cwd: ROOT }).reduce((acc, file) => {
+  const basePath = path.dirname(file);
+  if (
+    [
+      fs.existsSync(path.join(basePath, 'index.en-US.md')),
+      fs.existsSync(path.join(basePath, 'demo')),
+      fs.existsSync(path.join(basePath, '__tests__')),
+    ].every(Boolean)
+  ) {
+    acc.push(basePath);
+  }
+
+  return acc;
+}, [] as string[]);
+
+// ==================== scripts ====================
+const imagesTestsScript = 'test:image';
+const visualTestsScript = 'test:visual-regression';
+
+async function parseArgs() {
+  const argv = minimist(process.argv.slice(2));
+  let baseRef = argv['base-ref'];
+
+  const { latest } = await git.log();
+
+  if (!baseRef) {
+    baseRef = await select({
+      message: '📚 请选择基准分支',
+      default: 'master',
+      choices: [
+        'master',
+        'feature',
+        'next',
+        // '✍️ Custom Input', // 临时关闭自定义
+      ],
+    });
+
+    if (baseRef.endsWith('Custom Input')) {
+      baseRef = await input({
+        message: '📚 请输入基准分支',
+        default: 'master',
+      });
+    }
+  }
+
+  return {
+    baseRef,
+    currentRef: latest?.hash.slice(0, 8) || '',
+  };
+}
+
+// 获取 commit sha
+async function getCommitSha(ref: string) {
+  const { data } = await octokit.repos.getCommit({
+    owner: GITHUB_OWNER,
+    repo: GITHUB_REPO,
+    ref,
+  });
+
+  return data.sha;
+}
+
+// 获取 oss branch hash
+async function getOssBranchHash(branch: string) {
+  const uri = new URL(`${OSS_DOMAIN}/${branch}/visual-regression-ref.txt`);
+
+  const res = await fetch(uri.toString());
+  const text = await res.text();
+  return text.trim();
+}
+
+function runImageTests(args: string[]) {
+  const { command, args: realArgs } = resolveCommand(packageManager!.agent, 'run', args)!;
+  spawnSync(command, realArgs, {
+    stdio: 'inherit',
+    env: {
+      ...process.env,
+      LOCAL: 'true', // 总是本地运行
+    },
+  });
+}
+
+async function downloadVisualSnapshots(sha: string) {
+  const uri = new URL(`${OSS_DOMAIN}/${sha}/imageSnapshots.tar.gz`);
+  const tarPath = path.join(STORE_PATH, `imageSnapshots-${sha}.tar.gz`);
+
+  if (fs.existsSync(tarPath) && fs.statSync(tarPath).size > 10 * 1024 * 1024) {
+    console.log(`📦 视觉回归快照已存在，跳过下载`);
+  } else {
+    console.log(`📦 正在下载视觉回归快照`);
+    const res = await fetch(uri);
+    if (!res.ok || res.status !== 200) {
+      throw new Error(`Download file failed: ${new URL(uri).href}`);
+    }
+    // @ts-ignore
+    const body = Readable.fromWeb(res.body);
+    await finished(body.pipe(fs.createWriteStream(tarPath)));
+
+    if (fs.statSync(tarPath).size < 10 * 1024 * 1024) {
+      console.log(`📦 下载完成 ${tarPath}`);
+    }
+  }
+
+  return tarPath;
+}
+
+async function run() {
+  const args = await parseArgs();
+  const { baseRef, currentRef } = args;
+
+  const baseSha = await getCommitSha(baseRef);
+
+  if (baseSha === currentRef) {
+    console.log(`
+👋 你好像没有提交任何代码，不需要进行视觉回归测试。
+或者你可以切到你提交 PR 的分支上进行本地测试。
+`);
+  }
+
+  const visualSha = await getOssBranchHash(baseRef);
+
+  if (baseSha !== visualSha) {
+    console.warn(
+      `
+⚠️ 基准分支提交和 oss 分支提交不一致，可能会导致视觉回归测试不准确
+- 基准分支提交：${baseSha} [${baseRef}]
+- oss 分支提交：${visualSha} [${baseRef}]
+    `.trim(),
+    );
+  }
+
+  const basePath = path.join(ROOT, `imageSnapshots-${baseRef}`); // 本地基准快照存储路径
+  const targetPath = path.join(ROOT, 'imageSnapshots'); // 本地目标快照存储路径
+
+  // ==================== 生成目标快照(选择组件 ==================
+  let appliedComponents: 'all' | string[];
+
+  const selected = await checkbox<string>({
+    message: '📚 请选择需要测试的组件，不建议选择全部【全量快照生成需要耗费很长时间】\n',
+    pageSize: Math.floor(components.length / 4),
+    loop: false,
+    theme: { helpMode: 'always' },
+    choices: components.map((component) => ({
+      value: component,
+      checked: component.endsWith('components/button'), // 默认选中 button
+    })),
+  });
+
+  if (selected.length === 0 || difference(components, selected).length === 0) {
+    appliedComponents = 'all';
+  } else {
+    appliedComponents = selected;
+  }
+
+  // ==================== 生成目标快照(运行快照测试 ==================
+  const needRun = await confirm({
+    message: '📚 是否进行快照截图？【如果你已经运行过了，可以忽略】',
+    default: true,
+  });
+
+  if (needRun) {
+    fs.emptyDirSync(targetPath);
+    runImageTests([imagesTestsScript, ...(appliedComponents === 'all' ? [] : appliedComponents)]);
+  } else {
+    fs.ensureDirSync(targetPath);
+  }
+
+  // ==================== 下载基准快照 ==================
+  const visualTarPath = await downloadVisualSnapshots(visualSha);
+
+  // 解压 tar 包
+  fs.emptyDirSync(basePath);
+  await extract({
+    strip: 1,
+    file: visualTarPath,
+    C: basePath,
+  });
+
+  if (appliedComponents !== 'all') {
+    // components/avatar => avatar
+    const componentNames = appliedComponents.map((component) => path.basename(component));
+
+    console.log(`🧹 正在清理基准快照`);
+
+    const files = fs.readdirSync(basePath);
+    files.forEach((file) => {
+      // 删除不在选择范围内的组件
+      if (!componentNames.some((name) => file.startsWith(name))) {
+        fs.removeSync(path.join(basePath, file));
+      }
+    });
+  }
+
+  // ==================== 对比快照 ==================
+  const reportFile = path.join(ROOT, 'visualRegressionReport', 'report.html');
+  fs.emptyDirSync(path.dirname(reportFile));
+  // https://github.com/ant-design/ant-design/wiki/Development#run-visual-regression-diff-locally
+  runImageTests([visualTestsScript, `--base-ref=${baseRef}`, `--pr-id=local`]);
+
+  // ==================== 提示 ==================
+  console.log(`🎉 本地视觉回归测试完成, 报告: ${path.relative(process.cwd(), reportFile)}`);
+
+  const needOpen = await confirm({
+    message: '📚 是否打开报告查看？',
+    default: true,
+  });
+
+  if (needOpen) {
+    open(reportFile);
+  }
+}
+
+run().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});
--- a/tests/index.test.ts
+++ b/tests/index.test.ts
@ -7,7 +7,7 @@ describe('antd dist files', () => {
  // https://github.com/ant-design/ant-design/issues/1638
  // https://github.com/ant-design/ant-design/issues/1968
  it('exports modules correctly', () => {
-    let antd: any;
+    let antd: Record<PropertyKey, any> = {};
    if (testDist) {
      antd = require('../dist/antd');
    } else if (testDistMin) {