chore: skip list vertical demo image (#56900)

* chore: improve drawer

* Update components/drawer/Drawer.tsx

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: 遇见同学 <1875694521@qq.com>

---------

Signed-off-by: 遇见同学 <1875694521@qq.com>
Co-authored-by: 遇见同学 <1875694521@qq.com>
Co-authored-by: lijianan <574980606@qq.com>

.dumi/hooks/useIssueCount.ts

@@ -7,7 +7,6 @@ const isNumber = (value: any): value is number => {
 };
 
 const fetcher = async (url: string): Promise<number> => {
-  // eslint-disable-next-line compat/compat
   const res = await fetch(url, { headers: { Accept: 'application/vnd.github+json' } });
   const data = await res.json();
   const totalCount = isNumber(data?.total_count) ? data.total_count : 0;

.dumi/hooks/useMenu.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import type { MenuProps } from 'antd';
 import { Flex, Tag, version } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 import { useFullSidebarData, useSidebarData } from 'dumi';
 
@@ -12,29 +12,28 @@ import useLocation from './useLocation';
 const locales = {
   cn: {
     deprecated: '废弃',
-    update: '更新',
+    updated: '更新',
     new: '新增',
   },
   en: {
     deprecated: 'DEPRECATED',
-    update: 'UPDATE',
+    updated: 'UPDATED',
     new: 'NEW',
   },
 };
 
 const getTagColor = (val?: string) => {
   switch (val?.toUpperCase()) {
-    case 'UPDATE':
+    case 'UPDATED':
       return 'processing';
     case 'DEPRECATED':
       return 'red';
-
     default:
       return 'success';
   }
 };
 
-const useStyle = createStyles(({ css, cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   link: css`
     display: flex;
     align-items: center;
@@ -47,7 +46,7 @@ const useStyle = createStyles(({ css, cssVar }) => ({
     font-weight: normal;
     font-size: ${cssVar.fontSizeSM};
     opacity: 0.8;
-    margin-left: 4px;
+    margin-inline-start: ${cssVar.marginSM};
   `,
 }));
 
@@ -63,10 +62,10 @@ interface MenuItemLabelProps {
 }
 
 const MenuItemLabelWithTag: React.FC<MenuItemLabelProps> = (props) => {
-  const { styles } = useStyle();
   const { before, after, link, title, subtitle, search, tag, className } = props;
 
   const [locale] = useLocale(locales);
+
   const getLocale = (name: string) => {
     return (locale as any)[name.toLowerCase()] ?? name;
   };
@@ -74,7 +73,7 @@ const MenuItemLabelWithTag: React.FC<MenuItemLabelProps> = (props) => {
   if (!before && !after) {
     return (
       <Link to={`${link}${search}`} className={clsx(className, { [styles.link]: tag })}>
-        <Flex justify="flex-start" align="center" gap="small">
+        <Flex justify="flex-start" align="center">
           <span>{title}</span>
           {subtitle && <span className={styles.subtitle}>{subtitle}</span>}
         </Flex>

.dumi/hooks/useThemeAnimation.ts

@@ -3,10 +3,14 @@ import { removeCSS, updateCSS } from '@rc-component/util/lib/Dom/dynamicCSS';
 
 import theme from '../../components/theme';
 
+const duration = 0.5;
 const viewTransitionStyle = `
+@keyframes keepAlive {100% { z-index: -1 }}
+
 ::view-transition-old(root),
 ::view-transition-new(root) {
-  animation: none;
+  animation: keepAlive ${duration}s linear;
+  animation-fill-mode: forwards;
   mix-blend-mode: normal;
 }
 
@@ -50,7 +54,7 @@ const useThemeAnimation = () => {
           clipPath: isDark ? [...clipPath].reverse() : clipPath,
         },
         {
-          duration: 500,
+          duration: duration * 1000,
           easing: 'ease-in',
           pseudoElement: isDark ? '::view-transition-old(root)' : '::view-transition-new(root)',
         },

.dumi/pages/index/components/ComponentsList.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
 import {
-  Alert,
+  Card,
   Carousel,
   DatePicker,
   Flex,
   FloatButton,
-  Modal,
-  Progress,
+  Masonry,
+  Splitter,
   Tag,
   Tour,
   Typography,
@@ -21,7 +21,6 @@ import SiteContext from '../../../theme/slots/SiteContext';
 import { DarkContext } from './../../../hooks/useDark';
 import { getCarouselStyle } from './util';
 
-const { _InternalPanelDoNotUseOrYouWillBeFired: ModalDoNotUseOrYouWillBeFired } = Modal;
 const { _InternalPanelDoNotUseOrYouWillBeFired: DatePickerDoNotUseOrYouWillBeFired } = DatePicker;
 const { _InternalPanelDoNotUseOrYouWillBeFired: TourDoNotUseOrYouWillBeFired } = Tour;
 const { _InternalPanelDoNotUseOrYouWillBeFired: FloatButtonDoNotUseOrYouWillBeFired } = FloatButton;
@@ -148,24 +147,26 @@ const ComponentsList: React.FC = () => {
   const { styles } = useStyle();
   const [locale] = useLocale(locales);
   const { isMobile } = React.use(SiteContext);
+  const isDark = React.use(DarkContext);
   const COMPONENTS = React.useMemo<Omit<ComponentItemProps, 'index'>[]>(
     () => [
-      {
-        title: 'Modal',
-        type: 'update',
-        node: (
-          <ModalDoNotUseOrYouWillBeFired title="Ant Design" width={300}>
-            {locale.sampleContent}
-          </ModalDoNotUseOrYouWillBeFired>
-        ),
-      },
+      // {
+      //   title: 'Modal',
+      //   type: 'update',
+      //   node: (
+      //     <ModalDoNotUseOrYouWillBeFired title="Ant Design" width={300}>
+      //       {locale.sampleContent}
+      //     </ModalDoNotUseOrYouWillBeFired>
+      //   ),
+      // },
 
       {
         title: 'DatePicker',
         type: 'update',
         node: (
           <DatePickerDoNotUseOrYouWillBeFired
-            value={dayjs('2022-11-18 14:00:00')}
+            value={dayjs('2025-11-22 00:00:00')}
+            // defaultValue={dayjs('2025-11-22 00:00:00')}
             showToday={false}
             presets={
               isMobile
@@ -180,30 +181,30 @@ const ComponentsList: React.FC = () => {
           />
         ),
       },
+      // {
+      //   title: 'Progress',
+      //   type: 'update',
+      //   node: (
+      //     <Flex gap="small" vertical>
+      //       <Flex gap="small" align="center">
+      //         <Progress type="circle" railColor="#e6f4ff" percent={60} size={14} />
+      //         {locale.inProgress}
+      //       </Flex>
+      //       <Flex gap="small" align="center">
+      //         <Progress type="circle" percent={100} size={14} />
+      //         {locale.success}
+      //       </Flex>
+      //       <Flex gap="small" align="center">
+      //         <Progress type="circle" status="exception" percent={88} size={14} />
+      //         {locale.taskFailed}
+      //       </Flex>
+      //     </Flex>
+      //   ),
+      // },
 
-      {
-        title: 'Progress',
-        type: 'update',
-        node: (
-          <Flex gap="small" vertical>
-            <Flex gap="small" align="center">
-              <Progress type="circle" railColor="#e6f4ff" percent={60} size={14} />
-              {locale.inProgress}
-            </Flex>
-            <Flex gap="small" align="center">
-              <Progress type="circle" percent={100} size={14} />
-              {locale.success}
-            </Flex>
-            <Flex gap="small" align="center">
-              <Progress type="circle" status="exception" percent={88} size={14} />
-              {locale.taskFailed}
-            </Flex>
-          </Flex>
-        ),
-      },
       {
         title: 'Tour',
-        type: 'new',
+        type: 'update',
         node: (
           <TourDoNotUseOrYouWillBeFired
             title="Ant Design"
@@ -214,9 +215,10 @@ const ComponentsList: React.FC = () => {
           />
         ),
       },
+
       {
         title: 'FloatButton',
-        type: 'new',
+        type: 'update',
         node: (
           <Flex align="center" gap="large">
             <FloatButtonDoNotUseOrYouWillBeFired
@@ -246,19 +248,83 @@ const ComponentsList: React.FC = () => {
       // },
 
       {
-        title: 'Alert',
-        type: 'update',
+        title: 'Splitter',
+        type: 'new',
         node: (
-          <Alert
-            style={{ width: 400 }}
-            title="Ant Design"
-            description={locale.sampleContent}
-            closable={{ closeIcon: true, disabled: true }}
+          <Splitter
+            orientation="vertical"
+            style={{
+              height: 320,
+              width: 200,
+              background: isDark ? '#1f1f1f' : '#ffffff',
+              boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
+            }}
+          >
+            <Splitter.Panel defaultSize="40%" min="20%" max="70%">
+              <Flex justify="center" align="center" style={{ height: '100%' }}>
+                <Typography.Title type="secondary" level={5} style={{ whiteSpace: 'nowrap' }}>
+                  First
+                </Typography.Title>
+              </Flex>
+            </Splitter.Panel>
+
+            <Splitter.Panel>
+              <Flex justify="center" align="center" style={{ height: '100%' }}>
+                <Typography.Title type="secondary" level={5} style={{ whiteSpace: 'nowrap' }}>
+                  Second
+                </Typography.Title>
+              </Flex>
+            </Splitter.Panel>
+          </Splitter>
+        ),
+      },
+
+      {
+        title: 'Masonry',
+        type: 'new',
+        node: (
+          <Masonry
+            columns={2}
+            gutter={8}
+            style={{
+              width: 300,
+              height: 320,
+            }}
+            items={[
+              { key: '1', data: 80 },
+              { key: '2', data: 60 },
+              { key: '3', data: 40 },
+              { key: '4', data: 120 },
+              { key: '5', data: 90 },
+              { key: '6', data: 40 },
+              { key: '7', data: 60 },
+              { key: '8', data: 70 },
+              { key: '9', data: 120 },
+            ]}
+            itemRender={({ data, index }) => (
+              <Card size="small" style={{ height: data }}>
+                {index + 1}
+              </Card>
+            )}
           />
         ),
       },
+
+      // {
+      //   title: 'Alert',
+      //   type: 'update',
+      //   node: (
+      //     <Alert
+      //       style={{ width: 400 }}
+      //       title="Ant Design"
+      //       description={locale.sampleContent}
+      //       closable={{ closeIcon: true, disabled: true }}
+      //     />
+      //   ),
+      // },
     ],
     [
+      isDark,
       isMobile,
       locale.inProgress,
       locale.lastMonth,

.dumi/pages/index/components/Group.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { Typography } from 'antd';
-import { createStyles, useTheme } from 'antd-style';
+import { createStaticStyles, useTheme } from 'antd-style';
 import { clsx } from 'clsx';
 
 import SiteContext from '../../../theme/slots/SiteContext';
 import GroupMaskLayer from './GroupMaskLayer';
 
-const useStyle = createStyles(({ css, cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   box: css`
     position: relative;
     transition: all ${cssVar.motionDurationSlow};
@@ -46,7 +46,6 @@ export interface GroupProps {
 const Group: React.FC<React.PropsWithChildren<GroupProps>> = (props) => {
   const { id, title, titleColor, description, children, decoration, background, collapse } = props;
   const token = useTheme();
-  const { styles } = useStyle();
   const { isMobile } = React.use(SiteContext);
   return (
     <div style={{ backgroundColor: background }} className={styles.box}>

.dumi/pages/index/components/GroupMaskLayer.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
-const useStyle = createStyles(({ css }) => ({
+const classNames = createStaticStyles(({ css }) => ({
   siteMask: css`
     z-index: 1;
     position: relative;
@@ -19,11 +19,10 @@ export interface GroupMaskLayerProps {
 
 const GroupMaskLayer: React.FC<React.PropsWithChildren<GroupMaskLayerProps>> = (props) => {
   const { children, className, style, onMouseMove, onMouseEnter, onMouseLeave } = props;
-  const { styles } = useStyle();
   return (
     <div
       style={style}
-      className={clsx(className, styles.siteMask)}
+      className={clsx(className, classNames.siteMask)}
       onMouseMove={onMouseMove}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}

.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx

@@ -17,7 +17,7 @@ import {
   Switch,
   Tooltip,
 } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 
 import useLocale from '../../../../hooks/useLocale';
 import Tilt from './Tilt';
@@ -71,7 +71,7 @@ const locales = {
   },
 };
 
-const useStyle = createStyles(({ cssVar, css }) => {
+const styles = createStaticStyles(({ cssVar, css }) => {
   const gap = cssVar.padding;
   return {
     holder: css`
@@ -106,7 +106,6 @@ const useStyle = createStyles(({ cssVar, css }) => {
 
 const ComponentsBlock: React.FC = () => {
   const [locale] = useLocale(locales);
-  const { styles } = useStyle();
 
   return (
     <Tilt options={{ max: 4, glare: false, scale: 0.98 }} className={styles.holder}>

.dumi/pages/index/components/Theme/BackgroundImage.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { CSSMotionList } from '@rc-component/motion';
-import { createStyles, css } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
 import { COLOR_IMAGES, getClosetColor } from './colorUtil';
@@ -10,7 +10,7 @@ export interface BackgroundImageProps {
   isLight?: boolean;
 }
 
-const useStyle = createStyles(({ cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   image: css`
     transition: all ${cssVar.motionDurationSlow};
     position: absolute;
@@ -29,7 +29,6 @@ const onHide = () => ({ opacity: 0 });
 
 const BackgroundImage: React.FC<BackgroundImageProps> = ({ colorPrimary, isLight }) => {
   const activeColor = useMemo(() => getClosetColor(colorPrimary), [colorPrimary]);
-  const { styles } = useStyle();
 
   const [keyList, setKeyList] = useState<string[]>([]);
 

.dumi/pages/index/components/Theme/ColorPicker.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { ColorPicker, Flex, Input } from 'antd';
 import type { ColorPickerProps, GetProp } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { generateColor } from 'antd/es/color-picker/util';
 import { clsx } from 'clsx';
 
@@ -9,7 +9,7 @@ import { PRESET_COLORS } from './colorUtil';
 
 type Color = Extract<GetProp<ColorPickerProps, 'value'>, string | { cleared: any }>;
 
-const useStyle = createStyles(({ cssVar, css }) => ({
+const styles = createStaticStyles(({ cssVar, css }) => ({
   color: css`
     width: calc(${cssVar.controlHeightLG} / 2);
     height: calc(${cssVar.controlHeightLG} / 2);
@@ -69,8 +69,6 @@ const DebouncedColorPicker: React.FC<React.PropsWithChildren<ThemeColorPickerPro
 };
 
 const ThemeColorPicker: React.FC<ThemeColorPickerProps> = ({ value, onChange, id }) => {
-  const { styles } = useStyle();
-
   const matchColors = React.useMemo(() => {
     const valueStr = generateColor(value || '').toRgbString();
     const colors = PRESET_COLORS.map((color) => {

.dumi/pages/index/components/Theme/ThemePicker.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Flex } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
 import useLocale from '../../../../hooks/useLocale';
@@ -32,7 +32,7 @@ const locales = {
   },
 };
 
-const useStyle = createStyles(({ cssVar, css }) => ({
+const styles = createStaticStyles(({ cssVar, css }) => ({
   themeCard: css`
     border-radius: ${cssVar.borderRadius};
     cursor: pointer;
@@ -80,7 +80,6 @@ export interface ThemePickerProps {
 
 const ThemePicker: React.FC<ThemePickerProps> = (props) => {
   const { value, id, onChange } = props;
-  const { styles } = useStyle();
   const [locale] = useLocale(locales);
   return (
     <Flex gap="large" wrap>

.dumi/pages/index/components/Theme/index.tsx

@@ -20,7 +20,7 @@ import {
   theme,
   Typography,
 } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { generateColor } from 'antd/es/color-picker/util';
 import { clsx } from 'clsx';
 import { useLocation } from 'dumi';
@@ -92,7 +92,7 @@ const locales = {
 };
 
 // ============================= Style =============================
-const useStyle = createStyles(({ cssVar, css, cx }) => {
+const styles = createStaticStyles(({ cssVar, css, cx }) => {
   const { carousel } = getCarouselStyle();
   const demo = css`
     overflow: hidden;
@@ -345,7 +345,6 @@ function rgbToColorMatrix(color: string) {
 }
 
 const Theme: React.FC = () => {
-  const { styles } = useStyle();
   const [locale, lang] = useLocale(locales);
   const isZhCN = lang === 'cn';
   const { search } = useLocation();

.dumi/pages/index/components/util.ts

@@ -1,4 +1,3 @@
-/* eslint-disable compat/compat */
 import { css } from 'antd-style';
 import useSWR from 'swr';
 

.dumi/pages/index/index.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
 import { ConfigProvider, theme } from 'antd';
-import { createStyles, css } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 
 import useLocale from '../../hooks/useLocale';
 import { DarkContext } from './../../hooks/useDark';
@@ -12,7 +12,7 @@ const ComponentsList = React.lazy(() => import('./components/ComponentsList'));
 const DesignFramework = React.lazy(() => import('./components/DesignFramework'));
 const Theme = React.lazy(() => import('./components/Theme'));
 
-const useStyle = createStyles(() => ({
+const classNames = createStaticStyles(({ css }) => ({
   image: css`
     position: absolute;
     inset-inline-start: 0;
@@ -38,7 +38,6 @@ const locales = {
 
 const Homepage: React.FC = () => {
   const [locale] = useLocale(locales);
-  const { styles } = useStyle();
   const { token } = theme.useToken();
 
   const isDark = React.use(DarkContext);
@@ -78,7 +77,7 @@ const Homepage: React.FC = () => {
           decoration={
             <img
               draggable={false}
-              className={styles.image}
+              className={classNames.image}
               src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
               alt="bg"
             />

.dumi/pages/theme-editor/index.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
 import { App, Button, ConfigProvider, Skeleton, version } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { enUS, zhCN } from 'antd-token-previewer';
 import type { ThemeConfig } from 'antd/es/config-provider/context';
 import { Helmet } from 'dumi';
@@ -9,7 +9,7 @@ import useLocale from '../../hooks/useLocale';
 
 const ThemeEditor = React.lazy(() => import('antd-token-previewer/lib/ThemeEditor'));
 
-const useStyle = createStyles(({ css }) => ({
+const classNames = createStaticStyles(({ css }) => ({
   editor: css`
     svg,
     img {
@@ -49,7 +49,6 @@ const ANT_DESIGN_V5_THEME_EDITOR_THEME = `ant-design-v${antdMajor}-theme-editor-
 const CustomTheme: React.FC = () => {
   const { message } = App.useApp();
   const [locale, lang] = useLocale(locales);
-  const { styles } = useStyle();
 
   const [theme, setTheme] = React.useState<ThemeConfig>(() => {
     try {
@@ -78,7 +77,7 @@ const CustomTheme: React.FC = () => {
             hideAdvancedSwitcher
             theme={{ name: 'Custom Theme', key: 'test', config: theme }}
             style={{ height: 'calc(100vh - 64px)' }}
-            className={styles.editor}
+            className={classNames.editor}
             onThemeChange={(newTheme) => {
               setTheme(newTheme.config);
             }}

.dumi/theme/builtins/Audio/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { SoundOutlined } from '@ant-design/icons';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 
-const useStyle = createStyles(({ css, cssVar }) => {
+const styles = createStaticStyles(({ css, cssVar }) => {
   return {
     playBtn: css`
       display: inline-flex;
@@ -30,7 +30,6 @@ interface AudioProps {
 }
 
 const AudioControl: React.FC<React.PropsWithChildren<AudioProps>> = ({ id, children }) => {
-  const { styles } = useStyle();
   const onClick: React.MouseEventHandler<HTMLAnchorElement> = () => {
     const audio = document.querySelector<HTMLAudioElement>(`#${id}`);
     audio?.play();

.dumi/theme/builtins/ComponentOverview/index.tsx

@@ -2,7 +2,7 @@ import React, { memo, useMemo, useRef, useState } from 'react';
 import type { CSSProperties } from 'react';
 import { SearchOutlined } from '@ant-design/icons';
 import { Affix, Card, Col, Divider, Flex, Input, Row, Tag, Typography } from 'antd';
-import { createStyles, useTheme } from 'antd-style';
+import { createStaticStyles, useTheme } from 'antd-style';
 import { useIntl, useLocation, useSidebarData } from 'dumi';
 import debounce from 'lodash/debounce';
 import scrollIntoView from 'scroll-into-view-if-needed';
@@ -12,7 +12,7 @@ import SiteContext from '../../slots/SiteContext';
 import type { Component } from './ProComponentsList';
 import proComponentsList from './ProComponentsList';
 
-const useStyle = createStyles(({ cssVar, css }) => ({
+const styles = createStaticStyles(({ cssVar, css }) => ({
   componentsOverviewGroupTitle: css`
     margin-bottom: ${cssVar.marginLG} !important;
   `,
@@ -78,7 +78,6 @@ const reportSearch = debounce<(value: string) => void>((value) => {
 const { Title } = Typography;
 
 const Overview: React.FC = () => {
-  const { styles } = useStyle();
   const { isDark } = React.use(SiteContext);
 
   const data = useSidebarData();
@@ -227,7 +226,7 @@ const Overview: React.FC = () => {
                             src={
                               isDark && component.coverDark ? component.coverDark : component.cover
                             }
-                            alt={component.title}
+                            alt=""
                           />
                         </div>
                       </Card>

.dumi/theme/builtins/IconSearch/Category.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { App } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { useIntl } from 'dumi';
 
 import CopyableIcon from './CopyableIcon';
 import type { CategoriesKeys } from './fields';
 import type { ThemeType } from './IconSearch';
 
-const useStyle = createStyles(({ css, cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   anticonsList: css`
     margin: ${cssVar.margin} 0;
     overflow: hidden;
@@ -36,7 +36,6 @@ interface CategoryProps {
 const Category: React.FC<CategoryProps> = (props) => {
   const { message } = App.useApp();
   const { icons, title, newIcons, theme } = props;
-  const { styles } = useStyle();
   const intl = useIntl();
   const [justCopied, setJustCopied] = React.useState<string | null>(null);
   const copyId = React.useRef<ReturnType<typeof setTimeout> | null>(null);

.dumi/theme/builtins/IconSearch/IconSearch.tsx

@@ -2,7 +2,7 @@ import type { CSSProperties } from 'react';
 import React, { useCallback, useMemo, useState } from 'react';
 import Icon, * as AntdIcons from '@ant-design/icons';
 import { Affix, Empty, Input, Segmented } from 'antd';
-import { createStyles, useTheme } from 'antd-style';
+import { createStaticStyles, useTheme } from 'antd-style';
 import type { SegmentedOptions } from 'antd/es/segmented';
 import { useIntl } from 'dumi';
 import debounce from 'lodash/debounce';
@@ -22,7 +22,7 @@ export enum ThemeType {
 
 const allIcons: { [key: string]: any } = AntdIcons;
 
-const useStyle = createStyles(({ css, cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   iconSearchAffix: css`
     display: flex;
     transition: all ${cssVar.motionDurationSlow};
@@ -39,7 +39,6 @@ const NEW_ICON_NAMES: ReadonlyArray<string> = [];
 
 const IconSearch: React.FC = () => {
   const intl = useIntl();
-  const { styles } = useStyle();
   const [displayState, setDisplayState] = useState<IconSearchState>({
     searchKey: '',
     theme: ThemeType.Outlined,

.dumi/theme/builtins/IconSearch/index.tsx

@@ -1,10 +1,10 @@
 import React, { Suspense } from 'react';
 import { Skeleton } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 
 const IconSearch = React.lazy(() => import('./IconSearch'));
 
-const useStyle = createStyles(({ css, cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   searchWrapper: css`
     display: flex;
     gap: ${cssVar.padding};
@@ -34,8 +34,6 @@ const useStyle = createStyles(({ css, cssVar }) => ({
 }));
 
 const IconSearchFallback: React.FC = () => {
-  const { styles } = useStyle();
-
   return (
     <>
       <div className={styles.searchWrapper}>

.dumi/theme/builtins/InstallDependencies/bun.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStyles, css } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
 interface IconProps {
@@ -7,7 +7,7 @@ interface IconProps {
   style?: React.CSSProperties;
 }
 
-const useStyle = createStyles(() => ({
+const classNames = createStaticStyles(({ css }) => ({
   iconWrap: css`
     display: inline-flex;
     align-items: center;
@@ -19,9 +19,8 @@ const useStyle = createStyles(() => ({
 
 const BunIcon: React.FC<IconProps> = (props) => {
   const { className, style } = props;
-  const { styles } = useStyle();
   return (
-    <span className={clsx(styles.iconWrap, className)} style={style}>
+    <span className={clsx(classNames.iconWrap, className)} style={style}>
       <svg id="Bun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 70" width="1em" height="1em">
         <title>Bun Logo</title>
         <path

.dumi/theme/builtins/InstallDependencies/npm.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStyles, css } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
 interface IconProps {
@@ -7,7 +7,7 @@ interface IconProps {
   style?: React.CSSProperties;
 }
 
-const useStyle = createStyles(() => ({
+const classNames = createStaticStyles(({ css }) => ({
   iconWrap: css`
     display: inline-flex;
     align-items: center;
@@ -19,9 +19,8 @@ const useStyle = createStyles(() => ({
 
 const NpmIcon: React.FC<IconProps> = (props) => {
   const { className, style } = props;
-  const { styles } = useStyle();
   return (
-    <span className={clsx(styles.iconWrap, className)} style={style}>
+    <span className={clsx(classNames.iconWrap, className)} style={style}>
       <svg
         fill="#E53E3E"
         focusable="false"

.dumi/theme/builtins/InstallDependencies/pnpm.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStyles, css } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
 interface IconProps {
@@ -7,7 +7,7 @@ interface IconProps {
   style?: React.CSSProperties;
 }
 
-const useStyle = createStyles(() => ({
+const classNames = createStaticStyles(({ css }) => ({
   iconWrap: css`
     display: inline-flex;
     align-items: center;
@@ -19,9 +19,8 @@ const useStyle = createStyles(() => ({
 
 const PnpmIcon: React.FC<IconProps> = (props) => {
   const { className, style } = props;
-  const { styles } = useStyle();
   return (
-    <span className={clsx(styles.iconWrap, className)} style={style}>
+    <span className={clsx(classNames.iconWrap, className)} style={style}>
       <svg
         aria-hidden="true"
         fill="#F69220"

.dumi/theme/builtins/InstallDependencies/yarn.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStyles, css } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
 interface IconProps {
@@ -7,7 +7,7 @@ interface IconProps {
   style?: React.CSSProperties;
 }
 
-const useStyle = createStyles(() => ({
+const classNames = createStaticStyles(({ css }) => ({
   iconWrap: css`
     display: inline-flex;
     align-items: center;
@@ -19,9 +19,8 @@ const useStyle = createStyles(() => ({
 
 const YarnIcon: React.FC<IconProps> = (props) => {
   const { className, style } = props;
-  const { styles } = useStyle();
   return (
-    <span className={clsx(styles.iconWrap, className)} style={style}>
+    <span className={clsx(classNames.iconWrap, className)} style={style}>
       <svg
         aria-hidden="true"
         fill="#2C8EBB"

.dumi/theme/builtins/Previewer/Actions.tsx

@@ -1,7 +1,8 @@
 import React, { Suspense, useRef } from 'react';
-import { LinkOutlined, ThunderboltOutlined } from '@ant-design/icons';
+import { BugOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import stackblitzSdk from '@stackblitz/sdk';
-import { Flex, Tooltip } from 'antd';
+import type { MenuProps } from 'antd';
+import { Button, Dropdown, Flex, Tooltip } from 'antd';
 import { FormattedMessage, useSiteData } from 'dumi';
 import LZString from 'lz-string';
 
@@ -28,8 +29,6 @@ function compress(string: string): string {
 }
 
 interface ActionsProps {
-  showOnlineUrl: boolean;
-  docsOnlineUrl?: string;
   assetId: string;
   title?: string;
   pkgDependencyList: Record<PropertyKey, string>;
@@ -39,11 +38,10 @@ interface ActionsProps {
   onCodeExpand: () => void;
   entryCode: string;
   styleCode: string;
+  debugOptions?: MenuProps['items'];
 }
 
 const Actions: React.FC<ActionsProps> = ({
-  showOnlineUrl,
-  docsOnlineUrl,
   assetId,
   title,
   jsx,
@@ -53,6 +51,7 @@ const Actions: React.FC<ActionsProps> = ({
   pkgDependencyList,
   entryCode,
   styleCode,
+  debugOptions,
 }) => {
   const [, lang] = useLocale();
   const isZhCN = lang === 'cn';
@@ -128,8 +127,8 @@ const Actions: React.FC<ActionsProps> = ({
     editors: '001',
     css: '',
     js_external: [
-      'react@19/cjs/react.development.js',
-      'react-dom@19/cjs/react-dom.development.js',
+      'react@18/umd/react.production.min.js',
+      'react-dom@18/umd/react-dom.production.min.js',
       'dayjs@1/dayjs.min.js',
       `antd@${pkg.version}/dist/antd-with-locales.min.js`,
       `@ant-design/icons/dist/index.umd.js`,
@@ -213,21 +212,15 @@ createRoot(document.getElementById('container')).render(<Demo />);
   });
 
   return (
-    <Flex wrap gap="middle" className="code-box-actions">
-      {/* 在线文档按钮 */}
-      {showOnlineUrl && (
-        <Tooltip title={<FormattedMessage id="app.demo.online" />}>
-          <a
-            className="code-box-code-action"
-            aria-label="open in new tab"
-            target="_blank"
-            rel="noreferrer"
-            href={docsOnlineUrl || ''}
-          >
-            <LinkOutlined className="code-box-online" />
-          </a>
-        </Tooltip>
-      )}
+    <Flex wrap gap="middle" className="code-box-actions" align="center">
+      {
+        // 调试选项
+        debugOptions?.length ? (
+          <Dropdown menu={{ items: debugOptions }} arrow={{ pointAtCenter: true }}>
+            <Button icon={<BugOutlined />} color="purple" variant="filled" size="small" />
+          </Dropdown>
+        ) : null
+      }
       {/* CodeSandbox 按钮 */}
       <form
         className="code-box-code-action"

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { UpOutlined } from '@ant-design/icons';
-import { Badge, Tooltip } from 'antd';
-import { createStyles, css } from 'antd-style';
+import type { MenuProps } from 'antd';
+import { Badge, Tag, Tooltip } from 'antd';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
-import { FormattedMessage, useLiveDemo } from 'dumi';
-
+import { FormattedMessage, useLiveDemo, useSiteData } from 'dumi';
+import { major, minVersion } from 'semver';
 import type { AntdPreviewerProps } from '.';
 import useLocation from '../../../hooks/useLocation';
 import BrowserFrame from '../../common/BrowserFrame';
@@ -12,9 +13,11 @@ import ClientOnly from '../../common/ClientOnly';
 import CodePreview from '../../common/CodePreview';
 import EditButton from '../../common/EditButton';
 import SiteContext from '../../slots/SiteContext';
+import DemoContext from '../../slots/DemoContext';
+import { isOfficialHost } from '../../utils';
 import Actions from './Actions';
 
-const useStyle = createStyles(({ cssVar }) => {
+const styles = createStaticStyles(({ cssVar, css }) => {
   return {
     codeHideBtn: css`
       position: sticky;
@@ -61,8 +64,10 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
     clientOnly,
     pkgDependencyList,
   } = props;
+  const { showDebug } = React.use(DemoContext);
+  const { pkg } = useSiteData();
+
   const location = useLocation();
-  const { styles } = useStyle();
 
   const entryName = 'index.tsx';
   const entryCode = asset.dependencies[entryName].value;
@@ -79,17 +84,15 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
   const anchorRef = useRef<HTMLAnchorElement>(null);
   const [codeExpand, setCodeExpand] = useState<boolean>(false);
   const { isDark } = React.use(SiteContext);
-
   const { hash, pathname, search } = location;
-  const docsOnlineUrl = `https://ant.design${pathname ?? ''}${search ?? ''}#${asset.id}`;
-
-  const [showOnlineUrl, setShowOnlineUrl] = useState<boolean>(false);
 
+  /**
+   * Record whether it is deployed on the official domain name.
+   * Note that window.location.hostname is not available on the server side due to hydration issues
+   */
+  const [deployedOnOfficialHost, setDeployedOnOfficialHost] = useState<boolean>(true);
   useEffect(() => {
-    const regexp = /preview-(\d+)-ant-design/; // matching PR preview addresses
-    setShowOnlineUrl(
-      process.env.NODE_ENV === 'development' || regexp.test(window.location.hostname),
-    );
+    setDeployedOnOfficialHost(isOfficialHost(window.location.hostname));
   }, []);
 
   useEffect(() => {
@@ -102,6 +105,33 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
     setCodeExpand(expand);
   }, [expand]);
 
+  const generateDocUrl = (domain = 'https://ant.design') =>
+    `${domain}${pathname ?? ''}${search ?? ''}#${asset.id}`;
+
+  // Enable "Go Online Docs" only when deployed on non-official domains
+  const enableDocsOnlineUrl = process.env.NODE_ENV === 'development' || !deployedOnOfficialHost;
+
+  // Previous version demos are only available during the maintenance window
+  const [supportsPreviousVersionDemo, previousVersionDomain, previousVersion] = useMemo(() => {
+    const maintenanceDeadline = new Date('2026/12/31');
+
+    if (new Date() > maintenanceDeadline) {
+      return [false, undefined, -1] as const;
+    }
+
+    const currentMajor = major(pkg.version);
+    const previousMajor = Math.min(currentMajor - 1, 5);
+
+    let enabled = true;
+    // If the demo specifies a version, perform an additional check;
+    if (version) {
+      const minVer = minVersion(version);
+      enabled = minVer?.major ? minVer.major < currentMajor : true;
+    }
+
+    return [enabled, `https://${previousMajor}x.ant.design`, previousMajor];
+  }, [version, pkg.version]);
+
   const mergedChildren = !iframe && clientOnly ? <ClientOnly>{children}</ClientOnly> : children;
   const demoUrlWithTheme = useMemo(() => {
     return `${demoUrl}${isDark ? '?theme=dark' : ''}`;
@@ -143,6 +173,47 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
     backgroundColor: background === 'grey' ? backgroundGrey : undefined,
   };
 
+  const debugOptions: MenuProps['items'] = [
+    {
+      key: 'online',
+      label: (
+        <a
+          aria-label="Go to online documentation"
+          href={generateDocUrl()}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <FormattedMessage id="app.demo.online" />
+        </a>
+      ),
+      icon: (
+        <Tag variant="filled" color="blue">
+          ant.design
+        </Tag>
+      ),
+      enabled: enableDocsOnlineUrl,
+    },
+    {
+      key: 'previousVersion',
+      label: (
+        <a
+          aria-label="Go to previous version documentation"
+          href={generateDocUrl(previousVersionDomain)}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <FormattedMessage id="app.demo.previousVersion" values={{ version: previousVersion }} />
+        </a>
+      ),
+      icon: (
+        <Tag variant="filled" color="purple">
+          v{previousVersion}
+        </Tag>
+      ),
+      enabled: supportsPreviousVersionDemo,
+    },
+  ].filter(({ enabled }) => showDebug && enabled);
+
   const codeBox: React.ReactNode = (
     <section className={codeBoxClass} id={asset.id}>
       <section
@@ -174,8 +245,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
             />
           )}
           <Actions
-            showOnlineUrl={showOnlineUrl}
-            docsOnlineUrl={docsOnlineUrl}
+            debugOptions={debugOptions}
             entryCode={entryCode}
             styleCode={style}
             pkgDependencyList={pkgDependencyList}

.dumi/theme/builtins/Previewer/DemoFallback.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Skeleton } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 
-const useStyle = createStyles(({ css, cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   skeletonWrapper: css`
     width: 100% !important;
     height: 250px;
@@ -12,7 +12,6 @@ const useStyle = createStyles(({ css, cssVar }) => ({
 }));
 
 const DemoFallback = () => {
-  const { styles } = useStyle();
   return (
     <Skeleton.Node
       active

.dumi/theme/builtins/Previewer/DesignPreviewer.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import React, { useEffect, useRef } from 'react';
 import { CheckOutlined, SketchOutlined } from '@ant-design/icons';
 import { App } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import copy from '../../../../components/_util/copy';
 import { nodeToGroup } from 'html2sketch';
 
@@ -22,12 +22,12 @@ const locales = {
   },
 };
 
-const useStyle = createStyles(({ cssVar, css }) => ({
+const styles = createStaticStyles(({ cssVar, css }) => ({
   wrapper: css`
     position: relative;
     border: 1px solid ${cssVar.colorBorderSecondary};
     border-radius: ${cssVar.borderRadius};
-    padding: ${cssVar.paddingMD} ${cssVar.paddingLG} ${cssVar.paddingMD * 2};
+    padding: ${cssVar.paddingMD} ${cssVar.paddingLG} calc(${cssVar.paddingMD} * 2);
     margin-bottom: ${cssVar.marginLG};
   `,
   title: css`
@@ -67,12 +67,11 @@ const useStyle = createStyles(({ cssVar, css }) => ({
   `,
   tip: css`
     color: ${cssVar.colorTextTertiary};
-    margin-top: ${cssVar.marginMD * 2};
+    margin-top: calc(${cssVar.marginMD} * 2);
   `,
 }));
 
 const DesignPreviewer: FC<AntdPreviewerProps> = ({ children, title, description, tip, asset }) => {
-  const { styles } = useStyle();
   const demoRef = useRef<HTMLDivElement>(null);
   const [copied, setCopied] = React.useState<boolean>(false);
   const { message } = App.useApp();

.dumi/theme/builtins/RefinedChangelog/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BugOutlined } from '@ant-design/icons';
 import { Button, Flex, Popover, theme } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles, cx } from 'antd-style';
 import dayjs from 'dayjs';
 import type { Dayjs } from 'dayjs';
 
@@ -33,7 +33,7 @@ const locales = {
   },
 };
 
-const useStyle = createStyles(({ cssVar, css }) => ({
+const styles = createStaticStyles(({ cssVar, css }) => ({
   container: css`
     margin-block: ${cssVar.margin};
     padding: ${cssVar.padding};
@@ -49,8 +49,6 @@ const useStyle = createStyles(({ cssVar, css }) => ({
 const RefinedChangelog: React.FC<React.PropsWithChildren<RefinedChangelogProps>> = (props) => {
   const { version, date, children } = props;
 
-  const { styles, cx } = useStyle();
-
   const memoizedValue = React.useMemo<ContextProps>(() => {
     const realVersion = version || '0.0.0';
     const bugVersionInfo = matchDeprecated(realVersion);

.dumi/theme/builtins/Sandpack/index.tsx

@@ -1,7 +1,7 @@
 import React, { Suspense } from 'react';
 import type { SandpackSetup } from '@codesandbox/sandpack-react';
 import { Skeleton } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { useSearchParams } from 'dumi';
 
 import { version } from '../../../../package.json';
@@ -17,7 +17,7 @@ const root = createRoot(document.getElementById("root"));
 root.render(<App />);
 `;
 
-const useStyle = createStyles(({ css, cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   fallback: css`
     width: 100%;
     > * {
@@ -32,7 +32,6 @@ const useStyle = createStyles(({ css, cssVar }) => ({
 }));
 
 const SandpackFallback: React.FC = () => {
-  const { styles } = useStyle();
   return (
     <div className={styles.fallback}>
       <Skeleton.Node active style={{ height: 500, width: '100%' }}>
@@ -83,6 +82,7 @@ const Sandpack: React.FC<React.PropsWithChildren<SandpackProps>> = (props) => {
       <OriginSandpack
         theme={searchParams.getAll('theme').includes('dark') ? 'dark' : undefined}
         customSetup={setup}
+        template="vite-react-ts"
         options={options}
         files={{
           'index.tsx': indexContent,

.dumi/theme/builtins/TokenCompare/index.tsx

@@ -2,13 +2,13 @@
 import React from 'react';
 import { FastColor } from '@ant-design/fast-color';
 import { Flex, theme } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import tokenMeta from 'antd/es/version/token-meta.json';
 import { clsx } from 'clsx';
 
 import useLocale from '../../../hooks/useLocale';
 
-const useStyle = createStyles(({ cssVar, css }) => {
+const styles = createStaticStyles(({ cssVar, css }) => {
   const height = cssVar.controlHeightLG;
   const dotSize = height / 5;
 
@@ -63,7 +63,6 @@ interface ColorCircleProps {
 }
 
 const ColorCircle: React.FC<ColorCircleProps> = ({ color }) => {
-  const { styles } = useStyle();
   return (
     <Flex align="center" gap={4}>
       <div className={styles.dot} style={{ background: color }} />
@@ -79,7 +78,6 @@ export interface TokenCompareProps {
 const TokenCompare: React.FC<TokenCompareProps> = (props) => {
   const { tokenNames = '' } = props;
   const [, lang] = useLocale();
-  const { styles } = useStyle();
 
   const tokenList = React.useMemo(() => {
     const list = tokenNames.split('|');

.dumi/theme/builtins/VideoPlayer/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { PauseCircleFilled, PlayCircleFilled } from '@ant-design/icons';
-import { createStyles, css } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
-const useStyles = createStyles(({ cx, cssVar }) => {
+const styles = createStaticStyles(({ css, cx, cssVar }) => {
   const play = css`
     position: absolute;
     inset-inline-end: ${cssVar.paddingLG};
@@ -45,7 +45,6 @@ const VideoPlayer: React.FC<React.HtmlHTMLAttributes<HTMLVideoElement>> = ({
   className,
   ...restProps
 }) => {
-  const { styles } = useStyles();
   const videoRef = React.useRef<HTMLVideoElement>(null);
   const [playing, setPlaying] = React.useState(false);
 

.dumi/theme/common/BehaviorMap/BehaviorMap.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { createStyles, css } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { useRouteMeta } from 'dumi';
 
 import useLocale from '../../../hooks/useLocale';
@@ -17,12 +17,12 @@ export interface BehaviorMapProps {
   data: BehaviorMapItem;
 }
 
-const useStyle = createStyles(({ cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   container: css`
     width: 100%;
     min-height: 600px;
     height: fit-content;
-    background-color: #f5f5f5;
+    background-color: ${cssVar.colorBgLayout};
     border: 1px solid #e8e8e8;
     border-radius: ${cssVar.borderRadiusLG};
     overflow: hidden;
@@ -54,7 +54,7 @@ const useStyle = createStyles(({ cssVar }) => ({
     inset-inline-end: 20px;
     z-index: 10;
     border-radius: 4px;
-    font-size: 14px;
+    font-size: ${cssVar.fontSize};
   `,
   mvp: css`
     margin-inline-end: ${cssVar.marginMD};
@@ -100,23 +100,27 @@ const locales = {
 
 const BehaviorMap: React.FC<BehaviorMapProps> = ({ data }) => {
   const chartRef = useRef<HTMLDivElement>(null);
-  const { styles } = useStyle();
   const [locale] = useLocale(locales);
   const meta = useRouteMeta();
 
   const mermaidCode = useMermaidCode(data);
 
+  const cancelledRef = useRef<boolean>(false);
+
   useEffect(() => {
-    let isCancelled = false;
+    cancelledRef.current = false;
 
     const renderChart = async () => {
-      if (!chartRef.current || !mermaidCode) return;
+      if (!chartRef.current || !mermaidCode) {
+        return;
+      }
 
       try {
-        const mermaidModule = await import('mermaid');
-        const mermaid = mermaidModule.default;
+        const mermaid = (await import('mermaid')).default;
 
-        if (isCancelled) return;
+        if (cancelledRef.current) {
+          return;
+        }
 
         mermaid.initialize({
           startOnLoad: false,
@@ -130,18 +134,15 @@ const BehaviorMap: React.FC<BehaviorMapProps> = ({ data }) => {
           },
         });
 
-        let mermaidChartCounter = 0;
-        mermaidChartCounter += 1;
-        const id = `mermaid-${Date.now()}-${mermaidChartCounter}`;
+        const id = `mermaid-${Date.now()}`;
 
         const { svg } = await mermaid.render(id, mermaidCode);
 
-        if (!isCancelled && chartRef.current) {
+        if (!cancelledRef.current && chartRef.current) {
           chartRef.current.innerHTML = svg;
         }
-      } catch (error) {
-        if (!isCancelled && chartRef.current) {
-          console.error('Mermaid render error:', error);
+      } catch {
+        if (!cancelledRef.current && chartRef.current) {
           chartRef.current.innerHTML = 'Render Error';
         }
       }
@@ -150,7 +151,7 @@ const BehaviorMap: React.FC<BehaviorMapProps> = ({ data }) => {
     renderChart();
 
     return () => {
-      isCancelled = true;
+      cancelledRef.current = true;
     };
   }, [mermaidCode]);
 

.dumi/theme/common/BehaviorMap/index.tsx

@@ -1,14 +1,14 @@
 import type { FC } from 'react';
 import React, { Suspense } from 'react';
 import { Skeleton } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 
 import useLocale from '../../../hooks/useLocale';
 import type { BehaviorMapProps } from './BehaviorMap';
 
 const InternalBehaviorMap = React.lazy(() => import('./BehaviorMap'));
 
-const useStyle = createStyles(({ cssVar, css }) => ({
+const styles = createStaticStyles(({ cssVar, css }) => ({
   fallback: css`
     width: 100%;
     > * {
@@ -32,7 +32,6 @@ const locales = {
 };
 
 const BehaviorMapFallback: React.FC = () => {
-  const { styles } = useStyle();
   const [locale] = useLocale(locales);
   return (
     <div className={styles.fallback}>

.dumi/theme/common/BehaviorMap/useMermaidCode.ts

@@ -2,50 +2,45 @@ import { useMemo } from 'react';
 
 import type { BehaviorMapItem } from './BehaviorMap';
 
-export const useMermaidCode = (data: BehaviorMapItem): string => {
-  const generateMermaidCode = (root: BehaviorMapItem): string => {
-    const lines: string[] = [];
+const generateMermaidCode = (root: BehaviorMapItem) => {
+  const lines: string[] = [];
 
-    lines.push('graph LR');
+  lines.push('graph LR');
 
-    lines.push(`classDef baseNode fill:#fff,stroke:none,stroke-width:0px,rx:5,ry:5,font-size:14px`);
+  lines.push(`classDef baseNode fill:#fff,stroke:none,stroke-width:0px,rx:5,ry:5,font-size:14px`);
 
-    const traverse = (node: BehaviorMapItem, parentId?: string) => {
-      const safeId = `node_${node.id.replace(/[^a-z0-9]/gi, '_')}`;
-      let labelText = node.label.replace(/"/g, "'");
+  const traverse = (node: BehaviorMapItem, parentId?: string) => {
+    const safeId = `node_${node.id.replace(/[^a-z0-9]/gi, '_')}`;
+    let labelText = node.label.replace(/"/g, "'");
 
-      if (!parentId) {
-        lines.push(`style ${safeId} font-size:16px`);
-        labelText = `**${labelText}**`;
-      } else if (node.targetType === 'mvp') {
-        const blueDot = `<span style="display:inline-block;width:8px;height:8px;background-color:rgb(22, 119, 255);border-radius:50%;margin-right:8px;vertical-align:middle;"></span>`;
-        labelText = `${blueDot}${labelText}`;
-      } else if (node.targetType === 'extension') {
-        const grayDot = `<span style="display:inline-block;width:8px;height:8px;background-color:rgb(160, 160, 160);border-radius:50%;margin-right:8px;vertical-align:middle;"></span>`;
-        labelText = `${grayDot}${labelText}`;
-      }
-      lines.push(`${safeId}["${labelText}"]:::baseNode`);
+    if (!parentId) {
+      lines.push(`style ${safeId} font-size:16px`);
+      labelText = `**${labelText}**`;
+    } else if (node.targetType === 'mvp') {
+      const blueDot = `<span style="display:inline-block;width:8px;height:8px;background-color:rgb(22, 119, 255);border-radius:50%;margin-inline-end:8px;vertical-align:middle;"></span>`;
+      labelText = `${blueDot}${labelText}`;
+    } else if (node.targetType === 'extension') {
+      const grayDot = `<span style="display:inline-block;width:8px;height:8px;background-color:rgb(160, 160, 160);border-radius:50%;margin-inline-end:8px;vertical-align:middle;"></span>`;
+      labelText = `${grayDot}${labelText}`;
+    }
+    lines.push(`${safeId}["${labelText}"]:::baseNode`);
 
-      if (node.link) {
-        lines.push(`click ${safeId} "#${node.link}"`);
-      }
+    if (node.link) {
+      lines.push(`click ${safeId} "#${node.link}"`);
+    }
 
-      if (parentId) {
-        lines.push(`${parentId} --> ${safeId}`);
-      }
+    if (parentId) {
+      lines.push(`${parentId} --> ${safeId}`);
+    }
 
-      if (node.children && node.children.length > 0) {
-        node.children.forEach((child) => traverse(child, safeId));
-      }
-    };
-
-    traverse(root);
-    return lines.join('\n');
+    if (node.children && node.children.length > 0) {
+      node.children.forEach((child) => traverse(child, safeId));
+    }
   };
-
-  const mermaidCode = useMemo(() => {
-    return generateMermaidCode(data);
-  }, [data]);
-
-  return mermaidCode;
+  traverse(root);
+  return lines.join('\n');
+};
+
+export const useMermaidCode = (data: BehaviorMapItem) => {
+  return useMemo(() => generateMermaidCode(data), [data]);
 };

.dumi/theme/common/BezierVisualizer/index.tsx

@@ -20,7 +20,7 @@ const locales = {
   },
 };
 
-const BezierVisualizer = (props: BezierVisualizerProps) => {
+const BezierVisualizer: React.FC<BezierVisualizerProps> = (props) => {
   const { value } = props;
   const [locale] = useLocale(locales);
 

.dumi/theme/common/BrowserFrame.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 
-const useStyle = createStyles(({ cssVar, css }) => ({
+const styles = createStaticStyles(({ cssVar, css }) => ({
   browserMockup: css`
     position: relative;
     border-top: 2em solid rgba(230, 230, 230, 0.7);
@@ -49,7 +49,6 @@ const useStyle = createStyles(({ cssVar, css }) => ({
 }));
 
 const BrowserFrame: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const { styles } = useStyle();
   return <div className={styles.browserMockup}>{children}</div>;
 };
 

.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx

@@ -72,6 +72,7 @@ const useStyle = createStyles(({ cssVar, token, css }) => ({
     font-weight: 600;
     font-size: 20px;
     margin: 0 !important;
+    padding: 0;
   `,
   versionTag: css`
     user-select: none;

.dumi/theme/common/LiveCode.tsx

@@ -1,11 +1,11 @@
 import type { ComponentProps, FC } from 'react';
 import React from 'react';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import SourceCodeEditor from 'dumi/theme-default/slots/SourceCodeEditor';
 
 import LiveError from '../slots/LiveError';
 
-const useStyle = createStyles(({ cssVar, css }) => {
+const styles = createStaticStyles(({ cssVar, css }) => {
   return {
     editor: css`
       // override dumi editor styles
@@ -54,7 +54,6 @@ const LiveCode: FC<
     error: Error | null;
   } & Pick<ComponentProps<typeof SourceCodeEditor>, 'lang' | 'initialValue' | 'onChange'>
 > = (props) => {
-  const { styles } = useStyle();
   return (
     <div className={styles.editor}>
       <SourceCodeEditor

.dumi/theme/common/Loading.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { StyleProvider } from '@ant-design/cssinjs';
 import { ConfigProvider, Flex, Skeleton, Spin } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { useLocation } from 'dumi';
 
 import { Common } from './styles';
 
-const useStyle = createStyles(({ css, cssVar }) => {
+const styles = createStaticStyles(({ css, cssVar }) => {
   return {
     skeletonWrapper: css`
       width: 100%;
@@ -27,8 +27,6 @@ const useStyle = createStyles(({ css, cssVar }) => {
 const Loading: React.FC = () => {
   const { pathname } = useLocation();
 
-  const { styles } = useStyle();
-
   let loadingNode: React.ReactNode = null;
 
   if (

.dumi/theme/common/SelectSemanticTemplate.tsx

@@ -11,6 +11,7 @@ export const locales = {
     suffix: '后缀元素，包含后缀内容的布局和样式，如清除按钮、箭头图标等',
     input: '输入框元素，包含搜索输入框的样式、光标控制、字体继承等搜索相关样式，去除了边框样式',
     content: '多选容器，包含已选项的布局、间距、换行相关样式',
+    clear: '清除按钮元素，包含清除按钮的布局、样式和交互效果',
     item: '多选项元素，包含边框、背景、内边距、外边距样式',
     itemContent: '多选项内容区域，包含文字的省略样式',
     itemRemove: '多选项移除按钮，包含字体相关样式',
@@ -29,6 +30,7 @@ export const locales = {
       'Input element with search input styling, cursor control, font inheritance and other search-related styles. Remove border styles',
     content:
       'Multiple selection container with layout, spacing, and wrapping styles for selected items',
+    clear: 'Clear button element with layout, styling and interactive effects for clear button',
     item: 'Multiple selection item element with border, background, padding, and margin styles',
     itemContent: 'Multiple selection item content area with text ellipsis styles',
     itemRemove: 'Multiple selection item remove button with font-related styles',
@@ -65,11 +67,14 @@ const Block: React.FC<BlockProps> = ({
   ...props
 }) => {
   const divRef = React.useRef<HTMLDivElement>(null);
-  const [value, setValue] = React.useState(defaultValue);
+  // 多选模式下，优先使用 multipleProps 中的 defaultValue
+  const multipleDefaultValue = (multipleProps as any)?.defaultValue;
+  const initialValue = mode === 'single' ? defaultValue : multipleDefaultValue;
+  const [value, setValue] = React.useState(initialValue);
 
   React.useEffect(() => {
-    setValue(defaultValue);
-  }, [mode]);
+    setValue(mode === 'single' ? defaultValue : multipleDefaultValue);
+  }, [mode, defaultValue, multipleDefaultValue]);
 
   return (
     <Flex
@@ -99,7 +104,7 @@ const Block: React.FC<BlockProps> = ({
         options={options}
         {...(mode === 'multiple' ? multipleProps : {})}
         styles={{ popup: { zIndex: 1 } }}
-        maxTagCount="responsive"
+        maxTagCount={process.env.NODE_ENV === 'test' ? 1 : 'responsive'}
         placeholder="Please select"
         allowClear
       />
@@ -142,6 +147,7 @@ const SelectSemanticTemplate: React.FC<SelectSemanticTemplateProps> = ({
           { name: 'prefix', desc: locale.prefix },
           { name: 'content', desc: locale.content },
           { name: 'placeholder', desc: locale.placeholder },
+          { name: 'clear', desc: locale.clear },
           { name: 'input', desc: locale.input },
           { name: 'suffix', desc: locale.suffix },
           { name: 'popup.root', desc: locale['popup.root'] },
@@ -152,11 +158,12 @@ const SelectSemanticTemplate: React.FC<SelectSemanticTemplateProps> = ({
           { name: 'root', desc: locale.root },
           { name: 'prefix', desc: locale.prefix },
           { name: 'content', desc: locale.content },
+          { name: 'placeholder', desc: locale.placeholder },
+          { name: 'clear', desc: locale.clear },
           { name: 'item', desc: locale.item },
           { name: 'itemContent', desc: locale.itemContent },
           { name: 'itemRemove', desc: locale.itemRemove },
           { name: 'input', desc: locale.input },
-          { name: 'placeholder', desc: locale.placeholder },
           { name: 'suffix', desc: locale.suffix },
           { name: 'popup.root', desc: locale['popup.root'] },
           { name: 'popup.list', desc: locale['popup.list'] },

.dumi/theme/common/SemanticPreview.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { InfoCircleOutlined, PushpinOutlined } from '@ant-design/icons';
 import { get, set } from '@rc-component/util';
 import { Button, Col, ConfigProvider, Flex, Popover, Row, Tag, theme, Typography } from 'antd';
-import { createStyles, css } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 import Prism from 'prismjs';
 
@@ -12,7 +12,7 @@ export interface SemanticPreviewInjectionProps {
   classNames?: Record<string, string>;
 }
 
-const useStyle = createStyles(({ cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   container: css`
     position: relative;
     z-index: 0;
@@ -155,8 +155,6 @@ const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
 
   const mergedSemantic = pinSemantic || hoverSemantic;
 
-  const { styles } = useStyle();
-
   const hoveredSemanticClassNames = React.useMemo(() => {
     if (!mergedSemantic) {
       return semanticClassNames;

.dumi/theme/common/ThemeSwitch/PromptDrawer.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
 import { Bubble, Sender } from '@ant-design/x';
+import type { SenderRef } from '@ant-design/x/es/sender';
 import { Drawer, Flex, Typography } from 'antd';
 import type { GetProp } from 'antd';
 
@@ -28,7 +29,8 @@ export interface PromptDrawerProps {
 const PromptDrawer: React.FC<PromptDrawerProps> = ({ open, onClose, onThemeChange }) => {
   const [locale] = useLocale(locales);
   const [inputValue, setInputValue] = useState('');
-  const senderRef = useRef<any>(null);
+
+  const senderRef = useRef<SenderRef>(null);
 
   const [submitPrompt, loading, prompt, resText, cancelRequest] = usePromptTheme(onThemeChange);
 
@@ -51,17 +53,21 @@ const PromptDrawer: React.FC<PromptDrawerProps> = ({ open, onClose, onThemeChang
 
     const nextItems: GetProp<typeof Bubble.List, 'items'> = [
       {
+        key: 1,
+        role: 'user',
         placement: 'end',
         content: prompt,
-        avatar: { icon: <UserOutlined /> },
+        avatar: <UserOutlined />,
         shape: 'corner',
       },
       {
+        key: 2,
+        role: 'system',
         placement: 'start',
         content: resText,
-        avatar: { icon: <AntDesignOutlined /> },
+        avatar: <AntDesignOutlined />,
         loading: !resText,
-        messageRender: (content: string) => (
+        contentRender: (content: string) => (
           <Typography>
             <pre style={{ margin: 0 }}>{content}</pre>
           </Typography>
@@ -71,9 +77,11 @@ const PromptDrawer: React.FC<PromptDrawerProps> = ({ open, onClose, onThemeChang
 
     if (!loading) {
       nextItems.push({
+        key: 3,
+        role: 'divider',
         placement: 'start',
         content: locale.finishTips,
-        avatar: { icon: <AntDesignOutlined /> },
+        avatar: <AntDesignOutlined />,
         shape: 'corner',
       });
     }

.dumi/theme/common/ThemeSwitch/usePromptTheme.ts

@@ -1,6 +1,5 @@
-/* eslint-disable compat/compat */
 import { useRef, useState } from 'react';
-import { XStream } from '@ant-design/x';
+import { XStream } from '@ant-design/x-sdk';
 
 import type { SiteContextProps } from '../../../theme/slots/SiteContext';
 

.dumi/theme/common/TreeSelectSemanticTemplate.tsx

@@ -61,11 +61,14 @@ const Block: React.FC<BlockProps> = ({
   ...props
 }) => {
   const divRef = React.useRef<HTMLDivElement>(null);
-  const [value, setValue] = React.useState(defaultValue);
+  // 多选模式下，优先使用 multipleProps 中的 defaultValue
+  const multipleDefaultValue = (multipleProps as any)?.defaultValue;
+  const initialValue = mode === 'single' ? defaultValue : multipleDefaultValue;
+  const [value, setValue] = React.useState(initialValue);
 
   React.useEffect(() => {
-    setValue(defaultValue);
-  }, [mode]);
+    setValue(mode === 'single' ? defaultValue : multipleDefaultValue);
+  }, [mode, defaultValue, multipleDefaultValue]);
 
   return (
     <Flex
@@ -93,7 +96,7 @@ const Block: React.FC<BlockProps> = ({
         treeData={treeData}
         {...(mode === 'multiple' ? multipleProps : {})}
         styles={{ popup: { zIndex: 1 } }}
-        maxTagCount="responsive"
+        maxTagCount={process.env.NODE_ENV === 'test' ? 1 : 'responsive'}
         placeholder="Please select"
       />
     </Flex>

.dumi/theme/common/VersionUpgrade/ChangeLog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 
 import useLocale from '../../../hooks/useLocale';
 import EN from './en-US.md';
@@ -7,7 +7,7 @@ import CN from './zh-CN.md';
 
 const changeLog = { cn: CN, en: EN };
 
-const useStyle = createStyles(({ css }) => ({
+const classNames = createStaticStyles(({ css }) => ({
   container: css`
     max-height: max(62vh, 500px);
     overflow-y: scroll;
@@ -25,13 +25,11 @@ const useStyle = createStyles(({ css }) => ({
 const ChangeLog = () => {
   const [, lang] = useLocale();
 
-  const { styles } = useStyle();
-
   const validatedLanguage = Object.keys(changeLog).includes(lang) ? lang : 'en';
   const C = changeLog[validatedLanguage];
 
   return (
-    <div className={styles.container}>
+    <div className={classNames.container}>
       <C />
     </div>
   );

.dumi/theme/common/styles/Reset.tsx

@@ -58,6 +58,7 @@ export default () => {
 
         body {
           overflow-x: hidden;
+          scrollbar-width: thin;
           color: ${token.colorText};
           font-size: ${token.fontSize}px;
           font-family: ${token.fontFamily};

.dumi/theme/layouts/SidebarLayout/index.tsx

@@ -1,13 +1,13 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { useSearchParams } from 'dumi';
 
 import CommonHelmet from '../../common/CommonHelmet';
 import Content from '../../slots/Content';
 import Sidebar from '../../slots/Sidebar';
 
-const useStyle = createStyles(({ css, cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   main: css`
     display: flex;
     margin-top: ${cssVar.marginXL};
@@ -15,7 +15,6 @@ const useStyle = createStyles(({ css, cssVar }) => ({
 }));
 
 const SidebarLayout: React.FC<PropsWithChildren> = ({ children }) => {
-  const { styles } = useStyle();
   const [searchParams] = useSearchParams();
   const hideLayout = searchParams.get('layout') === 'false';
   return (

.dumi/theme/locales/en-US.json

@@ -36,7 +36,8 @@
   "app.demo.stackblitz": "Open in Stackblitz",
   "app.demo.codeblock": "Open in Hitu (This feature is only available in the internal network environment)",
   "app.demo.separate": "Open in a new window",
-  "app.demo.online": "Online Address",
+  "app.demo.online": "Official demo",
+  "app.demo.previousVersion": "Previous version",
   "app.home.introduce": "A design system for enterprise-level products. Create an efficient and enjoyable work experience.",
   "app.home.pr-welcome": "💡 It is an alpha version and still in progress. Contribution from community is welcome!",
   "app.home.recommend": "Recommended",

.dumi/theme/locales/zh-CN.json

@@ -36,7 +36,8 @@
   "app.demo.stackblitz": "在 Stackblitz 中打开",
   "app.demo.codeblock": "在海兔中打开（此功能仅在内网环境可用）",
   "app.demo.separate": "在新窗口打开",
-  "app.demo.online": "线上地址",
+  "app.demo.online": "官网示例",
+  "app.demo.previousVersion": "历史版本",
   "app.home.introduce": "企业级产品设计体系，创造高效愉悦的工作体验",
   "app.home.pr-welcome": "💡 当前为 alpha 版本，仍在开发中。欢迎社区一起共建，让 Ant Design 变得更好！",
   "app.home.recommend": "精彩推荐",

.dumi/theme/slots/Content/ColumnCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { RightOutlined, YuqueOutlined, ZhihuOutlined } from '@ant-design/icons';
 import { Button, Card, Divider } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
 import useLocale from '../../../hooks/useLocale';
@@ -10,7 +10,7 @@ import JuejinIcon from '../../../theme/icons/JuejinIcon';
 const ANTD_IMG_URL =
   'https://picx.zhimg.com/v2-3b2bca09c2771e7a82a81562e806be4d.jpg?source=d16d100b';
 
-const useStyle = createStyles(({ cssVar, css }) => ({
+const styles = createStaticStyles(({ cssVar, css }) => ({
   card: css`
     width: 100%;
     margin: calc(${cssVar.marginMD} * 2) 0;
@@ -113,19 +113,17 @@ interface Props {
 const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
   const [locale] = useLocale(locales);
   const {
-    styles: {
-      card,
-      bigTitle,
-      cardBody,
-      leftCard,
-      title,
-      subTitle,
-      logo,
-      arrowIcon,
-      zlBtn,
-      discussLogo,
-    },
-  } = useStyle();
+    card,
+    bigTitle,
+    cardBody,
+    leftCard,
+    title,
+    subTitle,
+    logo,
+    arrowIcon,
+    zlBtn,
+    discussLogo,
+  } = styles;
   if (!zhihuLink && !yuqueLink && !juejinLink) {
     return null;
   }

.dumi/theme/slots/Content/Contributors.tsx

@@ -1,13 +1,13 @@
 import React, { Suspense } from 'react';
 import ContributorsList from '@qixian.cs/github-contributors-list';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 import { useIntl } from 'dumi';
 
 import SiteContext from '../SiteContext';
 import ContributorAvatar from './ContributorAvatar';
 
-const useStyle = createStyles(({ cssVar, css }) => ({
+const styles = createStaticStyles(({ cssVar, css }) => ({
   listMobile: css`
     margin: 1em 0 !important;
   `,
@@ -48,7 +48,6 @@ const blockList = [
 
 const Contributors: React.FC<ContributorsProps> = ({ filename }) => {
   const { formatMessage } = useIntl();
-  const { styles } = useStyle();
   const { isMobile } = React.use(SiteContext);
 
   if (!filename) {

.dumi/theme/slots/Footer/AdditionalInfo.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { removeCSS, updateCSS } from '@rc-component/util/lib/Dom/dynamicCSS';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 
 import useLocale from '../../../hooks/useLocale';
 
@@ -20,7 +20,7 @@ const locales = {
   },
 };
 
-const useStyle = createStyles(({ css, cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   container: css`
     position: fixed;
     inset-inline-start: 0;
@@ -80,8 +80,6 @@ const InfoNewVersion: React.FC = () => {
     removeCSS(whereCls);
   }, []);
 
-  const { styles } = useStyle();
-
   if (supportWhere) {
     return null;
   }

.dumi/theme/slots/Header/SwitchBtn.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { omit } from '@rc-component/util';
 import { Button, Tooltip } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
 export interface SwitchBtnProps {
@@ -18,7 +18,7 @@ export interface SwitchBtnProps {
 
 const BASE_SIZE = '1.2em';
 
-const useStyle = createStyles(({ cssVar, css }) => {
+const styles = createStaticStyles(({ cssVar, css }) => {
   return {
     btn: css`
       width: ${cssVar.controlHeight};
@@ -65,9 +65,7 @@ const useStyle = createStyles(({ cssVar, css }) => {
 const SwitchBtn: React.FC<SwitchBtnProps> = (props) => {
   const { label1, label2, tooltip1, tooltip2, value, pure, onClick, ...rest } = props;
 
-  const {
-    styles: { btn, innerDiv, labelStyle, label1Style, label2Style },
-  } = useStyle();
+  const { btn, innerDiv, labelStyle, label1Style, label2Style } = styles;
 
   const node = (
     <Button

.dumi/theme/slots/Header/index.tsx

@@ -2,11 +2,14 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { GithubOutlined, MenuOutlined } from '@ant-design/icons';
 import { Alert, Button, Col, ConfigProvider, Popover, Row, Select, Tooltip } from 'antd';
 import { createStyles } from 'antd-style';
+import type { DefaultOptionType } from 'antd/es/select';
 import { clsx } from 'clsx';
 import dayjs from 'dayjs';
 import { useLocation, useSiteData } from 'dumi';
 import DumiSearchBar from 'dumi/theme-default/slots/SearchBar';
+import useSWR from 'swr';
 
+import versionsFile from '../../../../public/versions.json';
 import useLocale from '../../../hooks/useLocale';
 import useLocalStorage from '../../../hooks/useLocalStorage';
 import { getBannerData } from '../../../pages/index/components/util';
@@ -14,7 +17,6 @@ import ThemeSwitch from '../../common/ThemeSwitch';
 import DirectionIcon from '../../icons/DirectionIcon';
 import { ANT_DESIGN_NOT_SHOW_BANNER } from '../../layouts/GlobalLayout';
 import * as utils from '../../utils';
-import { getThemeConfig } from '../../utils';
 import SiteContext from '../SiteContext';
 import type { SharedProps } from './interface';
 import Logo from './Logo';
@@ -132,7 +134,8 @@ const useStyle = createStyles(({ cssVar, token, css }) => {
       }
     `,
     versionSelect: css`
-      min-width: 90px;
+      width: 112px;
+      min-width: 112px; // 这个宽度需要和 Empty 状态的宽度保持一致
       .rc-virtual-list {
         .rc-virtual-list-holder {
           scrollbar-width: thin;
@@ -149,19 +152,56 @@ interface HeaderState {
   searching: boolean;
 }
 
+interface VersionItem {
+  version: string;
+  url: string;
+  chineseMirrorUrl?: string;
+}
+
+const fetcher = (...args: Parameters<typeof fetch>) => {
+  return fetch(...args).then((res) => res.json());
+};
+
 // ================================= Header =================================
 const Header: React.FC = () => {
   const [, lang] = useLocale();
 
   const { pkg } = useSiteData();
 
-  const themeConfig = getThemeConfig();
+  const isChineseMirror =
+    typeof window !== 'undefined' && typeof window.location !== 'undefined'
+      ? window.location.hostname.includes('.antgroup.com')
+      : false;
+
+  const { data: versions = [], isLoading } = useSWR<VersionItem[]>(
+    process.env.NODE_ENV === 'production' && typeof window !== 'undefined'
+      ? `${window.location.origin}/versions.json`
+      : null,
+    fetcher,
+    {
+      fallbackData: versionsFile,
+      errorRetryCount: 3,
+    },
+  );
+
+  const versionOptions = useMemo(() => {
+    if (isLoading) {
+      return [];
+    }
+    return versions.map<DefaultOptionType>((item) => {
+      const isMatch = item.version.startsWith(pkg.version[0]);
+      const label = isMatch ? pkg.version : item.version;
+      const value = isChineseMirror && item.chineseMirrorUrl ? item.chineseMirrorUrl : item.url;
+      return { value, label };
+    });
+  }, [versions, isLoading, pkg.version, isChineseMirror]);
 
   const [headerState, setHeaderState] = useState<HeaderState>({
     menuVisible: false,
     windowWidth: 1400,
     searching: false,
   });
+
   const { direction, isMobile, bannerVisible, updateSiteConfig } = React.use(SiteContext);
   const pingTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const location = useLocation();
@@ -258,14 +298,6 @@ const Header: React.FC = () => {
   );
 
   const { menuVisible, windowWidth, searching } = headerState;
-  const docVersions: Record<string, string> = {
-    [pkg.version]: pkg.version,
-    ...themeConfig?.docVersions,
-  };
-  const versionOptions = Object.keys(docVersions).map((version) => ({
-    value: docVersions[version],
-    label: version,
-  }));
 
   const isHome = ['', 'index', 'index-cn'].includes(pathname);
   const isZhCN = lang === 'cn';
@@ -308,6 +340,7 @@ const Header: React.FC = () => {
       key="version"
       size="small"
       variant="filled"
+      loading={isLoading}
       className={styles.versionSelect}
       defaultValue={pkg.version}
       onChange={handleVersionChange}

.dumi/theme/themeConfig.ts

@@ -1,6 +1,3 @@
-const chineseMirror =
-  typeof location !== 'undefined' && location.hostname.includes('.antgroup.com');
-
 export default {
   categoryOrder: {
     'Ant Design': 0,
@@ -45,15 +42,4 @@ export default {
     模板文档: 3,
     'Template Document': 3,
   },
-  docVersions: {
-    '5.x': chineseMirror ? 'https://5x-ant-design.antgroup.com' : 'https://5x.ant.design',
-    '4.x': chineseMirror ? 'https://4x-ant-design.antgroup.com' : 'https://4x.ant.design',
-    '3.x': 'https://3x.ant.design',
-    '2.x': 'https://2x.ant.design',
-    '1.x': 'https://1x.ant.design',
-    '0.12.x': 'https://012x.ant.design',
-    '0.11.x': 'https://011x.ant.design',
-    '0.10.x': 'https://010x.ant.design',
-    '0.9.x': 'https://09x.ant.design',
-  },
 };

.dumi/theme/utils/index.ts

@@ -3,7 +3,6 @@ import flattenDeep from 'lodash/flattenDeep';
 import semver from 'semver';
 
 import deprecatedVersions from '../../../BUG_VERSIONS.json';
-import themeConfig from '../themeConfig';
 
 interface Meta {
   skip?: boolean;
@@ -206,4 +205,12 @@ export function matchDeprecated(v: string): MatchDeprecatedResult {
   };
 }
 
-export const getThemeConfig = () => themeConfig;
+/**
+ * Determine if a hostname is an official domain.
+ * antd creates a temporary preview site for each PR for convenient preview and testing.
+ * Usually on platforms like surge.sh or Cloudflare Pages.
+ */
+export function isOfficialHost(hostname: string) {
+  const officialHostnames = ['ant.design', 'antgroup.com'];
+  return officialHostnames.some((official) => hostname.includes(official));
+}

.dumirc.ts

@@ -160,18 +160,27 @@ export default defineConfig({
       }
 
       // 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
-      if (pathname === '/' || pathname === '/index-cn') {
-        const lang =
-          (window.localStorage && localStorage.getItem('locale')) ||
-          ((navigator.language || navigator.browserLanguage).toLowerCase() === 'zh-cn'
+      const normalizedPathname = pathname || '/';
+      if (normalizedPathname === '/' || normalizedPathname === '/index-cn') {
+        let lang;
+        if (window.localStorage) {
+          const antLocale = localStorage.getItem('ANT_LOCAL_TYPE_KEY');
+          // 尝试解析 JSON，因为可能是被序列化后存储的 "en-US" / en-US https://github.com/ant-design/ant-design/issues/56606
+          try {
+            lang = antLocale ? JSON.parse(antLocale) : localStorage.getItem('locale');
+          } catch (e) {
+            lang = antLocale ? antLocale : localStorage.getItem('locale');
+          }
+        }
+        lang = lang || ((navigator.language || navigator.browserLanguage).toLowerCase() === 'zh-cn'
             ? 'zh-CN'
             : 'en-US');
         // safari is 'zh-cn', while other browser is 'zh-CN';
-        if ((lang === 'zh-CN') !== isZhCN(pathname)) {
-          location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
+        if ((lang === 'zh-CN') !== isZhCN(normalizedPathname)) {
+          location.pathname = getLocalizedPathname(normalizedPathname, lang === 'zh-CN');
         }
       }
-      document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
+      document.documentElement.className += isZhCN(normalizedPathname) ? 'zh-cn' : 'en-us';
     })();
     `,
   ],

.github/dependabot.yml

@@ -33,3 +33,7 @@ updates:
       - github-actions
       - dependencies
       - skip-verify-files
+    ignore:
+      # `actions/upload-artifact` modify the upload logic
+      # which can not correct download by `dawidd6/action-download-artifact`
+      - dependency-name: actions/upload-artifact

.github/workflows/discussion-open-check.yml

@@ -11,7 +11,7 @@ jobs:
   discussion-create:
     permissions:
       contents: read  # for visiky/dingtalk-release-notify to get latest release
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: send to dingtalk
         uses: visiky/dingtalk-release-notify@main
@@ -21,8 +21,8 @@ jobs:
             ${{ secrets.DINGDING_BOT_COLLABORATOR_TOKEN }}
           notify_title: '🔥 @${{ github.event.discussion.user.login }} 创建了讨论：${{ github.event.discussion.title }} ${{ github.event.discussion.html_url }}'
           notify_body: |
-            ### 🔥 [@${{ github.event.discussion.user.login }}](https://github.com/${{ github.event.discussion.user.login }}) 开启了一个讨论：
-            [${{ github.event.discussion.title }}](${{ github.event.discussion.html_url }})
+            ### 🔥 ![](${{ github.event.discussion.user.avatar_url }}&s=36) [@${{ github.event.discussion.user.login }}](https://github.com/${{ github.event.discussion.user.login }}) 开启了一个讨论：
+            [${{ github.event.discussion.title }} · Discussion #${{ github.event.discussion.number }}](${{ github.event.discussion.html_url }})
             <hr />
           notify_footer: '> 🫵🏻 欢迎前往 GitHub 进行讨论，社区需要你的帮助！'
           at_all: false # whether to ding everybody

.github/workflows/issue-check-inactive.yml

@@ -12,7 +12,7 @@ jobs:
     permissions:
       issues: write  # for actions-cool/issues-helper to update issues
       pull-requests: write  # for actions-cool/issues-helper to update PRs
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: check-inactive
         uses: actions-cool/issues-helper@v3

.github/workflows/issue-close-require.yml

@@ -12,7 +12,7 @@ jobs:
     permissions:
       issues: write  # for actions-cool/issues-helper to update issues
       pull-requests: write  # for actions-cool/issues-helper to update PRs
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: need reproduce
         uses: actions-cool/issues-helper@v3

.github/workflows/issue-inactivity-reminder.yml

@@ -9,7 +9,7 @@ permissions:
 
 jobs:
   reminder_job:
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: Send reminders for inactive issues
         uses: actions/github-script@v8

.github/workflows/issue-labeled.yml

@@ -14,7 +14,7 @@ jobs:
     permissions:
       issues: write  # for actions-cool/issues-helper to update issues
       pull-requests: write  # for actions-cool/issues-helper to update PRs
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: help wanted
         if: github.event.label.name == 'help wanted'

.github/workflows/issue-open-check.yml

@@ -13,7 +13,7 @@ jobs:
       contents: read  # for visiky/dingtalk-release-notify to get latest release
       issues: write  # for actions-cool/issues-helper to update issues
       pull-requests: write  # for actions-cool/issues-helper to update PRs
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - uses: actions-cool/check-user-permission@v2
         id: checkUser
@@ -101,8 +101,8 @@ jobs:
             ${{ secrets.DINGDING_BOT_COLLABORATOR_TOKEN }}
           notify_title: '🔥 @${{ github.event.issue.user.login }} 创建了 issue：${{ github.event.issue.title }} ${{ github.event.issue.html_url }}'
           notify_body: |
-            ### 🔥 [@${{ github.event.issue.user.login }}](https://github.com/${{ github.event.issue.user.login }}) 创建了 issue：
-            [${{ github.event.issue.title }}](${{ github.event.issue.html_url }})
+            ### 🔥 ![](${{ github.event.issue.user.avatar_url }}&s=36) [@${{ github.event.issue.user.login }}](https://github.com/${{ github.event.issue.user.login }}) 创建了 issue：
+            [${{ github.event.issue.title }} · Issue #${{ github.event.issue.number }}](${{ github.event.issue.html_url }})
             <hr />
           notify_footer: '> 🫵🏻 欢迎前往 GitHub 进行讨论，社区需要你的帮助！'
           at_all: false # whether to ding everybody

.github/workflows/issue-remove-inactive.yml

@@ -14,7 +14,7 @@ jobs:
     permissions:
       issues: write  # for actions-cool/issues-helper to update issues
       pull-requests: write  # for actions-cool/issues-helper to update PRs
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: remove inactive
         if: github.event.issue.state == 'open' && github.actor == github.event.issue.user.login

.github/workflows/issue-schedule.yml

@@ -6,7 +6,7 @@ on:
 
 jobs:
   send-message:
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: Send Unconfirmed Issues to DingTalk
         uses: actions/github-script@v8
@@ -42,7 +42,7 @@ jobs:
             const data = await response.json();
             const issueList = [];
             for (const item of data.items) {
-                const { created_at, html_url, pull_request, state, title, labels } = item;
+                const { created_at, html_url, pull_request, state, title, labels, number } = item;
                 const createdAt = new Date(created_at);
                 const now = new Date();
                 const diffTime = Math.abs(now - createdAt);
@@ -60,6 +60,7 @@ jobs:
 
                 if (!pull_request && !html_url.includes('pull') && state === 'open') {
                     issueList.push({
+                        number,
                         html_url,
                         created_at,
                         title
@@ -70,7 +71,7 @@ jobs:
             const actionTitle = process.env.actionTitle + `(${issueList.length})`;
 
             const markdownList = `## ${actionTitle}\n\n`
-            + issueList.map(issue => `- [${issue.title}](${issue.html_url}) ${fromNow(issue.created_at)}`).join('\n')
+            + issueList.map(issue => `- ${fromNow(issue.created_at)} [#${issue.number} ${issue.title}](${issue.html_url})`).join('\n')
             + `\n\n > 🫵🏻 快去帮忙处理吧，社区需要你的帮助！`;
 
             console.log(markdownList);

.github/workflows/mock-project-build.yml

@@ -14,7 +14,7 @@ concurrency:
 jobs:
   pr-check-ci:
     if: github.repository == 'ant-design/ant-design'
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     name: Build Project
     steps:
       - name: checkout

.github/workflows/pkg.pr.new.yml

@@ -3,7 +3,7 @@ on: [push, pull_request]
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
 
     steps:
       - name: Checkout code

.github/workflows/pr-auto-merge.yml

@@ -16,7 +16,7 @@ jobs:
       contents: write  # for actions-cool/check-pr-ci to merge PRs
       issues: write  # for actions-cool/check-pr-ci to update issues
       pull-requests: write  # for actions-cool/check-pr-ci to update PRs
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - uses: actions-cool/check-pr-ci@v1
         with:
@@ -24,7 +24,7 @@ jobs:
           filter-creator-authority: write
           filter-head-ref: 'master, feature, next, master-merge-feature, feature-merge-master, next-merge-master, next-merge-feature'
           filter-support-fork: false
-          skip-run-names: 'deploy preview, deploy-to-pages, pr-check-ci, upstream workflow summary, suggest-related-links, download visual-regression report'
+          skip-run-names: 'deploy preview, deploy-to-pages, pr-check-ci, upstream workflow summary, suggest-related-links, download visual-regression report, issue-open-check'
           conflict-review-body: 😅 This branch has conflicts that must be resolved!
           success-review: true
           success-merge: true

.github/workflows/pr-check-merge.yml

@@ -12,10 +12,10 @@ jobs:
     permissions:
       issues: write  # for actions-cool/issues-helper to update issues
       pull-requests: write  # for actions-cool/issues-helper to update PRs
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     if: (github.event.pull_request.head.ref == 'next' || github.event.pull_request.head.ref == 'feature' || github.event.pull_request.head.ref == 'master') && github.event.pull_request.head.user.login == 'ant-design'
     steps:
-      - uses: actions-cool/issues-helper@cbca8dff5d68beaba6fa47e9f49608ed2de544d6
+      - uses: actions-cool/issues-helper@e2ff99831a4f13625d35064e2b3dfe65c07a0396
         with:
           actions: create-comment
           issue-number: ${{ github.event.number }}

.github/workflows/pr-contributor-welcome.yml

@@ -17,7 +17,7 @@ jobs:
       issues: write  # for actions-cool/maintain-one-comment to modify or create issue comments
       pull-requests: write  # for actions-cool/maintain-one-comment to modify or create PR comments
     if: github.event.pull_request.merged == true && github.repository == 'ant-design/ant-design'
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: get commit count
         id: get_commit_count

.github/workflows/pr-open-check.yml

@@ -12,7 +12,7 @@ jobs:
     permissions:
       issues: write  # for actions-cool/pr-welcome to create, update & react on issues
       pull-requests: write  # for actions-cool/pr-welcome to request reviewer
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - uses: actions-cool/pr-welcome@4bd317d60ef3b40a3ccda39c22f66c3358010f92
         with:
@@ -30,7 +30,7 @@ jobs:
   check-changelog:
     permissions:
       pull-requests: write  # for actions-cool/pr-check-fill to create or update PR comments
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: check fill
         uses: actions-cool/pr-check-fill@35194e32fd717c88c4fde15fbde9005933c2d452

.github/workflows/pr-open-notify.yml

@@ -9,7 +9,7 @@ permissions:
 
 jobs:
   send-to-dingtalk:
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: send to dingtalk
         uses: visiky/dingtalk-release-notify@64fcb0373782b6c2f6d9b9ea3c68af80ca189585
@@ -19,8 +19,8 @@ jobs:
             ${{ secrets.DINGDING_BOT_COLLABORATOR_TOKEN }}
           notify_title: '🔥 @${{ github.event.pull_request.user.login }} 创建了 PR：${{ github.event.pull_request.title }} ${{ github.event.pull_request.html_url }}'
           notify_body: |
-            ### 🔥 [@${{ github.event.pull_request.user.login }}](https://github.com/${{ github.event.pull_request.user.login }}) 创建了 PR：
-            [${{ github.event.pull_request.title }}](${{ github.event.pull_request.html_url }})
+            ### 🔥 ![](${{ github.event.pull_request.user.avatar_url }}&s=36) [@${{ github.event.pull_request.user.login }}](https://github.com/${{ github.event.pull_request.user.login }}) 创建了 PR：
+            [${{ github.event.pull_request.title }} · PR #${{ github.event.pull_request.number }}](${{ github.event.pull_request.html_url }})
             <hr />
           notify_footer: '> 🫵🏻 快去 Review 吧，社区需要你的帮助！'
           at_all: false # whether to ding everybody

.github/workflows/preview-deploy.yml

@@ -14,7 +14,7 @@ permissions:
 jobs:
   upstream-workflow-summary:
     name: upstream workflow summary
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     if: github.event.workflow_run.event == 'pull_request'
     outputs:
       jobs: ${{ steps.prep-summary.outputs.result }}
@@ -57,13 +57,13 @@ jobs:
       actions: read # for dawidd6/action-download-artifact to query and download artifacts
       issues: write # for actions-cool/maintain-one-comment to modify or create issue comments
       pull-requests: write # for actions-cool/maintain-one-comment to modify or create PR comments
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     needs: upstream-workflow-summary
     if: github.event.workflow_run.event == 'pull_request'
     steps:
       # We need get PR id first
       - name: download pr artifact
-        uses: dawidd6/action-download-artifact@v11
+        uses: dawidd6/action-download-artifact@v14
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -83,7 +83,7 @@ jobs:
       # Download site artifact
       - name: download site artifact
         if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
-        uses: dawidd6/action-download-artifact@v11
+        uses: dawidd6/action-download-artifact@v14
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}

.github/workflows/preview-start.yml

@@ -19,7 +19,7 @@ jobs:
       issues: write  # for actions-cool/maintain-one-comment to modify or create issue comments
       pull-requests: write  # for actions-cool/maintain-one-comment to modify or create PR comments
     name: start preview info
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: update status comment
         uses: actions-cool/maintain-one-comment@4b2dbf086015f892dcb5e8c1106f5fccd6c1476b

.github/workflows/release-dingtalk.yml

@@ -18,7 +18,7 @@ jobs:
     permissions:
       contents: write  # for actions-cool/release-helper to create releases
     if: github.event.ref_type == 'tag'
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: Send to Ant Design DingGroup
         uses: actions-cool/release-helper@v2
@@ -48,7 +48,7 @@ jobs:
           dingding-msg: CHANGELOG.zh-CN.md
           dingding-delay-minute: 10
           release: false
-          conch-tag: 'conch-v5, conch'
+          conch-tag: 'conch-v6, conch-v5, conch'
           antd-conch-msg: 🐟 当前 Bigfish 内嵌 antd 版本：
           msg-title: '# Ant Design {{v}} 发布日志'
           msg-poster: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ'

.github/workflows/release-x.yml

@@ -5,7 +5,7 @@ on:
 
 jobs:
   tweet:
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     if: ${{ github.event.ref_type == 'tag' && !contains(github.event.ref, 'alpha') }}
     steps:
       - name: Tweet

.github/workflows/site-deploy.yml

@@ -57,7 +57,7 @@ jobs:
         run: echo "VERSION=$(echo ${{ github.ref_name }} | sed 's/\./-/g')" >> $GITHUB_OUTPUT
 
   deploy-to-pages:
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     needs: build-site
     steps:
       - uses: utooland/setup-utoo@v1
@@ -101,7 +101,7 @@ jobs:
 
   # https://github.com/ant-design/ant-design/pull/49213/files#r1625446496
   upload-to-release:
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     # 仅在 tag 的时候工作，因为我们要将内容发布到以 tag 为版本号的 release 里
     if: startsWith(github.ref, 'refs/tags/')
     needs: build-site

.github/workflows/size-limit.yml

@@ -13,7 +13,7 @@ jobs:
     permissions:
       contents: read
       pull-requests: write
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
 
     steps:
       - uses: actions/checkout@v6

.github/workflows/sync-gitee.yml

@@ -19,7 +19,7 @@ jobs:
   mirror:
     permissions:
       contents: none
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     if: github.repository == 'ant-design/ant-design'
     steps:
       - name: mirror

.github/workflows/test-v6.yml

@@ -1,231 +0,0 @@
-# Origin Source
-# https://github.com/ant-design/ant-design/blob/79f566b7f8abb1012ef55b0d2793bfdf5595b85d/.github/workflows/test.yml
-name: ✅ test v6
-
-on:
-  push:
-    branches: [next]
-  pull_request:
-    branches: [next]
-
-# Cancel prev CI if new commit come
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: utooland/setup-utoo@v1
-      - run: ut install
-      - run: ut lint
-
-  ################################ Test ################################
-  test-react-legacy:
-    name: test-react-legacy
-    strategy:
-      matrix:
-        react: ['18']
-        shard: [1/2, 2/2]
-    env:
-      REACT: ${{ matrix.react }}
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: utooland/setup-utoo@v1
-      - run: ut
-      - name: install react 18
-        if: ${{ matrix.react == '18' }}
-        run: ut ut-install-react-18
-      # dom test
-      - name: dom test
-        run: ut test -- --maxWorkers=2 --shard=${{matrix.shard}}
-
-  test-node:
-    name: test-node
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: utooland/setup-utoo@v1
-      - run: ut install
-      - run: ut run test:node
-
-  test-react-latest:
-    name: test-react-latest
-    strategy:
-      matrix:
-        module: [dom]
-        shard: [1/2, 2/2]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: utooland/setup-utoo@v1
-      - run: ut install --ignore-scripts
-
-      # dom test
-      - name: dom test
-        run: ut test -- --maxWorkers=2 --shard=${{matrix.shard}} --coverage
-
-      - name: persist coverages
-        run: |
-          mkdir persist-coverage
-          mv coverage/coverage-final.json persist-coverage/react-test-${{matrix.module}}-${{strategy.job-index}}.json
-
-      - uses: actions/upload-artifact@v4
-        name: upload coverages
-        with:
-          name: coverage-artifacts-${{ matrix.module }}-${{ strategy.job-index }}
-          path: persist-coverage/
-
-  test-react-latest-dist:
-    name: test-react-latest-dist
-    strategy:
-      matrix:
-        module: [dist, dist-min]
-        shard: [1/2, 2/2]
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - uses: actions/checkout@v6
-      - uses: utooland/setup-utoo@v1
-      - run: ut
-
-      - name: restore cache from dist
-        uses: actions/cache@v5
-        with:
-          path: dist
-          key: dist-${{ github.sha }}
-
-      - name: dist-min test
-        if: ${{ matrix.module == 'dist-min' }}
-        run: ut test
-        env:
-          LIB_DIR: dist-min
-
-      - name: dist test
-        if: ${{ matrix.module == 'dist' }}
-        run: ut test
-        env:
-          LIB_DIR: dist
-
-  ############################ Test Coverage ###########################
-  upload-test-coverage:
-    name: test-coverage
-    runs-on: ubuntu-latest
-    needs: test-react-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: utooland/setup-utoo@v1
-      - uses: actions/download-artifact@v7
-        with:
-          pattern: coverage-artifacts-*
-          merge-multiple: true
-          path: persist-coverage
-      - name: Merge Code Coverage
-        run: |
-          utx nyc merge persist-coverage/ coverage/coverage-final.json
-          utx nyc report --reporter text -t coverage --report-dir coverage
-          rm -rf persist-coverage
-      - name: Upload coverage to codecov
-        uses: codecov/codecov-action@v5
-        with:
-          # use own token to upload coverage reports
-          token: ${{ secrets.CODECOV_TOKEN }}
-
-  ########################### Compile & Test ###########################
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: utooland/setup-utoo@v1
-      - run: ut
-
-      - name: cache lib
-        uses: actions/cache@v5
-        with:
-          path: lib
-          key: lib-${{ github.sha }}
-
-      - name: cache es
-        uses: actions/cache@v5
-        with:
-          path: es
-          key: es-${{ github.sha }}
-
-      - name: compile
-        run: ut compile
-
-      - name: cache dist
-        uses: actions/cache@v5
-        with:
-          path: dist
-          key: dist-${{ github.sha }}
-
-      - name: dist
-        run: ut dist
-        env:
-          NODE_OPTIONS: --max_old_space_size=4096
-          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
-          CI: 1
-
-      - name: check build files
-        run: ut test:dekko
-
-      # Artifact build files
-      - uses: actions/upload-artifact@v4
-        if: github.event_name == 'push' && github.ref == 'refs/heads/next'
-        with:
-          name: build artifacts
-          path: |
-            dist
-            locale
-            es
-            lib
-
-      - name: zip builds
-        if: github.repository == 'ant-design/ant-design' && github.event_name == 'push' && github.ref == 'refs/heads/next'
-        env:
-          ALI_OSS_AK_ID: ${{ secrets.ALI_OSS_AK_ID }}
-          ALI_OSS_AK_SECRET: ${{ secrets.ALI_OSS_AK_SECRET }}
-          HEAD_SHA: ${{ github.sha }}
-        run: |
-          zip -r oss-artifacts.zip dist locale es lib
-          echo "🤖 Uploading"
-          node scripts/visual-regression/upload.js ./oss-artifacts.zip --ref=$HEAD_SHA
-
-  test-lib-es:
-    name: test lib/es module
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        module: [lib, es]
-        shard: [1/2, 2/2]
-    steps:
-      - uses: actions/checkout@v6
-      - uses: utooland/setup-utoo@v1
-      - run: ut
-
-      - name: restore cache from ${{ matrix.module }}
-        # lib only run in master branch not in pull request
-        if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
-        uses: actions/cache@v5
-        with:
-          path: ${{ matrix.module }}
-          key: ${{ matrix.module }}-${{ github.sha }}
-
-      - name: compile
-        # lib only run in master branch not in pull request
-        if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
-        run: ut compile
-
-      - name: test
-        # lib only run in master branch not in pull request
-        if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
-        run: ut test -- --maxWorkers=2 --shard=${{matrix.shard}}
-        env:
-          LIB_DIR: ${{ matrix.module }}

.github/workflows/test.yml

@@ -18,7 +18,7 @@ permissions:
 
 jobs:
   lint:
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - uses: actions/checkout@v6
       - uses: utooland/setup-utoo@v1
@@ -34,24 +34,19 @@ jobs:
         shard: [1/2, 2/2]
     env:
       REACT: ${{ matrix.react }}
-    runs-on: ubuntu-latest
+      SKIP_SEMANTIC: '1'
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - uses: actions/checkout@v6
       - uses: utooland/setup-utoo@v1
       - run: ut
-      - name: install react 16
-        if: ${{ matrix.react == '16' }}
-        run: ut bun-install-react-16
-      - name: install react 17
-        if: ${{ matrix.react == '17' }}
-        run: ut bun-install-react-17
       # dom test
       - name: dom test
         run: ut test -- --maxWorkers=2 --shard=${{matrix.shard}} --coverage
 
   test-node:
     name: test-node
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - uses: actions/checkout@v6
       - uses: utooland/setup-utoo@v1
@@ -64,7 +59,7 @@ jobs:
       matrix:
         module: [dom]
         shard: [1/2, 2/2]
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - uses: actions/checkout@v6
       - uses: utooland/setup-utoo@v1
@@ -91,7 +86,7 @@ jobs:
       matrix:
         module: [dist, dist-min]
         shard: [1/2, 2/2]
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     needs: build
     steps:
       - uses: actions/checkout@v6
@@ -119,7 +114,7 @@ jobs:
   ############################ Test Coverage ###########################
   upload-test-coverage:
     name: test-coverage
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     needs: test-react-latest
     steps:
       - uses: actions/checkout@v6
@@ -144,7 +139,7 @@ jobs:
 
   ########################### Compile & Test ###########################
   build:
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - uses: actions/checkout@v6
       - uses: utooland/setup-utoo@v1
@@ -205,7 +200,7 @@ jobs:
 
   test-lib-es:
     name: test lib/es module
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     strategy:
       matrix:
         module: [lib, es]

.github/workflows/upgrade-deps.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   upgrade-deps:
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     if: github.repository == 'ant-design/ant-design' && github.ref == 'refs/heads/master'
     permissions:
       pull-requests: write # for peter-evans/create-pull-request to create PRs

.github/workflows/verify-files-modify.yml

@@ -12,7 +12,7 @@ jobs:
     if: github.event.pull_request.user.login != 'renovate[bot]' && github.event.pull_request.user.login != 'Copilot'
     permissions:
       pull-requests: write  # for actions-cool/verify-files-modify to update status of PRs
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: verify-version
         uses: actions-cool/verify-files-modify@9f38a3b3d324d4d92c88c8a946001522e17ad554 # pin to latest verified commit
@@ -33,7 +33,7 @@ jobs:
     if: github.event.pull_request.user.login != 'renovate[bot]' && github.event.pull_request.user.login != 'Copilot'
     permissions:
       pull-requests: write  # for actions-cool/verify-files-modify to update status of PRs
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: verify-readme
         uses: actions-cool/verify-files-modify@9f38a3b3d324d4d92c88c8a946001522e17ad554 # pin to latest verified commit

.github/workflows/verify-package-version.yml

@@ -12,7 +12,7 @@ jobs:
     permissions:
       contents: read  # for actions/checkout to fetch code
       pull-requests: write  # for actions-cool/verify-package-version to comment on PR
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     if: contains(github.event.pull_request.title, 'changelog') || contains(github.event.pull_request.title, 'release')
     steps:
       - uses: actions/checkout@v6

.github/workflows/visual-regression-diff-approver.yml

@@ -17,7 +17,7 @@ jobs:
       statuses: write  # Allow to modfiy commit status
     name: Check Virtual Regression Approval
     if: github.event.issue.pull_request != ''
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
     # Check all the comments if contains `VISUAL_DIFF_SUCCESS` or `VISUAL_DIFF_FAILED`
     # Check if member of repo comment `Pass Visual Diff`

.github/workflows/visual-regression-diff-build.yml

@@ -22,7 +22,7 @@ jobs:
     strategy:
       matrix:
         shard: [1/2, 2/2]
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - uses: actions/checkout@v6
       - uses: utooland/setup-utoo@v1
@@ -47,7 +47,7 @@ jobs:
   ############################### Diff Images ##############################
   visual-diff-report:
     name: visual-diff report
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     needs: visual-diff-snapshot
     steps:
       - uses: actions/checkout@v6

.github/workflows/visual-regression-diff-finish.yml

@@ -14,7 +14,7 @@ permissions:
 jobs:
   upstream-workflow-summary:
     name: upstream workflow summary
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     outputs:
       jobs: ${{ steps.visual_diff_build_job_status.outputs.result }}
       upstream-job-link: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.event.workflow_run.id }}/job/${{ steps.visual_diff_build_job_status.outputs.job-id }}
@@ -62,7 +62,7 @@ jobs:
       issues: write  # for actions-cool/maintain-one-comment to modify or create issue comments
       pull-requests: write  # for actions-cool/maintain-one-comment to modify or create PR comments
       statuses: write
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     needs: [upstream-workflow-summary]
     steps:
       - uses: actions/checkout@v6
@@ -70,7 +70,7 @@ jobs:
 
       # We need get persist-index first
       - name: download image snapshot artifact
-        uses: dawidd6/action-download-artifact@v11
+        uses: dawidd6/action-download-artifact@v14
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -92,7 +92,7 @@ jobs:
       - name: download report artifact
         id: download_report
         if: ${{ needs.upstream-workflow-summary.outputs.build-status == 'success' || needs.upstream-workflow-summary.outputs.build-status == 'failure' }}
-        uses: dawidd6/action-download-artifact@v11
+        uses: dawidd6/action-download-artifact@v14
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}

.github/workflows/visual-regression-diff-start.yml

@@ -20,7 +20,7 @@ jobs:
       issues: write  # for actions-cool/maintain-one-comment to modify or create issue comments
       pull-requests: write  # for actions-cool/maintain-one-comment to modify or create PR comments
     name: start visual-regression diff
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: update status comment
         uses: actions-cool/maintain-one-comment@4b2dbf086015f892dcb5e8c1106f5fccd6c1476b

.github/workflows/visual-regression-persist-finish.yml

@@ -14,7 +14,7 @@ permissions:
 jobs:
   upstream-workflow-summary:
     name: upstream workflow summary
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     outputs:
       jobs: ${{ steps.persist_start_job_status.outputs.result }}
       build-success: ${{ steps.persist_start_job_status.outputs.build-success }}
@@ -56,7 +56,7 @@ jobs:
     name: persist image-snapshots
     permissions:
       actions: read # for dawidd6/action-download-artifact to query and download artifacts
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     needs: [upstream-workflow-summary]
     steps:
       - name: checkout
@@ -67,7 +67,7 @@ jobs:
 
       # We need get persist key first
       - name: Download Visual Regression Ref
-        uses: dawidd6/action-download-artifact@v11
+        uses: dawidd6/action-download-artifact@v14
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -81,7 +81,7 @@ jobs:
 
       - name: Download Visual-Regression Artifact
         if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
-        uses: dawidd6/action-download-artifact@v11
+        uses: dawidd6/action-download-artifact@v14
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}

.github/workflows/visual-regression-persist-start.yml

@@ -15,7 +15,7 @@ permissions:
 jobs:
   test-image:
     name: test image
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - uses: actions/checkout@v6
       - uses: utooland/setup-utoo@v1

.jest.image.js

@@ -1,13 +1,11 @@
 const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
 
-// jest config for image snapshots
 module.exports = {
   setupFiles: ['./tests/setup.ts'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
   moduleNameMapper,
   transform: {
-    '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
+    '^.+\\.(ts|tsx|js|mjs)$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
     '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
     '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
   },

.jest.js

@@ -7,6 +7,11 @@ const compileModules = [
   '.pnpm',
   '@asamuzakjp/css-color',
   '@rc-component',
+  // jsdom 27+ depends on ESM parse5, need transform
+  'parse5',
+  '@exodus',
+  'jsdom',
+  '@csstools',
 ];
 
 // cnpm use `_` as prefix
@@ -30,6 +35,10 @@ function getTestRegex(libDir) {
   return '.*\\.test\\.(j|t)sx?$';
 }
 
+const shouldIgnoreSemantic =
+  ['dist', 'lib', 'es', 'dist-min'].includes(process.env.LIB_DIR) ||
+  ['1', 'true'].includes(process.env.SKIP_SEMANTIC);
+
 module.exports = {
   verbose: true,
   testEnvironment: 'jsdom',
@@ -44,10 +53,17 @@ module.exports = {
     '^antd/lib/(.*)$': '<rootDir>/components/$1',
     '^antd/locale/(.*)$': '<rootDir>/components/locale/$1',
   },
-  testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node', 'image.test.js', 'image.test.ts'],
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    'dekko',
+    'node',
+    'image.test.js',
+    'image.test.ts',
+    ...(shouldIgnoreSemantic ? ['demo-semantic.test'] : []),
+  ],
   transform: {
     '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.(m?)js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
+    '\\.(m?)js(m)?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
     '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
     '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
   },
@@ -60,6 +76,7 @@ module.exports = {
     '!components/*/__tests__/type.test.tsx',
     '!components/**/*/interface.{ts,tsx}',
     '!components/*/__tests__/image.test.{ts,tsx}',
+    '!components/*/__tests__/demo-semantic.test.tsx',
     '!components/__tests__/node.test.tsx',
     '!components/*/demo/*.tsx',
     '!components/*/design/**',

.jest.node.js

@@ -1,14 +1,12 @@
 const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
 
-// jest config for server render environment
 module.exports = {
   setupFiles: ['./tests/setup.ts'],
   setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
   moduleNameMapper,
   transform: {
-    '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
+    '^.+\\.(ts|tsx|js|mjs)$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
     '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
     '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
   },

AGENTS.md

@@ -1,92 +1,166 @@
 # AGENTS.md
 
+> Ant Design 项目开发指南 - 为 AI 编程助手提供项目上下文和开发规范
+
+## 📑 目录
+
+- [项目背景](#项目背景)
+- [快速开始](#快速开始)
+- [代码规范](#代码规范)
+  - [基本编码规范](#基本编码规范)
+  - [命名规范](#命名规范)
+  - [TypeScript 规范](#typescript-规范)
+  - [样式规范](#样式规范)
+- [开发指南](#开发指南)
+  - [测试指南](#测试指南)
+  - [演示代码规范](#演示代码规范)
+  - [国际化规范](#国际化规范)
+- [文档和 Changelog](#文档和-changelog-规范)
+- [Git 和 Pull Request](#git-和-pull-request-规范)
+- [质量保证](#质量保证)
+- [工具链和环境](#工具链和环境)
+
+---
+
 ## 项目背景
 
-这是 ant-design/ant-design（antd）的源代码仓库，是一个 React 组件库，发布为 npm 包 antd。
+这是 [ant-design/ant-design](https://github.com/ant-design/ant-design)（antd）的源代码仓库，是一个 React 组件库，发布为 npm 包 `antd`。
+
+### 核心特性
 
 - 使用 TypeScript 和 React 开发
-- 兼容 React 16 ~ 19 版本
+- 兼容 React 18 ~ 19 版本
 - 组件库设计精美，功能完善，广泛应用于企业级中后台产品
 - 遵循 Ant Design 设计规范
-- 支持国际化
+- 支持国际化（i18n）
+- 支持主题定制和暗色模式
+- 支持 RTL（从右到左）布局
 
-## 安装和设置
+---
+
+## 快速开始
 
 ### 开发环境要求
 
-- Node.js 版本 >= 16
-- 推荐使用 npm 或 yarn
-- Chrome 80+ 浏览器兼容性
+- **Node.js**: >= 16
+- **包管理器**: npm 或 utoo
+- **浏览器兼容性**: Chrome 80+
+- **编辑器**: VS Code（推荐）或其他支持 TypeScript 的编辑器
 
 ### 安装依赖
 
 ```bash
 npm install
 # 或
-yarn install
+utoo install
 ```
 
-### 开发命令
+### 常用开发命令
 
 ```bash
-npm start     # 启动开发服务器
-npm run build # 构建项目
-npm test      # 运行测试
-npm run lint  # 代码检查
+# 启动开发服务器（访问 http://127.0.0.1:8001）
+npm start
+
+# 编译 TypeScript 代码到 lib 和 es 目录
+npm run compile
+
+# 构建 UMD 格式的构建产物
+npm run build
+
+# 运行所有测试
+npm test
+
+# 监听模式运行测试
+npm test -- --watch
+
+# 生成测试覆盖率报告
+npm run test:coverage
+
+# 代码检查（包括 TypeScript、ESLint、Biome、Markdown、Changelog）
+npm run lint
+
+# 格式化代码
+npm run format
+
+# 生成 Changelog（交互式）
+npm run changelog
+
+# 清理构建产物
+npm run clean
 ```
 
-## 代码风格指南
+### 项目结构
+
+```
+ant-design/
+├── components/          # 组件源代码
+│   └── [component]/     # 单个组件目录
+│       ├── demo/        # 演示代码
+│       ├── style/       # 样式文件
+│       ├── index.tsx     # 组件入口
+│       └── index.zh-CN.md # 组件文档
+├── scripts/             # 构建和工具脚本
+├── tests/               # 测试文件
+├── CHANGELOG.zh-CN.md   # 中文更新日志
+├── CHANGELOG.en-US.md   # 英文更新日志
+└── package.json         # 项目配置
+```
+
+---
+
+## 代码规范
 
 ### 基本编码规范
 
-- 使用 TypeScript 和 React 书写
-- 使用函数式组件和 hooks，避免类组件
-- 使用提前返回（early returns）提高代码可读性
-- 避免引入新依赖，严控打包体积
-- 兼容 Chrome 80+ 浏览器
-- 支持服务端渲染
-- 保持向下兼容，避免 breaking change
-- 组件名使用大驼峰（PascalCase）
-- 属性名使用小驼峰（camelCase）
-- 合理使用 React.memo、useMemo 和 useCallback 优化性能
-
-### 命名规范
-
-Antd 命名要求使用**完整名称**而非缩写。
+- ✅ 使用 TypeScript 和 React 书写
+- ✅ 使用函数式组件和 Hooks，**避免类组件**
+- ✅ 使用提前返回（early returns）提高代码可读性
+- ✅ 避免引入新依赖，严控打包体积
+- ✅ 兼容 Chrome 80+ 浏览器
+- ✅ 支持服务端渲染（SSR）
+- ✅ 保持向下兼容，避免 breaking change
+- ✅ 组件名使用大驼峰（PascalCase），如 `Button`、`DatePicker`
+- ✅ 属性名使用小驼峰（camelCase），如 `onClick`、`defaultValue`
+- ✅ 合理使用 `React.memo`、`useMemo` 和 `useCallback` 优化性能
 
 #### Props 命名
 
-- 初始化属性：`default` + `PropName`
-- 强制渲染：`forceRender`
-- 子组件强制渲染：`force` + `Sub Component Name` + `Render`
-- 子组件渲染：`Sub Component Name` + `Render`
-- 数据源：`dataSource`
-- 面板开启：使用 `open`，避免使用 `visible`
-- 显示相关：`show` + `PropName`
-- 功能性：`PropName` + `able`
-- 禁用：`disabled`
-- 额外内容：`extra`
-- 图标：`icon`
-- 触发器：`trigger`
-- 类名：`className`
+| 用途           | 命名规则                                | 示例                          |
+| -------------- | --------------------------------------- | ----------------------------- |
+| 初始化属性     | `default` + `PropName`                  | `defaultValue`、`defaultOpen` |
+| 强制渲染       | `forceRender`                           | `forceRender`                 |
+| 子组件强制渲染 | `force` + `SubComponentName` + `Render` | `forcePanelRender`            |
+| 子组件渲染     | `SubComponentName` + `Render`           | `titleRender`、`footerRender` |
+| 数据源         | `dataSource`                            | `dataSource`                  |
+| 面板开启       | 使用 `open`，避免使用 `visible`         | `open`、`defaultOpen`         |
+| 显示相关       | `show` + `PropName`                     | `showSearch`、`showHeader`    |
+| 功能性         | `PropName` + `able`                     | `disabled`、`readable`        |
+| 禁用           | `disabled`                              | `disabled`                    |
+| 额外内容       | `extra`                                 | `extra`                       |
+| 图标           | `icon`                                  | `icon`、`prefixIcon`          |
+| 触发器         | `trigger`                               | `trigger`                     |
+| 类名           | `className`                             | `className`                   |
 
 #### 事件命名
 
-- 触发事件：`on` + `EventName`
-- 子组件事件：`on` + `SubComponentName` + `EventName`
-- 前置事件：`before` + `EventName`
-- 后置事件：`after` + `EventName`
-- 连续动作完成：`on` + `EventName` + `Complete`
+| 类型         | 命名规则                                | 示例                  |
+| ------------ | --------------------------------------- | --------------------- |
+| 触发事件     | `on` + `EventName`                      | `onClick`、`onChange` |
+| 子组件事件   | `on` + `SubComponentName` + `EventName` | `onPanelChange`       |
+| 前置事件     | `before` + `EventName`                  | `beforeUpload`        |
+| 后置事件     | `after` + `EventName`                   | `afterClose`          |
+| 连续动作完成 | `on` + `EventName` + `Complete`         | `onUploadComplete`    |
 
-#### 组件引用
+#### 组件引用（Ref）
 
 组件应提供 `ref` 属性，结构如下：
 
 ```tsx
-ComponentRef {
+interface ComponentRef {
   nativeElement: HTMLElement;
   focus: VoidFunction;
-  // 其他函数
+  blur: VoidFunction;
+  // 其他方法...
 }
 ```
 
@@ -94,54 +168,99 @@ ComponentRef {
 
 格式：`variant (optional)` + `semantic part` + `semantic part variant (optional)` + `css property` + `size/disabled (optional)`
 
+示例：
+
+- `buttonPrimaryColor` - Button 主色
+- `inputPaddingBlock` - Input 垂直内边距
+- `menuItemActiveBg` - Menu 激活项背景色
+
 ### API 文档规范
 
-| Property  | Description | Type                         | Default      |
-| --------- | ----------- | ---------------------------- | ------------ |
-| htmlType  | xxx         | string                       | `button `    |
-| type      | xxx         | `horizontal ` \| `vertical ` | `horizontal` |
-| disabled  | xxx         | boolean                      | false        |
-| minLength | xxx         | number                       | 0            |
-| style     | xxx         | CSSProperties                | -            |
+#### API 表格格式
+
+| Property  | Description     | Type                                                   | Default   |
+| --------- | --------------- | ------------------------------------------------------ | --------- |
+| htmlType  | Button 原生类型 | string                                                 | `button`  |
+| type      | 按钮类型        | `primary` \| `default` \| `dashed` \| `link` \| `text` | `default` |
+| disabled  | 是否禁用        | boolean                                                | false     |
+| minLength | 最小长度        | number                                                 | 0         |
+| style     | 自定义样式      | CSSProperties                                          | -         |
 
 #### API 文档要求
 
-- 字符串类型的默认值使用反引号
-- 布尔类型直接使用 true 或 false
-- 数字类型直接使用数字
-- 函数类型使用箭头函数表达式
-- 无默认值使用 `-`
-- 描述首字母大写，结尾无句号
-- API 按字母顺序排列
+- ✅ 字符串类型的默认值使用反引号包裹，如 `` `button` ``
+- ✅ 布尔类型直接使用 `true` 或 `false`
+- ✅ 数字类型直接使用数字，如 `0`、`100`
+- ✅ 函数类型使用箭头函数表达式，如 `(e: Event) => void`
+- ✅ 无默认值使用 `-`
+- ✅ 描述首字母大写，结尾无句号
+- ✅ API 按字母顺序排列
+
+---
 
 ## TypeScript 规范
 
 ### 基本原则
 
-- 所有组件和函数必须提供准确的类型定义
-- 避免使用 `any` 类型，尽可能精确地定义类型
-- 使用接口而非类型别名定义对象结构
-- 导出所有公共接口类型，方便用户使用
-- 严格遵循 TypeScript 类型设计原则，确保类型安全
-- 确保编译无任何类型错误或警告
+- ✅ 所有组件和函数必须提供准确的类型定义
+- ✅ 避免使用 `any` 类型，尽可能精确地定义类型
+- ✅ 使用接口（interface）而非类型别名（type）定义对象结构
+- ✅ 导出所有公共接口类型，方便用户使用
+- ✅ 严格遵循 TypeScript 类型设计原则，确保类型安全
+- ✅ 确保编译无任何类型错误或警告
 
 ### 组件类型定义
 
-- 组件 props 应使用 interface 定义，便于扩展
-- 组件 props 接口命名应为 `ComponentNameProps`
-- 为组件状态定义专门的接口，如 `ComponentNameState`
-- 复杂的数据结构应拆分为多个接口定义
-- 组件的 ref 类型应该明确定义，使用 `React.ForwardRefRenderFunction`
-- 所有回调函数类型应明确定义参数和返回值
+```tsx
+// ✅ 正确：使用 interface 定义 Props
+interface ButtonProps {
+  type?: 'primary' | 'default' | 'dashed';
+  onClick?: (e: React.MouseEvent) => void;
+}
+
+// ❌ 错误：避免使用 type 定义对象结构
+type ButtonProps = {
+  type?: 'primary' | 'default';
+};
+
+// ✅ 正确：组件 Props 接口命名
+interface ComponentNameProps {
+  // ...
+}
+
+// ✅ 正确：组件状态接口命名
+interface ComponentNameState {
+  // ...
+}
+
+// ✅ 正确：使用 ForwardRefRenderFunction 定义 ref
+const Component = React.forwardRef<ComponentRef, ComponentProps>((props, ref) => {
+  // ...
+});
+```
 
 ### 类型使用最佳实践
 
-- 适当使用泛型增强类型灵活性
-- 使用交叉类型（&）合并多个类型
-- 使用字面量联合类型定义有限的选项集合
-- 避免使用 `enum`，优先使用联合类型和 `as const`
-- 尽可能依赖 TypeScript 的类型推断
-- 只在必要时使用类型断言（as）
+- ✅ 适当使用泛型增强类型灵活性
+- ✅ 使用交叉类型（&）合并多个类型
+- ✅ 使用字面量联合类型定义有限的选项集合
+- ✅ 避免使用 `enum`，优先使用联合类型和 `as const`
+- ✅ 尽可能依赖 TypeScript 的类型推断
+- ✅ 只在必要时使用类型断言（`as`）
+
+```tsx
+// ✅ 推荐：使用联合类型和 as const
+const ButtonTypes = ['primary', 'default', 'dashed'] as const;
+type ButtonType = (typeof ButtonTypes)[number];
+
+// ❌ 不推荐：使用 enum
+enum ButtonType {
+  Primary = 'primary',
+  Default = 'default',
+}
+```
+
+---
 
 ## 样式规范
 
@@ -165,17 +284,17 @@ ComponentRef {
 
 ### 响应式和主题支持
 
-- 组件应支持在不同屏幕尺寸下良好展示
-- 所有组件必须支持暗色模式
-- 组件应支持从右到左（RTL）的阅读方向
-- 使用 CSS 逻辑属性（如 margin-inline-start）替代方向性属性（如 margin-left）
-- 支持通过 ConfigProvider 进行主题定制
+- ✅ 组件应支持在不同屏幕尺寸下良好展示
+- ✅ 所有组件必须支持暗色模式
+- ✅ 组件应支持从右到左（RTL）的阅读方向
+- ✅ 使用 CSS 逻辑属性（如 `margin-inline-start`）替代方向性属性（如 `margin-left`）
+- ✅ 支持通过 `ConfigProvider` 进行主题定制
 
 ### 动画效果
 
 - 使用 CSS 过渡实现简单动画
-- 复杂动画使用 rc-motion 实现
-- 尊重用户的减少动画设置（prefers-reduced-motion）
+- 复杂动画使用 `@rc-component/motion` 实现
+- 尊重用户的减少动画设置（`prefers-reduced-motion`）
 - 动画时长和缓动函数应保持一致性
 - 动画不应干扰用户的操作和阅读体验
 
@@ -188,67 +307,108 @@ ComponentRef {
 - 支持用户放大页面至 200% 时的正常布局
 - 避免使用会导致闪烁的动画
 
-## 测试指南
+---
 
-### 测试框架和工具
+## 开发指南
+
+### 测试指南
+
+#### 测试框架和工具
 
 - 使用 Jest 和 React Testing Library 编写单元测试
-- 对 UI 组件使用快照测试 (Snapshot Testing)
-- 测试覆盖率要求 100%
-- 测试文件放在 **tests** 目录，命名格式为：index.test.tsx 或 xxx.test.tsx
+- 对 UI 组件使用快照测试（Snapshot Testing）
+- 测试覆盖率要求 **100%**
+- 测试文件放在 `tests/` 目录，命名格式为：`index.test.tsx` 或 `xxx.test.tsx`
 
-### 运行测试
+#### 运行测试
 
 ```bash
 npm test                    # 运行所有测试
-npm test -- --watch       # 监听模式
-npm run test:coverage     # 生成覆盖率报告
+npm test -- --watch        # 监听模式
+npm run test:coverage       # 生成覆盖率报告
+npm run test:image          # UI 快照测试（需要 Docker）
 ```
 
-## 演示代码规范
+#### 测试最佳实践
 
-### Demo 基本要求
+- ✅ 测试用户行为而非实现细节
+- ✅ 使用有意义的测试描述
+- ✅ 每个测试用例应该独立，不依赖其他测试
+- ✅ 测试边界情况和错误处理
 
-- demo 代码尽可能简洁
-- 避免冗余代码，方便用户复制到项目直接使用
-- 每个 demo 聚焦展示一个功能点
-- 提供中英文两个版本的说明
-- 遵循展示优先原则，确保视觉效果良好
-- 展示组件的主要使用场景
-- 按照由简到繁的顺序排列 demo
+### 演示代码规范
 
-### 文件组织
+#### Demo 基本要求
+
+- ✅ demo 代码尽可能简洁
+- ✅ 避免冗余代码，方便用户复制到项目直接使用
+- ✅ 每个 demo 聚焦展示一个功能点
+- ✅ 提供中英文两个版本的说明
+- ✅ 遵循展示优先原则，确保视觉效果良好
+- ✅ 展示组件的主要使用场景
+- ✅ 按照由简到繁的顺序排列 demo
+
+#### 文件组织
 
 - 每个组件演示包含 `.md`（说明文档）和 `.tsx`（实际代码）两个文件
 - 位置：组件目录下的 `demo` 子目录，如 `components/button/demo/`
 - 命名：短横线连接的小写英文单词，如 `basic.tsx`、`custom-filter.tsx`
 - 文件名应简洁地描述示例内容
 
-### TSX 代码规范
+#### TSX 代码规范
+
+```tsx
+// ✅ 正确的导入顺序
+import React, { useState } from 'react';
+import { Button, Space } from 'antd';
+import type { ButtonProps } from 'antd';
+
+import './custom.css';
+
+// ✅ 使用函数式组件和 Hooks
+const Demo: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = () => {
+    setLoading(true);
+    // ...
+  };
+
+  return (
+    <Space>
+      <Button loading={loading} onClick={handleClick}>
+        Click me
+      </Button>
+    </Space>
+  );
+};
+
+export default Demo;
+```
+
+**规范要点**：
 
 - 导入顺序：React → 依赖库 → 组件库 → 自定义组件 → 类型 → 样式
 - 类型：为复杂数据定义清晰接口，避免 `any`
 - 使用函数式组件和 Hooks
-- 2空格缩进，箭头函数，驼峰命名
+- 2 空格缩进，箭头函数，驼峰命名
 - 优先使用 antd 内置组件，减少外部依赖
 - 性能优化：适当使用 `useMemo`/`useCallback`，清理副作用
 
-## 国际化规范
+### 国际化规范
 
-### 类型定义
+#### 类型定义
 
 antd 的本地化配置的类型定义的入口文件是 `components/locale/index.tsx`，当需要添加新的本地化配置时，需要检查对应组件或全局配置的类型是否存在，如果不存在，则需要增加相应的类型描述。
 
-### 本地化配置
+#### 本地化配置
 
-- 本地化配置文件命名规则：`*_*.ts`，如：`zh_CN.ts`
-- 通常在为 antd 添加后修改某一项本地化配置时，如无特殊说明，需要同时修改所有语言的本地化配置
+- 本地化配置文件命名规则：`*_*.ts`，如：`zh_CN.ts`、`en_US.ts`
+- 通常在为 antd 添加或修改某一项本地化配置时，如无特殊说明，需要同时修改所有语言的本地化配置
 - 本地化配置的内容通常是纯字符串
 - 带有 `${}` 的变量将在实际使用的地方被实时替换成对应的变量内容
 
-### 使用本地化
-
-使用 `components/locale/index.tsx` 文件中导出的 `useLocale` 获取全局上下文中配置的本地化：
+#### 使用本地化
 
 ```tsx
 import { useLocale } from '../locale';
@@ -256,7 +416,7 @@ import enUS from '../locale/en_US';
 
 export function TestComp(props) {
   const { locale: propLocale } = props;
-  const [contextLocale] = useLocale('TestComp', enUs);
+  const [contextLocale] = useLocale('TestComp', enUS);
 
   const locale = { ...contextLocale, ...propLocale };
 
@@ -264,56 +424,105 @@ export function TestComp(props) {
 }
 ```
 
+---
+
 ## 文档和 Changelog 规范
 
 ### 基本要求
 
-- 提供中英文两个版本
-- 新的属性需要声明可用的版本号
-- 属性命名符合 antd 的 API 命名规则
+- ✅ 提供中英文两个版本
+- ✅ 新的属性需要声明可用的版本号
+- ✅ 属性命名符合 antd 的 API 命名规则
 
 ### 文档锚点 ID 规范
 
 - 针对 Markdown 文件中的标题（# 到 ######）自动生成锚点 ID
-  - 所有中文标题（H1-H6）必须手动指定一个简洁、有意义的英文锚点。
-  - 格式: ## 中文标题 {#english-anchor-id}
-  - 英文标题通常不需要手动指定锚点，但如果需要，可以使用相同的格式。
-- 锚点 ID 必须符合正则表达式 `^[a-zA-Z][\w-:\.]*$`, 且长度不应超过 32 个字符。
-- 用于演示（demo）且包含 `-demo-` 的 id 不受前面的长度限制。
-- FAQ 章节下的所有标题锚点必须以 `faq-` 作为前缀。
-- 为确保在不同语言间切换时锚点依然有效，同一问题的中英文锚点应保持完全一致。
-  - 例如：
-    - 中文标题：`### 如何使用组件 {#how-to-use-component}`
-    - 英文标题：`### How to Use the Component {#how-to-use-component}`
+  - 所有中文标题（H1-H6）必须手动指定一个简洁、有意义的英文锚点
+  - 格式: `## 中文标题 {#english-anchor-id}`
+  - 英文标题通常不需要手动指定锚点，但如果需要，可以使用相同的格式
+- 锚点 ID 必须符合正则表达式 `^[a-zA-Z][\w-:\.]*$`，且长度不应超过 32 个字符
+- 用于演示（demo）且包含 `-demo-` 的 id 不受前面的长度限制
+- FAQ 章节下的所有标题锚点必须以 `faq-` 作为前缀
+- 为确保在不同语言间切换时锚点依然有效，同一问题的中英文锚点应保持完全一致
+
+**示例**：
+
+- 中文标题：`### 如何使用组件 {#how-to-use-component}`
+- 英文标题：`### How to Use the Component {#how-to-use-component}`
 
 ### Changelog 规范
 
-- 在 CHANGELOG.en-US.md 和 CHANGELOG.zh-CN.md 书写每个版本的变更
-- 对用户使用上无感知的改动建议不要提及，保持 CHANGELOG 的内容有效性
-- 用面向开发者的角度和叙述方式撰写 CHANGELOG
-- 描述用户的原始问题，而非解决方式
-- 尽量给出原始的 PR 链接，社区提交的 PR 改动加上提交者的链接
+#### 🎯 核心原则
 
-### Changelog Emoji 规范
+1. **文件位置**：在 `CHANGELOG.en-US.md` 和 `CHANGELOG.zh-CN.md` 书写每个版本的变更
 
-- 🐞 Bug 修复
-- 💄 样式更新或 token 更新
-- 🆕 新增特性，新增属性
-- 🔥 极其值得关注的新增特性
-- 🇺🇸🇨🇳🇬🇧 国际化改动
-- 📖 📝 文档或网站改进
-- ✅ 新增或更新测试用例
-- 🛎 更新警告/提示信息
-- ⌨️ ♿ 可访问性增强
-- 🗑 废弃或移除
-- 🛠 重构或工具链优化
-- ⚡️ 性能提升
+2. **有效性过滤**：忽略用户无感知的改动（如文档网站改进、纯测试用例更新、内部重构、工具链优化等），除非其对开发者有直接影响。保持 CHANGELOG 的内容有效性。
+
+3. **开发者视角**：用面向开发者的角度和叙述方式撰写 CHANGELOG，描述"用户的原始问题"和"对开发者的影响"，而非"具体的解决代码"。
+   - ❌ 修复 Typography 的 DOM 结构问题。
+   - ✅ Typography: 💄 重构并简化了 Typography 的 DOM 结构，修复了内容空格丢失的问题。
+
+4. **版本与命名**：
+   - 新增属性必须符合 antd API 命名规则
+   - 新增属性建议在描述中暗示或明确声明可用版本号
+
+5. **双语输出**：每次处理必须同时提供 **中文版** 和 **英文版**
+
+6. **PR 链接**：尽量给出原始的 PR 链接，社区提交的 PR 改动加上提交者的链接
+
+#### 🎨 格式与结构规范
+
+1. **单条条目结构**：`组件名称: 图标 描述内容 [#PR号](链接) [@贡献者]`
+   - 组件名**无需加粗**，后接英文冒号和空格
+
+2. **分组逻辑**：
+   - **多项改动**：同一组件有 2 条及以上改动时，使用 `- 组件名` 作为分类标题（不加粗），具体条目缩进排列
+   - **单项改动**：直接编写单行条目，不设分类标题
+
+3. **文本细节**：
+   - **代码包裹**：所有属性名、方法名、API、`role`/`aria` 属性必须使用反引号 `` ` `` 包裹
+   - **中英空格**：中文与英文、数字、链接、`@` 用户名之间必须保留 **一个空格**
+
+#### 🏷️ Emoji 规范（严格执行）
+
+| Emoji  | 用途                   |
+| ------ | ---------------------- |
+| 🐞     | 修复 Bug               |
+| 💄     | 样式更新或 token 更新  |
+| 🆕     | 新增特性 / 新增属性    |
+| 🔥     | 极其值得关注的新增特性 |
+| 🇺🇸🇨🇳🇬🇧 | 国际化改动             |
+| 📖 📝  | 文档或网站改进         |
+| ✅     | 新增或更新测试用例     |
+| 🛎     | 更新警告/提示信息      |
+| ⌨️ ♿  | 可访问性增强           |
+| 🗑     | 废弃或移除             |
+| 🛠     | 重构或工具链优化       |
+| ⚡️     | 性能提升               |
+
+#### 💡 输出示例参考
+
+**中文版**：
+
+```markdown
+- 🐞 Drawer: 修复 Drawer.PurePanel 无法响应鼠标交互的问题。[#56387](https://github.com/ant-design/ant-design/pull/56387) [@wanpan11](https://github.com/wanpan11)
+- 🐞 Select: 修复 Select `options` 属性透传至原生 DOM 导致 React 未知属性警告的问题。[#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
+```
+
+**English Version**：
+
+```markdown
+- 🐞 Drawer: Fix Drawer.PurePanel failing to respond to mouse interactions. [#56387](https://github.com/ant-design/ant-design/pull/56387) [@wanpan11](https://github.com/wanpan11)
+- 🐞 Select: Fix Select `options` props leaking to DOM elements and causing React unknown-prop warnings. [#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
+```
+
+---
 
 ## Git 和 Pull Request 规范
 
 ### 分支管理
 
-禁止直接提交到以下保护分支：
+**禁止直接提交到以下保护分支**：
 
 - `master`：主分支，用于发布
 - `feature`：特性分支，用于开发新版本
@@ -329,18 +538,20 @@ export function TestComp(props) {
 
 ### 分支命名规范
 
-- 功能开发：`feat/description-of-feature`
-- 问题修复：`fix/issue-number-or-description`
-- 文档更新：`docs/what-is-changed`
-- 代码重构：`refactor/what-is-changed`
-- 样式修改：`style/what-is-changed`
-- 测试相关：`test/what-is-changed`
-- 构建相关：`build/what-is-changed`
-- 持续集成：`ci/what-is-changed`
-- 性能优化：`perf/what-is-changed`
-- 依赖升级：`deps/package-name-version`
+| 类型     | 格式                              | 示例                          |
+| -------- | --------------------------------- | ----------------------------- |
+| 功能开发 | `feat/description-of-feature`     | `feat/add-dark-mode`          |
+| 问题修复 | `fix/issue-number-or-description` | `fix/button-style-issue`      |
+| 文档更新 | `docs/what-is-changed`            | `docs/update-api-docs`        |
+| 代码重构 | `refactor/what-is-changed`        | `refactor/button-component`   |
+| 样式修改 | `style/what-is-changed`           | `style/fix-button-padding`    |
+| 测试相关 | `test/what-is-changed`            | `test/add-button-tests`       |
+| 构建相关 | `build/what-is-changed`           | `build/update-webpack-config` |
+| 持续集成 | `ci/what-is-changed`              | `ci/add-github-actions`       |
+| 性能优化 | `perf/what-is-changed`            | `perf/optimize-render`        |
+| 依赖升级 | `deps/package-name-version`       | `deps/upgrade-react-19`       |
 
-### 分支命名注意事项
+**分支命名注意事项**：
 
 1. 使用小写字母
 2. 使用连字符（-）分隔单词
@@ -354,8 +565,9 @@ export function TestComp(props) {
 
 - PR 标题始终使用英文
 - 遵循格式：`类型: 简短描述`
-- 例如：`fix: fix button style issues in Safari browser`
-- 例如：`feat: add dark mode support`
+- 示例：
+  - `fix: fix button style issues in Safari browser`
+  - `feat: add dark mode support`
 
 #### PR 内容
 
@@ -367,8 +579,8 @@ export function TestComp(props) {
 
 提交 PR 时请使用项目中提供的模板：
 
-- 英文模板（推荐）：PULL_REQUEST_TEMPLATE.md
-- 中文模板：PULL_REQUEST_TEMPLATE_CN.md
+- 英文模板（推荐）：`PULL_REQUEST_TEMPLATE.md`
+- 中文模板：`PULL_REQUEST_TEMPLATE_CN.md`
 
 #### PR 提交注意事项
 
@@ -390,7 +602,7 @@ export function TestComp(props) {
 4. **工具标注**：
    - 如果是用 Cursor 提交的代码，请在 PR body 末尾进行标注：`> Submitted by Cursor`
 
-### PR 改动类型
+#### PR 改动类型
 
 - 🆕 新特性提交
 - 🐞 Bug 修复
@@ -402,31 +614,35 @@ export function TestComp(props) {
 - ⚡️ 性能优化
 - 🌐 国际化改进
 
+---
+
 ## 质量保证
 
 ### 代码质量要求
 
-- 确保代码运行正常，无控制台错误
-- 适配常见浏览器
-- 避免过时 API，及时更新到新推荐用法
-- 测试覆盖率达到 100%
-- 通过所有 ESLint 和 TypeScript 检查
+- ✅ 确保代码运行正常，无控制台错误
+- ✅ 适配常见浏览器
+- ✅ 避免过时 API，及时更新到新推荐用法
+- ✅ 测试覆盖率达到 100%
+- ✅ 通过所有 ESLint 和 TypeScript 检查
 
 ### 性能要求
 
-- 避免不必要的重新渲染
-- 合理使用 React.memo、useMemo 和 useCallback
-- 样式计算应当高效，避免重复计算
-- 图片和资源应当优化
-- 支持 Tree Shaking
+- ✅ 避免不必要的重新渲染
+- ✅ 合理使用 `React.memo`、`useMemo` 和 `useCallback`
+- ✅ 样式计算应当高效，避免重复计算
+- ✅ 图片和资源应当优化
+- ✅ 支持 Tree Shaking
 
 ### 兼容性要求
 
-- 支持 React 16 ~ 19 版本
-- 兼容 Chrome 80+ 浏览器
-- 支持服务端渲染
-- 保持向下兼容，避免 breaking change
-- 支持 TypeScript 4.0+
+- ✅ 支持 React 18 ~ 19 版本
+- ✅ 兼容 Chrome 80+ 浏览器
+- ✅ 支持服务端渲染（SSR）
+- ✅ 保持向下兼容，避免 breaking change
+- ✅ 支持 TypeScript 4.0+
+
+---
 
 ## 工具链和环境
 
@@ -451,12 +667,11 @@ export function TestComp(props) {
 - 自动化发布流程
 - 支持多环境部署
 
+---
+
 ## 参考资料
 
 - [API Naming Rules](https://github.com/ant-design/ant-design/wiki/API-Naming-rules)
 - [#16048](https://github.com/ant-design/ant-design/issues/16048) - Current listing api & Chinese version
 - [#25066](https://github.com/ant-design/ant-design/issues/25066) - API standard in the document
-
-## 特别说明
-
-如果使用 AI 编程助手（如 Cursor）进行开发，请在提交 PR 时在末尾标注：`> Submitted by Cursor`
+- [Development Guide](https://github.com/ant-design/ant-design/wiki/Development)

CHANGELOG.en-US.md

@@ -15,6 +15,108 @@ tag: vVERSION
 
 ---
 
+## 6.2.3
+
+`2026-02-02`
+
+- Button
+  - 🐞 Fix Button `defaultBg`, `defaultColor`, `defaultHoverColor` and `defaultActiveColor` tokens not taking effect. [#56238](https://github.com/ant-design/ant-design/pull/56238) [@ug-hero](https://github.com/ug-hero)
+  - 🐞 Fix Button default tokens not taking effect. [#56719](https://github.com/ant-design/ant-design/pull/56719) [@unknowntocka](https://github.com/unknowntocka)
+  - 🐞 Fix Button `variant="solid"` borders displaying incorrectly inside Space.Compact. [#56486](https://github.com/ant-design/ant-design/pull/56486) [@Pareder](https://github.com/Pareder)
+- 🐞 Fix Input.TextArea ref missing `nativeElement` property. [#56803](https://github.com/ant-design/ant-design/pull/56803) [@smith3816](https://github.com/smith3816)
+- 🐞 Fix Flex default `align` not taking effect when using `orientation`. [#55950](https://github.com/ant-design/ant-design/pull/55950) [@YingtaoMo](https://github.com/YingtaoMo)
+- 🐞 Fix Typography link selector specificity being too low causing styles to be overridden. [#56759](https://github.com/ant-design/ant-design/pull/56759) [@QDyanbing](https://github.com/QDyanbing)
+- 🐞 Fix ColorPicker HEX input allowing invalid characters. [#56752](https://github.com/ant-design/ant-design/pull/56752) [@treephesians](https://github.com/treephesians)
+
+## 6.2.2
+
+`2026-01-26`
+
+- 🐞 Fix Button with href wrapped by Typography showing incorrect color and flickering outline on hover. [#56619](https://github.com/ant-design/ant-design/pull/56619) [@QdabuliuQ](https://github.com/QdabuliuQ)
+- 🐞 Fix component token not taking effect for Button with `type="text"`. [#56291](https://github.com/ant-design/ant-design/pull/56291) [@QDyanbing](https://github.com/QDyanbing)
+- 🐞 Fix where components within the Popover were affected by the state association with Form.Item. [#56728](https://github.com/ant-design/ant-design/pull/56728)
+- 🐞 Fix the placeholders displayed incorrectly when selecting multiple items in Select. [#56675](https://github.com/ant-design/ant-design/pull/56675)
+- 💄 Fix misaligned elements in Pagination when the global `fontSize` is increased. [#56715](https://github.com/ant-design/ant-design/pull/56715) [@QDyanbing](https://github.com/QDyanbing)
+- 💄 Fix incorrect Drawer dragger position in RTL mode. [#56693](https://github.com/ant-design/ant-design/pull/56693) [@QdabuliuQ](https://github.com/QdabuliuQ)
+
+## 6.2.1
+
+`2026-01-20`
+
+- 🐞 Fix Button child element's `className` be cleared if it contains two Chinese characters. [#56593](https://github.com/ant-design/ant-design/pull/56593) [@QdabuliuQ](https://github.com/QdabuliuQ)
+- 🐞 Fix DatePicker DOM not updated bug after update `suffixIcon` as `null`. [#56637](https://github.com/ant-design/ant-design/pull/56637) [@AlanQtten](https://github.com/AlanQtten)
+- 🐞 Fix Table content area border radius when set border radius for container. [#56478](https://github.com/ant-design/ant-design/pull/56478) [@QDyanbing](https://github.com/QDyanbing)
+- 💄 Fix Card unexpected border radius for Body area. [#56653](https://github.com/ant-design/ant-design/pull/56653) [@ug-hero](https://github.com/ug-hero)
+- 💄 MISC: Fix unexpected `undefined` and `null` in the injected styles. [#56636](https://github.com/ant-design/ant-design/pull/56636) [@li-jia-nan](https://github.com/li-jia-nan)
+- 💄 MISC: Improve `background` transition to `background-color` for all components. [#56598](https://github.com/ant-design/ant-design/pull/56598) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🛠 Improve Grid use `genCssVar` method to generate more stable CSS variable names. [#56635](https://github.com/ant-design/ant-design/pull/56635) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🛠 Improve @ant-design/icons usage to avoid depend on full package since externals. [#56639](https://github.com/ant-design/ant-design/pull/56639) [@ShenHongFei](https://github.com/ShenHongFei)
+
+
+## 6.2.0
+
+`2026-01-13`
+
+- 🛠 Button, Masonry, Mentions, Select, Space, Splitter, Steps and other components batch use `genCssVar` method to generate more stable CSS variable names. [#56562](https://github.com/ant-design/ant-design/pull/56562) [#56559](https://github.com/ant-design/ant-design/pull/56559) [#56557](https://github.com/ant-design/ant-design/pull/56557) [#56555](https://github.com/ant-design/ant-design/pull/56555) [#56550](https://github.com/ant-design/ant-design/pull/56550) [#56547](https://github.com/ant-design/ant-design/pull/56547) [#56546](https://github.com/ant-design/ant-design/pull/56546) [#56529](https://github.com/ant-design/ant-design/pull/56529) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 QRCode adds `marginSize` property for displaying QR code margin area. [#56569](https://github.com/ant-design/ant-design/pull/56569) [@afc163](https://github.com/afc163)
+- 🆕 Tour adds `keyboard` property to configure keyboard operations. [#56581](https://github.com/ant-design/ant-design/pull/56581) [@cactuser-Lu](https://github.com/cactuser-Lu)
+- Tooltip
+  - 🆕 Tooltip adds `maxWidth` design token. [#56540](https://github.com/ant-design/ant-design/pull/56540) [@guoyunhe](https://github.com/guoyunhe)
+  - 🆕 Tooltip/Popover/Popconfirm can be closed with ESC by default. [#56492](https://github.com/ant-design/ant-design/pull/56492) [@aojunhao123](https://github.com/aojunhao123)
+- 🛠 Steps remove useless styles. [#56565](https://github.com/ant-design/ant-design/pull/56565) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 Form supports `tel` type validation. [#56533](https://github.com/ant-design/ant-design/pull/56533) [@guoyunhe](https://github.com/guoyunhe)
+- 🐞 Fix Badge `ref` not working when using `text` property. [#56532](https://github.com/ant-design/ant-design/pull/56532) [@zombieJ](https://github.com/zombieJ)
+- 🆕 Calendar and DatePicker `locale` configuration now supports partial content filling. [#56376](https://github.com/ant-design/ant-design/pull/56376) [@QDyanbing](https://github.com/QDyanbing)
+- 🐞 Fix ConfigProvider `theme.cssVar` configuration not working for icons. [#56504](https://github.com/ant-design/ant-design/pull/56504) [@seanparmelee](https://github.com/seanparmelee)
+- 🐞 Fix Collapse `items` semantic properties not working. [#56517](https://github.com/ant-design/ant-design/pull/56517) [@zombieJ](https://github.com/zombieJ)
+- Modal
+  - 🆕 Modal supports `focusable.trap` to configure whether to lock focus within the Modal. [#56500](https://github.com/ant-design/ant-design/pull/56500) [@zombieJ](https://github.com/zombieJ)
+  - 🛠 Remove useless DOM structure from Modal and optimize focus capture to prevent accidental focus escape outside the Modal. [#56142](https://github.com/ant-design/ant-design/pull/56142) [@zombieJ](https://github.com/zombieJ)
+- ConfigProvider
+  - 🆕 ConfigProvider supports `pagination` configuration for `totalBoundary` and `showSizeChanger` properties. [#56475](https://github.com/ant-design/ant-design/pull/56475) [@chiaweilee](https://github.com/chiaweilee)
+  - 🆕 ConfigProvider supports configuring Alert global icons. [#56241](https://github.com/ant-design/ant-design/pull/56241) [@guoyunhe](https://github.com/guoyunhe)
+- Drawer
+  - 🆕 Drawer adds `focusable` to configure focus behavior after opening, supporting focus locking within the container and focus returning after closing. [#56463](https://github.com/ant-design/ant-design/pull/56463) [@zombieJ](https://github.com/zombieJ)
+  - 🐞 Fix Drawer `size` definition not supporting string type. [#56358](https://github.com/ant-design/ant-design/pull/56358) [@ug-hero](https://github.com/ug-hero)
+- 🐞 Fix Image nested in Modal cannot be closed sequentially with Esc. [#56386](https://github.com/ant-design/ant-design/pull/56386) [@aojunhao123](https://github.com/aojunhao123)
+- 🆕 Pagination supports `size` property. [#56009](https://github.com/ant-design/ant-design/pull/56009) [@guoyunhe](https://github.com/guoyunhe)
+- 🆕 Breadcrumb supports `dropdownIcon` customization. [#56250](https://github.com/ant-design/ant-design/pull/56250) [@guoyunhe](https://github.com/guoyunhe)
+- 🆕 Checkbox.Group supports `role` configuration. [#56126](https://github.com/ant-design/ant-design/pull/56126) [@Pareder](https://github.com/Pareder)
+- 💄 Mentions fix invalid style `padding: undefined` in different sizes. [#56564](https://github.com/ant-design/ant-design/pull/56564) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🐞 Fix Select clear button alignment issue when `size="small"`. [#56525](https://github.com/ant-design/ant-design/pull/56525) [@QDyanbing](https://github.com/QDyanbing)
+
+## 6.1.4
+
+`2026-01-05`
+
+- 🐞 Fix Select with multiple `aria-` attributes in DOM. [#56451](https://github.com/ant-design/ant-design/pull/56451) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Fix Table where hidden measure headers could mount interactive filter dropdowns and trigger unexpected close events when `scroll.y` is enabled. [#56425](https://github.com/ant-design/ant-design/pull/56425) [@QDyanbing](https://github.com/QDyanbing)
+
+## 6.1.3
+
+`2025-12-29`
+
+- 🐞 Fix Drawer.PurePanel failing to respond to mouse interactions. [#56387](https://github.com/ant-design/ant-design/pull/56387) [@wanpan11](https://github.com/wanpan11)
+- 🐞 Fix Select `options` props leaking to DOM elements and causing React unknown-prop warnings. [#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
+
+## 6.1.2
+
+`2025-12-24`
+
+- 🐞 Button fix missing wave effect and the issue where the component could not show Dropdown on hover immediately after clicking. [#56273](https://github.com/ant-design/ant-design/pull/56273) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Fix Form.List with `useWatch` causing double rendering on item removal, with the first render showing an incorrect intermediate state. [#56319](https://github.com/ant-design/ant-design/pull/56319) [@QDyanbing](https://github.com/QDyanbing)
+- 💄 Breadcrumb fix style issue when using a custom `itemRender`. [#56253](https://github.com/ant-design/ant-design/pull/56253) [@guoyunhe](https://github.com/guoyunhe)
+- Transfer
+  - 💄 Remove Transfer className for the selected state when the component is `disabled`. [#56316](https://github.com/ant-design/ant-design/pull/56316) [@zenggpzqbx](https://github.com/zenggpzqbx)
+  - 🐞 Transfer prioritize using the `disabled` property of the component. [#56280](https://github.com/ant-design/ant-design/pull/56280) [#56093](https://github.com/ant-design/ant-design/pull/56093) [@zenggpzqbx](https://github.com/zenggpzqbx)
+- Select
+  - 🐞 Fix Select missing semantic DOM names. [#56322](https://github.com/ant-design/ant-design/pull/56322) [@seanparmelee](https://github.com/seanparmelee)
+  - 🐞 Fix Select wrong hover cursor style when in search mode. [#56130](https://github.com/ant-design/ant-design/pull/56130) [@fpsqdb](https://github.com/fpsqdb)
+  - 🐞 Fix Select cursor style when disabled with `showSearch` enabled. [#56340](https://github.com/ant-design/ant-design/pull/56340) [@QDyanbing](https://github.com/QDyanbing)
+- 💄 Card fix style issue where an unexpected border radius is displayed when using `Card.Grid` without a header. [#56214](https://github.com/ant-design/ant-design/pull/56214) [@DDDDD12138](https://github.com/DDDDD12138)
+- 💄 Tag deepen default background to improve borderless contrast. [#56326](https://github.com/ant-design/ant-design/pull/56326) [@QDyanbing](https://github.com/QDyanbing)
+- ⌨ Segmented fix duplicate `role` and unnecessary `aria-` attributes on items. [#56278](https://github.com/ant-design/ant-design/pull/56278) [@aojunhao123](https://github.com/aojunhao123)
+
 ## 6.1.1
 
 `2025-12-15`

CHANGELOG.zh-CN.md

@@ -15,6 +15,107 @@ tag: vVERSION
 
 ---
 
+## 6.2.3
+
+`2026-02-02`
+
+- Button
+  - 🐞 修复 Button `defaultBg`、`defaultColor`、`defaultHoverColor` 和 `defaultActiveColor` token 不生效的问题。[#56238](https://github.com/ant-design/ant-design/pull/56238) [@ug-hero](https://github.com/ug-hero)
+  - 🐞 修复 Button 默认 token 不生效的问题。[#56719](https://github.com/ant-design/ant-design/pull/56719) [@unknowntocka](https://github.com/unknowntocka)
+  - 🐞 修复 Button `variant="solid"` 在 Space.Compact 中边框显示异常的问题。[#56486](https://github.com/ant-design/ant-design/pull/56486) [@Pareder](https://github.com/Pareder)
+- 🐞 修复 Input.TextArea ref 缺少 `nativeElement` 属性的问题。[#56803](https://github.com/ant-design/ant-design/pull/56803) [@smith3816](https://github.com/smith3816)
+- 🐞 修复 Flex 使用 `orientation` 时默认 `align` 不生效的问题。[#55950](https://github.com/ant-design/ant-design/pull/55950) [@YingtaoMo](https://github.com/YingtaoMo)
+- 🐞 修复 Typography 链接选择器特异性过低导致样式被覆盖的问题。[#56759](https://github.com/ant-design/ant-design/pull/56759) [@QDyanbing](https://github.com/QDyanbing)
+- 🐞 修复 ColorPicker HEX 输入框可以输入无效字符的问题。[#56752](https://github.com/ant-design/ant-design/pull/56752) [@treephesians](https://github.com/treephesians)
+
+## 6.2.2
+
+`2026-01-26`
+
+- 🐞 修复被 Typography 包裹的带 href 的 Button 显示错误颜色和 hover 时 outline 闪烁的问题。[#56619](https://github.com/ant-design/ant-design/pull/56619) [@QdabuliuQ](https://github.com/QdabuliuQ)
+- 🐞 修复 Button `type="text"` 时组件 Token 不生效的问题。[#56291](https://github.com/ant-design/ant-design/pull/56291) [@QDyanbing](https://github.com/QDyanbing)
+- 🐞 修复 Popover 内组件被 Form.Item 状态关联影响的问题。[#56728](https://github.com/ant-design/ant-design/pull/56728)
+- 🐞 修复 Select 多选时占位符显示异常的问题。[#56675](https://github.com/ant-design/ant-design/pull/56675)
+- 💄 修复 Pagination 全局 `fontSize` 变大时各元素上下错位的问题。[#56715](https://github.com/ant-design/ant-design/pull/56715) [@QDyanbing](https://github.com/QDyanbing)
+- 💄 修复 Drawer 在 rtl 模式下 dragger 位置错误的样式问题。[#56693](https://github.com/ant-design/ant-design/pull/56693) [@QdabuliuQ](https://github.com/QdabuliuQ)
+
+## 6.2.1
+
+`2026-01-20`
+
+- 🐞 修复 Button 子元素为包含两个中文字符的标签时，原有 `className` 被清空的问题。[#56593](https://github.com/ant-design/ant-design/pull/56593) [@QdabuliuQ](https://github.com/QdabuliuQ)
+- 🐞 修复 DatePicker 在设置 `suffixIcon` 为 `null` 后不会更新 DOM 的问题。[#56637](https://github.com/ant-design/ant-design/pull/56637) [@AlanQtten](https://github.com/AlanQtten)
+- 🐞 修复 Table 容器设置圆角时，内部内容区域圆角不一致的问题。[#56478](https://github.com/ant-design/ant-design/pull/56478) [@QDyanbing](https://github.com/QDyanbing)
+- 💄 修复 Card Body 区域有非预期圆角值的问题。[#56653](https://github.com/ant-design/ant-design/pull/56653) [@ug-hero](https://github.com/ug-hero)
+- 💄 杂项：修复 `undefined` 和 `null` 值被注入到 CSS 的问题。[#56636](https://github.com/ant-design/ant-design/pull/56636) [@li-jia-nan](https://github.com/li-jia-nan)
+- 💄 杂项：优化所有组件中的 `background` 过渡为 `background-color`。[#56598](https://github.com/ant-design/ant-design/pull/56598) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🛠 优化 Grid 使用 `genCssVar` 方法以生成更加稳定的 CSS 变量名。[#56635](https://github.com/ant-design/ant-design/pull/56635) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🛠 优化 @ant-design/icons 引入方式为独立图标引入，避免被 externals 增加前置依赖。[#56639](https://github.com/ant-design/ant-design/pull/56639) [@ShenHongFei](https://github.com/ShenHongFei)
+
+## 6.2.0
+
+`2026-01-13`
+
+- 🛠 Button、Masonry、Mentions、Select、Space、Splitter、Steps 等组件批量使用 `genCssVar` 方法以生成更加稳定的 css 变量名。[#56562](https://github.com/ant-design/ant-design/pull/56562) [#56559](https://github.com/ant-design/ant-design/pull/56559) [#56557](https://github.com/ant-design/ant-design/pull/56557) [#56555](https://github.com/ant-design/ant-design/pull/56555) [#56550](https://github.com/ant-design/ant-design/pull/56550) [#56547](https://github.com/ant-design/ant-design/pull/56547) [#56546](https://github.com/ant-design/ant-design/pull/56546) [#56529](https://github.com/ant-design/ant-design/pull/56529) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 QRCode 新增 `marginSize` 属性用于展示二维码留白区。[#56569](https://github.com/ant-design/ant-design/pull/56569) [@afc163](https://github.com/afc163)
+- 🆕 Tour 新增 `keyboard` 属性以配置键盘操作。[#56581](https://github.com/ant-design/ant-design/pull/56581) [@cactuser-Lu](https://github.com/cactuser-Lu)
+- Tooltip
+  - 🆕 Tooltip 增加 `maxWidth` design token。[#56540](https://github.com/ant-design/ant-design/pull/56540) [@guoyunhe](https://github.com/guoyunhe)
+  - 🆕 Tooltip/Popover/Popconfirm 默认情况下可以通过 ESC 关闭。[#56492](https://github.com/ant-design/ant-design/pull/56492) [@aojunhao123](https://github.com/aojunhao123)
+- 🛠 Steps 移除无用的样式。[#56565](https://github.com/ant-design/ant-design/pull/56565) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 Form 支持 `tel` 类型校验。[#56533](https://github.com/ant-design/ant-design/pull/56533) [@guoyunhe](https://github.com/guoyunhe)
+- 🐞 修复 Badge 在使用 `text` 属性时，`ref` 无效的问题。[#56532](https://github.com/ant-design/ant-design/pull/56532) [@zombieJ](https://github.com/zombieJ)
+- 🆕 Calendar 和 DatePicker 的 `locale` 配置现在支持只填充部分内容。[#56376](https://github.com/ant-design/ant-design/pull/56376) [@QDyanbing](https://github.com/QDyanbing)
+- 🐞 修复 ConfigProvider 配置 `theme.cssVar` 对图标无效的问题。[#56504](https://github.com/ant-design/ant-design/pull/56504) [@seanparmelee](https://github.com/seanparmelee)
+- 🐞 修复 Collapse `items` 语义化属性无效的问题。[#56517](https://github.com/ant-design/ant-design/pull/56517) [@zombieJ](https://github.com/zombieJ)
+- Modal
+  - 🆕 Modal 支持 `focusable.trap` 以配置是否将焦点锁定在 Modal 内部。[#56500](https://github.com/ant-design/ant-design/pull/56500) [@zombieJ](https://github.com/zombieJ)
+  - 🛠 移除 Modal 无用的 DOM 结构并且优化焦点捕获以防止意外的焦点逃逸到 Modal 外的情况。[#56142](https://github.com/ant-design/ant-design/pull/56142) [@zombieJ](https://github.com/zombieJ)
+- ConfigProvider
+  - 🆕 ConfigProvider 支持 `pagination` 配置 `totalBoundary` 与 `showSizeChanger` 属性。[#56475](https://github.com/ant-design/ant-design/pull/56475) [@chiaweilee](https://github.com/chiaweilee)
+  - 🆕 ConfigProvider 支持配置 Alert 全局图标。[#56241](https://github.com/ant-design/ant-design/pull/56241) [@guoyunhe](https://github.com/guoyunhe)
+- Drawer
+  - 🆕 Drawer 新增 `focusable` 以配置展开后的焦点行为，支持配置锁定焦点在框内、关闭后是否返回焦点。[#56463](https://github.com/ant-design/ant-design/pull/56463) [@zombieJ](https://github.com/zombieJ)
+  - 🐞 修复 Drawer `size` 定义不支持 string 的问题。[#56358](https://github.com/ant-design/ant-design/pull/56358) [@ug-hero](https://github.com/ug-hero)
+- 🐞 修复 Image 嵌套在 Modal 内时，Esc无法顺序关闭。[#56386](https://github.com/ant-design/ant-design/pull/56386) [@aojunhao123](https://github.com/aojunhao123)
+- 🆕 Pagination 支持 `size` 属性。[#56009](https://github.com/ant-design/ant-design/pull/56009) [@guoyunhe](https://github.com/guoyunhe)
+- 🆕 Breadcrumb 支持 `dropdownIcon` 自定义。[#56250](https://github.com/ant-design/ant-design/pull/56250) [@guoyunhe](https://github.com/guoyunhe)
+- 🆕 Checkbox.Group 支持 `role` 配置。[#56126](https://github.com/ant-design/ant-design/pull/56126) [@Pareder](https://github.com/Pareder)
+- 💄 Mentions 修复不同尺寸下 `padding: undefined` 的无效样式。[#56564](https://github.com/ant-design/ant-design/pull/56564) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🐞 修复 Select 在 `size="small"` 时，清除按钮位置对齐问题。[#56525](https://github.com/ant-design/ant-design/pull/56525) [@QDyanbing](https://github.com/QDyanbing)
+
+## 6.1.4
+
+`2026-01-05`
+
+- 🐞 修复 Select 配置 `aria-` 属性时，会同时给多个 DOM 添加的问题。[#56451](https://github.com/ant-design/ant-design/pull/56451) [@zombieJ](https://github.com/zombieJ)
+- 🐞 修复 Table 配置 `scroll.y` 属性时，隐藏的测量表头挂载筛选下拉组件并参与事件判断，导致筛选下拉意外关闭的问题。 [#56425](https://github.com/ant-design/ant-design/pull/56425) [@QDyanbing](https://github.com/QDyanbing)
+
+## 6.1.3
+
+`2025-12-29`
+
+- 🐞 修复 Drawer.PurePanel 无法响应鼠标交互的问题。[#56387](https://github.com/ant-design/ant-design/pull/56387) [@wanpan11](https://github.com/wanpan11)
+- 🐞 修复 Select options 属性透传至原生 DOM 导致 React 未知属性警告的问题。[#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
+
+## 6.1.2
+
+`2025-12-24`
+
+- 🐞 修复 Wave 组件水波纹消失的问题，以及 Button 组件在配置 Dropdown 后，点击触发再次 `hover` 时无法立刻显示 Dropdown 的问题。[#56273](https://github.com/ant-design/ant-design/pull/56273) [@zombieJ](https://github.com/zombieJ)
+- 🐞 修复 Form.List 使用 `useWatch` 时，删除项会触发两次渲染，第一次为不正确的中间状态的问题。[#56319](https://github.com/ant-design/ant-design/pull/56319) [@QDyanbing](https://github.com/QDyanbing)
+- 💄 修复 Breadcrumb 组件自定义 `itemRender` 时的链接颜色异常的问题。[#56253](https://github.com/ant-design/ant-design/pull/56253) [@guoyunhe](https://github.com/guoyunhe)
+- Transfer
+  - 💄 修复 Transfer 组件在禁用时不存在选择状态样式类的问题。[#56316](https://github.com/ant-design/ant-design/pull/56316) [@zenggpzqbx](https://github.com/zenggpzqbx)
+  - 🐞 优化 Transfer 组件逻辑，确保优先使用 `disabled` 属性。[#56280](https://github.com/ant-design/ant-design/pull/56280) [#56093](https://github.com/ant-design/ant-design/pull/56093) [@zenggpzqbx](https://github.com/zenggpzqbx)
+- Select
+  - 🐞 修复 Select 组件缺少语义化 DOM 名称的问题。[#56322](https://github.com/ant-design/ant-design/pull/56322) [@seanparmelee](https://github.com/seanparmelee)
+  - 🐞 修复 Select 组件在搜索状态下鼠标手型样式不对的问题。[#56130](https://github.com/ant-design/ant-design/pull/56130) [@fpsqdb](https://github.com/fpsqdb)
+  - 🐞 修复 Select 在同时设置 `showSearch` 和 `disabled` 时鼠标样式不为禁用的问题。[#56340](https://github.com/ant-design/ant-design/pull/56340) [@QDyanbing](https://github.com/QDyanbing)
+- 💄 修复 Card 组件在使用 Card.Grid 且未设置头部内容时，边框圆角显示异常的问题。[#56214](https://github.com/ant-design/ant-design/pull/56214) [@DDDDD12138](https://github.com/DDDDD12138)
+- 💄 Tag 加深默认背景，提升无边框状态的对比度。[#56326](https://github.com/ant-design/ant-design/pull/56326) [@QDyanbing](https://github.com/QDyanbing)
+- 🐞 修复 Segmented 组件中多余的 `role` 属性和 `aria` 属性。[#56278](https://github.com/ant-design/ant-design/pull/56278) [@aojunhao123](https://github.com/aojunhao123)
+
 ## 6.1.1
 
 `2025-12-15`

components/_util/__tests__/useZIndex.test.tsx

@@ -26,7 +26,7 @@ import {
 import type { ZIndexConsumer, ZIndexContainer } from '../hooks/useZIndex';
 import { consumerBaseZIndexOffset, containerBaseZIndexOffset, useZIndex } from '../hooks/useZIndex';
 import { resetWarned } from '../warning';
-import zIndexContext from '../zindexContext';
+import ZIndexContext from '../zindexContext';
 
 // TODO: Remove this. Mock for React 19
 jest.mock('react-dom', () => {
@@ -45,7 +45,7 @@ const WrapWithProvider: React.FC<PropsWithChildren<{ container: ZIndexContainer
   container,
 }) => {
   const [, contextZIndex] = useZIndex(container);
-  return <zIndexContext.Provider value={contextZIndex}>{children}</zIndexContext.Provider>;
+  return <ZIndexContext.Provider value={contextZIndex}>{children}</ZIndexContext.Provider>;
 };
 
 const containerComponent: Partial<
@@ -130,10 +130,10 @@ const items: MenuProps['items'] = [
 ];
 
 const consumerComponent: Partial<
-  Record<ZIndexConsumer, React.FC<Readonly<{ rootClassName: string }>>>
+  Record<ZIndexConsumer, React.FC<Readonly<{ rootClassName: string; ref?: React.Ref<any> }>>>
 > = {
-  SelectLike: ({ rootClassName, ...props }) => (
-    <>
+  SelectLike: ({ rootClassName, ref, ...props }) => (
+    <div ref={ref}>
       <Select
         {...props}
         rootClassName={`${rootClassName} comp-item comp-Select`}
@@ -159,7 +159,7 @@ const consumerComponent: Partial<
         open
       />
       <ColorPicker {...props} open rootClassName={`${rootClassName} comp-item comp-ColorPicker`} />
-    </>
+    </div>
   ),
   Dropdown: (props) => (
     <Dropdown
@@ -175,15 +175,15 @@ const consumerComponent: Partial<
       <button type="button">test</button>
     </Dropdown>
   ),
-  DatePicker: ({ rootClassName, ...props }) => (
-    <>
+  DatePicker: ({ rootClassName, ref, ...props }) => (
+    <div ref={ref}>
       <DatePicker {...props} rootClassName={`${rootClassName} comp-item comp-DatePicker`} open />
       <DatePicker.TimePicker
         {...props}
         rootClassName={`${rootClassName} comp-item comp-TimePicker`}
         open
       />
-    </>
+    </div>
   ),
   Menu: (props) => <Menu {...props} items={items} defaultOpenKeys={['SubMenu']} />,
   ImagePreview: ({ rootClassName }: ImageProps) => (

components/_util/__tests__/wave.test.tsx

@@ -4,11 +4,15 @@ import { clsx } from 'clsx';
 import mountTest from '../../../tests/shared/mountTest';
 import { act, fireEvent, getByText, render, waitFakeTimer } from '../../../tests/utils';
 import Checkbox from '../../checkbox';
+import { defaultPrefixCls } from '../../config-provider';
+import { genCssVar } from '../../theme/util/genStyleUtils';
 import Wave from '../wave';
 import { TARGET_CLS } from '../wave/interface';
 
 (global as any).isVisible = true;
 
+const [varName] = genCssVar(defaultPrefixCls, 'wave');
+
 // TODO: Remove this. Mock for React 19
 jest.mock('react-dom', () => {
   const realReactDOM = jest.requireActual('react-dom');
@@ -139,9 +143,8 @@ describe('Wave component', () => {
 
     fireEvent.click(container.querySelector('button')!);
     waitRaf();
-
     const style = getWaveStyle();
-    expect(style['--wave-color']).toEqual(undefined);
+    expect(style[varName('color')]).toBe(undefined);
 
     unmount();
   });
@@ -159,7 +162,7 @@ describe('Wave component', () => {
     waitRaf();
 
     const style = getWaveStyle();
-    expect(style['--wave-color']).toEqual('rgb(255, 0, 0)');
+    expect(style[varName('color')]).toBe('rgb(255, 0, 0)');
 
     unmount();
   });
@@ -175,7 +178,7 @@ describe('Wave component', () => {
     waitRaf();
 
     const style = getWaveStyle();
-    expect(style['--wave-color']).toEqual('rgb(0, 0, 255)');
+    expect(style[varName('color')]).toBe('rgb(0, 0, 255)');
 
     unmount();
   });
@@ -191,7 +194,7 @@ describe('Wave component', () => {
     waitRaf();
 
     const style = getWaveStyle();
-    expect(style['--wave-color']).toEqual('rgb(0, 128, 0)');
+    expect(style[varName('color')]).toBe('rgb(0, 128, 0)');
 
     unmount();
   });
@@ -207,7 +210,7 @@ describe('Wave component', () => {
     waitRaf();
 
     const style = getWaveStyle();
-    expect(style['--wave-color']).toEqual('rgb(255, 255, 0)');
+    expect(style[varName('color')]).toBe('rgb(255, 255, 0)');
 
     unmount();
   });
@@ -288,7 +291,7 @@ describe('Wave component', () => {
     waitRaf();
 
     const style = getWaveStyle();
-    expect(style['--wave-color']).toEqual('rgb(255, 0, 0)');
+    expect(style[varName('color')]).toBe('rgb(255, 0, 0)');
 
     unmount();
   });
@@ -306,7 +309,7 @@ describe('Wave component', () => {
     waitRaf();
 
     const style = getWaveStyle();
-    expect(style['--wave-color']).toEqual('red');
+    expect(style[varName('color')]).toBe('red');
 
     unmount();
   });
@@ -374,7 +377,7 @@ describe('Wave component', () => {
     expect(document.querySelector('.ant-wave')).toBeTruthy();
 
     const style = getWaveStyle();
-    expect(style['--wave-color']).toEqual('rgb(255, 0, 0)');
+    expect(style[varName('color')]).toBe('rgb(255, 0, 0)');
 
     unmount();
   });

components/_util/hooks/useMergeSemantic.ts

@@ -7,23 +7,19 @@ export type SemanticSchema = { _default?: string } & {
   [key: `${ValidChar}${string}`]: SemanticSchema;
 };
 
-export type SemanticClassNames<Name extends string> = Partial<Record<Name, string>>;
-
-export type SemanticStyles<Name extends string> = Partial<Record<Name, React.CSSProperties>>;
-
 export type Resolvable<T, P extends AnyObject> = T | ((info: { props: P }) => T);
 
 export type SemanticClassNamesType<
   Props extends AnyObject,
-  SemanticName extends string,
+  SemanticClassNames extends Record<PropertyKey, string>,
   NestedStructure extends EmptyObject = EmptyObject,
-> = Resolvable<Readonly<SemanticClassNames<SemanticName>>, Props> & NestedStructure;
+> = Resolvable<Readonly<SemanticClassNames>, Props> & NestedStructure;
 
 export type SemanticStylesType<
   Props extends AnyObject,
-  SemanticName extends string,
+  SemanticStyles extends Record<PropertyKey, React.CSSProperties>,
   NestedStructure extends EmptyObject = EmptyObject,
-> = Resolvable<Readonly<SemanticStyles<SemanticName>>, Props> & NestedStructure;
+> = Resolvable<Readonly<SemanticStyles>, Props> & NestedStructure;
 
 // ========================= ClassNames =========================
 export const mergeClassNames = <