Merge branch 'master' into chore/scripts

* chore: turn on react-hooks/immutability

* Update .dumi/theme/common/Color/Palette.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: thinkasany <480968828@qq.com>

---------

Signed-off-by: thinkasany <480968828@qq.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: 遇见同学 <1875694521@qq.com>

.cursor/rules/demo.mdc

@@ -1,80 +0,0 @@
----
-description: 
-globs: components/*/demo/**
-alwaysApply: false
----
-# Demo 规范
-
-- demo 代码尽可能简洁
-- 避免冗余代码，方便用户复制到项目直接使用
-- 每个 demo 聚焦展示一个功能点
-- 提供中英文两个版本的说明
-- demo 文件扩展名：
-  - 基础 demo：.tsx
-  - markdown 说明：.md
-- 遵循展示优先原则，确保视觉效果良好
-- 展示组件的主要使用场景
-- 按照由简到繁的顺序排列 demo
-- 确保 demo 在各种尺寸下都能正常展示
-- 对于复杂交互提供必要的操作说明
-
-## 文件组织
-
-- 每个组件演示包含 `.md`（说明文档）和 `.tsx`（实际代码）两个文件
-- 位置：组件目录下的 `demo` 子目录，如 `components/button/demo/`
-- 命名：短横线连接的小写英文单词，如 `basic.tsx`、`custom-filter.tsx`
-- 文件名应简洁地描述示例内容
-
-## MD 文档规范
-
-- 必须包含 `## zh-CN` 和 `## en-US` 两种语言说明
-- 内容简洁明了，突出组件特性和用法
-- 避免冗长段落，必要时使用列表或粗体
-- 标注注意事项和实验性功能
-
-## TSX 代码规范
-
-- 导入顺序：React → 依赖库 → 组件库 → 自定义组件 → 类型 → 样式
-- 类型：为复杂数据定义清晰接口，避免 `any`
-- 结构：
-  - 使用函数式组件和 Hooks
-  - 复杂逻辑提取为独立函数
-  - 状态管理用 `useState`/`useEffect`
-- 风格：
-  - 2空格缩进，箭头函数，驼峰命名
-  - 常量大写+下划线，布尔props用`is`/`has`前缀
-
-## 示例类型
-
-1. **基础用法**：展示最简用法，置于首位，代码精简
-2. **变体展示**：不同大小、类型、状态，合理分组
-3. **交互演示**：展示状态变化和用户交互
-4. **数据交互**：展示加载、过滤、排序等
-5. **边界情况**：空数据、错误状态处理
-
-## 代码质量
-
-- 实用且专注于单一功能
-- 关键处添加简洁注释
-- 使用有意义的数据和变量
-- 优先使用 antd 内置组件，减少外部依赖
-- 性能优化：适当使用 `useMemo`/`useCallback`，清理副作用
-
-## 命名规则
-
-- 基础文件：`basic.tsx`、`controlled.tsx` 等
-- 调试类：使用 `debug-` 前缀
-- 实验性：使用 `experimental-` 前缀
-
-## 特殊示例
-
-- **调试示例**：用于开发测试，通常不在文档显示
-- **无障碍**：展示标签关联和键盘导航
-- **响应式**：展示不同视口下的行为
-- **多语言**：展示国际化配置方法
-
-## 质量要求
-
-- 确保代码运行正常，无控制台错误
-- 适配常见浏览器
-- 避免过时 API，及时更新到新推荐用法

.cursor/rules/docs.mdc

@@ -1,60 +0,0 @@
----
-description: 规范项目文档和 Changelog
-globs: ["**/CHANGELOG*.md", "components/**/index.*.md"]
-alwaysApply: false
----
-# 文档和 Changelog 规范
-
-## 基本要求
-
-- 提供中英文两个版本
-- 新的属性需要声明可用的版本号
-- 属性命名符合 antd 的 API 命名规则：https://github.com/ant-design/ant-design/wiki/API-Naming-rules
-
-## Changelog 规范
-
-- 在 CHANGELOG.en-US.md 和 CHANGELOG.zh-CN.md 书写每个版本的变更
-- 对用户使用上无感知的改动建议（文档修补、微小的样式优化、代码风格重构等等）不要提及，保持 CHANGELOG 的内容有效性
-- 非 antd 组件的改动（如工程化、构建工具、开发流程等）在 changelog 区块中写 "-"
-- 用面向开发者的角度和叙述方式撰写 CHANGELOG，不描述修复细节，描述问题和对开发者的影响；描述用户的原始问题，而非你的解决方式
-
-### 示例
-
-- 不好的例子：修复组件 Typography 的 dom 结构问题
-- 好的例子：修复了 List.Item 中内容空格丢失的问题
-
-### 其他要求
-
-- 新增属性时，建议用易于理解的语言补充描述用户可以感知的变化
-- 尽量给出原始的 PR 链接，社区提交的 PR 改动加上提交者的链接
-- 底层模块升级中间版本要去 rc-component 里找到改动，给出变动说明
-- 建议参考之前版本的日志写法
-- 将同组件的改动放在一起，内容子级缩进
-
-### Changelog Emoji 规范
-
-- 🐞 Bug 修复
-- 💄 样式更新或 token 更新
-- 🆕 新增特性，新增属性
-- 🔥 极其值得关注的新增特性
-- 🇺🇸🇨🇳🇬🇧 国际化改动
-- 📖 📝 文档或网站改进
-- ✅ 新增或更新测试用例
-- 🛎 更新警告/提示信息
-- ⌨️ ♿ 可访问性增强
-- 🗑 废弃或移除
-- 🛠 重构或工具链优化
-- ⚡️ 性能提升
-
-# 文档规范
-
-- 提供中英文两个版本
-- 新属性需声明可用的版本号
-- 属性命名符合 API 命名规则
-- 组件文档包含：使用场景、基础用法、API 说明
-- 文档示例应简洁明了
-- 属性的描述应清晰易懂
-- 对复杂功能提供详细说明
-- 加入 TypeScript 定义
-- 提供常见问题解答
-- 更新文档时同步更新中英文版本

.cursor/rules/git.mdc

@@ -1,128 +0,0 @@
----
-description: 
-globs: 
-alwaysApply: true
----
-# Git 规范
-
-## 分支管理
-
-- 禁止直接提交到以下保护分支：
-  - `master`：主分支，用于发布
-  - `feature`：特性分支，用于开发新版本
-  - `next`：下一个版本分支
-
-## 开发流程
-
-1. 从保护分支（通常是 `master`）创建新的功能分支
-2. 在新分支上进行开发
-3. 提交 Pull Request 到目标分支
-4. 等待 Code Review 和 CI 通过
-5. 合并到目标分支
-
-## 分支命名规范
-
-- 功能开发：`feat/description-of-feature`
-  - 例如：`feat/add-dark-mode`
-  - 例如：`feat/improve-table-performance`
-- 问题修复：`fix/issue-number-or-description`
-  - 例如：`fix/button-style-issue`
-  - 例如：`fix/issue-1234`
-- 文档更新：`docs/what-is-changed`
-  - 例如：`docs/update-api-reference`
-  - 例如：`docs/fix-typos`
-- 代码重构：`refactor/what-is-changed`
-  - 例如：`refactor/button-component`
-  - 例如：`refactor/remove-deprecated-api`
-- 样式修改：`style/what-is-changed`
-  - 例如：`style/update-button-tokens`
-  - 例如：`style/improve-mobile-layout`
-- 测试相关：`test/what-is-changed`
-  - 例如：`test/add-button-test`
-  - 例如：`test/improve-coverage`
-- 构建相关：`build/what-is-changed`
-  - 例如：`build/upgrade-webpack`
-  - 例如：`build/fix-ts-config`
-- 持续集成：`ci/what-is-changed`
-  - 例如：`ci/add-e2e-test`
-  - 例如：`ci/fix-deploy-script`
-- 性能优化：`perf/what-is-changed`
-  - 例如：`perf/optimize-render`
-  - 例如：`perf/reduce-bundle-size`
-- 依赖升级：`deps/package-name-version`
-  - 例如：`deps/upgrade-react-18`
-  - 例如：`deps/update-dependencies`
-
-## 分支命名注意事项
-
-1. 使用小写字母
-2. 使用连字符（-）分隔单词
-3. 简短但具有描述性
-4. 避免使用下划线或其他特殊字符
-5. 如果与 Issue 关联，可以包含 Issue 编号
-
-## Pull Request 规范
-
-### PR 标题
-
-- PR 标题始终使用英文
-- 遵循格式：`类型: 简短描述`
-- 例如：`fix: fix button style issues in Safari browser`
-- 例如：`feat: add dark mode support`
-
-### PR 内容
-
-- PR 内容默认使用英文
-- 尽量简洁清晰地描述改动内容和目的
-- 可以视需要在英文描述后附上中文说明
-
-### PR 模板
-
-提交 PR 时请使用项目中提供的模板：
-
-- 英文模板（推荐）：[PULL_REQUEST_TEMPLATE.md](mdc:.github/PULL_REQUEST_TEMPLATE.md)
-- 中文模板：[PULL_REQUEST_TEMPLATE_CN.md](mdc:.github/PULL_REQUEST_TEMPLATE_CN.md)
-
-### PR 提交注意事项
-
-1. **合并策略**：
-
-   - 新特性请提交至 `feature` 分支
-   - 其余可提交至 `master` 分支
-
-2. **审核流程**：
-
-   - PR 需要由至少一名维护者审核通过后才能合并
-   - 确保所有 CI 检查都通过
-   - 解决所有 Code Review 中提出的问题
-
-3. **PR 质量要求**：
-
-   - 确保代码符合项目代码风格
-   - 添加必要的测试用例
-   - 更新相关文档
-   - 大型改动需要更详细的说明和更多的审核者参与
-
-4. **工具标注**：
-   - 如果是用 Cursor 提交的代码，请在 PR body 末尾进行标注：`> Submitted by Cursor`
-
-## 新增内容
-
-- Pull Request 标题格式：[组件名]: 描述
-- 从 master 分支创建新分支
-- 分支命名规范：
-  - feature/xxx：新特性
-  - fix/xxx：Bug 修复
-  - docs/xxx：文档更新
-- PR 说明中选择改动类型：
-  - 🆕 新特性提交
-  - 🐞 Bug 修复
-  - 📝 文档改进
-  - 📽️ 演示代码改进
-  - 💄 样式/交互改进
-  - 🤖 TypeScript 更新
-  - 📦 包体积优化
-  - ⚡️ 性能优化
-  - 🌐 国际化改进
-- 提供改动背景和解决方案
-- 更新日志同时提供英文和中文版本

.cursor/rules/locale.mdc

@@ -1,94 +0,0 @@
----
-description: 本地化规范文档
-globs: ["components/locale/*_*.ts", "components/locale/index.tsx"]
-alwaysApply: false
----
-
-# 本地化规范
-
-antd 中所有的本地化配置都应该在 `components/locale` 目录中完成定义，主要分为两步：类型定义和本地化配置
-
-## 类型定义
-
-antd 的本地化配置的类型定义的入口文件是 `components/locale/index.tsx`, 当需要添加新的本地化配置时，需要检查对应组件或全局配置的类型是否存在，如果不存在，则需要增加相应的类型描述。
-如果新增或修改的本地化配置时组件配置，那么具体的本地化类型应该在相应的组件目录定义，定义好后在 `components/locale/index.tsx` 引入对应组件的类型定义。
-
-## 本地化配置
-
-### 纯字符串配置
-
-antd 中的本地化配置文件命名规则是：`*_*.ts`，如：`zh_CN.ts`，文件默认导出一个 `Locale` 类型对象。
-通常在为 antd 添加后修改某一项本地化配置时，如无特殊说明，需要同时修改所有语言的本地化配置。
-
-本地化配置文件列表如下（包括但不限于）：
-
-```json
-["components/locale/ar_EG.ts","components/locale/az_AZ.ts","components/locale/bg_BG.ts","components/locale/bn_BD.ts","components/locale/by_BY.ts","components/locale/ca_ES.ts","components/locale/cs_CZ.ts","components/locale/da_DK.ts","components/locale/de_DE.ts","components/locale/el_GR.ts","components/locale/en_GB.ts","components/locale/en_US.ts","components/locale/es_ES.ts","components/locale/et_EE.ts","components/locale/eu_ES.ts","components/locale/fa_IR.ts","components/locale/fi_FI.ts","components/locale/fr_BE.ts","components/locale/fr_CA.ts","components/locale/fr_FR.ts","components/locale/ga_IE.ts","components/locale/gl_ES.ts","components/locale/he_IL.ts","components/locale/hi_IN.ts","components/locale/hr_HR.ts","components/locale/hu_HU.ts","components/locale/hy_AM.ts","components/locale/id_ID.ts","components/locale/is_IS.ts","components/locale/it_IT.ts","components/locale/ja_JP.ts","components/locale/ka_GE.ts","components/locale/kk_KZ.ts","components/locale/km_KH.ts","components/locale/kmr_IQ.ts","components/locale/kn_IN.ts","components/locale/ko_KR.ts","components/locale/ku_IQ.ts","components/locale/lt_LT.ts","components/locale/lv_LV.ts","components/locale/mk_MK.ts","components/locale/ml_IN.ts","components/locale/mn_MN.ts","components/locale/ms_MY.ts","components/locale/my_MM.ts","components/locale/nb_NO.ts","components/locale/ne_NP.ts","components/locale/nl_BE.ts","components/locale/nl_NL.ts","components/locale/pl_PL.ts","components/locale/pt_BR.ts","components/locale/pt_PT.ts","components/locale/ro_RO.ts","components/locale/ru_RU.ts","components/locale/si_LK.ts","components/locale/sk_SK.ts","components/locale/sl_SI.ts","components/locale/sr_RS.ts","components/locale/sv_SE.ts","components/locale/ta_IN.ts","components/locale/th_TH.ts","components/locale/tk_TK.ts","components/locale/tr_TR.ts","components/locale/uk_UA.ts","components/locale/ur_PK.ts","components/locale/uz_UZ.ts","components/locale/vi_VN.ts","components/locale/zh_CN.ts","components/locale/zh_HK.ts","components/locale/zh_TW.ts"]
-```
-
-本地化配置的内容通常是纯字符串，如：
-
-```typescript
-{
-    // ...
-    Modal: {
-        okText: '确定',
-        cancelText: '取消',
-        justOkText: '知道了',
-    }
-    // ...
-}
-```
-
-### 字符串模版配置
-
-当然，也有一些需要配置需要再运行时实时替换变量的模版配置，带有 `${}` 的变量将在实际使用的地方被实时替换成对应的变量内容：
-```typescript
-{
-    // ...
-    date: {
-        format: '${label}日期格式无效',
-        parse: '${label}不能转换为日期',
-        invalid: '${label}是一个无效日期',
-    }
-    // ...
-}
-
-```
-
-### 全局配置
-
-如果某个本地化配置不独属于某个组件，而是数据全局的本地化配置，此时应该在 `global` 中添加相关属性，如：
-
-```typescript
-{
-    // ...
-    // locales for all components
-    global: {
-        placeholder: '请选择',
-    },
-    // ...
-}
-```
-
-# 使用本地化
-
-antd 中具体使用本地化配置时，可以使用 `components/locale/index.tsx` 文件中导出的 `useLocale` 获取全局上下文中配置的本地化，并跟组件属性中传入的本地化配置合并后得到最完整的本地化配置，如：
-
-```tsx
-import { useLocale } from "../locale";
-import enUS from '../locale/en_US';
-
-export function TestComp(props) {
-    const { locale: propLocale } = props;
-    const [contextLocale] = useLocale("TestComp", enUs);
-
-    const locale = {...contextLocale, ...propLocale};
-
-    return (
-        <div title={locale?.title}>
-            {locale?.text}
-        </div>
-    );
-}
-```

.cursor/rules/naming.mdc

