Repository: ant-design/ant-design
Pull request #53821: demo: fix warning for Breadcrumb
Author: login: thinkasany
Labels: name: lgtm
description: This PR has been approved by a maintainer
Created: 2025-05-14T02:39:55Z | Merged: 2025-05-14T09:26:56Z

<!--
First of all, thank you for your contribution! 😄
For requesting to pull a new feature or bugfix, please send it from a feature/bugfix branch based on the `master` branch.
Before submitting your pull request, please make sure the checklist below is filled out.
Your pull requests will be merged after one of the collaborators approves.
Thank you!
-->

[中文版模板 / Chinese template](https://github.com/ant-design/ant-design/blob/master/.github/PULL_REQUEST_TEMPLATE_CN.md?plain=1)

### 🤔 This is a ...

- [ ] 🆕 New feature
- [ ] 🐞 Bug fix
- [ ] 📝 Site / documentation improvement
- [x] 📽️ Demo improvement

### 🔗 Related Issues

> - Describe the source of related requirements, such as links to relevant issue discussions.
> - For example: close #xxxx, fix #xxxx

### 💡 Background and Solution

![image](https://github.com/user-attachments/assets/8a58ec90-988b-4cb7-9c7b-29959bdfda65)


### 📝 Change Log

> - Read [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)! Track your changes, like a cat tracks a laser pointer.
> - Describe the impact of the changes on developers, not the solution approach.
> - Reference: https://ant.design/changelog

| Language   | Changelog |
| ---------- | --------- |
| 🇺🇸 English |       -  |
| 🇨🇳 Chinese |        -   |



Diff:
diff --git a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
index ad85c66fdd5b..7ef6a6c489fb 100644
--- a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1393,11 +1393,7 @@ exports[`renders components/layout/demo/fixed.tsx extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders components/layout/demo/fixed.tsx extend context correctly 2`] = `
-[
-  "Warning: [antd: Breadcrumb] \`Breadcrumb.Item and Breadcrumb.Separator\` is deprecated. Please use \`items\` instead.",
-]
-`;
+exports[`renders components/layout/demo/fixed.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/layout/demo/fixed-sider.tsx extend context correctly 1`] = `
 <div
@@ -2885,11 +2881,7 @@ exports[`renders components/layout/demo/side.tsx extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders components/layout/demo/side.tsx extend context correctly 2`] = `
-[
-  "Warning: [antd: Breadcrumb] \`Breadcrumb.Item and Breadcrumb.Separator\` is deprecated. Please use \`items\` instead.",
-]
-`;
+exports[`renders components/layout/demo/side.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/layout/demo/top.tsx extend context correctly 1`] = `
 <div
@@ -3490,11 +3482,7 @@ exports[`renders components/layout/demo/top.tsx extend context correctly 1`] = `
 </div>
 `;
 
-exports[`renders components/layout/demo/top.tsx extend context correctly 2`] = `
-[
-  "Warning: [antd: Breadcrumb] \`Breadcrumb.Item and Breadcrumb.Separator\` is deprecated. Please use \`items\` instead.",
-]
-`;
+exports[`renders components/layout/demo/top.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/layout/demo/top-side.tsx extend context correctly 1`] = `
 <div
@@ -4433,11 +4421,7 @@ exports[`renders components/layout/demo/top-side.tsx extend context correctly 1`
 </div>
 `;
 
-exports[`renders components/layout/demo/top-side.tsx extend context correctly 2`] = `
-[
-  "Warning: [antd: Breadcrumb] \`Breadcrumb.Item and Breadcrumb.Separator\` is deprecated. Please use \`items\` instead.",
-]
-`;
+exports[`renders components/layout/demo/top-side.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/layout/demo/top-side-2.tsx extend context correctly 1`] = `
 <div
diff --git a/components/layout/demo/fixed.tsx b/components/layout/demo/fixed.tsx
index 92d957e6173e..55c8b6796f3f 100644
--- a/components/layout/demo/fixed.tsx
+++ b/components/layout/demo/fixed.tsx
@@ -35,11 +35,10 @@ const App: React.FC = () => {
         />
       </Header>
       <Content style={{ padding: '0 48px' }}>
-        <Breadcrumb style={{ margin: '16px 0' }}>
-          <Breadcrumb.Item>Home</Breadcrumb.Item>
-          <Breadcrumb.Item>List</Breadcrumb.Item>
-          <Breadcrumb.Item>App</Breadcrumb.Item>
-        </Breadcrumb>
+        <Breadcrumb
+          style={{ margin: '16px 0' }}
+          items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}
+        />
         <div
           style={{
             padding: 24,
diff --git a/components/layout/demo/side.tsx b/components/layout/demo/side.tsx
index 09c814b7e5e9..69be633649ab 100644
--- a/components/layout/demo/side.tsx
+++ b/components/layout/demo/side.tsx
@@ -54,10 +54,7 @@ const App: React.FC = () => {
       <Layout>
         <Header style={{ padding: 0, background: colorBgContainer }} />
         <Content style={{ margin: '0 16px' }}>
-          <Breadcrumb style={{ margin: '16px 0' }}>
-            <Breadcrumb.Item>User</Breadcrumb.Item>
-            <Breadcrumb.Item>Bill</Breadcrumb.Item>
-          </Breadcrumb>
+          <Breadcrumb style={{ margin: '16px 0' }} items={[{ title: 'User' }, { title: 'Bill' }]} />
           <div
             style={{
               padding: 24,
diff --git a/components/layout/demo/top-side.tsx b/components/layout/demo/top-side.tsx
index 2baf6853639f..5881fdcb0e01 100644
--- a/components/layout/demo/top-side.tsx
+++ b/components/layout/demo/top-side.tsx
@@ -47,11 +47,10 @@ const App: React.FC = () => {
         />
       </Header>
       <div style={{ padding: '0 48px' }}>
-        <Breadcrumb style={{ margin: '16px 0' }}>
-          <Breadcrumb.Item>Home</Breadcrumb.Item>
-          <Breadcrumb.Item>List</Breadcrumb.Item>
-          <Breadcrumb.Item>App</Breadcrumb.Item>
-        </Breadcrumb>
+        <Breadcrumb
+          style={{ margin: '16px 0' }}
+          items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}
+        />
         <Layout
           style={{ padding: '24px 0', background: colorBgContainer, borderRadius: borderRadiusLG }}
         >
diff --git a/components/layout/demo/top.tsx b/components/layout/demo/top.tsx
index 4d1841836c75..376e2050eb23 100644
--- a/components/layout/demo/top.tsx
+++ b/components/layout/demo/top.tsx
@@ -26,11 +26,10 @@ const App: React.FC = () => {
         />
       </Header>
       <Content style={{ padding: '0 48px' }}>
-        <Breadcrumb style={{ margin: '16px 0' }}>
-          <Breadcrumb.Item>Home</Breadcrumb.Item>
-          <Breadcrumb.Item>List</Breadcrumb.Item>
-          <Breadcrumb.Item>App</Breadcrumb.Item>
-        </Breadcrumb>
+        <Breadcrumb
+          style={{ margin: '16px 0' }}
+          items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}
+        />
         <div
           style={{
             background: colorBgContainer,


Reviews:
user: login: petercat-assistant[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-14T02:40:13Z
user: login: afc163
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-14T08:43:20Z
user: login: afc163
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-14T09:17:37Z

Review comments:
diff_hunk: @@ -71,11 +71,10 @@ const App: React.FC = () => {
             />
           </Sider>
           <Layout style={{ padding: '0 24px 24px' }}>
-            <Breadcrumb style={{ margin: '16px 0' }}>
-              <Breadcrumb.Item>Home</Breadcrumb.Item>
-              <Breadcrumb.Item>List</Breadcrumb.Item>
-              <Breadcrumb.Item>App</Breadcrumb.Item>
-            </Breadcrumb>
+            <Breadcrumb
path: components/layout/demo/component-token.tsx
user: login: petercat-assistant[bot]
body: The change from individual Breadcrumb.Item elements to using the 'items' prop is a good improvement for consistency and maintainability. Ensure that the 'items' prop is correctly structured to avoid runtime errors.
created_at: 2025-05-14T02:40:12Z
author_association: NONE
diff_hunk: @@ -26,11 +26,10 @@ const App: React.FC = () => {
         />
       </Header>
       <Content style={{ padding: '0 48px' }}>
-        <Breadcrumb style={{ margin: '16px 0' }}>
-          <Breadcrumb.Item>Home</Breadcrumb.Item>
-          <Breadcrumb.Item>List</Breadcrumb.Item>
-          <Breadcrumb.Item>App</Breadcrumb.Item>
-        </Breadcrumb>
+        <Breadcrumb
+          style={{ margin: '16px 0' }}
+          items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}
+        />
path: components/layout/demo/top.tsx
user: login: afc163
body: 可以留一个 debug demo 用于截图和测试，避免这个路径改挂。
created_at: 2025-05-14T08:43:20Z
author_association: MEMBER

PR comments:
user: login: bolt-new-by-stackblitz[bot]
created_at: 2025-05-14T02:39:58Z
body: <a href="https://stackblitz.com/~/github.com/ant-design/ant-design/pull/53821"><img src="https://developer.stackblitz.com/img/review_pr_small.svg" alt="Review PR in StackBlitz Codeflow" align="left" width="103" height="20"></a> _Run & review this pull request in [StackBlitz Codeflow](https://stackblitz.com/~/github.com/ant-design/ant-design/pull/53821)._

author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-05-14T02:40:03Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- This is an auto-generated comment: skip review by coderabbit.ai -->

> [!IMPORTANT]
> ## Review skipped
> 
> Review was skipped due to path filters
> 
> <details>
> <summary>:no_entry: Files ignored due to path filters (1)</summary>
> 
> * `components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap` is excluded by `!**/*.snap`
> 
> </details>
> 
> CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including `**/dist/**` will override the default block on the `dist` directory, by removing the pattern from both the lists.
> 
> You can disable this status message by setting the `reviews.review_status` to `false` in the CodeRabbit configuration file.

<!-- end of auto-generated comment: skip review by coderabbit.ai -->
<!-- walkthrough_start -->

<details>
<summary>📝 Walkthrough</summary>

## Summary by CodeRabbit

- **重构**
  - Breadcrumb 组件的用法由嵌套子元素改为通过 items 属性传递对象数组，简化了面包屑导航的声明方式，视觉效果和样式保持不变。
## Walkthrough

本次变更将多个演示文件中的 Breadcrumb 组件用法，从手动嵌套 Breadcrumb.Item 子元素的方式，统一重构为通过 items 属性传递对象数组的声明式写法。组件的视觉样式和层级结构均未发生变化，仅调整了实现方式。

## Changes

| 文件/路径分组                                             | 变更摘要                                               |
|----------------------------------------------------------|--------------------------------------------------------|
| components/layout/demo/component-token.tsx<br>components/layout/demo/fixed.tsx<br>components/layout/demo/side.tsx<br>components/layout/demo/top-side.tsx<br>components/layout/demo/top.tsx | 将 Breadcrumb 组件的用法由手动嵌套 Breadcrumb.Item 子元素，重构为通过 items 属性传递对象数组的声明式写法，视觉和行为未变。 |

## Suggested reviewers

- afc163

## Poem

> 🐇  
> 小兔跳跃写代码，  
> 面包屑路径换新裁。  
> 手动嵌套已不在，  
> items 数组更明快。  
> 结构简洁心情好，  
> 代码清新乐开怀！  
>

</details>

<!-- walkthrough_end -->
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=ant-design/ant-design&utm_content=53821):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Explain this complex logic.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai explain this code block.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and explain its main purpose.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-14T02:40:07Z
body: <!-- VISUAL_DIFF_SUCCESS -->

## 👁 Visual Regression Report for PR #53821 Passed ✅
> **🎯 Target branch:** master (f386e8d08f88e6f9781414e2be1698016fb8762b)
> 📖 <a href="https://antd-visual-diff.oss-accelerate.aliyuncs.com/pr-53821/visualRegressionReport/report.html" target="_blank">View Full Report ↗︎</a>
> 📖 <a href="https://antd-visual-diff.oss-accelerate.aliyuncs.com/pr-53821/visualRegressionReport/index.html" target="_blank">Alternative Report ↗︎</a>

🎊 Congrats! No visual-regression diff found.

<img src="https://github.com/ant-design/ant-design/assets/507615/2d1a77dc-dbc6-4b0f-9cbc-19a43d3c29cd" width="300" />
<!-- VISUAL_DIFF_REGRESSION_HOOK -->
<!-- VISUAL_DIFF_REGRESSION_HOOK -->
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-14T02:40:07Z
body: [<img width="300" alt="Preview is ready" src="https://user-images.githubusercontent.com/5378891/72400743-23dbb200-3785-11ea-9d13-1a2d92743846.png">](https://preview-53821-ant-design.surge.sh)
<!-- AUTO_PREVIEW_HOOK -->
<!-- AUTO_PREVIEW_HOOK -->
author_association: CONTRIBUTOR
user: login: petercat-assistant[bot]
created_at: 2025-05-14T02:40:10Z
body: ### Walkthrough
This pull request addresses warnings in the Breadcrumb component by updating its usage in various demo files. The changes involve replacing individual Breadcrumb.Item elements with a single Breadcrumb component that uses an 'items' prop to define the breadcrumb structure.

### Changes
| Files | Summary |
|-------|---------|
| components/layout/demo/component-token.tsx, components/layout/demo/fixed.tsx, components/layout/demo/side.tsx, components/layout/demo/top-side.tsx, components/layout/demo/top.tsx | Updated Breadcrumb usage to use 'items' prop instead of individual Breadcrumb.Item elements. |
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-14T02:42:29Z
body: ## size-limit report 📦 
| Path                            | Size      |
| ------------------------------- | --------- |
| `dist/antd.min.js`              | 450.84 KB |
| `dist/antd-with-locales.min.js` | 538.34 KB |
author_association: CONTRIBUTOR
user: login: pkg-pr-new[bot]
created_at: 2025-05-14T02:43:23Z
body: 

<details><summary><b>More templates</b></summary><p>

- [farm-normal](https://pkg.pr.new/template/168ab727-793d-4423-9dbb-fb6ae53e0f5c)
- [rsbuild-normal](https://pkg.pr.new/template/d63c6143-1a68-47f6-8b15-1865505fb8af)
- [vite-normal](https://pkg.pr.new/template/6bf14c4c-d8a8-428d-9fb9-d9a97c802532)
- [umi-normal](https://pkg.pr.new/template/23b43801-973a-4238-b930-ec86bf47d20a)
- [vite-practice](https://pkg.pr.new/template/f4fd00ac-eb93-40dc-94eb-be2c027a6bd2)
- [with-nextjs-app-router-inline-style](https://pkg.pr.new/template/9e9ec873-08ed-4459-9518-2024d7382430)
- [with-nextjs-extract-style](https://pkg.pr.new/template/eb9d0a42-6b7a-46ab-90dc-efaa42386053)
- [with-nextjs-generate-css-on-demand](https://pkg.pr.new/template/d85348c6-d8ce-4845-acf1-cb428f3afae4)
- [with-nextjs-inline-style](https://pkg.pr.new/template/6189dca6-67e1-4f6c-9a1c-6423feb280ed)

</p></details>
      
    


```
npm i https://pkg.pr.new/ant-design/ant-design/antd@53821
```


_commit: <a href="https://github.com/ant-design/ant-design/runs/42196935312"><code>7612620</code></a>_

author_association: NONE
user: login: cloudflare-workers-and-pages[bot]
created_at: 2025-05-14T02:49:06Z
body: ## Deploying ant-design with &nbsp;<a href="https://pages.dev"><img alt="Cloudflare Pages" src="https://user-images.githubusercontent.com/23264/106598434-9e719e00-654f-11eb-9e59-6167043cfa01.png" width="16"></a> &nbsp;Cloudflare Pages

<table><tr><td><strong>Latest commit:</strong> </td><td>
<code>7612620</code>
</td></tr>
<tr><td><strong>Status:</strong></td><td>&nbsp;✅&nbsp; Deploy successful!</td></tr>
<tr><td><strong>Preview URL:</strong></td><td>
<a href='https://2e2fb2a2.ant-design.pages.dev'>https://2e2fb2a2.ant-design.pages.dev</a>
</td></tr>
<tr><td><strong>Branch Preview URL:</strong></td><td>
<a href='https://demo-opt-breadcrumb.ant-design.pages.dev'>https://demo-opt-breadcrumb.ant-design.pages.dev</a>
</td></tr>
</table>

[View logs](https://dash.cloudflare.com/e6395b6beb3487d0b05d2b606540a2d0/pages/view/ant-design/2e2fb2a2-1573-4f86-9316-77a9f1641b33)

author_association: NONE
user: login: codecov[bot]
created_at: 2025-05-14T02:59:48Z
body: ## [Bundle](https://app.codecov.io/gh/ant-design/ant-design/pull/53821?dropdown=bundle) Report

Bundle size has no change :white_check_mark:



author_association: NONE
user: login: codecov[bot]
created_at: 2025-05-14T03:14:19Z
body: ## [Codecov](https://app.codecov.io/gh/ant-design/ant-design/pull/53821?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Project coverage is 100.00%. Comparing base [(`116a2c0`)](https://app.codecov.io/gh/ant-design/ant-design/commit/116a2c09bdc4562038d291ff817ed9e617db32a5?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) to head [(`d697646`)](https://app.codecov.io/gh/ant-design/ant-design/commit/d697646f53c1ede6d94d8f21e3b872f75b7819d7?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff            @@
##            master    #53821   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          774       774           
  Lines        14012     14012           
  Branches      3711      3711           
=========================================
  Hits         14012     14012           
```

</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/ant-design/ant-design/pull/53821?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).

<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
</details>
author_association: NONE
user: login: thinkasany
created_at: 2025-05-14T08:41:46Z
body: @afc163  求个 +1
author_association: MEMBER