chore: auto merge branches (#49850)

chore: merge master into feature
2025-08-06 16:06:28 +08:00 · 2024-07-12 20:48:10 +00:00 · 2024-07-12 20:48:10 +00:00 · d9f70d738c
commit d9f70d738c
parent 3851af9607 ebdbc57c9b
36 changed files with 186 additions and 90 deletions
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -50,7 +50,7 @@ Describe changes from the user side, and list all potential break changes or oth

 - Use a developer-oriented tone and narrative style.
 - Describe the user's first-hand experience of the issue and its impact on developers, rather than your solution approach.
- Refer to: ant.design/changelog
+- Refer to: https://ant.design/changelog

 | Language   | Changelog |
 | ---------- | --------- |
--- a/.github/PULL_REQUEST_TEMPLATE/pr_cn.md
+++ b/.github/PULL_REQUEST_TEMPLATE/pr_cn.md
@ -50,7 +50,7 @@

 - 请用面向开发者的角度和叙述方式撰写 changelog
 - 描述用户第一现场的问题，对开发者有哪些影响，而非你的解决方式
- 参考：ant.design/changelog-cn
+- 参考：https://ant.design/changelog-cn

 | 语言    | 更新描述 |
 | ------- | -------- |
--- a/.github/workflows/pkg.pr.new.yml
+++ b/.github/workflows/pkg.pr.new.yml
@ -20,4 +20,17 @@ jobs:
      - name: Build
        run: npm run build

-      - run: npx pkg-pr-new publish
+      # ========== Prepare examples ==========
+      - name: Clear examples
+        run: rm -rf examples
+
+      - name: Clone examples
+        uses: actions/checkout@v4
+        with:
+          repository: ant-design/ant-design-examples
+          path: examples
+
+      - name: Modify examples
+        run: npx tsx scripts/prepare-examples.ts
+
+      - run: npx pkg-pr-new publish --template './examples/examples/*'
--- a/.gitignore
+++ b/.gitignore
@ -76,3 +76,4 @@ __image_snapshots__/
 .node

 .env
+examples/
--- a/components/badge/style/index.ts
+++ b/components/badge/style/index.ts
@ -17,12 +17,12 @@ export interface ComponentToken {
   * @desc 徽标高度
   * @descEN Height of badge
   */
-  indicatorHeight: number | string;
+  indicatorHeight: number;
  /**
   * @desc 小号徽标高度
   * @descEN Height of small badge
   */
-  indicatorHeightSM: number | string;
+  indicatorHeightSM: number;
  /**
   * @desc 点状徽标尺寸
   * @descEN Size of dot badge
--- a/components/calendar/style/index.ts
+++ b/components/calendar/style/index.ts
@ -16,17 +16,17 @@ export interface ComponentToken {
   * @desc 年选择器宽度
   * @descEN Width of year select
   */
-  yearControlWidth: number | string;
+  yearControlWidth: number;
  /**
   * @desc 月选择器宽度
   * @descEN Width of month select
   */
-  monthControlWidth: number | string;
+  monthControlWidth: number;
  /**
   * @desc 迷你日历内容高度
   * @descEN Height of mini calendar content
   */
-  miniContentHeight: number | string;
+  miniContentHeight: number;
  /**
   * @desc 完整日历背景色
   * @descEN Background color of full calendar
@ -46,9 +46,9 @@ export interface ComponentToken {

 interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken, PanelComponentToken {
  calendarCls: string;
-  dateValueHeight: number | string;
-  weekHeight: number | string;
-  dateContentHeight: number | string;
+  dateValueHeight: number;
+  weekHeight: number;
+  dateContentHeight: number;
 }

 export const genCalendarStyles = (token: CalendarToken): CSSObject => {
--- a/components/card/style/index.ts
+++ b/components/card/style/index.ts
@ -15,22 +15,22 @@ export interface ComponentToken {
   * @desc 卡片头部文字大小
   * @descEN Font size of card header
   */
-  headerFontSize: number | string;
+  headerFontSize: number;
  /**
   * @desc 小号卡片头部文字大小
   * @descEN Font size of small card header
   */
-  headerFontSizeSM: number | string;
+  headerFontSizeSM: number;
  /**
   * @desc 卡片头部高度
   * @descEN Height of card header
   */
-  headerHeight: number | string;
+  headerHeight: number;
  /**
   * @desc 小号卡片头部高度
   * @descEN Height of small card header
   */
-  headerHeightSM: number | string;
+  headerHeightSM: number;
  /**
   * @desc 操作区背景色
   * @descEN Background color of card actions
--- a/components/carousel/style/index.ts
+++ b/components/carousel/style/index.ts
@ -9,12 +9,12 @@ export interface ComponentToken {
   * @desc 指示点宽度
   * @descEN Width of indicator
   */
-  dotWidth: number | string;
+  dotWidth: number;
  /**
   * @desc 指示点高度
   * @descEN Height of indicator
   */
-  dotHeight: number | string;
+  dotHeight: number;
  /**
   * @desc 指示点之间的间距
   * @descEN gap between indicator
@ -31,7 +31,7 @@ export interface ComponentToken {
   * @desc 激活态指示点宽度
   * @descEN Width of active indicator
   */
-  dotActiveWidth: number | string;
+  dotActiveWidth: number;
  /**
   * @desc 切换箭头大小
   * @descEN Size of arrows
--- a/components/cascader/style/index.ts
+++ b/components/cascader/style/index.ts
@ -11,17 +11,17 @@ export interface ComponentToken {
   * @desc 选择器宽度
   * @descEN Width of Cascader
   */
-  controlWidth: number | string;
+  controlWidth: number;
  /**
   * @desc 选项宽度
   * @descEN Width of item
   */
-  controlItemWidth: number | string;
+  controlItemWidth: number;
  /**
   * @desc 下拉菜单高度
   * @descEN Height of dropdown
   */
-  dropdownHeight: number | string;
+  dropdownHeight: number;
  /**
   * @desc 选项选中时背景色
   * @descEN Background color of selected item
--- a/components/empty/style/index.ts
+++ b/components/empty/style/index.ts
@ -11,7 +11,7 @@ interface EmptyToken extends FullToken<'Empty'> {
  emptyImgCls: string;
  emptyImgHeight: number | string;
  emptyImgHeightSM: number | string;
-  emptyImgHeightMD: number | string;
+  emptyImgHeightMD: number;
 }

 // ============================== Shared ==============================
--- a/components/form/style/index.ts
+++ b/components/form/style/index.ts
@ -29,7 +29,7 @@ export interface ComponentToken {
   * @desc 标签高度
   * @descEN Label height
   */
-  labelHeight: number | string;
+  labelHeight: number;
  /**
   * @desc 标签冒号前间距
   * @descEN Label colon margin-inline-start
--- a/components/layout/style/index.ts
+++ b/components/layout/style/index.ts
@ -58,7 +58,7 @@ export interface ComponentToken {
   * @desc 侧边栏开关高度
   * @descEN Height of sider trigger
   */
-  triggerHeight: number | string;
+  triggerHeight: number;
  /**
   * @desc 侧边栏开关背景色
   * @descEN Background Color of sider trigger
--- a/components/list/Item.tsx
+++ b/components/list/Item.tsx
@ -107,7 +107,7 @@ const InternalItem = React.forwardRef<HTMLDivElement, ListItemProps>((props, ref
  };

  const prefixCls = getPrefixCls('list', customizePrefixCls);
-  const actionsContent = actions?.length && (
+  const actionsContent = (actions && actions.length > 0) && (
    <ul
      className={classNames(`${prefixCls}-item-action`, moduleClass('actions'))}
      key="actions"
--- a/components/list/style/index.ts
+++ b/components/list/style/index.ts
@ -11,7 +11,7 @@ export interface ComponentToken {
   * @desc 内容宽度
   * @descEN Width of content
   */
-  contentWidth: number | string;
+  contentWidth: number;
  /**
   * @desc 大号列表项内间距
   * @descEN Padding of large item
@ -66,7 +66,7 @@ export interface ComponentToken {

 interface ListToken extends FullToken<'List'> {
  listBorderedCls: string;
-  minHeight: number | string;
+  minHeight: number;
 }

 const genBorderedStyle = (token: ListToken): CSSObject => {
--- a/components/mentions/style/index.ts
+++ b/components/mentions/style/index.ts
@ -27,12 +27,12 @@ export interface ComponentToken extends SharedComponentToken {
   * @desc 弹层高度
   * @descEN Height of popup
   */
-  dropdownHeight: number | string;
+  dropdownHeight: number;
  /**
   * @desc 菜单项高度
   * @descEN Height of menu item
   */
-  controlItemWidth: number | string;
+  controlItemWidth: number;
 }

 type MentionsToken = FullToken<'Mentions'> &
--- a/components/menu/style/index.ts
+++ b/components/menu/style/index.ts
@ -19,7 +19,7 @@ export interface ComponentToken {
   * @desc 弹出菜单的宽度
   * @descEN Width of popup menu
   */
-  dropdownWidth: number | string;
+  dropdownWidth: number;
  /**
   * @desc 弹出菜单的 z-index
   * @descEN z-index of popup menu
@ -205,12 +205,12 @@ export interface ComponentToken {

  // Ink Bar
  /** @deprecated Use `activeBarWidth` instead */
-  colorActiveBarWidth: number | string;
+  colorActiveBarWidth: number;
  /**
   * @desc 菜单项指示条宽度
   * @descEN Width of menu item active bar
   */
-  activeBarWidth: number | string;
+  activeBarWidth: number;

  /** @deprecated Use `activeBarHeight` instead */
  colorActiveBarHeight: number;
@ -226,7 +226,7 @@ export interface ComponentToken {
   * @desc 菜单项指示条边框宽度
   * @descEN Border width of menu item active bar
   */
-  activeBarBorderWidth: number | string;
+  activeBarBorderWidth: number;

  /**
   * @desc 菜单项横向外间距
@ -247,12 +247,12 @@ export interface ComponentToken {
   * @desc 菜单项高度
   * @descEN Height of menu item
   */
-  itemHeight: number | string;
+  itemHeight: number;
  /**
   * @desc 收起后的宽度
   * @descEN Width when collapsed
   */
-  collapsedWidth: number | string;
+  collapsedWidth: number;
  /**
   * @desc 弹出框背景色
   * @descEN Background color of popup
@ -366,7 +366,7 @@ export interface ComponentToken {
   */
  darkDangerItemActiveBg: string;
  /** @internal */
-  itemWidth: number | string;
+  itemWidth: string;
 }

 export interface MenuToken extends FullToken<'Menu'> {
--- a/components/modal/style/index.ts
+++ b/components/modal/style/index.ts
@ -20,7 +20,7 @@ export interface ComponentToken {
   * @desc 标题行高
   * @descEN Line height of title
   */
-  titleLineHeight: number | string;
+  titleLineHeight: number;
  /**
   * @desc 标题字体大小
   * @descEN Font size of title
@ -73,7 +73,7 @@ export interface ModalToken extends FullToken<'Modal'> {
  modalHeaderHeight: number | string;
  modalFooterBorderColorSplit: string;
  modalFooterBorderStyle: string;
-  modalFooterBorderWidth: number | string;
+  modalFooterBorderWidth: number;
  modalCloseIconColor: string;
  modalCloseIconHoverColor: string;
  modalCloseBtnSize: number | string;
--- a/components/notification/style/index.ts
+++ b/components/notification/style/index.ts
@ -20,11 +20,11 @@ export interface ComponentToken {
   * @desc 提醒框宽度
   * @descEN Width of Notification
   */
-  width: number | string;
+  width: number;
 }

 export interface NotificationToken extends FullToken<'Notification'> {
-  animationMaxHeight: number | string;
+  animationMaxHeight: number;
  notificationBg: string;
  notificationPadding: string;
  notificationPaddingVertical: number;
--- a/components/popover/style/index.ts
+++ b/components/popover/style/index.ts
@ -18,18 +18,18 @@ export interface ComponentToken extends ArrowToken, ArrowOffsetToken {
   * @desc 气泡卡片宽度
   * @descEN Width of Popover
   */
-  width?: number | string;
+  width?: number;
  /**
   * @deprecated Please use `titleMinWidth` instead
   * @desc 气泡卡片最小宽度
   * @descEN Min width of Popover
   */
-  minWidth?: number | string;
+  minWidth?: number;
  /**
   * @desc 气泡卡片标题最小宽度
   * @descEN Min width of Popover title
   */
-  titleMinWidth: number | string;
+  titleMinWidth: number;
  /**
   * @desc 气泡卡片 z-index
   * @descEN z-index of Popover
--- a/components/result/style/index.ts
+++ b/components/result/style/index.ts
@ -29,8 +29,8 @@ export interface ComponentToken {
 }

 interface ResultToken extends FullToken<'Result'> {
-  imageWidth: number | string;
-  imageHeight: number | string;
+  imageWidth: number;
+  imageHeight: number;
  resultInfoIconColor: string;
  resultSuccessIconColor: string;
  resultWarningIconColor: string;
--- a/components/skeleton/style/index.ts
+++ b/components/skeleton/style/index.ts
@ -24,7 +24,7 @@ export type ComponentToken = {
   * @desc 标题骨架屏高度
   * @descEN Height of title skeleton
   */
-  titleHeight: number | string;
+  titleHeight: number;
  /**
   * @desc 骨架屏圆角
   * @descEN Border radius of skeleton
--- a/components/slider/style/index.ts
+++ b/components/slider/style/index.ts
@ -38,12 +38,12 @@ export interface ComponentToken {
   * @desc 滑块边框宽度
   * @descEN Border width of handle
   */
-  handleLineWidth: number | string;
+  handleLineWidth: number;
  /**
   * @desc 滑块边框宽度（悬浮态）
   * @descEN Border width of handle when hover
   */
-  handleLineWidthHover: number | string;
+  handleLineWidthHover: number;
  /**
   * @desc 滑块圆点尺寸
   * @descEN Size of dot
--- a/components/spin/style/index.ts
+++ b/components/spin/style/index.ts
@ -10,7 +10,7 @@ export interface ComponentToken {
   * @desc 内容区域高度
   * @descEN Height of content area
   */
-  contentHeight: number | string;
+  contentHeight: number;
  /**
   * @desc 加载图标尺寸
   * @descEN Loading icon size
--- a/components/steps/style/index.ts
+++ b/components/steps/style/index.ts
@ -81,7 +81,7 @@ export interface ComponentToken {
   * @desc 标题行高
   * @descEN Line height of title
   */
-  titleLineHeight: number | string;
+  titleLineHeight: number;
  /**
   * @internal
   */
--- a/components/switch/style/index.ts
+++ b/components/switch/style/index.ts
@ -11,22 +11,22 @@ export interface ComponentToken {
   *  @desc 开关高度
   *  @descEN Height of Switch
   */
-  trackHeight: number | string;
+  trackHeight: number;
  /**
   * @desc 小号开关高度
   * @descEN Height of small Switch
   */
-  trackHeightSM: number | string;
+  trackHeightSM: number;
  /**
   * @desc 开关最小宽度
   * @descEN Minimum width of Switch
   */
-  trackMinWidth: number | string;
+  trackMinWidth: number;
  /**
   * @desc 小号开关最小宽度
   * @descEN Minimum width of small Switch
   */
-  trackMinWidthSM: number | string;
+  trackMinWidthSM: number;
  /**
   * @desc 开关内边距
   * @descEN Padding of Switch
--- a/components/table/style/index.ts
+++ b/components/table/style/index.ts
@ -166,7 +166,7 @@ export interface ComponentToken {
   * @desc 选择列宽度
   * @descEN Width of selection column
   */
-  selectionColumnWidth: number | string;
+  selectionColumnWidth: number;
  /**
   * @desc Sticky 模式下滚动条背景色
   * @descEN Background of sticky scrollbar
@ -214,14 +214,14 @@ export interface TableToken extends FullToken<'Table'> {
  tableFixedHeaderSortActiveBg: string;
  tableHeaderFilterActiveBg: string;
  tableFilterDropdownBg: string;
-  tableFilterDropdownHeight: number | string;
+  tableFilterDropdownHeight: number;
  tableRowHoverBg: string;
  tableSelectedRowBg: string;
  tableSelectedRowHoverBg: string;

  tableFontSizeMiddle: number;
  tableFontSizeSmall: number;
-  tableSelectionColumnWidth: number | string;
+  tableSelectionColumnWidth: number;
  tableExpandIconBg: string;
  tableExpandColumnWidth: number | string;
  tableExpandedRowBg: string;
--- a/components/tabs/style/index.ts
+++ b/components/tabs/style/index.ts
@ -21,7 +21,7 @@ export interface ComponentToken {
   * @desc 卡片标签页高度
   * @descEN Height of card tab
   */
-  cardHeight: number | string;
+  cardHeight: number;
  /**
   * @desc 卡片标签页内间距
   * @descEN Padding of card tab
@ -134,8 +134,8 @@ export interface TabsToken extends FullToken<'Tabs'> {
  dropdownEdgeChildVerticalPadding: number;
  tabsNavWrapPseudoWidth: number;
  tabsActiveTextShadow: string;
-  tabsDropdownHeight: number | string;
-  tabsDropdownWidth: number | string;
+  tabsDropdownHeight: number;
+  tabsDropdownWidth: number;
  tabsHorizontalItemMargin: string;
  tabsHorizontalItemMarginRTL: string;
 }
--- a/components/timeline/style/index.ts
+++ b/components/timeline/style/index.ts
@ -15,12 +15,12 @@ export interface ComponentToken {
   * @desc 轨迹宽度
   * @descEN Line width
   */
-  tailWidth: number | string;
+  tailWidth: number;
  /**
   * @desc 节点边框宽度
   * @descEN Border width of node
   */
-  dotBorderWidth: number | string;
+  dotBorderWidth: number;
  /**
   * @desc 节点背景色
   * @descEN Background color of node
--- a/components/tour/style/index.ts
+++ b/components/tour/style/index.ts
@ -37,8 +37,8 @@ export interface ComponentToken extends ArrowOffsetToken, ArrowToken {

 interface TourToken extends FullToken<'Tour'> {
  tourZIndexPopup: number;
-  indicatorWidth: number | string;
-  indicatorHeight: number | string;
+  indicatorWidth: number;
+  indicatorHeight: number;
  tourBorderRadius: number;
 }

--- a/components/transfer/style/index.ts
+++ b/components/transfer/style/index.ts
@ -10,32 +10,32 @@ export interface ComponentToken {
   * @desc 列表宽度
   * @descEN Width of list
   */
-  listWidth: number | string;
+  listWidth: number;
  /**
   * @desc 大号列表宽度
   * @descEN Width of large list
   */
-  listWidthLG: number | string;
+  listWidthLG: number;
  /**
   * @desc 列表高度
   * @descEN Height of list
   */
-  listHeight: number | string;
+  listHeight: number;
  /**
   * @desc 列表项高度
   * @descEN Height of list item
   */
-  itemHeight: number | string;
+  itemHeight: number;
  /**
   * @desc 列表项纵向内边距
   * @descEN Vertical padding of list item
   */
-  itemPaddingBlock: number | string;
+  itemPaddingBlock: number;
  /**
   * @desc 顶部高度
   * @descEN Height of header
   */
-  headerHeight: number | string;
+  headerHeight: number;
 }

 interface TransferToken extends FullToken<'Transfer'> {
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@ -15,13 +15,13 @@ import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
+import type { Variant } from '../config-provider';
 import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import DisabledContext from '../config-provider/DisabledContext';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
 import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
-import type { Variant } from '../config-provider';
 import useVariant from '../form/hooks/useVariants';
 import mergedBuiltinPlacements from '../select/mergedBuiltinPlacements';
 import useSelectStyle from '../select/style';
@ -264,7 +264,7 @@ const InternalTreeSelect = <
    hashId,
  );

-  const renderSwitcherIcon: React.FC<AntTreeNodeProps> = (nodeProps) => (
+  const renderSwitcherIcon = (nodeProps: AntTreeNodeProps) => (
    <SwitcherIconCom
      prefixCls={treePrefixCls}
      switcherIcon={switcherIcon as SwitcherIcon}
--- a/components/tree/Tree.tsx
+++ b/components/tree/Tree.tsx
@ -16,6 +16,7 @@ import SwitcherIconCom from './utils/iconUtil';

 export type SwitcherIcon = React.ReactNode | ((props: AntTreeNodeProps) => React.ReactNode);
 export type TreeLeafIcon = React.ReactNode | ((props: AntTreeNodeProps) => React.ReactNode);
+type TreeIcon = React.ReactNode | ((props: AntdTreeNodeAttribute) => React.ReactNode);

 export interface AntdTreeNodeAttribute {
  eventKey: string;
@ -42,16 +43,16 @@ export interface AntTreeNodeProps {
  checkable?: boolean;
  disabled?: boolean;
  disableCheckbox?: boolean;
-  title?: string | React.ReactNode;
+  title?: React.ReactNode | ((data: DataNode) => React.ReactNode);
  key?: Key;
-  eventKey?: string;
+  eventKey?: Key;
  isLeaf?: boolean;
  checked?: boolean;
  expanded?: boolean;
  loading?: boolean;
  selected?: boolean;
  selectable?: boolean;
-  icon?: ((treeNode: AntdTreeNodeAttribute) => React.ReactNode) | React.ReactNode;
+  icon?: TreeIcon;
  children?: React.ReactNode;
  [customProp: string]: any;
 }
@ -148,11 +149,8 @@ export interface TreeProps<T extends BasicDataNode = DataNode>
  draggable?: DraggableFn | boolean | DraggableConfig;
  style?: React.CSSProperties;
  showIcon?: boolean;
-  icon?:
-    | ((nodeProps: AntdTreeNodeAttribute) => React.ReactNode)
-    | React.ReactNode
-    | RcTreeProps<T>['icon'];
-  switcherIcon?: SwitcherIcon | RcTreeProps<T>['switcherIcon'];
+  icon?: TreeIcon;
+  switcherIcon?: SwitcherIcon;
  prefixCls?: string;
  children?: React.ReactNode;
  blockNode?: boolean;
@ -224,10 +222,10 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
    return mergedDraggable;
  }, [draggable]);

-  const renderSwitcherIcon: React.FC<AntTreeNodeProps> = (nodeProps) => (
+  const renderSwitcherIcon = (nodeProps: AntTreeNodeProps) => (
    <SwitcherIconCom
      prefixCls={prefixCls}
-      switcherIcon={switcherIcon as SwitcherIcon}
+      switcherIcon={switcherIcon}
      treeNodeProps={nodeProps}
      showLine={showLine}
    />
@ -258,7 +256,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
      direction={direction}
      checkable={checkable ? <span className={`${prefixCls}-checkbox-inner`} /> : checkable}
      selectable={selectable}
-      switcherIcon={renderSwitcherIcon as RcTreeProps['switcherIcon']}
+      switcherIcon={renderSwitcherIcon}
      draggable={draggableConfig}
    >
      {children}
--- a/components/tree/tests/type.test.tsx
+++ b/components/tree/tests/type.test.tsx
@ -77,7 +77,7 @@ describe('Tree.TypeScript', () => {
    expect(container).toBeTruthy();
  });

-  it('draggable params type', () => {
+  it('draggable/icon/switcherIcon params type', () => {
    const { container } = render(
      <Tree
        treeData={[
@ -93,6 +93,8 @@ describe('Tree.TypeScript', () => {
          },
        ]}
        draggable={(node: DataNode) => node.title === 'Little'}
+        icon={(props) => (props.isLeaf ? 1 : 0)}
+        switcherIcon={(props) => (props.isLeaf ? 1 : 0)}
      />,
    );
    expect(container).toBeTruthy();
--- a/package.json
+++ b/package.json
@ -128,7 +128,7 @@
    "rc-motion": "^2.9.2",
    "rc-notification": "~5.6.0",
    "rc-pagination": "~4.2.0",
-    "rc-picker": "~4.6.8",
+    "rc-picker": "~4.6.9",
    "rc-progress": "~4.0.0",
    "rc-rate": "~2.13.0",
    "rc-resize-observer": "^1.4.0",
@ -222,7 +222,6 @@
    "cli-progress": "^3.12.0",
    "cross-env": "^7.0.3",
    "cross-fetch": "^4.0.0",
-    "crypto": "^1.0.1",
    "dekko": "^0.2.1",
    "dotenv": "^16.4.5",
    "dumi": "~2.4.0",
--- a/scripts/prepare-examples.ts
+++ b/scripts/prepare-examples.ts
@ -0,0 +1,81 @@
+import fg from 'fast-glob';
+import fs from 'fs-extra';
+import path from 'path';
+import cloneDeep from 'lodash/cloneDeep';
+import isPlainObject from 'lodash/isPlainObject';
+
+import rootPkg from '../package.json';
+
+const examples = fg.sync(['examples/examples/**/package.json'], {
+  cwd: process.cwd(),
+  onlyFiles: true,
+  ignore: ['**/node_modules/**', '.git'],
+});
+
+const _order = ['dependencies', 'devDependencies', 'peerDependencies'] as const;
+
+function detectRootDepsVersion(pkgName: string) {
+  const _pkg: any = rootPkg;
+
+  for (let i = 0; i < _order.length; i++) {
+    const depKey = _order[i];
+    if (_pkg?.[depKey]?.[pkgName]) {
+      return _pkg[depKey][pkgName];
+    }
+  }
+}
+
+function syncVersion(pkgJson = {}, deps: string[] = []) {
+  const _pkgJson: any = cloneDeep(pkgJson);
+
+  _order.forEach((key) => {
+    const _processDeps = _pkgJson[key];
+
+    if (isPlainObject(_processDeps)) {
+      Object.keys(_processDeps).forEach((dep) => {
+        if (deps.includes(dep)) {
+          _processDeps[dep] = detectRootDepsVersion(dep) ?? _processDeps[dep];
+        }
+      });
+    }
+  });
+
+  return _pkgJson;
+}
+
+function modifyPackageJson(pkgJson: any) {
+  if (typeof pkgJson === 'object' && pkgJson !== null) {
+    return {
+      ...syncVersion(
+        pkgJson,
+        ['@ant-design/cssinjs'], // need to sync version
+      ),
+      private: true,
+      author: 'antd GitHub CI',
+    };
+  }
+}
+
+function main() {
+  for (let i = 0; i < examples.length; i++) {
+    const example = examples[i];
+
+    const pkgJson = fs.readJsonSync(example);
+    const newPkgJson = modifyPackageJson(pkgJson) ?? pkgJson;
+
+    // unique named package.json
+    newPkgJson.name = path.basename(path.dirname(example));
+
+    const rewritePath = process.env.CI ? example : `${example}.tmp`; // ignored
+
+    fs.writeJsonSync(rewritePath, newPkgJson, { spaces: 2 });
+
+    globalThis.console.log(`🔮 [prepare-examples] ${pkgJson.name} has been prepared.`);
+  }
+}
+
+/**
+ * 1. git clone --depth=1 git@github.com:ant-design/ant-design-examples.git examples
+ * 2. npx tsx scripts/prepare-examples.ts
+ */
+main();
--- a/tests/shared/imageTest.tsx
+++ b/tests/shared/imageTest.tsx
@ -42,7 +42,7 @@ export default function imageTest(
  let container: HTMLDivElement;

  beforeAll(async () => {
-    const dom = new JSDOM('<!DOCTYPE html><body></body></p>', {
+    const dom = new JSDOM('<!DOCTYPE html><body></body></html>', {
      url: 'http://localhost/',
    });
    const win = dom.window;
@ -121,8 +121,10 @@ export default function imageTest(

      const { openTriggerClassName } = options;

+      const requestListener = (request: any) => onRequestHandle(request as HTTPRequest);
+
      MockDate.set(dayjs('2016-11-22').valueOf());
-      page.on('request', onRequestHandle);
+      page.on('request', requestListener);
      await page.goto(`file://${process.cwd()}/tests/index.html`);
      await page.addStyleTag({ path: `${process.cwd()}/components/style/reset.css` });
      await page.addStyleTag({ content: '*{animation: none!important;}' });
@ -194,7 +196,7 @@ export default function imageTest(
        },
        html,
        styleStr,
-        openTriggerClassName,
+        openTriggerClassName || '',
      );

      if (!options.onlyViewport) {
@ -210,7 +212,7 @@ export default function imageTest(
      await fse.writeFile(path.join(snapshotPath, `${identifier}${suffix}.png`), image);

      MockDate.reset();
-      page.off('request', onRequestHandle);
+      page.off('request', requestListener);
    });
  }