@@ -1,108 +0,0 @@
----
-description:
-globs:
-alwaysApply: true
----
-Basically, antd naming requires **FULL NAME** instead of Abbreviation.
-
-## Props
-* Initialize prop: `default` + `PropName`
-* Force render: `forceRender`
-  * Force render sub component: `force` + `Sub Component Name` + `Render`
-* Sub Component Render: `Sub Component Name` + `Render`. e.g.
-> panelRender(originNode, info: { SubComponent1, SubComponent2, [somePassedProps]: someValue })
-* Sub Item Render: `Sub Item Name` + `Render`. e.g.
-> cellRender(date, info: { [somePassedProps]: someValue })
-* Data Source: `dataSource`
-* Panel open: popup & dropdown `open`, additional popup `popupName` + `Open` like `tooltipOpen`
-  * Do not use `visible` to make sure all the visible api align
-* `children`:
-  * Mainly display content. To avoid additional prop name.
-  * Option list like `Select.Option` or `Tree.TreeNode`.
-  * Customize wrapped component can consider use `component` prop if `children` may have other usage in future.
-* Display related naming: `show` + `PropName`
-* Functional: `PropName` + `able`
-* Disable: `disabled`
-  * sub component: `disabled` + `Sub Component Name`
-* Extra: `extra`
-  * sub component: `Sub Component Name` + `extra`. e.g. `titleExtra`
-* mainly icon: `icon`
-  * Merge with function first: `functionName: { icon }`. e.g. `expandable: { icon: <Smile /> }`
-  * Multiple icons: `FunctionName` + `Icon`
-* Trigger: `trigger`
-  * Sub function trigger: `Sub Function` + `Trigger`
-  * Trigger on the time point: `xxx` + `On` + `EventName` (e.g. `destroyOnHidden`)
-* Component use other component config. Naming as component.(e.g. `<Table pagination={{...}} />`)
-* ClassName: `className`
-  * Additional classes should be merged into `classes` (e.g. `<Button classes={{ inner: 'custom-inner' }} />`)
-* Format
-  * Not modify value when blur: `preserveInvalidOnBlur`
-
-## Event
-* Trigger event: `on` + `EventName`
-  * Trigger sub component event: `on` + `SubComponentName` + `EventName` (e.g.`onSearchChange`)
-  * Trigger prop event: `on` + `PropName` + `EventName` (e.g.`onDragStart`)
-* Before trigger event: `before` + `EventName`
-* After trigger event: `after` + `EventName`
-* After continuous action, such as drag Slider: `on` + `EventName` + `Complete`
-
-## Reference
-
-Component should have `ref` prop. Which should provide the structure:
-
-```tsx
-ComponentRef {
-  nativeElement: HTMLElement;
-  // Other function
-  focus: VoidFunction;
-}
-```
-
-## Component Token
-`variant (optional)` + `semantic part` + `semantic part variant (optional)` + `css property` + `size/disabled (optional)`
-
-All component tokens should follow the structure above, and should not conflict with Global Token.
-* `variant` means this token only works in certain variant, like `horizontal` `borderless`.
-* `semantic part` means the typical element of component, like `item` `header`. If there's.
-* `semantic part status` means the variant of the semantic part before it, like `hover` `selected`.
-* `css property` means the exact property where the token is used, like `fontSize` `width`.
-
-For example:
-| v4 | v5 | Note |
-| --- | --- | --- |
-| `@menu-item-color` | `itemColor` | Remove the component prefix |
-| `@select-item-selected-bg` | `itemSelectedBg` | `selected` is variant of item |
-| `@select-single-item-height-lg` | `itemHeightLG` | `single` is variant of Select (by default), `LG` is size of Select |
-
-> Note: If there's no semantic part for one component token, for example, the root borderRadius of Button, it is not suitable to add it. Because we could modify it easily with `className` and `style`.
-
-## Current listing api & Chinese version
-ref: [#16048](mdc:https:/github.com/ant-design/ant-design/issues/16048)
-
-## API standard in the document
-
-### Examples
-
-| Property      | Description                   | Type                           | Default |
-| --------- | ---------------------- | ------------------------------ | ------ |
-| htmlType | xxx        | string                               | `button `      |
-| type          | xxx           | `horizontal ` \| `vertical `  | `horizontal` |
-| disabled  | xxx           | boolean                            | false  |
-| minLength      | xxx                         | number                           | 0      |
-|  style      | xxx                    | CSSProperties                  | -   |
-| character | xxx | (props) => ReactNode | - |
-| offset | xxx| \[number, number] | \[0, 0] |
-| value     | xxx         | string \| number | `small`      |
-
-### Promise
-- When string type, the **Default** use ` `` `.
-- Can also list string optional values ​​in **Type**.
-- When boolean type, the **Default** value is true or false.
-- When number type, the **Default** value use numbers directly.
-- When function type, use an arrow function expression in **Type**.
-- No default value use - .
-- Capitalize the first letter in **Description** apart from `someProp`.
-- No period at the end of the **Description**.
-- API order is arranged in alphabetical order, and can be put together under special circumstances (such as: xs sm md).
-
-ref: [#25066](mdc:https:/github.com/ant-design/ant-design/issues/25066)

.cursor/rules/project.mdc

@@ -1,27 +0,0 @@
----
-description: 
-globs: 
-alwaysApply: true
----
- # 项目背景
-
-这是 ant-design/ant-design（antd）的源代码仓库，是一个 React 组件库，发布为 npm 包 antd。
-
-- 使用 TypeScript 和 React 开发
-- 兼容 React 16 ~ 19 版本
-- 组件库设计精美，功能完善，广泛应用于企业级中后台产品
-- 遵循 Ant Design 设计规范
-- 支持国际化
-
-# 编码规范
-
-- 使用 TypeScript 和 React 书写
-- 使用函数式组件和 hooks，避免类组件
-- 使用提前返回（early returns）提高代码可读性
-- 避免引入新依赖，严控打包体积
-- 兼容 Chrome 80+ 浏览器
-- 支持服务端渲染
-- 保持向下兼容，避免 breaking change
-- 组件名使用大驼峰（PascalCase）
-- 属性名使用小驼峰（camelCase）
-- 合理使用 React.memo、useMemo 和 useCallback 优化性能

.cursor/rules/styling.mdc

@@ -1,79 +0,0 @@
----
-description: 
-globs: components/*/style/**
-alwaysApply: false
----
-# 样式规范
-
-## 样式方案
-
-- 使用 `@ant-design/cssinjs` 作为样式解决方案
-- 每个组件的样式应该放在 `style/` 目录下
-- 样式文件应该与组件结构保持一致
-- 使用 CSS-in-JS 时应当注意性能影响，避免不必要的样式重计算
-- 样式生成函数应遵循 `gen[ComponentName]Style` 的命名规范
-- 样式覆盖应使用类选择器而非标签选择器，提高样式特异性
-
-## Token 系统
-
-- 使用 Ant Design 的设计 Token 系统
-- 避免硬编码颜色、尺寸、间距等值
-- 组件样式应基于全局 Token 和组件级 Token
-- 自定义样式应尽可能使用现有的 Token，保持一致性
-- 组件级 Token 命名规范：`Component` + 属性名，如 `buttonPrimaryColor`
-- 对 Token 的修改应当向下传递，确保设计系统的一致性
-
-## 响应式设计
-
-- 组件应支持在不同屏幕尺寸下良好展示
-- 使用相对单位（如 em、rem）而非固定像素值
-- 关键断点应与设计系统保持一致
-- 在小屏幕上提供良好的降级方案
-- 使用 CSS Grid 和 Flexbox 布局实现响应式布局
-- 考虑移动设备上的触摸交互体验
-
-## 暗色模式
-
-- 所有组件必须支持暗色模式
-- 暗色模式应通过 Token 系统实现，不应硬编码
-- 测试暗色模式下的颜色对比度，确保可访问性
-- 在设计暗色模式时考虑降低亮度和饱和度
-- 确保文本在暗色背景上有足够的对比度
-- 图片和图标应提供适合暗色模式的版本
-
-## RTL 支持
-
-- 组件应支持从右到左（RTL）的阅读方向
-- 使用 CSS 逻辑属性（如 margin-inline-start）替代方向性属性（如 margin-left）
-- 图标和方向性元素应随 RTL 模式翻转
-- 测试组件在 RTL 模式下的布局和交互
-- 确保文本对齐和方向符合 RTL 规范
-- 处理好数字和日期等特殊内容在 RTL 模式下的显示
-
-## 动画效果
-
-- 使用 CSS 过渡实现简单动画
-- 复杂动画使用 rc-motion 实现
-- 尊重用户的减少动画设置（prefers-reduced-motion）
-- 动画时长和缓动函数应保持一致性
-- 动画不应干扰用户的操作和阅读体验
-- 为关键操作提供合适的反馈动画
-- 避免使用会导致性能问题的 CSS 属性（如 box-shadow）进行动画
-
-## 主题定制
-
-- 支持通过 ConfigProvider 进行主题定制
-- 提供完整的组件级 Token 配置
-- 保持向后兼容性，不轻易改变 Token 含义
-- 避免在组件内使用不可覆盖的样式
-- 提供主题切换的平滑过渡效果
-- 测试自定义主题在各种组件组合下的效果
-
-## 可访问性样式
-
-- 遵循 WCAG 2.1 AA 级别标准
-- 确保焦点状态有明显的视觉提示
-- 提供足够的色彩对比度
-- 不依赖颜色来传达信息
-- 支持用户放大页面至 200% 时的正常布局
-- 避免使用会导致闪烁的动画

.cursor/rules/testing.mdc

@@ -1,11 +0,0 @@
----
-description: 
-globs: **/__tests__/**,**/*.test.tsx,**/*.test.ts
-alwaysApply: false
----
- # 测试规范
-
-- 使用 Jest 和 React Testing Library 编写单元测试
-- 对 UI 组件使用快照测试 (Snapshot Testing)
-- 测试覆盖率要求 100%
-- 测试文件放在 __tests__ 目录，命名格式为：index.test.tsx 或 xxx.test.tsx

.cursor/rules/typescript.mdc

@@ -1,81 +0,0 @@
-# TypeScript 规范
-
-## 基本原则
-
-- 所有组件和函数必须提供准确的类型定义
-- 避免使用 `any` 类型，尽可能精确地定义类型
-- 使用接口而非类型别名定义对象结构
-- 导出所有公共接口类型，方便用户使用
-- 严格遵循 TypeScript 类型设计原则，确保类型安全
-- 确保编译无任何类型错误或警告
-
-## 组件类型定义
-
-- 组件 props 应使用 interface 定义，便于扩展
-- 组件 props 接口命名应为 `ComponentNameProps`
-- 为组件状态定义专门的接口，如 `ComponentNameState`
-- 复杂的数据结构应拆分为多个接口定义
-- 组件的 ref 类型应该明确定义，使用 `React.ForwardRefRenderFunction`
-- 所有回调函数类型应明确定义参数和返回值
-
-## 泛型使用
-
-- 适当使用泛型增强类型灵活性
-- 为泛型参数提供合理的默认类型和约束
-- 避免过度使用泛型导致类型复杂化
-- 在泛型参数上应用限制条件（constraints）确保类型安全
-- 为复杂泛型提供类型别名以提高可读性
-
-## 类型合并与扩展
-
-- 使用交叉类型（&）合并多个类型
-- 使用 Partial<T>、Pick<T, K>、Omit<T, K> 等工具类型修改现有类型
-- 扩展原生 DOM 元素属性时，继承相应的内置类型
-- 使用 type 定义联合类型和交叉类型
-- 优先使用自带的工具类型，避免重复定义
-
-## 枚举和常量
-
-- 使用字面量联合类型定义有限的选项集合
-- 为复杂的枚举值提供类型守卫函数
-- 避免使用 `enum`，优先使用联合类型和 `as const`
-- 对于关键常量，使用 `as const` 断言确保类型严格
-- 为联合类型中的每个值提供适当的注释
-
-## 类型推断与断言
-
-- 尽可能依赖 TypeScript 的类型推断
-- 只在必要时使用类型断言（as）
-- 使用类型守卫函数进行运行时类型检查
-- 避免使用非空断言操作符（!）
-- 使用 `instanceof` 和 `typeof` 进行类型守卫
-- 为自定义类型创建类型谓词（type predicates）函数
-
-## JSDoc 注释
-
-- 为复杂的类型、函数、组件添加 JSDoc 注释
-- 使用 `@deprecated` 标记已废弃的 API
-- 在注释中提供使用示例
-- 说明参数和返回值的含义与约束
-- 在 interface 和重要类型定义上添加文档注释
-- 使用 `@template` 标记泛型参数
-
-## 类型兼容性
-
-- 确保类型定义兼容不同版本的 React
-- 避免使用实验性或不稳定的 TypeScript 特性
-- 为第三方库未提供的类型编写声明文件
-- 使用条件类型处理复杂的类型逻辑
-- 验证类型在不同 TypeScript 版本下的兼容性
-
-## 严格使用 TypeScript 类型
-
-- 导出组件类型和接口
-- 使用 React.FC<Props> 或明确的返回类型
-- 避免使用 any，优先使用 unknown
-- 组件 Props 使用 interface 定义
-- 工具类型使用 type 定义
-- 使用明确的命名约定
-- 合理使用泛型提高复用性
-- 导出类型时使用 export type
-- 组件属性使用 JSDoc 注释说明用途

.devcontainer/devcontainer.json

@@ -2,7 +2,7 @@
 // README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
 {
   "name": "ant-design",
-  "image": "mcr.microsoft.com/devcontainers/typescript-node:2-22-bookworm",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:4-22-bookworm",
   "postCreateCommand": "pnpm install",
   "customizations": {
     "vscode": {

.dumi/hooks/useFetch/cache.ts

@@ -1,21 +0,0 @@
-export default class FetchCache {
-  private cache: Map<string, PromiseLike<any>> = new Map();
-
-  get(key: string) {
-    return this.cache.get(key);
-  }
-
-  set(key: string, value: PromiseLike<any>) {
-    this.cache.set(key, value);
-  }
-
-  promise<T>(key: string, promiseFn: () => PromiseLike<T>): PromiseLike<T> {
-    const cached = this.get(key);
-    if (cached) {
-      return cached;
-    }
-    const promise = promiseFn();
-    this.set(key, promise);
-    return promise;
-  }
-}

.dumi/hooks/useFetch/index.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-import fetch from 'cross-fetch';
-
-import FetchCache from './cache';
-
-const cache = new FetchCache();
-
-const useFetch = <T>(options: string | { request: () => PromiseLike<T>; key: string }) => {
-  let request;
-  let key;
-  if (typeof options === 'string') {
-    request = () => fetch(options).then((res) => res.json());
-    key = options;
-  } else {
-    request = options.request;
-    key = options.key;
-  }
-  return React.use<T>(cache.promise<T>(key, request));
-};
-
-export default useFetch;

.dumi/hooks/useIssueCount.ts

@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import type { SWRConfiguration } from 'swr';
+
+const isNumber = (value: any): value is number => {
+  return typeof value === 'number' && !Number.isNaN(value);
+};
+
+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;
+  return totalCount;
+};
+
+const swrConfig: SWRConfiguration<number, Error> = {
+  revalidateOnReconnect: true, // 网络重新连接时重新请求
+  dedupingInterval: 1000 * 60, // 1 分钟内重复 key 不会重新请求
+  shouldRetryOnError: true, // 错误重试
+  errorRetryCount: 3, // 最多重试 3 次
+};
+
+export interface UseIssueCountOptions {
+  repo: string; // e.g. ant-design/ant-design
+  proxyEndpoint?: string; // backend proxy endpoint to avoid GitHub rate limit
+  titleKeywords?: string[]; // keywords to match in issue title
+}
+
+export const useIssueCount = (options: UseIssueCountOptions) => {
+  const { repo, proxyEndpoint, titleKeywords } = options;
+
+  // Note: current query only filters by title keywords. Filtering by component name can be added later if needed.
+  const searchUrl = useMemo(() => {
+    const tokens = (titleKeywords || []).filter(Boolean).map((k) => encodeURIComponent(String(k)));
+    const orExpr = tokens.length > 0 ? tokens.join('%20OR%20') : '';
+    const titlePart = orExpr ? `in:title+(${orExpr})` : 'in:title';
+    const q = `repo:${repo}+is:issue+is:open+${titlePart}`;
+    return `https://api.github.com/search/issues?q=${q}`;
+  }, [repo, titleKeywords]);
+
+  const endpoint = proxyEndpoint || searchUrl;
+
+  const { data, error, isLoading } = useSWR<number, Error>(endpoint || null, fetcher, swrConfig);
+
+  const issueNewUrl = `https://github.com/${repo}/issues/new/choose`;
+
+  const issueSearchUrl = useMemo(() => {
+    const keywords = (titleKeywords || []).filter(Boolean).map((k) => String(k));
+    const groupExpr =
+      keywords.length > 0 ? `(${keywords.map((k) => `is:issue in:title ${k}`).join(' OR ')})` : '';
+    const qRaw = `is:open ${groupExpr}`.trim();
+    return `https://github.com/${repo}/issues?q=${encodeURIComponent(qRaw)}`;
+  }, [repo, titleKeywords]);
+
+  return {
+    issueCount: data,
+    issueCountError: error,
+    issueCountLoading: isLoading,
+    issueNewUrl,
+    issueSearchUrl,
+  };
+};
+
+export default useIssueCount;

.dumi/hooks/useMenu.tsx

@@ -221,7 +221,7 @@ const useMenu = (options: UseMenuOptions = {}): readonly [MenuProps['items'], st
         return result;
       }, []) ?? []
     );
-  }, [sidebarData, fullData, pathname, search, options]);
+  }, [sidebarData, pathname, fullData, search, before, after]);
 
   return [menuItems, pathname] as const;
 };

.dumi/pages/404/index.tsx

@@ -38,7 +38,7 @@ const NotFoundPage: React.FC<NotFoundProps> = ({ router }) => {
       code: 11,
       msg: `Page not found: ${location.href}; Source: ${document.referrer}`,
     });
-  }, []);
+  }, [isZhCN, pathname, router]);
 
   return (
     <Result

.dumi/pages/index/components/BannerRecommends.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Badge, Carousel, Flex, Skeleton, Typography } from 'antd';
+import { Alert, Badge, Carousel, Flex, Skeleton, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 
 import useLocale from '../../../hooks/useLocale';
 import SiteContext from '../../../theme/slots/SiteContext';
 import type { Extra, Icon } from './util';
-import { getCarouselStyle, useSiteData } from './util';
+import { getCarouselStyle, useAntdSiteConfig } from './util';
 
 const useStyle = createStyles(({ token, css, cx }) => {
   const { carousel } = getCarouselStyle();
@@ -67,17 +67,20 @@ const useStyle = createStyles(({ token, css, cx }) => {
 interface RecommendItemProps {
   extra: Extra;
   index: number;
-  icons: Icon[];
+  icons?: Icon[];
   className?: string;
 }
 
-const RecommendItem: React.FC<RecommendItemProps> = ({ extra, index, icons, className }) => {
+const RecommendItem: React.FC<RecommendItemProps> = (props) => {
+  const { extra, index, icons, className } = props;
+
   const { styles } = useStyle();
 
   if (!extra) {
     return <Skeleton key={index} />;
   }
-  const icon = icons.find((i) => i.name === extra.source);
+
+  const icon = icons?.find((i) => i.name === extra.source);
 
   const card = (
     <a
@@ -93,7 +96,9 @@ const RecommendItem: React.FC<RecommendItemProps> = ({ extra, index, icons, clas
       </Typography.Paragraph>
       <Flex justify="space-between" align="center">
         <Typography.Text>{extra.date}</Typography.Text>
-        {icon && <img src={icon.href} draggable={false} className={styles.bannerBg} alt="banner" />}
+        {icon?.href && (
+          <img src={icon.href} draggable={false} className={styles.bannerBg} alt="banner" />
+        )}
       </Flex>
     </a>
   );
@@ -111,6 +116,7 @@ const RecommendItem: React.FC<RecommendItemProps> = ({ extra, index, icons, clas
 
 export const BannerRecommendsFallback: React.FC = () => {
   const { isMobile } = React.use(SiteContext);
+
   const { styles } = useStyle();
 
   const list = Array.from({ length: 3 });
@@ -118,7 +124,7 @@ export const BannerRecommendsFallback: React.FC = () => {
   return isMobile ? (
     <Carousel className={styles.carousel}>
       {list.map((_, index) => (
-        <div key={index} className={styles.itemBase}>
+        <div key={`mobile-${index}`} className={styles.itemBase}>
           <Skeleton active style={{ padding: '0 24px' }} />
         </div>
       ))}
@@ -126,7 +132,7 @@ export const BannerRecommendsFallback: React.FC = () => {
   ) : (
     <div className={styles.container}>
       {list.map((_, index) => (
-        <div key={index} className={styles.itemBase}>
+        <div key={`desktop-${index}`} className={styles.itemBase}>
           <Skeleton active />
         </div>
       ))}
@@ -138,25 +144,37 @@ const BannerRecommends: React.FC = () => {
   const { styles } = useStyle();
   const [, lang] = useLocale();
   const { isMobile } = React.use(SiteContext);
-  const data = useSiteData();
-  const extras = data?.extras?.[lang];
-  const icons = data?.icons || [];
-  const first3 =
-    !extras || extras.length === 0 ? Array.from<any>({ length: 3 }) : extras.slice(0, 3);
+  const { data, error, isLoading } = useAntdSiteConfig();
 
-  if (!data) {
+  if (isLoading) {
     return <BannerRecommendsFallback />;
   }
 
+  if (error) {
+    return (
+      <Alert
+        showIcon
+        type="error"
+        message={error.message}
+        description={process.env.NODE_ENV !== 'production' ? error.stack : undefined}
+      />
+    );
+  }
+
+  const extras = data?.extras?.[lang];
+
+  const mergedExtras =
+    !extras || !extras.length ? Array.from<Extra>({ length: 3 }) : extras.slice(0, 3);
+
   if (isMobile) {
     return (
       <Carousel className={styles.carousel}>
-        {first3.map((extra, index) => (
-          <div key={index}>
+        {mergedExtras.map((extra, index) => (
+          <div key={`mobile-${index}`}>
             <RecommendItem
               extra={extra}
               index={index}
-              icons={icons}
+              icons={data?.icons}
               className={styles.sliderItem}
             />
           </div>
@@ -167,13 +185,13 @@ const BannerRecommends: React.FC = () => {
 
   return (
     <div className={styles.container}>
-      {first3.map((extra, index) => (
+      {mergedExtras.map((extra, index) => (
         <RecommendItem
+          key={`desktop-${index}`}
           extra={extra}
           index={index}
-          icons={icons}
+          icons={data?.icons}
           className={styles.cardItem}
-          key={index}
         />
       ))}
     </div>

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

@@ -258,7 +258,18 @@ const ComponentsList: React.FC = () => {
         ),
       },
     ],
-    [isMobile],
+    [
+      isMobile,
+      locale.inProgress,
+      locale.lastMonth,
+      locale.lastWeek,
+      locale.lastYear,
+      locale.sampleContent,
+      locale.success,
+      locale.taskFailed,
+      locale.tour,
+      locale.yesterday,
+    ],
   );
 
   return isMobile ? (

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

@@ -73,13 +73,12 @@ const ThemeColorPicker: React.FC<ThemeColorPickerProps> = ({ value, onChange, id
 
   const matchColors = React.useMemo(() => {
     const valueStr = generateColor(value || '').toRgbString();
-    let existActive = false;
     const colors = PRESET_COLORS.map((color) => {
       const colorStr = generateColor(color).toRgbString();
       const active = colorStr === valueStr;
-      existActive = existActive || active;
-      return { color, active, picker: false };
+      return { color, active, picker: false } as const;
     });
+    const existActive = colors.some((c) => c.active);
 
     return [
       ...colors,

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

@@ -93,7 +93,7 @@ const ThemePicker: React.FC<ThemePickerProps> = (props) => {
             })}
           >
             <input type="radio" name="theme" id={index === 0 ? id : undefined} />
-            <img src={THEMES[theme]} alt={theme} />
+            <img draggable={false} src={THEMES[theme]} alt={theme} />
           </label>
           <span>{locale[theme]}</span>
         </Flex>

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

@@ -471,6 +471,7 @@ const Theme: React.FC = () => {
             <div className={styles.logo}>
               <div className={styles.logoImg}>
                 <img
+                  draggable={false}
                   src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
                   style={{
                     filter:
@@ -588,15 +589,17 @@ const Theme: React.FC = () => {
           >
             {/* Image Left Top */}
             <img
+              draggable={false}
               className={classNames(styles.pos, styles.leftTopImage)}
               src="https://gw.alipayobjects.com/zos/bmw-prod/bd71b0c6-f93a-4e52-9c8a-f01a9b8fe22b.svg"
-              alt=""
+              alt="image-left-top"
             />
             {/* Image Right Bottom */}
             <img
+              draggable={false}
               className={classNames(styles.pos, styles.rightBottomImage)}
               src="https://gw.alipayobjects.com/zos/bmw-prod/84ad805a-74cb-4916-b7ba-9cdc2bdec23a.svg"
-              alt=""
+              alt="image-right-bottom"
             />
           </div>
           {/* >>>>>> Dark <<<<<< */}
@@ -608,15 +611,17 @@ const Theme: React.FC = () => {
           >
             {/* Image Left Top */}
             <img
+              draggable={false}
               className={classNames(styles.pos, styles.leftTopImagePos)}
               src="https://gw.alipayobjects.com/zos/bmw-prod/a213184a-f212-4afb-beec-1e8b36bb4b8a.svg"
-              alt=""
+              alt="image-left-top"
             />
             {/* Image Right Bottom */}
             <img
+              draggable={false}
               className={classNames(styles.pos, styles.rightBottomPos)}
               src="https://gw.alipayobjects.com/zos/bmw-prod/bb74a2fb-bff1-4d0d-8c2d-2ade0cd9bb0d.svg"
-              alt=""
+              alt="image-right-bottom"
             />
           </div>
           {/* >>>>>> Background Image <<<<<< */}

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

@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react';
+/* eslint-disable compat/compat */
 import { css } from 'antd-style';
-import fetch from 'cross-fetch';
+import useSWR from 'swr';
 
 export interface Author {
   avatar: string;
@@ -82,19 +82,13 @@ export function preLoad(list: string[]) {
   }
 }
 
-export function useSiteData(): Partial<SiteData> | undefined {
-  const [data, setData] = useState<SiteData | undefined>(undefined);
-
-  useEffect(() => {
-    fetch('https://render.alipay.com/p/h5data/antd4-config_website-h5data.json').then(
-      async (res) => {
-        setData(await res.json());
-      },
-    );
-  }, []);
-
-  return data;
-}
+export const useAntdSiteConfig = () => {
+  const { data, error, isLoading } = useSWR<Partial<SiteData>, Error>(
+    `https://render.alipay.com/p/h5data/antd4-config_website-h5data.json`,
+    (url: string) => fetch(url).then((res) => res.json()),
+  );
+  return { data, error, isLoading };
+};
 
 export const getCarouselStyle = () => ({
   carousel: css`

.dumi/pages/index/index.tsx

@@ -51,11 +51,7 @@ const Homepage: React.FC = () => {
 
       <div>
         {/* 定制主题 */}
-        <ConfigProvider
-          theme={{
-            algorithm: theme.defaultAlgorithm,
-          }}
-        >
+        <ConfigProvider theme={{ algorithm: theme.defaultAlgorithm }}>
           <Suspense fallback={null}>
             <Theme />
           </Suspense>

.dumi/rehypeChangelog.ts

@@ -1,6 +1,7 @@
 import type { UnifiedTransformer } from 'dumi';
 import { unistUtilVisit } from 'dumi';
 import set from 'lodash/set';
+import semver from 'semver';
 
 let hastToString: typeof import('hast-util-to-string').toString;
 
@@ -9,6 +10,24 @@ let hastToString: typeof import('hast-util-to-string').toString;
   ({ toString: hastToString } = await import('hast-util-to-string'));
 })();
 
+function isValidStrictVer(ver: string): boolean {
+  if (!semver.valid(ver)) {
+    return false;
+  }
+
+  const parts = ver.split('.');
+  if (parts.length !== 3) {
+    return false;
+  }
+
+  return parts.every((part) => /^\d+$/.test(part));
+}
+
+function isValidDate(dateStr: string): boolean {
+  // (YYYY-MM-DD)
+  return /^\d{4}-\d{2}-\d{2}$/.test(dateStr);
+}
+
 const COMPONENT_NAME = 'RefinedChangelog';
 
 function rehypeChangelog(): UnifiedTransformer<any> {
@@ -23,32 +42,73 @@ function rehypeChangelog(): UnifiedTransformer<any> {
     const nodesToWrap: { parent: any; startIdx: number }[] = [];
     const WRAPPER_FLAG = 'data-changelog-wrapped'; // 包裹容器唯一标识
 
+    function checkLogSegment(node: any, strict = true) {
+      if (node && node.type === 'element' && node.tagName === 'h2') {
+        if (strict) {
+          const ver = hastToString(node);
+          return isValidStrictVer(ver) && semver.major(ver) >= 5;
+        }
+        return true;
+      }
+      return false;
+    }
+
     unistUtilVisit.visit(tree, 'element', (node, idx, parent) => {
       if (node.properties?.[WRAPPER_FLAG]) {
         return unistUtilVisit.SKIP;
       }
-      if (
-        idx !== undefined &&
-        parent &&
-        idx! + 2 < parent.children.length &&
-        node.tagName === 'h2' &&
-        parent.children[idx! + 1].tagName === 'p' &&
-        parent.children[idx! + 2].tagName === 'ul'
-      ) {
+
+      if (idx !== undefined && parent && checkLogSegment(node)) {
         nodesToWrap.push({ parent, startIdx: idx! });
       }
     });
 
-    nodesToWrap.reverse().forEach(({ parent, startIdx }) => {
-      const [heading, date, list] = parent.children.splice(startIdx, 3);
+    const totalNodesToWrap = nodesToWrap.length;
+    for (let i = totalNodesToWrap - 1; i >= 0; i--) {
+      const { parent, startIdx } = nodesToWrap[i];
 
+      let endIdx = -1;
+      const isEndOfWrap = i === totalNodesToWrap - 1;
+      for (let j = startIdx + 1; j < parent.children.length; j++) {
+        const nextNode = parent.children[j];
+        if (
+          (isEndOfWrap && checkLogSegment(nextNode, false)) || // 日志页通常还存在历史 major 版本
+          nextNode.properties?.[WRAPPER_FLAG] || // 已经被处理
+          checkLogSegment(nextNode) // 下一段日志
+        ) {
+          endIdx = j;
+          break;
+        }
+      }
+      if (endIdx === -1) {
+        continue;
+      }
+
+      // Version
+      const heading = parent.children[startIdx];
+
+      // Find Date
+      let dateIdx = -1;
+      for (let j = startIdx + 1; j < endIdx; j++) {
+        const node = parent.children[j];
+        if (node.type === 'element' && isValidDate(hastToString(node))) {
+          dateIdx = j;
+          break;
+        }
+      }
+      if (dateIdx === -1) {
+        continue;
+      }
+
+      // Collect list nodes between dateIdx and endIdx
       const version = hastToString(heading);
+      const date = parent.children[dateIdx];
       const dateStr = hastToString(date);
+      const details = parent.children.slice(dateIdx + 1, endIdx);
 
       const headingWrap = {
         type: 'element',
         tagName: `${COMPONENT_NAME}.Version`,
-        // 为标签添加语义化 className (下面同理)
         children: [set(heading, 'properties.className', 'changelog-version')],
       };
 
@@ -58,10 +118,13 @@ function rehypeChangelog(): UnifiedTransformer<any> {
         children: [set(date, 'properties.className', 'changelog-date')],
       };
 
-      const listWrap = {
+      const detailWrap = {
         type: 'element',
         tagName: `${COMPONENT_NAME}.Details`,
-        children: [set(list, 'properties.className', 'changelog-details')],
+        properties: {
+          className: 'changelog-details',
+        },
+        children: details,
       };
 
       const wrapper = {
@@ -82,11 +145,11 @@ function rehypeChangelog(): UnifiedTransformer<any> {
             value: JSON.stringify(dateStr),
           },
         ],
-        children: [headingWrap, dateWrap, listWrap],
+        children: [headingWrap, dateWrap, detailWrap],
       };
 
-      parent.children.splice(startIdx, 0, wrapper);
-    });
+      parent.children.splice(startIdx, endIdx - startIdx, wrapper);
+    }
   };
 }
 

.dumi/remarkAnchor.ts

@@ -41,7 +41,7 @@ const remarkAnchor = (opt: Options = {}): UnifiedTransformer<any> => {
     const ids = new Set();
 
     unistUtilVisit.visit(tree, 'heading', (node) => {
-      if (toArr(realOpt.level).indexOf(node.depth) === -1) {
+      if (!toArr(realOpt.level).includes(node.depth)) {
         return unistUtilVisit.CONTINUE;
       }
 

.dumi/theme/builtins/Antd.tsx

@@ -5,11 +5,10 @@ interface AntdProps {
   component: keyof typeof all;
 }
 
-function Antd(props: AntdProps) {
+const Antd: React.FC<AntdProps> = (props) => {
   const { component, ...restProps } = props;
-  const Component = (all[component] ?? React.Fragment) as React.ComponentType;
-
+  const Component = (all[component] ?? React.Fragment) as React.ComponentType<any>;
   return <Component {...restProps} />;
-}
+};
 
 export default Antd;

.dumi/theme/builtins/Badge/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Tag, TagProps } from 'antd';
+import { Tag } from 'antd';
+import type { TagProps } from 'antd';
 
 // https://github.com/umijs/dumi/blob/master/src/client/theme-default/builtins/Badge/index.tsx
 interface BadgeProps extends TagProps {

.dumi/theme/builtins/ComponentMeta/index.tsx

@@ -1,46 +1,66 @@
 import React from 'react';
-import { EditOutlined, GithubOutlined, HistoryOutlined, CompassOutlined } from '@ant-design/icons';
+import {
+  BugOutlined,
+  CompassOutlined,
+  EditOutlined,
+  GithubOutlined,
+  HistoryOutlined,
+  IssuesCloseOutlined,
+  LoadingOutlined,
+} from '@ant-design/icons';
 import type { GetProp } from 'antd';
 import { Descriptions, Flex, theme, Tooltip, Typography } from 'antd';
 import { createStyles, css } from 'antd-style';
 import kebabCase from 'lodash/kebabCase';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import Link from '../../common/Link';
 
+import useIssueCount from '../../../hooks/useIssueCount';
 import useLocale from '../../../hooks/useLocale';
 import ComponentChangelog from '../../common/ComponentChangelog';
+import Link from '../../common/Link';
 
 const locales = {
   cn: {
     import: '使用',
     copy: '复制',
     copied: '已复制',
-    source: '源码',
+    source: '反馈',
     docs: '文档',
     edit: '编辑此页',
     changelog: '更新日志',
     design: '设计指南',
     version: '版本',
+    issueNew: '提交问题',
+    issueOpen: '待解决',
   },
   en: {
     import: 'Import',
     copy: 'Copy',
     copied: 'Copied',
-    source: 'Source',
+    source: 'GitHub',
     docs: 'Docs',
     edit: 'Edit this page',
     changelog: 'Changelog',
     design: 'Design',
     version: 'Version',
+    issueNew: 'Issue',
+    issueOpen: 'Open issues',
   },
 };
 
-const branchUrl = 'https://github.com/ant-design/ant-design/edit/master/';
+const branchUrl = (repo: string) => `https://github.com/${repo}/edit/master/`;
 
 function isVersionNumber(value?: string) {
   return value && /^\d+\.\d+\.\d+$/.test(value);
 }
 
+const transformComponentName = (componentName: string) => {
+  if (componentName === 'Notification' || componentName === 'Message') {
+    return componentName.toLowerCase();
+  }
+  return componentName;
+};
+
 const useStyle = createStyles(({ token }) => ({
   code: css`
     cursor: pointer;
@@ -61,7 +81,7 @@ const useStyle = createStyles(({ token }) => ({
     }
   `,
   icon: css`
-    margin-inline-end: 3px;
+    margin-inline-end: 4px;
   `,
 }));
 
@@ -71,15 +91,23 @@ export interface ComponentMetaProps {
   filename?: string;
   version?: string;
   designUrl?: string;
+  searchTitleKeywords?: string[];
+  repo: string;
 }
 
 const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
-  const { component, source, filename, version, designUrl } = props;
+  const { component, source, filename, version, designUrl, searchTitleKeywords, repo } = props;
   const { token } = theme.useToken();
   const [locale, lang] = useLocale(locales);
   const isZhCN = lang === 'cn';
   const { styles } = useStyle();
 
+  // ======================= Issues Count =======================
+  const { issueCount, issueCountLoading, issueNewUrl, issueSearchUrl } = useIssueCount({
+    repo,
+    titleKeywords: searchTitleKeywords,
+  });
+
   // ========================= Copy =========================
   const [copied, setCopied] = React.useState(false);
 
@@ -98,7 +126,7 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
     if (String(source) === 'true') {
       const kebabComponent = kebabCase(component);
       return [
-        `https://github.com/ant-design/ant-design/blob/master/components/${kebabComponent}`,
+        `https://github.com/${repo}/blob/master/components/${kebabComponent}`,
         `components/${kebabComponent}`,
       ];
     }
@@ -108,14 +136,7 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
     }
 
     return [source, source];
-  }, [component, source]);
-
-  const transformComponentName = (componentName: string) => {
-    if (componentName === 'Notification' || componentName === 'Message') {
-      return componentName.toLowerCase();
-    }
-    return componentName;
-  };
+  }, [component, repo, source]);
 
   // ======================== Render ========================
   const importList = `import { ${transformComponentName(component)} } from "antd";`;
@@ -126,9 +147,7 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
       colon={false}
       column={1}
       style={{ marginTop: token.margin }}
-      styles={{
-        label: { paddingInlineEnd: token.padding, width: 56 },
-      }}
+      styles={{ label: { paddingInlineEnd: token.padding, width: 56 } }}
       items={
         [
           {
@@ -150,10 +169,22 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
           filledSource && {
             label: locale.source,
             children: (
-              <Typography.Link className={styles.code} href={filledSource} target="_blank">
-                <GithubOutlined className={styles.icon} />
-                <span>{abbrSource}</span>
-              </Typography.Link>
+              <Flex justify="flex-start" align="center" gap="small">
+                <Typography.Link className={styles.code} href={filledSource} target="_blank">
+                  <GithubOutlined className={styles.icon} />
+                  <span>{abbrSource}</span>
+                </Typography.Link>
+                <Typography.Link className={styles.code} href={issueNewUrl} target="_blank">
+                  <BugOutlined className={styles.icon} />
+                  <span>{locale.issueNew}</span>
+                </Typography.Link>
+                <Typography.Link className={styles.code} href={issueSearchUrl} target="_blank">
+                  <IssuesCloseOutlined className={styles.icon} />
+                  <span>
+                    {locale.issueOpen} {issueCountLoading ? <LoadingOutlined /> : issueCount}
+                  </span>
+                </Typography.Link>
+              </Flex>
             ),
           },
           filename && {
@@ -162,7 +193,7 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
               <Flex justify="flex-start" align="center" gap="small">
                 <Typography.Link
                   className={styles.code}
-                  href={`${branchUrl}${filename}`}
+                  href={`${branchUrl(repo)}${filename}`}
                   target="_blank"
                 >
                   <EditOutlined className={styles.icon} />

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

@@ -223,6 +223,7 @@ const Overview: React.FC = () => {
                       >
                         <div className={styles.componentsOverviewImg}>
                           <img
+                            draggable={false}
                             src={
                               theme.includes('dark') && component.coverDark
                                 ? component.coverDark

.dumi/theme/builtins/DemoWrapper/index.tsx

@@ -62,7 +62,7 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
           },
         });
       }, []),
-    [expandAll, showDebug],
+    [expandAll, items, showDebug],
   );
 
   return (

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

@@ -30,7 +30,7 @@ interface CategoryProps {
   title: CategoriesKeys;
   icons: string[];
   theme: ThemeType;
-  newIcons: string[];
+  newIcons: ReadonlyArray<string> | string[];
 }
 
 const Category: React.FC<CategoryProps> = (props) => {
@@ -40,17 +40,20 @@ const Category: React.FC<CategoryProps> = (props) => {
   const intl = useIntl();
   const [justCopied, setJustCopied] = React.useState<string | null>(null);
   const copyId = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-  const onCopied = React.useCallback((type: string, text: string) => {
-    message.success(
-      <span>
-        <code className={styles.copiedCode}>{text}</code> copied 🎉
-      </span>,
-    );
-    setJustCopied(type);
-    copyId.current = setTimeout(() => {
-      setJustCopied(null);
-    }, 2000);
-  }, []);
+  const onCopied = React.useCallback(
+    (type: string, text: string) => {
+      message.success(
+        <span>
+          <code className={styles.copiedCode}>{text}</code> copied 🎉
+        </span>,
+      );
+      setJustCopied(type);
+      copyId.current = setTimeout(() => {
+        setJustCopied(null);
+      }, 2000);
+    },
+    [message, styles.copiedCode],
+  );
   React.useEffect(
     () => () => {
       if (copyId.current) {

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

@@ -35,6 +35,8 @@ interface IconSearchState {
   searchKey: string;
 }
 
+const NEW_ICON_NAMES: ReadonlyArray<string> = [];
+
 const IconSearch: React.FC = () => {
   const intl = useIntl();
   const { styles } = useStyle();
@@ -44,8 +46,6 @@ const IconSearch: React.FC = () => {
   });
   const token = useTheme();
 
-  const newIconNames: string[] = [];
-
   const handleSearchIcon = debounce((e: React.ChangeEvent<HTMLInputElement>) => {
     setDisplayState((prevState) => ({ ...prevState, searchKey: e.target.value }));
   }, 300);
@@ -68,7 +68,7 @@ const IconSearch: React.FC = () => {
 
     const tagMatchedCategoryObj = matchCategoriesFromTag(normalizedSearchKey, metaInfo);
 
-    const namedMatchedCategoryObj = Object.keys(categories).reduce(
+    const namedMatchedCategoryObj = Object.keys(categories).reduce<Record<string, MatchedCategory>>(
       (acc, key) => {
         let iconList = categories[key as CategoriesKeys];
         if (normalizedSearchKey) {
@@ -89,7 +89,7 @@ const IconSearch: React.FC = () => {
 
         return acc;
       },
-      {} as Record<string, MatchedCategory>,
+      {},
     );
 
     // merge matched categories from tag search
@@ -110,13 +110,14 @@ const IconSearch: React.FC = () => {
         title={category as CategoriesKeys}
         theme={theme}
         icons={icons}
-        newIcons={newIconNames}
+        newIcons={NEW_ICON_NAMES}
       />
     ));
     return categoriesResult.length ? categoriesResult : <Empty style={{ margin: '2em 0' }} />;
-  }, [displayState.searchKey, displayState.theme]);
+  }, [displayState]);
 
   const [searchBarAffixed, setSearchBarAffixed] = useState<boolean | undefined>(false);
+
   const { borderRadius, colorBgContainer, anchorTop } = token;
 
   const affixedStyle: CSSProperties = {
@@ -183,36 +184,27 @@ type MatchedCategory = {
   icons: string[];
 };
 
-function matchCategoriesFromTag(
-  searchKey: string,
-  metaInfo: IconsMeta,
-): Record<string, MatchedCategory> {
+function matchCategoriesFromTag(searchKey: string, metaInfo: IconsMeta) {
   if (!searchKey) {
     return {};
   }
 
-  return Object.keys(metaInfo).reduce(
-    (acc, key) => {
-      const icon = metaInfo[key as IconName];
-      const category = icon.category;
+  return Object.keys(metaInfo).reduce<Record<string, MatchedCategory>>((acc, key) => {
+    const icon = metaInfo[key as IconName];
+    const category = icon.category;
 
-      if (icon.tags.some((tag) => tag.toLowerCase().includes(searchKey))) {
-        if (acc[category]) {
-          // if category exists, push icon to icons array
-          acc[category].icons.push(key);
-        } else {
-          // if category does not exist, create a new entry
-          acc[category] = {
-            category,
-            icons: [key],
-          };
-        }
+    if (icon.tags.some((tag) => tag.toLowerCase().includes(searchKey))) {
+      if (acc[category]) {
+        // if category exists, push icon to icons array
+        acc[category].icons.push(key);
+      } else {
+        // if category does not exist, create a new entry
+        acc[category] = { category, icons: [key] };
       }
+    }
 
-      return acc;
-    },
-    {} as Record<string, MatchedCategory>,
-  );
+    return acc;
+  }, {});
 }
 
 function mergeCategory(

.dumi/theme/builtins/ImagePreview/index.tsx

@@ -65,7 +65,7 @@ const ImagePreview: React.FC<React.PropsWithChildren<ImagePreviewProps>> = (prop
     return (
       <div key={index}>
         <div className="image-modal-container">
-          <img {...metaCopy} src={meta.src} alt={meta.alt} />
+          <img {...metaCopy} draggable={false} src={meta.src} alt={meta.alt} />
         </div>
       </div>
     );

.dumi/theme/builtins/LocaleLink/index.tsx

@@ -39,7 +39,7 @@ const LocaleLink: React.FC<React.PropsWithChildren<LocaleLinkProps>> = ({
     }
 
     return to;
-  }, [to]);
+  }, [localeType, to]);
 
   const linkProps: LocaleLinkProps = {
     ...props,

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

@@ -7,6 +7,7 @@ import { FormattedMessage, useSiteData } from 'dumi';
 import LZString from 'lz-string';
 
 import packageJson from '../../../../package.json';
+import useLocale from '../../../hooks/useLocale';
 import ClientOnly from '../../common/ClientOnly';
 import CodePenIcon from '../../icons/CodePenIcon';
 import CodeSandboxIcon from '../../icons/CodeSandboxIcon';
@@ -54,6 +55,8 @@ const Actions: React.FC<ActionsProps> = ({
   entryCode,
   styleCode,
 }) => {
+  const [, lang] = useLocale();
+  const isZhCN = lang === 'cn';
   const { pkg } = useSiteData();
   const { codeType } = React.use(DemoContext);
   const codeSandboxIconRef = useRef<HTMLFormElement>(null);
@@ -214,6 +217,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
     demoJsContent,
     indexCssContent,
     suffix,
+    isZhCN,
   });
 
   return (

.dumi/theme/builtins/Previewer/CodeBlockButton.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useState } from 'react';
+import React, { Suspense, useMemo, useState } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import { App, Tooltip } from 'antd';
 import { FormattedMessage } from 'dumi';
@@ -27,17 +27,19 @@ const CodeBlockButton: React.FC<CodeBlockButtonProps> = ({ title, dependencies =
 
   const [locale] = useLocale(locales);
 
-  const codeBlockPrefillConfig = {
-    title: `${title} - antd@${dependencies.antd}`,
-    js: `${
-      /import React(\D*)from 'react';/.test(jsx) ? '' : `import React from 'react';\n`
-    }import { createRoot } from 'react-dom/client';\n${jsx.replace(
-      /export default/,
-      'const ComponentDemo =',
-    )}\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n`,
-    css: '',
-    json: JSON.stringify({ name: 'antd-demo', dependencies }, null, 2),
-  };
+  const codeBlockPrefillConfig = useMemo(() => {
+    return {
+      title: `${title} - antd@${dependencies.antd}`,
+      js: `${
+        /import React(\D*)from 'react';/.test(jsx) ? '' : `import React from 'react';\n`
+      }import { createRoot } from 'react-dom/client';\n${jsx.replace(
+        /export default/,
+        'const ComponentDemo =',
+      )}\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n`,
+      css: '',
+      json: JSON.stringify({ name: 'antd-demo', dependencies }, null, 2),
+    };
+  }, [dependencies, jsx, title]);
 
   const openHituCodeBlockFn = React.useCallback(() => {
     setLoading(false);
@@ -52,8 +54,7 @@ const CodeBlockButton: React.FC<CodeBlockButtonProps> = ({ title, dependencies =
 
   const handleClick = () => {
     const scriptId = 'hitu-code-block-js';
-    const existScript = document.getElementById(scriptId) as HTMLScriptElement | null;
-    // @ts-ignore
+    const existScript = document.getElementById(scriptId) as HTMLScriptElement;
     if (existScript?.dataset.loaded) {
       openHituCodeBlockFn();
       return;
@@ -86,7 +87,7 @@ const CodeBlockButton: React.FC<CodeBlockButtonProps> = ({ title, dependencies =
   );
 };
 
-const SuspenseCodeBlockButton: React.FC<React.ComponentProps<typeof CodeBlockButton>> = (props) => (
+const SuspenseCodeBlockButton: React.FC<CodeBlockButtonProps> = (props) => (
   <Suspense fallback={null}>
     <CodeBlockButton {...props} />
   </Suspense>

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

@@ -98,7 +98,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
     if (asset.id === hash.slice(1)) {
       anchorRef.current?.click();
     }
-  }, []);
+  }, [asset.id, hash]);
 
   useEffect(() => {
     setCodeExpand(expand);

.dumi/theme/builtins/Previewer/stackblitzConfig.ts

@@ -1,4 +1,4 @@
-import { Project, ProjectFiles } from '@stackblitz/sdk';
+import type { Project, ProjectFiles } from '@stackblitz/sdk';
 
 const getStackblitzConfig = ({
   title = '',
@@ -6,12 +6,14 @@ const getStackblitzConfig = ({
   indexCssContent = '',
   demoJsContent = '',
   suffix = '',
+  isZhCN = false,
 }: {
   title?: string;
   dependencies: Record<string, string>;
   indexCssContent?: string;
   demoJsContent?: string;
   suffix?: string;
+  isZhCN?: boolean;
 }) => {
   const _suffix = suffix === 'tsx' ? suffix : 'jsx';
   const packageJSON = {
@@ -32,7 +34,7 @@ const getStackblitzConfig = ({
       '@types/react-dom': '^19.1.7',
       '@vitejs/plugin-react': '^4.7.0',
       eslint: '^9.32.0',
-      'eslint-plugin-react-hooks': '^5.2.0',
+      'eslint-plugin-react-hooks': '^7.0.0',
       'eslint-plugin-react-refresh': '^0.4.20',
       globals: '^16.3.0',
       typescript: '~5.8.3',
@@ -196,6 +198,9 @@ export default tseslint.config([
   if (indexCssContent) {
     files = { ...files, 'src/index.css': indexCssContent };
   }
+  if (isZhCN) {
+    files = { ...files, '.npmrc': `registry=https://registry.npmmirror.com/` };
+  }
 
   const project: Project = { title, description: '', template: 'node', files };
   return project;

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

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { BugOutlined } from '@ant-design/icons';
 import { Button, Flex, Popover, theme } from 'antd';
 import { createStyles } from 'antd-style';
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import type { Dayjs } from 'dayjs';
 
 import useLocale from '../../../hooks/useLocale';
 import { matchDeprecated } from '../../utils';
@@ -118,7 +119,10 @@ const Version: React.FC<React.PropsWithChildren> = ({ children }) => {
 
 const DateComp: React.FC<React.PropsWithChildren> = (props) => props.children;
 
-const DetailsComp: React.FC<React.PropsWithChildren> = (props) => props.children;
+const DetailsComp: React.FC<React.PropsWithChildren<HTMLDivElement>> = (props) => {
+  const { children, className } = props;
+  return <div className={className}>{children}</div>;
+};
 
 export default Object.assign(RefinedChangelog, {
   Version,

.dumi/theme/builtins/ResourceArticles/index.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Avatar, Divider, Empty, Skeleton, Tabs } from 'antd';
+import { Alert, Avatar, Divider, Empty, Skeleton, Tabs } from 'antd';
 import { createStyles } from 'antd-style';
 import dayjs from 'dayjs';
 import { FormattedMessage } from 'dumi';
 
 import useLocale from '../../../hooks/useLocale';
 import type { Article, Authors, SiteData } from '../../../pages/index/components/util';
-import { useSiteData } from '../../../pages/index/components/util';
+import { useAntdSiteConfig } from '../../../pages/index/components/util';
 
 const useStyle = createStyles(({ token, css }) => {
   const { antCls } = token;
@@ -92,7 +92,7 @@ const ArticleList: React.FC<ArticleListProps> = ({ name, data = [], authors = []
   );
 };
 
-const Articles: React.FC<{ data: Partial<SiteData> }> = ({ data }) => {
+const Articles: React.FC<{ data?: Partial<SiteData> }> = ({ data = {} }) => {
   const [, lang] = useLocale();
   const isZhCN = lang === 'cn';
 
@@ -107,7 +107,7 @@ const Articles: React.FC<{ data: Partial<SiteData> }> = ({ data }) => {
       yearData[year][article.type] = [...(yearData[year][article.type] || []), article];
     });
     return yearData;
-  }, [articles]);
+  }, [articles, lang]);
 
   const yearList = Object.keys(mergedData).sort((a, b) => Number(b) - Number(a));
 
@@ -145,15 +145,27 @@ const Articles: React.FC<{ data: Partial<SiteData> }> = ({ data }) => {
   );
 };
 
-export default () => {
+const ResourceArticles: React.FC = () => {
   const { styles } = useStyle();
-  const data = useSiteData();
-
-  const articles = data ? <Articles data={data} /> : <Skeleton active />;
-
+  const { data, error, isLoading } = useAntdSiteConfig();
+  if (isLoading) {
+    return <Skeleton active />;
+  }
+  if (error) {
+    return (
+      <Alert
+        showIcon
+        type="error"
+        message={error.message}
+        description={process.env.NODE_ENV !== 'production' ? error.stack : undefined}
+      />
+    );
+  }
   return (
     <div id="articles" className={styles.articles}>
-      {articles}
+      <Articles data={data} />
     </div>
   );
 };
+
+export default ResourceArticles;

.dumi/theme/builtins/ResourceCards/index.tsx

@@ -83,7 +83,11 @@ const ResourceCard: React.FC<ResourceCardProps> = ({ resource }) => {
   return (
     <Col xs={24} sm={12} md={8} lg={6}>
       <a className={styles.card} target="_blank" href={src} rel="noreferrer">
-        <Card hoverable className={styles.card} cover={<img src={cover} alt={title} />}>
+        <Card
+          hoverable
+          className={styles.card}
+          cover={<img draggable={false} src={cover} alt={title} />}
+        >
           <Card.Meta
             title={title}
             description={

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

@@ -96,7 +96,7 @@ const TokenCompare: React.FC<TokenCompareProps> = (props) => {
         dark: color2Rgba((darkTokens as any)[tokenName]),
       };
     });
-  }, [tokenNames]);
+  }, [lang, tokenNames]);
 
   return (
     <div className={styles.container}>

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

@@ -1,12 +1,26 @@
 import React, { useEffect, useRef } from 'react';
+import { RightCircleOutlined } from '@ant-design/icons';
+import type { TreeGraph } from '@antv/g6';
+import { Flex } from 'antd';
 import { createStyles, css } from 'antd-style';
 import { useRouteMeta } from 'dumi';
 
 import useLocale from '../../../hooks/useLocale';
+import { renderReactToHTMLString } from '../../../theme/utils/renderReactToHTML';
 
-const dataTransform = (data: BehaviorMapItem) => {
-  const changeData = (d: any, level = 0) => {
-    const clonedData: any = { ...d };
+interface BehaviorMapItem {
+  id: string;
+  label: string;
+  targetType?: 'mvp' | 'extension';
+  children?: BehaviorMapItem[];
+  link?: string;
+  collapsed?: boolean;
+  type?: 'behavior-start-node' | 'behavior-sub-node';
+}
+
+const dataTransform = (rootData: BehaviorMapItem) => {
+  const changeData = (data: BehaviorMapItem, level = 0) => {
+    const clonedData: BehaviorMapItem = { ...data };
     switch (level) {
       case 0:
         clonedData.type = 'behavior-start-node';
@@ -19,21 +33,12 @@ const dataTransform = (data: BehaviorMapItem) => {
         clonedData.type = 'behavior-sub-node';
         break;
     }
-
-    if (d.children) {
-      clonedData.children = d.children.map((child: any) => changeData(child, level + 1));
+    if (Array.isArray(data.children)) {
+      clonedData.children = data.children.map((child) => changeData(child, level + 1));
     }
     return clonedData;
   };
-  return changeData(data);
-};
-
-type BehaviorMapItem = {
-  id: string;
-  label: string;
-  targetType?: 'mvp' | 'extension';
-  children?: BehaviorMapItem[];
-  link?: string;
+  return changeData(rootData);
 };
 
 const useStyle = createStyles(({ token }) => ({
@@ -100,16 +105,19 @@ const locales = {
   },
 };
 
-export type BehaviorMapProps = {
+export interface BehaviorMapProps {
   data: BehaviorMapItem;
-};
+}
 
 const BehaviorMap: React.FC<BehaviorMapProps> = ({ data }) => {
   const ref = useRef<HTMLDivElement>(null);
   const { styles } = useStyle();
   const [locale] = useLocale(locales);
+
   const meta = useRouteMeta();
 
+  const graphRef = useRef<TreeGraph>(null);
+
   useEffect(() => {
     import('@antv/g6').then((G6) => {
       G6.registerNode('behavior-start-node', {
@@ -228,25 +236,11 @@ const BehaviorMap: React.FC<BehaviorMapProps> = ({ data }) => {
                   y: -8,
                   cursor: 'pointer',
                   // DOM's html
-                  html: `
-                <div style="width: 16px; height: 16px;">
-                  <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                      <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                          <g id="DatePicker" transform="translate(-890.000000, -441.000000)" fill-rule="nonzero">
-                              <g id="编组-30" transform="translate(288.000000, 354.000000)">
-                                  <g id="编组-7备份-7" transform="translate(522.000000, 79.000000)">
-                                      <g id="right-circle-outlinedd" transform="translate(80.000000, 8.000000)">
-                                          <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
-                                          <path d="M10.4171875,7.8984375 L6.5734375,5.1171875 C6.490625,5.0578125 6.375,5.115625 6.375,5.21875 L6.375,5.9515625 C6.375,6.1109375 6.4515625,6.2625 6.58125,6.35625 L8.853125,8 L6.58125,9.64375 C6.4515625,9.7375 6.375,9.8875 6.375,10.0484375 L6.375,10.78125 C6.375,10.8828125 6.490625,10.9421875 6.5734375,10.8828125 L10.4171875,8.1015625 C10.4859375,8.0515625 10.4859375,7.9484375 10.4171875,7.8984375 Z" id="路径" fill="#BFBFBF"></path>
-                                          <path d="M8,1 C4.134375,1 1,4.134375 1,8 C1,11.865625 4.134375,15 8,15 C11.865625,15 15,11.865625 15,8 C15,4.134375 11.865625,1 8,1 Z M8,13.8125 C4.790625,13.8125 2.1875,11.209375 2.1875,8 C2.1875,4.790625 4.790625,2.1875 8,2.1875 C11.209375,2.1875 13.8125,4.790625 13.8125,8 C13.8125,11.209375 11.209375,13.8125 8,13.8125 Z" id="形状" fill="#BFBFBF"></path>
-                                      </g>
-                                  </g>
-                              </g>
-                          </g>
-                      </g>
-                  </svg>
-                </div>
-              `,
+                  html: renderReactToHTMLString(
+                    <Flex align="center" justify="center">
+                      <RightCircleOutlined style={{ color: '#BFBFBF' }} />
+                    </Flex>,
+                  ),
                 },
                 // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
                 name: 'sub-node-link',
@@ -265,25 +259,11 @@ const BehaviorMap: React.FC<BehaviorMapProps> = ({ data }) => {
               hover: {
                 stroke: '#1677ff',
                 'sub-node-link': {
-                  html: `
-                <div style="width: 16px; height: 16px;">
-                  <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                      <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                          <g id="DatePicker" transform="translate(-890.000000, -441.000000)" fill-rule="nonzero">
-                              <g id="编组-30" transform="translate(288.000000, 354.000000)">
-                                  <g id="编组-7备份-7" transform="translate(522.000000, 79.000000)">
-                                      <g id="right-circle-outlinedd" transform="translate(80.000000, 8.000000)">
-                                          <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
-                                          <path d="M10.4171875,7.8984375 L6.5734375,5.1171875 C6.490625,5.0578125 6.375,5.115625 6.375,5.21875 L6.375,5.9515625 C6.375,6.1109375 6.4515625,6.2625 6.58125,6.35625 L8.853125,8 L6.58125,9.64375 C6.4515625,9.7375 6.375,9.8875 6.375,10.0484375 L6.375,10.78125 C6.375,10.8828125 6.490625,10.9421875 6.5734375,10.8828125 L10.4171875,8.1015625 C10.4859375,8.0515625 10.4859375,7.9484375 10.4171875,7.8984375 Z" id="路径" fill="#1677ff"></path>
-                                          <path d="M8,1 C4.134375,1 1,4.134375 1,8 C1,11.865625 4.134375,15 8,15 C11.865625,15 15,11.865625 15,8 C15,4.134375 11.865625,1 8,1 Z M8,13.8125 C4.790625,13.8125 2.1875,11.209375 2.1875,8 C2.1875,4.790625 4.790625,2.1875 8,2.1875 C11.209375,2.1875 13.8125,4.790625 13.8125,8 C13.8125,11.209375 11.209375,13.8125 8,13.8125 Z" id="形状" fill="#1677ff"></path>
-                                      </g>
-                                  </g>
-                              </g>
-                          </g>
-                      </g>
-                  </svg>
-                </div>
-              `,
+                  html: renderReactToHTMLString(
+                    <Flex align="center" justify="center">
+                      <RightCircleOutlined style={{ color: '#1677ff' }} />
+                    </Flex>,
+                  ),
                 },
               },
             },
@@ -291,7 +271,7 @@ const BehaviorMap: React.FC<BehaviorMapProps> = ({ data }) => {
         },
         'rect',
       );
-      const graph = new G6.TreeGraph({
+      graphRef.current = new G6.TreeGraph({
         container: ref.current!,
         width: ref.current!.scrollWidth,
         height: ref.current!.scrollHeight,
@@ -301,10 +281,7 @@ const BehaviorMap: React.FC<BehaviorMapProps> = ({ data }) => {
         },
         defaultEdge: {
           type: 'cubic-horizontal',
-          style: {
-            lineWidth: 1,
-            stroke: '#BFBFBF',
-          },
+          style: { lineWidth: 1, stroke: '#BFBFBF' },
         },
         layout: {
           type: 'mindmap',
@@ -317,24 +294,26 @@ const BehaviorMap: React.FC<BehaviorMapProps> = ({ data }) => {
         },
       });
 
-      graph.on('node:mouseenter', (e) => {
-        graph.setItemState(e.item!, 'hover', true);
+      graphRef.current?.on('node:mouseenter', (e) => {
+        graphRef.current?.setItemState(e.item!, 'hover', true);
       });
-      graph.on('node:mouseleave', (e) => {
-        graph.setItemState(e.item!, 'hover', false);
+      graphRef.current?.on('node:mouseleave', (e) => {
+        graphRef.current?.setItemState(e.item!, 'hover', false);
       });
-      graph.on('node:click', (e) => {
+      graphRef.current?.on('node:click', (e) => {
         const { link } = e.item!.getModel();
         if (link) {
           window.location.hash = link as string;
         }
       });
-
-      graph.data(dataTransform(data));
-      graph.render();
-      graph.fitCenter();
+      graphRef.current?.data(dataTransform(data));
+      graphRef.current?.render();
+      graphRef.current?.fitCenter();
     });
-  }, []);
+    return () => {
+      graphRef.current?.destroy();
+    };
+  }, [data]);
 
   return (
     <div ref={ref} className={styles.container}>

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

@@ -27,7 +27,12 @@ const BezierVisualizer = (props: BezierVisualizerProps) => {
   const controls = useMemo(() => {
     const m = RE.exec(value.toLowerCase().trim());
     if (m) {
-      return m[1].split(',').map((v) => parseFloat(v.trim())) as [number, number, number, number];
+      return m[1].split(',').map((v) => Number.parseFloat(v.trim())) as [
+        number,
+        number,
+        number,
+        number,
+      ];
     }
     return null;
   }, [value]);

.dumi/theme/common/CodePreview.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
 import React, { useEffect, useMemo } from 'react';
-import { Button, Tabs, Typography } from 'antd';
+import { Tabs, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import toReactElement from 'jsonml-to-react-element';
 import JsonML from 'jsonml.js/lib/utils';
@@ -109,12 +109,16 @@ const CodePreview: React.FC<CodePreviewProps> = ({
   }
   const [highlightedCodes, setHighlightedCodes] = React.useState(initialCodes);
   const { codeType, setCodeType } = React.use(DemoContext);
-  const sourceCodes = {
-    // omit trailing line break
-    tsx: sourceCode?.trim(),
-    jsx: jsxCode?.trim(),
-    style: styleCode?.trim(),
-  } as Record<'tsx' | 'jsx' | 'style', string>;
+
+  const sourceCodes = useMemo<Record<'tsx' | 'jsx' | 'style', string>>(() => {
+    return {
+      // omit trailing line break
+      tsx: sourceCode?.trim(),
+      jsx: jsxCode?.trim(),
+      style: styleCode?.trim(),
+    };
+  }, [sourceCode, jsxCode, styleCode]);
+
   useEffect(() => {
     const codes = {
       tsx: Prism.highlight(sourceCode, Prism.languages.javascript, 'jsx'),
@@ -153,13 +157,24 @@ const CodePreview: React.FC<CodePreviewProps> = ({
             ) : (
               toReactComponent(['pre', { lang, highlighted: highlightedCodes[lang] }])
             )}
-            <Button type="text" className={styles.copyButton}>
+            {/* button 嵌套 button 会导致水合失败，这里需要用 div 标签，不能用 button */}
+            <div className={styles.copyButton}>
               <Typography.Text className={styles.copyIcon} copyable={{ text: sourceCodes[lang] }} />
-            </Button>
+            </div>
           </div>
         ),
       })),
-    [JSON.stringify(highlightedCodes), styles.code, styles.copyButton, styles.copyIcon],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      entryName,
+      error,
+      highlightedCodes,
+      langList,
+      sourceCodes,
+      styles.code,
+      styles.copyButton,
+      styles.copyIcon,
+    ],
   );
 
   if (!langList.length) {

.dumi/theme/common/Color/ColorPaletteTool.tsx

@@ -45,7 +45,7 @@ const ColorPaletteTool: React.FC = () => {
       }
     }
     return <span className="color-palette-picker-validation">{text.trim()}</span>;
-  }, [primaryColorInstance, primaryMinSaturation, primaryMinBrightness]);
+  }, [primaryColorInstance, locale]);
   return (
     <div className="color-palette-horizontal">
       <div className="color-palette-pick">

.dumi/theme/common/Color/ColorPaletteToolDark.tsx

@@ -54,7 +54,7 @@ const ColorPaletteTool: React.FC = () => {
         {text.trim()}
       </span>
     );
-  }, [primaryColorInstance]);
+  }, [locale, primaryColorInstance]);
 
   return (
     <div className="color-palette-horizontal color-palette-horizontal-dark">

.dumi/theme/common/Color/ColorPatterns.tsx

@@ -10,7 +10,7 @@ interface ColorPatternsProps {
   backgroundColor?: string;
 }
 
-const ColorPatterns: React.FC<ColorPatternsProps> = ({ color, dark, backgroundColor }) => {
+const ColorPatterns: React.FC<ColorPatternsProps> = ({ color = '', dark, backgroundColor }) => {
   const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {});
   return (
     <>

.dumi/theme/common/Color/Palette.tsx

@@ -53,17 +53,16 @@ const Palette: React.FC<PaletteProps> = (props) => {
 
   const className = direction === 'horizontal' ? 'color-palette-horizontal' : 'color-palette';
 
-  const colors: React.ReactNode[] = [];
-
   const colorPaletteMap = {
     dark: ['#fff', 'unset'],
     default: ['rgba(0, 0, 0, 0.85)', '#fff'],
   };
   const [lastColor, firstColor] = dark ? colorPaletteMap.dark : colorPaletteMap.default;
-  for (let i = 1; i <= count; i += 1) {
-    const colorText = `${name}-${i}`;
-    const defaultBgStyle = dark && name ? presetDarkPalettes[name][i - 1] : '';
-    colors.push(
+
+  const colors: React.ReactNode[] = Array.from({ length: count }, (_, i) => {
+    const colorText = `${name}-${i + 1}`;
+    const defaultBgStyle = dark && name ? presetDarkPalettes[name][i] : '';
+    return (
       <CopyToClipboard
         text={hexColors[colorText]}
         onCopy={() => message.success(`@${colorText} copied: ${hexColors[colorText]}`)}
@@ -87,9 +86,10 @@ const Palette: React.FC<PaletteProps> = (props) => {
           <span className="main-color-text">{colorText}</span>
           <span className="main-color-value">{hexColors[colorText]}</span>
         </div>
-      </CopyToClipboard>,
+      </CopyToClipboard>
     );
-  }
+  });
+
   return (
     <div className={className}>
       {showTitle && (

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

@@ -3,8 +3,8 @@ import { BugOutlined } from '@ant-design/icons';
 import { Button, Drawer, Flex, Grid, Popover, Tag, Timeline, Typography } from 'antd';
 import type { TimelineItemProps } from 'antd';
 import { createStyles } from 'antd-style';
+import useSWR from 'swr';
 
-import useFetch from '../../../hooks/useFetch';
 import useLocale from '../../../hooks/useLocale';
 import useLocation from '../../../hooks/useLocation';
 import { matchDeprecated } from '../../utils';
@@ -189,6 +189,7 @@ const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[] }> = ({ cha
           <RefLinks refs={refs} contributors={contributors} />
           <br />
           <img
+            draggable={false}
             src={imgElement?.getAttribute('src') || ''}
             alt={imgElement?.getAttribute('alt') || ''}
             width={imgElement?.getAttribute('width') || ''}
@@ -211,17 +212,23 @@ const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[] }> = ({ cha
 const useChangelog = (componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[] => {
   const logFileName = `components-changelog-${lang}.json`;
 
-  const data = useFetch({
-    key: `component-changelog-${lang}`,
-    request: () => import(`../../../preset/${logFileName}`),
-  });
-  return React.useMemo(() => {
-    const component = componentPath.replace(/-/g, '');
-    const componentName = Object.keys(data).find(
-      (name) => name.toLowerCase() === component.toLowerCase(),
-    );
-    return data[componentName as keyof typeof data] as ChangelogInfo[];
-  }, [data, componentPath]);
+  const { data, error, isLoading } = useSWR(
+    `component-changelog-${lang}`,
+    () => import(`../../../preset/${logFileName}`),
+  );
+
+  if (error || isLoading) {
+    return [];
+  }
+
+  const component = componentPath.replace(/-/g, '');
+  const componentName = Object.keys(data).find(
+    (name) => name.toLowerCase() === component.toLowerCase(),
+  );
+  if (!componentName) {
+    return [];
+  }
+  return data?.[componentName] || [];
 };
 
 const ComponentChangelog: React.FC<Readonly<React.PropsWithChildren>> = (props) => {
@@ -294,7 +301,17 @@ const ComponentChangelog: React.FC<Readonly<React.PropsWithChildren>> = (props)
         ),
       };
     });
-  }, [list]);
+  }, [
+    lang,
+    list,
+    locale.bugList,
+    styles.bug,
+    styles.bugReasonList,
+    styles.bugReasonTitle,
+    styles.versionTag,
+    styles.versionTitle,
+    styles.versionWrap,
+  ]);
 
   const screens = Grid.useBreakpoint();
   const width = screens.md ? '48vw' : '90vw';

.dumi/theme/common/JSONEditor/index.tsx

@@ -10,9 +10,7 @@ const Editor: React.FC<JSONEditorPropsOptional> = (props) => {
     if (container.current) {
       editorRef.current = createJSONEditor({
         target: container.current,
-        props: {
-          mode: Mode.text,
-        },
+        props: { mode: Mode.text },
       });
     }
     return () => {
@@ -22,7 +20,7 @@ const Editor: React.FC<JSONEditorPropsOptional> = (props) => {
 
   useEffect(() => {
     editorRef.current?.updateProps(props);
-  }, [props.content]);
+  }, [props]);
 
   return <div ref={container} className="vanilla-jsoneditor-react" />;
 };

.dumi/theme/common/Link.tsx

@@ -1,6 +1,6 @@
 import type { MouseEvent, MouseEventHandler } from 'react';
-import React, { useMemo, forwardRef } from 'react';
-import { Link as DumiLink, useLocation, useAppData, useNavigate } from 'dumi';
+import React, { forwardRef, useMemo } from 'react';
+import { Link as DumiLink, useAppData, useLocation, useNavigate } from 'dumi';
 
 export interface LinkProps {
   to: string | { pathname?: string; search?: string; hash?: string };
@@ -21,7 +21,7 @@ const Link = forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>(
         return `${to.pathname || pathname}${to.search || ''}${to.hash || ''}`;
       }
       return to;
-    }, [to]);
+    }, [pathname, to]);
     const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
       rest.onClick?.(e);
       if (!href?.startsWith('http')) {

.dumi/theme/common/Loading.tsx

@@ -16,6 +16,7 @@ const Loading: React.FC = () => {
           width={40}
           height={40}
           alt="loading"
+          draggable={false}
           style={{ marginBottom: 24, filter: 'grayscale(1)', opacity: 0.33 }}
         />
         <Skeleton active paragraph={{ rows: 3 }} />

.dumi/theme/common/Markers.tsx

@@ -55,7 +55,7 @@ const Markers: React.FC<MarkersProps> = (props) => {
         },
       );
     });
-  }, [targetClassName]);
+  }, [containerRef, targetClassName]);
 
   // ======================== Render =========================
   return (

.dumi/theme/common/SelectSemanticTemplate.tsx

@@ -33,9 +33,7 @@ const Block: React.FC<BlockProps> = ({ component: Component, options, defaultVal
         defaultValue={defaultValue}
         getPopupContainer={() => divRef.current}
         options={options}
-        styles={{
-          popup: { zIndex: 1 },
-        }}
+        styles={{ popup: { zIndex: 1 } }}
       />
     </div>
   );

.dumi/theme/common/SemanticPreview.tsx

@@ -101,7 +101,7 @@ function HighlightExample(props: {
     }
 
     return Prism.highlight(code, Prism.languages.javascript, 'jsx');
-  }, [componentName, semanticName]);
+  }, [componentName, itemsAPI, semanticName]);
 
   return (
     // biome-ignore lint: lint/security/noDangerouslySetInnerHtml

.dumi/theme/common/styles/index.ts

@@ -1,10 +1,10 @@
-export { default as HeadingAnchor } from './HeadingAnchor';
-export { default as Reset } from './Reset';
 export { default as Common } from './Common';
-export { default as Markdown } from './Markdown';
-export { default as Highlight } from './Highlight';
 export { default as Demo } from './Demo';
-export { default as Responsive } from './Responsive';
+export { default as HeadingAnchor } from './HeadingAnchor';
+export { default as Highlight } from './Highlight';
+export { default as Markdown } from './Markdown';
 export { default as NProgress } from './NProgress';
 export { default as PreviewImage } from './PreviewImage';
+export { default as Reset } from './Reset';
+export { default as Responsive } from './Responsive';
 export { default as SearchBar } from './SearchBar';

.dumi/theme/layouts/DocLayout/index.tsx

@@ -13,7 +13,6 @@ import useLocation from '../../../hooks/useLocation';
 import GlobalStyles from '../../common/GlobalStyles';
 import Header from '../../slots/Header';
 import SiteContext from '../../slots/SiteContext';
-
 import IndexLayout from '../IndexLayout';
 import ResourceLayout from '../ResourceLayout';
 import SidebarLayout from '../SidebarLayout';
@@ -48,7 +47,7 @@ const DocLayout: React.FC = () => {
     } else {
       dayjs.locale('en');
     }
-  }, []);
+  }, [lang]);
 
   useEffect(() => {
     const nprogressHiddenStyle = document.getElementById('nprogress-style');
@@ -70,13 +69,10 @@ const DocLayout: React.FC = () => {
     if (typeof (window as any).ga !== 'undefined') {
       (window as any).ga('send', 'pageview', pathname + search);
     }
-  }, [location]);
+  }, [pathname, search]);
 
   const content = React.useMemo<React.ReactNode>(() => {
-    if (
-      ['', '/'].some((path) => path === pathname) ||
-      ['/index'].some((path) => pathname.startsWith(path))
-    ) {
+    if (['', '/'].includes(pathname) || ['/index'].some((path) => pathname.startsWith(path))) {
       return (
         <IndexLayout title={locale.title} desc={locale.description}>
           {outlet}
@@ -90,7 +86,7 @@ const DocLayout: React.FC = () => {
       return outlet;
     }
     return <SidebarLayout>{outlet}</SidebarLayout>;
-  }, [pathname, outlet]);
+  }, [pathname, outlet, locale.title, locale.description]);
 
   return (
     <>
@@ -114,11 +110,7 @@ const DocLayout: React.FC = () => {
       <ConfigProvider
         direction={direction}
         locale={lang === 'cn' ? zhCN : undefined}
-        theme={{
-          token: {
-            fontFamily: `AlibabaSans, ${token.fontFamily}`,
-          },
-        }}
+        theme={{ token: { fontFamily: `AlibabaSans, ${token.fontFamily}` } }}
       >
         <GlobalStyles />
         {!hideLayout && <Header />}

.dumi/theme/layouts/GlobalLayout.tsx

@@ -1,6 +1,3 @@
-// prettier-ignore
-import { scan } from 'react-scan'; // import this BEFORE react
-
 import React, { useCallback, useEffect } from 'react';
 import {
   createCache,
@@ -44,13 +41,6 @@ if (typeof window !== 'undefined') {
       location.hash = `#${hashId.replace(/^components-/, '')}`;
     }
   }
-
-  if (process.env.NODE_ENV !== 'production') {
-    scan({
-      enabled: false,
-      showToolbar: true,
-    });
-  }
 }
 
 const getAlgorithm = (themes: ThemeName[] = []) =>
@@ -132,12 +122,13 @@ const GlobalLayout: React.FC = () => {
         setSearchParams(nextSearchParams);
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [searchParams, setSearchParams],
   );
 
-  const updateMobileMode = () => {
+  const updateMobileMode = useCallback(() => {
     updateSiteConfig({ isMobile: window.innerWidth < RESPONSIVE_MOBILE });
-  };
+  }, [updateSiteConfig]);
 
   // 监听系统主题变化
   useEffect(() => {
@@ -186,7 +177,8 @@ const GlobalLayout: React.FC = () => {
     return () => {
       window.removeEventListener('resize', updateMobileMode);
     };
-  }, [searchParams]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchParams, updateMobileMode]);
 
   const siteContextValue = React.useMemo<SiteContextProps>(
     () => ({
@@ -208,9 +200,9 @@ const GlobalLayout: React.FC = () => {
       cssVar: useCssVar,
       hashed: !useCssVar,
     };
-  }, [theme]);
+  }, [theme, useCssVar]);
 
-  const [styleCache] = React.useState(() => createCache());
+  const styleCache = React.useMemo(() => createCache(), []);
 
   useServerInsertedHTML(() => {
     const styleText = extractStyle(styleCache, {

.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx

@@ -116,7 +116,7 @@ const AffixTabs: React.FC = () => {
     return () => {
       listenerEvents.forEach((event) => window.removeEventListener(event, onSyncAffix));
     };
-  }, []);
+  }, [onSyncAffix]);
 
   return (
     <div className={classNames(affixTabs, fixedId && affixTabsFixed)} ref={containerRef}>

.dumi/theme/slots/Content/ContributorAvatar.tsx

@@ -9,7 +9,7 @@ interface ContributorAvatarProps {
 
 const ContributorAvatar: React.FC<ContributorAvatarProps> = (props) => {
   const { item: { username, url } = {} } = props;
-  if (username?.includes('github-actions')) {
+  if (!username) {
     return null;
   }
   return (

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

@@ -37,6 +37,9 @@ interface ContributorsProps {
   filename?: string;
 }
 
+// 这些机器人账号不需要展示
+const blockList = ['github-actions', 'copilot', 'renovate', 'dependabot'];
+
 const Contributors: React.FC<ContributorsProps> = ({ filename }) => {
   const { formatMessage } = useIntl();
   const { styles } = useStyle();
@@ -55,6 +58,7 @@ const Contributors: React.FC<ContributorsProps> = ({ filename }) => {
         owner="ant-design"
         fileName={filename}
         className={styles.list}
+        filter={(item) => !blockList.includes(item?.username?.toLowerCase() ?? '')}
         renderItem={(item, loading) => (
           <ContributorAvatar item={item} loading={loading} key={item?.url} />
         )}
@@ -63,7 +67,7 @@ const Contributors: React.FC<ContributorsProps> = ({ filename }) => {
   );
 };
 
-const SuspenseContributors: React.FC<React.ComponentProps<typeof Contributors>> = (props) => (
+const SuspenseContributors: React.FC<ContributorsProps> = (props) => (
   <Suspense fallback={null}>
     <Contributors {...props} />
   </Suspense>

.dumi/theme/slots/Content/DocMeta.tsx

@@ -1,7 +1,7 @@
 import React, { useLayoutEffect, useMemo, useState } from 'react';
 import { CalendarOutlined } from '@ant-design/icons';
 import { Avatar, Flex, Skeleton, Typography } from 'antd';
-import DayJS from 'dayjs';
+import dayjs from 'dayjs';
 import { useRouteMeta } from 'dumi';
 
 interface AuthorAvatarPoprs {
@@ -17,7 +17,7 @@ const AuthorAvatar: React.FC<AuthorAvatarPoprs> = ({ name, avatar }) => {
     img.src = avatar;
     img.onload = () => setLoading(false);
     img.onerror = () => setError(true);
-  }, []);
+  }, [avatar]);
   if (error) {
     return null;
   }
@@ -34,8 +34,9 @@ const AuthorAvatar: React.FC<AuthorAvatarPoprs> = ({ name, avatar }) => {
 const DocMeta: React.FC = () => {
   const meta = useRouteMeta();
 
+  const { author } = meta.frontmatter;
+
   const mergedAuthorInfos = useMemo(() => {
-    const { author } = meta.frontmatter;
     if (!author) {
       return [];
     }
@@ -49,7 +50,7 @@ const DocMeta: React.FC = () => {
       return author;
     }
     return [];
-  }, [meta.frontmatter.author]);
+  }, [author]);
 
   if (!meta.frontmatter.date && !meta.frontmatter.author) {
     return null;
@@ -60,7 +61,7 @@ const DocMeta: React.FC = () => {
       <Flex gap="small">
         {meta.frontmatter.date && (
           <span style={{ opacity: 0.65 }}>
-            <CalendarOutlined /> {DayJS(meta.frontmatter.date).format('YYYY-MM-DD')}
+            <CalendarOutlined /> {dayjs(meta.frontmatter.date).format('YYYY-MM-DD')}
           </span>
         )}
         {mergedAuthorInfos.map<React.ReactNode>((info) => (

.dumi/theme/slots/Content/index.tsx

@@ -30,6 +30,7 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
 
   const [showDebug, setShowDebug] = useLayoutState(false);
   const [codeType, setCodeType] = useState('tsx');
+
   const debugDemos = useMemo(
     () => meta.toc?.filter((item) => item._debug_demo).map((item) => item.id) || [],
     [meta],
@@ -39,11 +40,13 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
 
   useLayoutEffect(() => {
     setShowDebug(process.env.NODE_ENV === 'development' || isDebugDemo);
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDebugDemo]);
 
   const contextValue = useMemo<DemoContextProps>(
     () => ({ showDebug, setShowDebug, codeType, setCodeType }),
-    [showDebug, codeType, debugDemos],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [showDebug, codeType],
   );
 
   const isRTL = direction === 'rtl';
@@ -81,6 +84,10 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
                 filename={meta.frontmatter.filename}
                 version={meta.frontmatter.tag}
                 designUrl={meta.frontmatter.designUrl}
+                searchTitleKeywords={[meta.frontmatter.title, meta.frontmatter.subtitle].filter(
+                  Boolean,
+                )}
+                repo="ant-design/ant-design"
               />
             )}
           <div style={{ minHeight: 'calc(100vh - 64px)' }}>

.dumi/theme/slots/Footer/index.tsx

@@ -10,8 +10,8 @@ import {
   MediumOutlined,
   MessageOutlined,
   QuestionCircleOutlined,
-  XOutlined,
   UsergroupAddOutlined,
+  XOutlined,
   ZhihuOutlined,
 } from '@ant-design/icons';
 import { createStyles } from 'antd-style';
@@ -198,6 +198,7 @@ const Footer: React.FC = () => {
         {
           icon: (
             <img
+              draggable={false}
               src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
               width={16}
               height={16}
@@ -223,6 +224,7 @@ const Footer: React.FC = () => {
         {
           icon: (
             <img
+              draggable={false}
               src="https://gw.alipayobjects.com/zos/rmsportal/mZBWtboYbnMkTBaRIuWQ.png"
               width={16}
               height={16}
@@ -306,6 +308,7 @@ const Footer: React.FC = () => {
     const col4 = {
       icon: (
         <img
+          draggable={false}
           src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg"
           width={22}
           height={22}
@@ -317,6 +320,7 @@ const Footer: React.FC = () => {
         {
           icon: (
             <img
+              draggable={false}
               src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
               width={16}
               height={16}
@@ -331,6 +335,7 @@ const Footer: React.FC = () => {
         {
           icon: (
             <img
+              draggable={false}
               src="https://gw.alipayobjects.com/zos/antfincdn/nc7Fc0XBg5/8a6844f5-a6ed-4630-9177-4fa5d0b7dd47.png"
               width={16}
               height={16}
@@ -343,7 +348,15 @@ const Footer: React.FC = () => {
           openExternal: true,
         },
         {
-          icon: <img src="https://www.eggjs.org/logo.svg" alt="Egg logo" width={16} height={16} />,
+          icon: (
+            <img
+              draggable={false}
+              src="https://www.eggjs.org/logo.svg"
+              alt="Egg logo"
+              width={16}
+              height={16}
+            />
+          ),
           title: 'Egg',
           url: 'https://eggjs.org',
           description: <FormattedMessage id="app.footer.egg.slogan" />,
@@ -352,6 +365,7 @@ const Footer: React.FC = () => {
         {
           icon: (
             <img
+              draggable={false}
               src="https://gw.alipayobjects.com/zos/rmsportal/DMDOlAUhmktLyEODCMBR.ico"
               width={16}
               height={16}
@@ -366,6 +380,7 @@ const Footer: React.FC = () => {
         {
           icon: (
             <img
+              draggable={false}
               src="https://mdn.alipayobjects.com/huamei_j9rjmc/afts/img/A*3ittT5OEo2gAAAAAAAAAAAAADvGmAQ/original"
               width={16}
               height={16}
@@ -380,6 +395,7 @@ const Footer: React.FC = () => {
         {
           icon: (
             <img
+              draggable={false}
               src="https://mdn.alipayobjects.com/huamei_4qpv3u/afts/img/iH6wQKX4WCYAAAAAAAAAAAAAeocTAQFr/original"
               width={16}
               height={16}
@@ -394,6 +410,7 @@ const Footer: React.FC = () => {
         {
           icon: (
             <img
+              draggable={false}
               src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg"
               width={16}
               height={16}
@@ -413,7 +430,7 @@ const Footer: React.FC = () => {
       ],
     };
     return [col1, col2, col3, col4];
-  }, [lang, location.search]);
+  }, [getLink, lang]);
 
   return (
     <>

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

@@ -201,7 +201,7 @@ const Header: React.FC = () => {
 
   useEffect(() => {
     handleHideMenu();
-  }, [location]);
+  }, [handleHideMenu, location]);
 
   useEffect(() => {
     onWindowResize();
@@ -212,7 +212,7 @@ const Header: React.FC = () => {
         clearTimeout(pingTimer.current);
       }
     };
-  }, []);
+  }, [onWindowResize]);
 
   const handleVersionChange = useCallback((url: string) => {
     const currentUrl = window.location.href;
@@ -247,7 +247,7 @@ const Header: React.FC = () => {
         window.location.pathname,
         utils.getLocalizedPathname(pathname, !utils.isZhCN(pathname), search).pathname,
       );
-  }, [location]);
+  }, [pathname, search]);
 
   const nextDirectionText = useMemo<string>(
     () => (direction !== 'rtl' ? 'RTL' : 'LTR'),
@@ -255,7 +255,7 @@ const Header: React.FC = () => {
   );
 
   const getDropdownStyle = useMemo<React.CSSProperties>(
-    () => (direction === 'rtl' ? { direction: 'ltr', textAlign: 'right' } : {}),
+    () => (direction === 'rtl' ? { direction: 'ltr', textAlign: 'end' } : {}),
     [direction],
   );
 

.dumi/theme/utils/renderReactToHTML.tsx

@@ -0,0 +1,18 @@
+import type React from 'react';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+
+// 这个方法是将 React 组件转换为 HTML 字符串，作用和 renderToString API 一样
+// 根据 React 官方文档的解释，不建议在客户端使用 renderToString API，所以这里使用 createRoot + innerHTML 的方式来实现
+// https://zh-hans.react.dev/reference/react-dom/server/renderToString
+export const renderReactToHTMLString = (node: React.ReactNode) => {
+  const div = document.createElement('div');
+  const root = createRoot(div);
+  // eslint-disable-next-line react-dom/no-flush-sync
+  flushSync(() => {
+    root.render(node);
+  });
+  const html = div.innerHTML;
+  root.unmount();
+  return html;
+};

.dumi/theme/utils/tsToJs.ts

@@ -1,4 +1,4 @@
-import { format } from '@prettier/sync';
+import prettierSync from '@prettier/sync';
 import * as ts from 'typescript';
 
 /**
@@ -31,7 +31,7 @@ export default function tsToJs(tsCode: string): string {
 
   try {
     // 使用 Prettier 同步格式化代码
-    const formatted = format(result.outputText, {
+    const formatted = prettierSync.format(result.outputText, {
       // Prettier 格式化选项
       parser: 'babel',
       printWidth: 100,

.dumirc.ts

@@ -1,12 +1,12 @@
+import os from 'node:os';
 import path from 'path';
 import { defineConfig } from 'dumi';
 import * as fs from 'fs-extra';
-import os from 'node:os';
 
 import rehypeAntd from './.dumi/rehypeAntd';
 import rehypeChangelog from './.dumi/rehypeChangelog';
-import remarkAntd from './.dumi/remarkAntd';
 import remarkAnchor from './.dumi/remarkAnchor';
+import remarkAntd from './.dumi/remarkAntd';
 import { version } from './package.json';
 
 export default defineConfig({
@@ -193,9 +193,14 @@ export default defineConfig({
         .readFileSync(path.join(__dirname, '.dumi', 'scripts', 'mirror-notify.js'))
         .toString(),
     },
-    {
-      async: true,
-      content: fs.readFileSync(path.join(__dirname, '.dumi', 'scripts', 'clarity.js')).toString(),
-    },
-  ],
+    // Only enable clarity in production environment
+    process.env.NODE_ENV === 'production'
+      ? {
+          async: true,
+          content: fs
+            .readFileSync(path.join(__dirname, '.dumi', 'scripts', 'clarity.js'))
+            .toString(),
+        }
+      : null,
+  ].filter((script) => !!script),
 });

.github/copilot-instructions.md

@@ -0,0 +1,123 @@
+# Ant Design Repository Copilot Instructions
+
+This is the Ant Design (antd) repository - a React component library with enterprise-class UI design language, widely used for building professional web applications.
+
+## Project Context
+
+- **Framework**: TypeScript + React (compatible with React 16-19)
+- **Package**: Published as npm package `antd`
+- **Purpose**: Enterprise-class UI components for React applications
+- **Design System**: Follows Ant Design specifications
+- **Internationalization**: Full i18n support
+
+## Code Standards & Best Practices
+
+### TypeScript Requirements
+- Always use TypeScript with strict type checking
+- Never use `any` type - define precise types instead
+- Use interfaces (not type aliases) for object structures
+- Export all public interface types
+- Component props interfaces should be named `ComponentNameProps`
+- Component ref types should use `React.ForwardRefRenderFunction`
+- Prefer union types over enums, use `as const` for constants
+
+### React Component Guidelines
+- Use functional components with hooks exclusively (no class components)
+- Use early returns to improve readability
+- Apply performance optimizations with React.memo, useMemo, useCallback appropriately
+- Support server-side rendering
+- Maintain backward compatibility - avoid breaking changes
+- Components must support ref forwarding with this structure:
+  ```tsx
+  ComponentRef {
+    nativeElement: HTMLElement;
+    focus: VoidFunction;
+    // other methods
+  }
+  ```
+
+### Naming Conventions
+- **Components**: PascalCase (e.g., `Button`, `DatePicker`)
+- **Props**: camelCase with specific patterns:
+  - Default values: `default` + `PropName` (e.g., `defaultValue`)
+  - Force rendering: `forceRender`
+  - Panel state: use `open` instead of `visible`
+  - Display toggles: `show` + `PropName`
+  - Capabilities: `PropName` + `able`
+  - Data source: `dataSource`
+  - Disabled state: `disabled`
+  - Additional content: `extra`
+  - Icons: `icon`
+  - Triggers: `trigger`
+  - CSS classes: `className`
+- **Events**: `on` + `EventName` (e.g., `onClick`, `onChange`)
+- **Sub-component events**: `on` + `SubComponentName` + `EventName`
+- Use complete names, never abbreviations
+
+### Styling Approach
+- Use `@ant-design/cssinjs` for all styling
+- Place component styles in `style/` directory
+- Generate styles with functions named `gen[ComponentName]Style`
+- Use design tokens from the Ant Design token system
+- Never hardcode colors, sizes, or spacing values
+- Support both light and dark themes
+- Use CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)
+- Respect `prefers-reduced-motion` for animations
+
+### Bundle & Performance
+- Avoid introducing new dependencies
+- Maintain strict bundle size control
+- Support tree shaking
+- Browser compatibility: Chrome 80+
+- Optimize for minimal re-renders
+
+### Testing Requirements
+- Write comprehensive tests using Jest and React Testing Library
+- Target 100% test coverage
+- Place tests in `__tests__` directory as `index.test.tsx` or `componentName.test.tsx`
+- Include snapshot tests for UI components
+
+### Demo & Documentation
+- Keep demo code concise and copy-pasteable
+- Focus each demo on a single feature
+- Provide both English and Chinese documentation
+- Follow import order: React → dependencies → antd components → custom components → types → styles
+- Use 2-space indentation
+- Prefer antd built-in components over external dependencies
+
+### API Documentation Format
+When documenting component APIs, use this table structure:
+- String defaults in backticks: `"default"`
+- Boolean defaults as literal values: `true` or `false`  
+- Number defaults as literal values: `0`, `100`
+- No default value: `-`
+- Descriptions start with capital letter, no ending period
+- Sort API properties alphabetically
+
+### Internationalization
+- Locale configuration files use pattern: `locale_COUNTRY.ts` (e.g., `zh_CN.ts`)
+- Use `useLocale` hook from `components/locale/index.tsx`
+- When modifying locale strings, update ALL language files
+- Locale content should be plain strings with `${}` placeholders for variables
+
+### File Organization
+- Components in `components/[component-name]/` directory
+- Demos in `components/[component-name]/demo/` as `.tsx` files
+- Use kebab-case for demo filenames: `basic.tsx`, `custom-filter.tsx`
+- Each component demo includes both `.md` documentation and `.tsx` code
+
+## Development Commands
+- `npm start` - Development server
+- `npm run build` - Build project  
+- `npm test` - Run tests
+- `npm run lint` - Code linting
+- `npm run format` - Code formatting
+
+## Quality Standards
+- Pass all ESLint and TypeScript checks
+- Achieve 100% test coverage
+- Support accessibility (WCAG 2.1 AA)
+- Maintain cross-browser compatibility
+- No console errors or warnings
+
+When contributing code, ensure it follows these patterns and integrates seamlessly with the existing Ant Design ecosystem.

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

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Send reminders for inactive issues
-        uses: actions/github-script@v7
+        uses: actions/github-script@v8
         with:
           script: |
             const daysBeforeReminder = 14;

.github/workflows/issue-schedule.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Send Unconfirmed Issues to DingTalk
-        uses: actions/github-script@v7
+        uses: actions/github-script@v8
         env:
             DINGDING_BOT_TOKEN: ${{ secrets.DINGDING_BOT_COLLABORATOR_TOKEN }}
             actionTitle: 近 7 天未确认的 issue

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

@@ -36,7 +36,7 @@ jobs:
 
             🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。
 
-            <img src="https://github.com/user-attachments/assets/cfee105e-8731-481f-a336-92b79a84d35a" height="200" />
+            <img alt="钉钉社区群二维码" src="https://github.com/user-attachments/assets/bb99df70-b3aa-40d3-958a-cb6822a3c584" height="200" />
 
             <!-- WELCOME_CONTRIBUTION -->
           body-include: <!-- WELCOME_CONTRIBUTION -->

.github/workflows/preview-deploy.yml

@@ -22,7 +22,7 @@ jobs:
       build-failure: ${{ steps.prep-summary.outputs.build-failure }}
     steps:
       - name: summary jobs status
-        uses: actions/github-script@v7
+        uses: actions/github-script@v8
         id: prep-summary
         with:
           script: |

.github/workflows/site-deploy.yml

@@ -91,7 +91,7 @@ jobs:
           bunx surge --project ./_site --domain $DEPLOY_DOMAIN --token ${{ secrets.SURGE_TOKEN }}
 
       - name: Create Commit Comment
-        uses: peter-evans/commit-comment@v3
+        uses: peter-evans/commit-comment@v4
         with:
           body: |
             - Documentation site for this release: https://ant-design-${{ needs.build-site.outputs.formatted_version }}.surge.sh
@@ -117,7 +117,7 @@ jobs:
           cd ..
 
       - name: Upload to Release
-        uses: softprops/action-gh-release@72f2c25fcb47643c292f7107632f7a47c1df5cd8 # v2.3.2
+        uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2.4.1
         with:
           fail_on_unmatched_files: true
           files: website.tar.gz

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

@@ -24,7 +24,7 @@ jobs:
     # Return type: `success` or `failed` or `waiting`
     - name: Statistic Visual Diff Approval
       id: check_approval
-      uses: actions/github-script@v7
+      uses: actions/github-script@v8
       with:
         github-token: ${{ secrets.GITHUB_TOKEN }}
         script: |

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

@@ -21,7 +21,7 @@ jobs:
       build-status: ${{ steps.visual_diff_build_job_status.outputs.build-status }}
     steps:
       - name: summary jobs status
-        uses: actions/github-script@v7
+        uses: actions/github-script@v8
         id: visual_diff_build_job_status
         with:
           script: |
@@ -152,7 +152,7 @@ jobs:
 
       # Resync commit status. This will be also reset by `visual-regression-diff-approver`
       - name: Reset Commit Status
-        uses: actions/github-script@v7
+        uses: actions/github-script@v8
         if: ${{ steps.report.outcome == 'success' }}
         env:
           PR_ID: ${{ steps.pr.outputs.id }}

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

@@ -21,7 +21,7 @@ jobs:
       build-failure: ${{ steps.persist_start_job_status.outputs.build-failure }}
     steps:
       - name: summary jobs status
-        uses: actions/github-script@v7
+        uses: actions/github-script@v8
         id: persist_start_job_status
         with:
           script: |

.gitignore

@@ -77,3 +77,4 @@ __image_snapshots__/
 
 .env
 examples/
+components/style/antd.css

AGENTS.md

@@ -0,0 +1,465 @@
+# AGENTS.md
+
+## 项目背景
+
+这是 ant-design/ant-design（antd）的源代码仓库，是一个 React 组件库，发布为 npm 包 antd。
+
+- 使用 TypeScript 和 React 开发
+- 兼容 React 16 ~ 19 版本
+- 组件库设计精美，功能完善，广泛应用于企业级中后台产品
+- 遵循 Ant Design 设计规范
+- 支持国际化
+
+## 安装和设置
+
+### 开发环境要求
+
+- Node.js 版本 >= 16
+- 推荐使用 npm 或 yarn
+- Chrome 80+ 浏览器兼容性
+
+### 安装依赖
+
+```bash
+npm install
+# 或
+yarn install
+```
+
+### 开发命令
+
+```bash
+npm start     # 启动开发服务器
+npm run build # 构建项目
+npm test      # 运行测试
+npm run lint  # 代码检查
+```
+
+## 代码风格指南
+
+### 基本编码规范
+
+- 使用 TypeScript 和 React 书写
+- 使用函数式组件和 hooks，避免类组件
+- 使用提前返回（early returns）提高代码可读性
+- 避免引入新依赖，严控打包体积
+- 兼容 Chrome 80+ 浏览器
+- 支持服务端渲染
+- 保持向下兼容，避免 breaking change
+- 组件名使用大驼峰（PascalCase）
+- 属性名使用小驼峰（camelCase）
+- 合理使用 React.memo、useMemo 和 useCallback 优化性能
+
+### 命名规范
+
+Antd 命名要求使用**完整名称**而非缩写。
+
+#### 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`
+
+#### 事件命名
+
+- 触发事件：`on` + `EventName`
+- 子组件事件：`on` + `SubComponentName` + `EventName`
+- 前置事件：`before` + `EventName`
+- 后置事件：`after` + `EventName`
+- 连续动作完成：`on` + `EventName` + `Complete`
+
+#### 组件引用
+
+组件应提供 `ref` 属性，结构如下：
+
+```tsx
+ComponentRef {
+  nativeElement: HTMLElement;
+  focus: VoidFunction;
+  // 其他函数
+}
+```
+
+#### 组件 Token 命名
+
+格式：`variant (optional)` + `semantic part` + `semantic part variant (optional)` + `css property` + `size/disabled (optional)`
+
+### 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 文档要求
+
+- 字符串类型的默认值使用反引号
+- 布尔类型直接使用 true 或 false
+- 数字类型直接使用数字
+- 函数类型使用箭头函数表达式
+- 无默认值使用 `-`
+- 描述首字母大写，结尾无句号
+- API 按字母顺序排列
+
+## TypeScript 规范
+
+### 基本原则
+
+- 所有组件和函数必须提供准确的类型定义
+- 避免使用 `any` 类型，尽可能精确地定义类型
+- 使用接口而非类型别名定义对象结构
+- 导出所有公共接口类型，方便用户使用
+- 严格遵循 TypeScript 类型设计原则，确保类型安全
+- 确保编译无任何类型错误或警告
+
+### 组件类型定义
+
+- 组件 props 应使用 interface 定义，便于扩展
+- 组件 props 接口命名应为 `ComponentNameProps`
+- 为组件状态定义专门的接口，如 `ComponentNameState`
+- 复杂的数据结构应拆分为多个接口定义
+- 组件的 ref 类型应该明确定义，使用 `React.ForwardRefRenderFunction`
+- 所有回调函数类型应明确定义参数和返回值
+
+### 类型使用最佳实践
+
+- 适当使用泛型增强类型灵活性
+- 使用交叉类型（&）合并多个类型
+- 使用字面量联合类型定义有限的选项集合
+- 避免使用 `enum`，优先使用联合类型和 `as const`
+- 尽可能依赖 TypeScript 的类型推断
+- 只在必要时使用类型断言（as）
+
+## 样式规范
+
+### 样式方案
+
+- 使用 `@ant-design/cssinjs` 作为样式解决方案
+- 每个组件的样式应该放在 `style/` 目录下
+- 样式文件应该与组件结构保持一致
+- 使用 CSS-in-JS 时应当注意性能影响，避免不必要的样式重计算
+- 样式生成函数应遵循 `gen[ComponentName]Style` 的命名规范
+- 样式覆盖应使用类选择器而非标签选择器，提高样式特异性
+
+### Token 系统
+
+- 使用 Ant Design 的设计 Token 系统
+- 避免硬编码颜色、尺寸、间距等值
+- 组件样式应基于全局 Token 和组件级 Token
+- 自定义样式应尽可能使用现有的 Token，保持一致性
+- 组件级 Token 命名规范：`Component` + 属性名，如 `buttonPrimaryColor`
+- 对 Token 的修改应当向下传递，确保设计系统的一致性
+
+### 响应式和主题支持
+
+- 组件应支持在不同屏幕尺寸下良好展示
+- 所有组件必须支持暗色模式
+- 组件应支持从右到左（RTL）的阅读方向
+- 使用 CSS 逻辑属性（如 margin-inline-start）替代方向性属性（如 margin-left）
+- 支持通过 ConfigProvider 进行主题定制
+
+### 动画效果
+
+- 使用 CSS 过渡实现简单动画
+- 复杂动画使用 rc-motion 实现
+- 尊重用户的减少动画设置（prefers-reduced-motion）
+- 动画时长和缓动函数应保持一致性
+- 动画不应干扰用户的操作和阅读体验
+
+### 可访问性样式
+
+- 遵循 WCAG 2.1 AA 级别标准
+- 确保焦点状态有明显的视觉提示
+- 提供足够的色彩对比度
+- 不依赖颜色来传达信息
+- 支持用户放大页面至 200% 时的正常布局
+- 避免使用会导致闪烁的动画
+
+## 测试指南
+
+### 测试框架和工具
+
+- 使用 Jest 和 React Testing Library 编写单元测试
+- 对 UI 组件使用快照测试 (Snapshot Testing)
+- 测试覆盖率要求 100%
+- 测试文件放在 __tests__ 目录，命名格式为：index.test.tsx 或 xxx.test.tsx
+
+### 运行测试
+
+```bash
+npm test                    # 运行所有测试
+npm test -- --watch       # 监听模式
+npm run test:coverage     # 生成覆盖率报告
+```
+
+## 演示代码规范
+
+### Demo 基本要求
+
+- demo 代码尽可能简洁
+- 避免冗余代码，方便用户复制到项目直接使用
+- 每个 demo 聚焦展示一个功能点
+- 提供中英文两个版本的说明
+- 遵循展示优先原则，确保视觉效果良好
+- 展示组件的主要使用场景
+- 按照由简到繁的顺序排列 demo
+
+### 文件组织
+
+- 每个组件演示包含 `.md`（说明文档）和 `.tsx`（实际代码）两个文件
+- 位置：组件目录下的 `demo` 子目录，如 `components/button/demo/`
+- 命名：短横线连接的小写英文单词，如 `basic.tsx`、`custom-filter.tsx`
+- 文件名应简洁地描述示例内容
+
+### TSX 代码规范
+
+- 导入顺序：React → 依赖库 → 组件库 → 自定义组件 → 类型 → 样式
+- 类型：为复杂数据定义清晰接口，避免 `any`
+- 使用函数式组件和 Hooks
+- 2空格缩进，箭头函数，驼峰命名
+- 优先使用 antd 内置组件，减少外部依赖
+- 性能优化：适当使用 `useMemo`/`useCallback`，清理副作用
+
+## 国际化规范
+
+### 类型定义
+
+antd 的本地化配置的类型定义的入口文件是 `components/locale/index.tsx`，当需要添加新的本地化配置时，需要检查对应组件或全局配置的类型是否存在，如果不存在，则需要增加相应的类型描述。
+
+### 本地化配置
+
+- 本地化配置文件命名规则：`*_*.ts`，如：`zh_CN.ts`
+- 通常在为 antd 添加后修改某一项本地化配置时，如无特殊说明，需要同时修改所有语言的本地化配置
+- 本地化配置的内容通常是纯字符串
+- 带有 `${}` 的变量将在实际使用的地方被实时替换成对应的变量内容
+
+### 使用本地化
+
+使用 `components/locale/index.tsx` 文件中导出的 `useLocale` 获取全局上下文中配置的本地化：
+
+```tsx
+import { useLocale } from "../locale";
+import enUS from '../locale/en_US';
+
+export function TestComp(props) {
+    const { locale: propLocale } = props;
+    const [contextLocale] = useLocale("TestComp", enUs);
+
+    const locale = {...contextLocale, ...propLocale};
+
+    return (
+        <div title={locale?.title}>
+            {locale?.text}
+        </div>
+    );
+}
+```
+
+## 文档和 Changelog 规范
+
+### 基本要求
+
+- 提供中英文两个版本
+- 新的属性需要声明可用的版本号
+- 属性命名符合 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}`
+
+### Changelog 规范
+
+- 在 CHANGELOG.en-US.md 和 CHANGELOG.zh-CN.md 书写每个版本的变更
+- 对用户使用上无感知的改动建议不要提及，保持 CHANGELOG 的内容有效性
+- 用面向开发者的角度和叙述方式撰写 CHANGELOG
+- 描述用户的原始问题，而非解决方式
+- 尽量给出原始的 PR 链接，社区提交的 PR 改动加上提交者的链接
+
+### Changelog Emoji 规范
+
+- 🐞 Bug 修复
+- 💄 样式更新或 token 更新
+- 🆕 新增特性，新增属性
+- 🔥 极其值得关注的新增特性
+- 🇺🇸🇨🇳🇬🇧 国际化改动
+- 📖 📝 文档或网站改进
+- ✅ 新增或更新测试用例
+- 🛎 更新警告/提示信息
+- ⌨️ ♿ 可访问性增强
+- 🗑 废弃或移除
+- 🛠 重构或工具链优化
+- ⚡️ 性能提升
+
+## Git 和 Pull Request 规范
+
+### 分支管理
+
+禁止直接提交到以下保护分支：
+- `master`：主分支，用于发布
+- `feature`：特性分支，用于开发新版本
+- `next`：下一个版本分支
+
+### 开发流程
+
+1. 从保护分支（通常是 `master`）创建新的功能分支
+2. 在新分支上进行开发
+3. 提交 Pull Request 到目标分支
+4. 等待 Code Review 和 CI 通过
+5. 合并到目标分支
+
+### 分支命名规范
+
+- 功能开发：`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`
+
+### 分支命名注意事项
+
+1. 使用小写字母
+2. 使用连字符（-）分隔单词
+3. 简短但具有描述性
+4. 避免使用下划线或其他特殊字符
+5. 如果与 Issue 关联，可以包含 Issue 编号
+
+### Pull Request 规范
+
+#### PR 标题
+
+- PR 标题始终使用英文
+- 遵循格式：`类型: 简短描述`
+- 例如：`fix: fix button style issues in Safari browser`
+- 例如：`feat: add dark mode support`
+
+#### PR 内容
+
+- PR 内容默认使用英文
+- 尽量简洁清晰地描述改动内容和目的
+- 可以视需要在英文描述后附上中文说明
+
+#### PR 模板
+
+提交 PR 时请使用项目中提供的模板：
+
+- 英文模板（推荐）：PULL_REQUEST_TEMPLATE.md
+- 中文模板：PULL_REQUEST_TEMPLATE_CN.md
+
+#### PR 提交注意事项
+
+1. **合并策略**：
+   - 新特性请提交至 `feature` 分支
+   - 其余可提交至 `master` 分支
+
+2. **审核流程**：
+   - PR 需要由至少一名维护者审核通过后才能合并
+   - 确保所有 CI 检查都通过
+   - 解决所有 Code Review 中提出的问题
+
+3. **PR 质量要求**：
+   - 确保代码符合项目代码风格
+   - 添加必要的测试用例
+   - 更新相关文档
+   - 大型改动需要更详细的说明和更多的审核者参与
+
+4. **工具标注**：
+   - 如果是用 Cursor 提交的代码，请在 PR body 末尾进行标注：`> Submitted by Cursor`
+
+### PR 改动类型
+
+- 🆕 新特性提交
+- 🐞 Bug 修复
+- 📝 文档改进
+- 📽️ 演示代码改进
+- 💄 样式/交互改进
+- 🤖 TypeScript 更新
+- 📦 包体积优化
+- ⚡️ 性能优化
+- 🌐 国际化改进
+
+## 质量保证
+
+### 代码质量要求
+
+- 确保代码运行正常，无控制台错误
+- 适配常见浏览器
+- 避免过时 API，及时更新到新推荐用法
+- 测试覆盖率达到 100%
+- 通过所有 ESLint 和 TypeScript 检查
+
+### 性能要求
+
+- 避免不必要的重新渲染
+- 合理使用 React.memo、useMemo 和 useCallback
+- 样式计算应当高效，避免重复计算
+- 图片和资源应当优化
+- 支持 Tree Shaking
+
+### 兼容性要求
+
+- 支持 React 16 ~ 19 版本
+- 兼容 Chrome 80+ 浏览器
+- 支持服务端渲染
+- 保持向下兼容，避免 breaking change
+- 支持 TypeScript 4.0+
+
+## 工具链和环境
+
+### 开发工具
+
+- 推荐使用 VS Code 或其他支持 TypeScript 的编辑器
+- 配置 ESLint 和 Prettier
+- 使用 TypeScript 严格模式
+- 配置 Git hooks 进行代码检查
+
+### 构建工具
+
+- 使用 webpack 进行构建
+- 支持 ES modules 和 CommonJS
+- 提供 UMD 格式的构建产物
+- 支持按需加载
+
+### CI/CD
+
+- 所有 PR 必须通过 CI 检查
+- 包括单元测试、集成测试、类型检查、代码风格检查
+- 自动化发布流程
+- 支持多环境部署
+
+## 参考资料
+
+- [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`

CHANGELOG.en-US.md

@@ -15,6 +15,53 @@ tag: vVERSION
 
 ---
 
+## 5.27.5
+
+`2025-10-14`
+
+- 🐞 Fix Tour positioning when the `target` is a Table with fixed headers. [#55124](https://github.com/ant-design/ant-design/pull/55124) [@afc163](https://github.com/afc163)
+- 💄 Fix Card body extra padding when adding `gap` style. [#54974](https://github.com/ant-design/ant-design/pull/54974) [@QdabuliuQ](https://github.com/QdabuliuQ)
+- 💄 Fix DatePicker design token for text color. [#55065](https://github.com/ant-design/ant-design/pull/55065) [@765477020](https://github.com/765477020)
+- 💄 Fix List overflow problem when bordered. [#55075](https://github.com/ant-design/ant-design/pull/55075) [@Jiyur](https://github.com/Jiyur)
+- ⌨️ Fix Modal.confirm `aria-labelledby` accessibility attribute missing problem. [#55266](https://github.com/ant-design/ant-design/pull/55266) [@Jiyur](https://github.com/Jiyur)
+- ⚡️ Improve Cascader rendering for loading icon. [#55285](https://github.com/ant-design/ant-design/pull/55285) [@li-jia-nan](https://github.com/li-jia-nan)
+- TypeScript
+  - 🤖 Fix FloatButton type definition missing for `disabled` property. [#55156](https://github.com/ant-design/ant-design/pull/55156) [@deathemperor](https://github.com/deathemperor)
+
+## 5.27.4
+
+`2025-09-17`
+
+- Table
+  - 🐞 Fix Table duplicated filter dropdowns and tooltips when using `sticky` headers or `scroll.y`. [#54910](https://github.com/ant-design/ant-design/pull/54910) [@afc163](https://github.com/afc163)
+  - 🐞 Fix Table header not rendering on initial load. [#54910](https://github.com/ant-design/ant-design/pull/54910) [@afc163](https://github.com/afc163)
+  - 🐞 Fix Table column alignment when `scroll.x` is enabled. [#54899](https://github.com/ant-design/ant-design/pull/54899) [@afc163](https://github.com/afc163)
+- 🐞 Fix Button where the padding of icon-only was affected by the theme. [#54970](https://github.com/ant-design/ant-design/pull/54970) [@guoyunhe](https://github.com/guoyunhe)
+- 🐞 Fix Splitter `minSize` and `maxSize` not taking effect on initial mount in uncontrolled mode. [#54939](https://github.com/ant-design/ant-design/pull/54939) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Fix Switch wave effect compatibility with Tailwind CSS `disabled` variant. [#54933](https://github.com/ant-design/ant-design/pull/54933) [@Jiyur](https://github.com/Jiyur)
+- 🐞 Fix Input.Search hover color changes for the border and icon when the search button is `disabled`. [#54892](https://github.com/ant-design/ant-design/pull/54892) [@Jiyur](https://github.com/Jiyur)
+
+## 5.27.3
+
+`2025-09-04`
+
+- Table
+  - 🐞 Fix Table header width compression issues and render flickering issues when `scroll.y` or `sticky` is set. [#54824](https://github.com/ant-design/ant-design/pull/54824) [@afc163](https://github.com/afc163)
+    | Before ❌   | After ✅ |
+    | ---------- | --------- |
+    | <img width="400" alt="before fix" src="https://github.com/user-attachments/assets/48109e0a-bc90-4897-8454-e2a5f14e9d8c" /> | <img width="400" alt="after fix" src="https://github.com/user-attachments/assets/67f59ccc-98a2-445f-9eb9-abd0526a3892" /> |
+  - 🐞 Fix Table `scroll.scrollToFirstRowOnChange` not working with virtual scroll. [#54734](https://github.com/ant-design/ant-design/issues/54734) [@Wxh16144](https://github.com/Wxh16144)
+  - 🐞 Fix Table columns with `children` not working with `fixed: 'right'`. [#51812](https://github.com/ant-design/ant-design/issues/51812) [@ryantang247](https://github.com/ryantang247)
+  - 🐞 Fix Table expand column not being displayed when `expandable.fixed` is set to true. [@inottn](https://github.com/inottn)
+  - 🐞 Fix Table columns `minWidth` props not working when virtualized. [#54856](https://github.com/ant-design/ant-design/issues/54856) [@cactuser-Lu](https://github.com/cactuser-Lu)
+- 🐞 Fix Pagination style issues with `simple` and `small` size props. [#54837](https://github.com/ant-design/ant-design/pull/54837) [@MrWangJustToDo](https://github.com/MrWangJustToDo)
+- 🐞 Fix Button padding issue when `shape="round"`. [#54845](https://github.com/ant-design/ant-design/pull/54845) [@guoyunhe](https://github.com/guoyunhe)
+- 🐞 Fix Input.OTP not allowing continuous deletion. [#54850](https://github.com/ant-design/ant-design/pull/54850) [@765477020](https://github.com/765477020)
+- 🐞 Fix Dropdown `onOpenChange` closure issue. [#54880](https://github.com/ant-design/ant-design/pull/54880) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Fix Carousel component style and button switching issues in RTL mode. [#54868](https://github.com/ant-design/ant-design/pull/54868) [@EmilyyyLiu](https://github.com/EmilyyyLiu)
+- 🐞 Fix incorrect margin in Typography when editable. [#54871](https://github.com/ant-design/ant-design/pull/54871) [@Tarun2605](https://github.com/Tarun2605)
+- 🇮🇹 Add missing Italian translations for ColorPicker and QRCode components. [#54842](https://github.com/ant-design/ant-design/pull/54842) [@nikzanda](https://github.com/nikzanda)
+
 ## 5.27.2
 
 `2025-09-02`

CHANGELOG.zh-CN.md

@@ -15,6 +15,54 @@ tag: vVERSION
 
 ---
 
+## 5.27.5
+
+`2025-10-14`
+
+- 🐞 修复 Tour 指定 `target` 为 Table 固定列头时定位错误的问题。[#55124](https://github.com/ant-design/ant-design/pull/55124) [@afc163](https://github.com/afc163)
+- 💄 修复 Card body 增加 `gap` 样式时有多余 padding 的问题。[#54974](https://github.com/ant-design/ant-design/pull/54974) [@QdabuliuQ](https://github.com/QdabuliuQ)
+- 💄 修复 DatePicker 文本颜色 token 错误的问题。[#55065](https://github.com/ant-design/ant-design/pull/55065) [@765477020](https://github.com/765477020)
+- 💄 修复 List 启用边框时会内容溢出的问题。[#55075](https://github.com/ant-design/ant-design/pull/55075) [@Jiyur](https://github.com/Jiyur)
+- ⌨️ 修复 Modal.confirm 缺失 `aria-labelledby` 可访问性属性的问题。[#55266](https://github.com/ant-design/ant-design/pull/55266) [@Jiyur](https://github.com/Jiyur)
+- ⚡️ 优化 Cascader 加载中图标的渲染。[#55285](https://github.com/ant-design/ant-design/pull/55285) [@li-jia-nan](https://github.com/li-jia-nan)
+- TypeScript
+  - 🤖 修复 FloatButton `disabled` 属性类型缺失的问题。[#55156](https://github.com/ant-design/ant-design/pull/55156) [@deathemperor](https://github.com/deathemperor)
+
+## 5.27.4
+
+`2025-09-17`
+
+- Table
+  - 🐞 修复 Table 在使 `sticky` 表头或设置 `scroll.y` 时，筛选下拉与 Tooltip 重复显示的问题。[#54910](https://github.com/ant-design/ant-design/pull/54910) [@afc163](https://github.com/afc163)
+  - 🐞 修复 Table 表头在首次加载时未正确渲染的问题。[#54910](https://github.com/ant-design/ant-design/pull/54910) [@afc163](https://github.com/afc163)
+  - 🐞 修复 Table 在启用 `scroll.x` 时，固定列的对齐问题。[#54899](https://github.com/ant-design/ant-design/pull/54899) [@afc163](https://github.com/afc163)
+- 🐞 修复 Button 仅图标（icon-only）按钮的内边距受主题影响的问题。 [#54970](https://github.com/ant-design/ant-design/pull/54970) [@guoyunhe](https://github.com/guoyunhe)
+- 🐞 修复 Splitter 在非受控模式下初次挂载时，`minSize` 和 `maxSize` 未生效的问题。[#54939](https://github.com/ant-design/ant-design/pull/54939) [@zombieJ](https://github.com/zombieJ)
+- 🐞 修复 Switch 波纹效果与 Tailwind CSS disabled 变体的兼容性问题。[#54933](https://github.com/ant-design/ant-design/pull/54933)  [@Jiyur](https://github.com/Jiyur)
+- 🐞 修复 Input.Search 在搜索按钮为 `disabled` 时，悬停仍会导致边框和图标变色的问题。[#54892](https://github.com/ant-design/ant-design/pull/54892) [@Jiyur](https://github.com/Jiyur)
+
+
+## 5.27.3
+
+`2025-09-04`
+
+- Table
+  - 🐞 修复 Table 设置 `scroll.y` 或者 `sticky` 时表头列宽度被挤压或渲染闪烁的问题。[#54824](https://github.com/ant-design/ant-design/pull/54824) [@afc163](https://github.com/afc163)
+    | Before ❌   | After ✅ |
+    | ---------- | --------- |
+    | <img width="400" alt="before fix" src="https://github.com/user-attachments/assets/48109e0a-bc90-4897-8454-e2a5f14e9d8c" /> | <img width="400" alt="after fix" src="https://github.com/user-attachments/assets/67f59ccc-98a2-445f-9eb9-abd0526a3892" /> |
+  - 🐞 修复 Table 在虚拟滚动时，`scroll.scrollToFirstRowOnChange` 配置不生效的问题。[#54734](https://github.com/ant-design/ant-design/issues/54734) [@Wxh16144](https://github.com/Wxh16144)
+  - 🐞 修复 Table 的列配置了 `children` 时，无法 `fixed: 'right'` 的问题。[#51812](https://github.com/ant-design/ant-design/issues/51812) [@ryantang247](https://github.com/ryantang247)
+  - 🐞 修复 Table 配置 `expandable.fixed` 时，展开列没有显示的问题。[@inottn](https://github.com/inottn)
+  - 🐞 修复 Table 虚拟化时列 `minWidth` 属性不生效的问题。[#54856](https://github.com/ant-design/ant-design/issues/54856) [@cactuser-Lu](https://github.com/cactuser-Lu)
+- 🐞 修复 Pagination 在 `simple` 和 `small` 尺寸下的样式问题。[#54837](https://github.com/ant-design/ant-design/pull/54837) [@MrWangJustToDo](https://github.com/MrWangJustToDo)
+- 🐞 修复 Button `shape="round"` 时的 padding 样式问题。[#54845](https://github.com/ant-design/ant-design/pull/54845) [@guoyunhe](https://github.com/guoyunhe)
+- 🐞 修复 Input.OTP 不允许连续删除的问题。[#54850](https://github.com/ant-design/ant-design/pull/54850) [@765477020](https://github.com/765477020)
+- 🐞 修复 Dropdown `onOpenChange` 闭包问题。[#54880](https://github.com/ant-design/ant-design/pull/54880) [@zombieJ](https://github.com/zombieJ)
+- 🐞 修复 Carousel 组件在 RTL 模式下的样式和按钮切换问题。[#54868](https://github.com/ant-design/ant-design/pull/54868) [@EmilyyyLiu](https://github.com/EmilyyyLiu)
+- 🐞 修复 Typography 在可编辑状态下的错误边距。[#54871](https://github.com/ant-design/ant-design/pull/54871) [@Tarun2605](https://github.com/Tarun2605)
+- 🇮🇹 补充 ColorPicker 和 QRCode 的意大利语翻译。[#54842](https://github.com/ant-design/ant-design/pull/54842) [@nikzanda](https://github.com/nikzanda)
+
 ## 5.27.2
 
 `2025-09-02`

README-zh_CN.md

@@ -6,11 +6,9 @@
 
 一套企业级 UI 设计语言和 React 组件库。
 
-[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
+[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] [![][bundlephobia-image]][bundlephobia-url] [![][jsdelivr-image]][jsdelivr-url]
 
-[![][bundlephobia-image]][bundlephobia-url] [![][jsdelivr-image]][jsdelivr-url] [![FOSSA Status][fossa-image]][fossa-url] [![DeepWiki][deepwiki-image]][deepwiki-url]
-
-[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
+[![Follow Twitter][twitter-image]][twitter-url] [![dumi][dumi-image]][dumi-url] [![FOSSA Status][fossa-image]][fossa-url] [![Issues need help][help-wanted-image]][help-wanted-url] [![LFX Active Contributors][lfx-image]][lfx-url]
 
 [更新日志](./CHANGELOG.zh-CN.md) · [报告问题][github-issues-url] · [特性需求][github-issues-url] · [English](./README.md) · 中文
 
@@ -36,15 +34,11 @@
 [jsdelivr-url]: https://www.jsdelivr.com/package/npm/antd
 [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
 [bundlephobia-url]: https://bundlephobia.com/package/antd
-[issues-helper-image]: https://img.shields.io/badge/using-actions--cool-blue?style=flat-square
-[issues-helper-url]: https://github.com/actions-cool
-[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
-[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
 [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
 [dumi-url]: https://github.com/umijs/dumi
 [github-issues-url]: https://new-issue.ant.design
-[deepwiki-url]: https://deepwiki.com/ant-design/ant-design
-[deepwiki-image]: https://img.shields.io/badge/Chat%20with-DeepWiki%20🤖-20B2AA?style=flat-square
+[lfx-image]: https://insights.linuxfoundation.org/api/badge/active-contributors?project=ant-design-ant-design&repos=https://github.com/ant-design/ant-design
+[lfx-url]: https://insights.linuxfoundation.org/project/ant-design-ant-design/repository/ant-design-ant-design
 
 </div>
 

README.md

@@ -6,11 +6,9 @@
 
 An enterprise-class UI design language and React UI library.
 
-[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
+[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] [![][bundlephobia-image]][bundlephobia-url] [![][jsdelivr-image]][jsdelivr-url]
 
-[![][bundlephobia-image]][bundlephobia-url] [![][jsdelivr-image]][jsdelivr-url] [![FOSSA Status][fossa-image]][fossa-url] [![DeepWiki][deepwiki-image]][deepwiki-url]
-
-[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
+[![Follow Twitter][twitter-image]][twitter-url] [![dumi][dumi-image]][dumi-url] [![FOSSA Status][fossa-image]][fossa-url] [![Issues need help][help-wanted-image]][help-wanted-url] [![LFX Active Contributors][lfx-image]][lfx-url]
 
 [Changelog](./CHANGELOG.en-US.md) · [Report Bug][github-issues-url] · [Request Feature][github-issues-url] · English · [中文](./README-zh_CN.md)
 
@@ -36,15 +34,11 @@ An enterprise-class UI design language and React UI library.
 [jsdelivr-url]: https://www.jsdelivr.com/package/npm/antd
 [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
 [bundlephobia-url]: https://bundlephobia.com/package/antd
-[issues-helper-image]: https://img.shields.io/badge/using-actions--cool-blue?style=flat-square
-[issues-helper-url]: https://github.com/actions-cool
-[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
-[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
 [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
 [dumi-url]: https://github.com/umijs/dumi
 [github-issues-url]: https://new-issue.ant.design
-[deepwiki-url]: https://deepwiki.com/ant-design/ant-design
-[deepwiki-image]: https://img.shields.io/badge/Chat%20with-DeepWiki%20🤖-20B2AA?style=flat-square
+[lfx-image]: https://insights.linuxfoundation.org/api/badge/active-contributors?project=ant-design-ant-design&repos=https://github.com/ant-design/ant-design
+[lfx-url]: https://insights.linuxfoundation.org/project/ant-design-ant-design/repository/ant-design-ant-design
 
 </div>
 

SECURITY.md

@@ -6,8 +6,8 @@ Use this section to tell people about which versions of your project are current
 
 | Version | Supported          |
 | ------- | ------------------ |
-| 4.x     | :white_check_mark: |
-| < 4.0   | :x:                |
+| 5.x     | :white_check_mark: |
+| < 5.0   | :x:                |
 
 ## Reporting a Vulnerability
 

biome.json

@@ -14,7 +14,8 @@
       "!server",
       "!scripts/previewEditor/**/*",
       "!**/*.tmp",
-      "!package.json"
+      "!package.json",
+      "!components/style/antd.css"
     ]
   },
   "formatter": {
@@ -39,30 +40,20 @@
   "linter": {
     "rules": {
       "style": {
-        "useImportType": "off",
-        "useNumberNamespace": "off",
         "useNodejsImportProtocol": "off",
-        "noNonNullAssertion": "off",
-        "noUnusedTemplateLiteral": "off"
+        "noNonNullAssertion": "off"
       },
       "complexity": {
-        "noUselessTypeConstraint": "off",
-        "noForEach": "off",
         "useDateNow": "off",
         "noImportantStyles": "off",
-        "useIndexOf": "off"
+        "useOptionalChain": "off"
       },
       "correctness": {
         "useUniqueElementIds": "off",
-        "useExhaustiveDependencies": "off",
-        "useHookAtTopLevel": "off",
-        "noUnusedFunctionParameters": "off",
-        "noUnusedVariables": "off"
+        "useExhaustiveDependencies": "off"
       },
       "suspicious": {
         "noTsIgnore": "off",
-        "noGlobalIsNan": "off",
-        "noGlobalIsFinite": "off",
         "noExplicitAny": "off",
         "noArrayIndexKey": "off",
         "noConfusingVoidType": "off",
@@ -72,12 +63,10 @@
         "noUnknownAtRules": "off"
       },
       "performance": {
-        "noDelete": "off",
         "noAccumulatingSpread": "off",
         "noDynamicNamespaceImportAccess": "off"
       },
       "a11y": {
-        "noAriaHiddenOnFocusable": "off",
         "noLabelWithoutControl": "off",
         "useFocusableInteractive": "off",
         "useKeyWithClickEvents": "off",
@@ -98,11 +87,7 @@
       "includes": ["**/*.test.ts", "**/*.test.tsx", "tests/**/*", "scripts/**/*", ".dumi/**/*"],
       "linter": {
         "rules": {
-          "style": {
-            "noParameterAssign": "off"
-          },
           "suspicious": {
-            "noThenProperty": "off",
             "noImplicitAnyLet": "off"
           },
           "complexity": {
@@ -110,8 +95,7 @@
           },
           "a11y": {
             "useValidAnchor": "off",
-            "useAnchorContent": "off",
-            "useKeyWithClickEvents": "off"
+            "useAnchorContent": "off"
           }
         }
       }
@@ -125,8 +109,7 @@
           },
           "a11y": {
             "useValidAnchor": "off",
-            "useAnchorContent": "off",
-            "useKeyWithClickEvents": "off"
+            "useAnchorContent": "off"
           }
         }
       }

components/_util/ActionButton.tsx

@@ -22,9 +22,9 @@ export interface ActionButtonProps {
   isSilent?: () => boolean;
 }
 
-function isThenable<T>(thing?: PromiseLike<T>): boolean {
-  return !!thing?.then;
-}
+const isThenable = <T,>(thing?: PromiseLike<T>): thing is PromiseLike<T> => {
+  return typeof thing?.then === 'function';
+};
 
 const ActionButton: React.FC<ActionButtonProps> = (props) => {
   const {
@@ -52,9 +52,7 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
     let timeoutId: ReturnType<typeof setTimeout> | null = null;
     if (autoFocus) {
       timeoutId = setTimeout(() => {
-        buttonRef.current?.focus({
-          preventScroll: true,
-        });
+        buttonRef.current?.focus({ preventScroll: true });
       });
     }
     return () => {
@@ -62,14 +60,14 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
         clearTimeout(timeoutId);
       }
     };
-  }, []);
+  }, [autoFocus]);
 
   const handlePromiseOnOk = (returnValueOfOnOk?: PromiseLike<any>) => {
     if (!isThenable(returnValueOfOnOk)) {
       return;
     }
     setLoading(true);
-    returnValueOfOnOk!.then(
+    returnValueOfOnOk.then(
       (...args: any[]) => {
         setLoading(false, true);
         onInternalClose(...args);

components/_util/__tests__/isPrimitive.test.ts

@@ -12,7 +12,7 @@ describe('isPrimitive', () => {
     expect(isPrimitive(false)).toBe(true);
     expect(isPrimitive(null)).toBe(true);
     expect(isPrimitive(undefined)).toBe(true);
-    expect(isPrimitive(NaN)).toBe(true);
+    expect(isPrimitive(Number.NaN)).toBe(true);
     expect(isPrimitive(Infinity)).toBe(true);
     expect(isPrimitive(Symbol('test'))).toBe(true);
     expect(isPrimitive(BigInt(123))).toBe(true);

components/_util/__tests__/scrollTo.test.ts

@@ -12,15 +12,15 @@ describe('Test ScrollTo function', () => {
     dateNowMock.mockReturnValueOnce(0).mockReturnValueOnce(1000);
   });
 
-  afterAll(() => {
-    jest.useRealTimers();
-  });
-
   afterEach(() => {
     jest.clearAllTimers();
     dateNowMock.mockClear();
   });
 
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
   it('test scrollTo', async () => {
     const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((_, y) => {
       window.scrollY = y;

components/_util/__tests__/util.test.tsx

@@ -9,14 +9,14 @@ describe('Test utils function', () => {
       jest.useFakeTimers();
     });
 
-    afterAll(() => {
-      jest.useRealTimers();
-    });
-
     afterEach(() => {
       jest.clearAllTimers();
     });
 
+    afterAll(() => {
+      jest.useRealTimers();
+    });
+
     it('throttle function should work', async () => {
       const callback = jest.fn();
       const throttled = throttleByAnimationFrame(callback);

components/_util/__tests__/warning.test.tsx

@@ -10,10 +10,6 @@ describe('Test warning', () => {
     spy = jest.spyOn(console, 'error').mockImplementation(() => {});
   });
 
-  afterAll(() => {
-    spy.mockRestore();
-  });
-
   beforeEach(() => {
     jest.resetModules();
   });
@@ -22,6 +18,10 @@ describe('Test warning', () => {
     spy.mockReset();
   });
 
+  afterAll(() => {
+    spy.mockRestore();
+  });
+
   it('Test noop', async () => {
     const { noop } = await import('../warning');
     const value = noop();

components/_util/__tests__/wave.test.tsx

@@ -46,12 +46,6 @@ describe('Wave component', () => {
     (window as any).ResizeObserver = FakeResizeObserver;
   });
 
-  afterAll(() => {
-    jest.useRealTimers();
-    expect(obCnt).not.toBe(0);
-    expect(disCnt).not.toBe(0);
-  });
-
   beforeEach(() => {
     jest.useFakeTimers();
     (global as any).isVisible = true;
@@ -68,6 +62,12 @@ describe('Wave component', () => {
     }
   });
 
+  afterAll(() => {
+    jest.useRealTimers();
+    expect(obCnt).not.toBe(0);
+    expect(disCnt).not.toBe(0);
+  });
+
   function getWaveStyle() {
     const styleObj: Record<string, string> = {};
     const { style } = document.querySelector<HTMLElement>('.ant-wave')!;

components/_util/hooks/useClosable.tsx

@@ -166,5 +166,10 @@ export default function useClosable(
     }
 
     return [true, mergedCloseIcon, closeBtnIsDisabled, ariaOrDataProps];
-  }, [mergedClosableConfig, mergedFallbackCloseCollection]);
+  }, [
+    closeBtnIsDisabled,
+    contextLocale.close,
+    mergedClosableConfig,
+    mergedFallbackCloseCollection,
+  ]);
 }

components/_util/hooks/useMergeSemantic/index.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
 
-import { ValidChar } from './interface';
+import type { ValidChar } from './interface';
 
 type TemplateSemanticClassNames<T extends string> = Partial<Record<T, string>>;
 

components/_util/wave/WaveEffect.tsx

@@ -63,8 +63,8 @@ const WaveEffect = (props: WaveEffectProps) => {
 
     // Rect
     const { borderLeftWidth, borderTopWidth } = nodeStyle;
-    setLeft(isStatic ? target.offsetLeft : validateNum(-parseFloat(borderLeftWidth)));
-    setTop(isStatic ? target.offsetTop : validateNum(-parseFloat(borderTopWidth)));
+    setLeft(isStatic ? target.offsetLeft : validateNum(-Number.parseFloat(borderLeftWidth)));
+    setTop(isStatic ? target.offsetTop : validateNum(-Number.parseFloat(borderTopWidth)));
     setWidth(target.offsetWidth);
     setHeight(target.offsetHeight);
 
@@ -82,7 +82,7 @@ const WaveEffect = (props: WaveEffectProps) => {
         borderTopRightRadius,
         borderBottomRightRadius,
         borderBottomLeftRadius,
-      ].map((radius) => validateNum(parseFloat(radius))),
+      ].map((radius) => validateNum(Number.parseFloat(radius))),
     );
   }
 
@@ -109,7 +109,7 @@ const WaveEffect = (props: WaveEffectProps) => {
         resizeObserver?.disconnect();
       };
     }
-  }, []);
+  }, [target]);
 
   if (!enabled) {
     return null;

components/_util/wave/index.ts

@@ -19,7 +19,8 @@ export interface WaveProps {
 const Wave: React.FC<WaveProps> = (props) => {
   const { children, disabled, component } = props;
   const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
-  const containerRef = useRef<HTMLElement>(null!);
+
+  const containerRef = useRef<HTMLElement | null>(null);
 
   // ============================== Style ===============================
   const prefixCls = getPrefixCls('wave');
@@ -31,7 +32,7 @@ const Wave: React.FC<WaveProps> = (props) => {
   // ============================== Effect ==============================
   React.useEffect(() => {
     const node = containerRef.current;
-    if (!node || node.nodeType !== 1 || disabled) {
+    if (!node || node.nodeType !== window.Node.ELEMENT_NODE || disabled) {
       return;
     }
 
@@ -44,7 +45,8 @@ const Wave: React.FC<WaveProps> = (props) => {
         !node.getAttribute ||
         node.getAttribute('disabled') ||
         (node as HTMLInputElement).disabled ||
-        node.className.includes('disabled') ||
+        (node.className.includes('disabled') && !node.className.includes('disabled:')) ||
+        node.getAttribute('aria-disabled') === 'true' ||
         node.className.includes('-leave')
       ) {
         return;

components/_util/wave/useWave.ts

@@ -9,7 +9,7 @@ import type { ShowWave, WaveComponent } from './interface';
 import showWaveEffect from './WaveEffect';
 
 const useWave = (
-  nodeRef: React.RefObject<HTMLElement>,
+  nodeRef: React.RefObject<HTMLElement | null>,
   className: string,
   component?: WaveComponent,
 ) => {
@@ -17,7 +17,7 @@ const useWave = (
   const [, token, hashId] = useToken();
 
   const showWave = useEvent<ShowWave>((event) => {
-    const node = nodeRef.current!;
+    const node = nodeRef.current;
 
     if (wave?.disabled || !node) {
       return;

components/affix/__tests__/Affix.test.tsx

@@ -44,16 +44,16 @@ describe('Affix Render', () => {
 
   const classRect: Record<string, DOMRect> = { container: { top: 0, bottom: 100 } as DOMRect };
 
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
   beforeAll(() => {
     domMock.mockImplementation(function fn(this: HTMLElement) {
       return classRect[this.className] || { top: 0, bottom: 0 };
     });
   });
 
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
   afterEach(() => {
     jest.useRealTimers();
     jest.clearAllTimers();

components/affix/index.tsx

@@ -211,10 +211,6 @@ const Affix = React.forwardRef<AffixRef, InternalAffixProps>((props, ref) => {
   };
 
   const removeListeners = () => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-      timer.current = null;
-    }
     const newTarget = targetFunc?.();
     TRIGGER_EVENTS.forEach((eventName) => {
       newTarget?.removeEventListener(eventName, lazyUpdatePosition);
@@ -233,7 +229,14 @@ const Affix = React.forwardRef<AffixRef, InternalAffixProps>((props, ref) => {
     // [Legacy] Wait for parent component ref has its value.
     // We should use target as directly element instead of function which makes element check hard.
     timer.current = setTimeout(addListeners);
-    return () => removeListeners();
+
+    return () => {
+      if (timer.current) {
+        clearTimeout(timer.current);
+        timer.current = null;
+      }
+      removeListeners();
+    };
   }, []);
 
   React.useEffect(() => {

components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -3130,6 +3130,53 @@ exports[`renders components/auto-complete/demo/variant.tsx extend context correc
       </div>
     </div>
   </div>
+  <div
+    class="ant-select ant-select-underlined ant-select-auto-complete ant-select-single ant-select-show-search"
+    style="width: 200px;"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-wrap"
+      >
+        <span
+          class="ant-select-selection-search"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-controls="rc_select_TEST_OR_SSR_list"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-owns="rc_select_TEST_OR_SSR_list"
+            autocomplete="off"
+            class="ant-select-selection-search-input"
+            id="rc_select_TEST_OR_SSR"
+            role="combobox"
+            type="search"
+            value=""
+          />
+        </span>
+        <span
+          class="ant-select-selection-placeholder"
+        >
+          Underlined
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
+    >
+      <div>
+        <div
+          class="ant-select-item-empty"
+          id="rc_select_TEST_OR_SSR_list"
+          role="listbox"
+        />
+      </div>
+    </div>
+  </div>
 </div>
 `;
 

components/auto-complete/__tests__/__snapshots__/demo.test.tsx.snap

@@ -1850,5 +1850,39 @@ exports[`renders components/auto-complete/demo/variant.tsx correctly 1`] = `
       </span>
     </div>
   </div>
+  <div
+    class="ant-select ant-select-underlined ant-select-auto-complete ant-select-single ant-select-show-search"
+    style="width:200px"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-wrap"
+      >
+        <span
+          class="ant-select-selection-search"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-controls="undefined_list"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-owns="undefined_list"
+            autocomplete="off"
+            class="ant-select-selection-search-input"
+            role="combobox"
+            type="search"
+            value=""
+          />
+        </span>
+        <span
+          class="ant-select-selection-placeholder"
+        >
+          Underlined
+        </span>
+      </span>
+    </div>
+  </div>
 </div>
 `;