From 7d165c5595a096e2f855f2b8e85e3d616ad6357c Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Sun, 26 Oct 2025 15:51:20 +0800
Subject: [PATCH] demo: update Alert deprecated api (#55472)

---
 .dumi/pages/index/components/BannerRecommends.tsx |  2 +-
 .dumi/theme/builtins/ResourceArticles/index.tsx   |  2 +-
 .dumi/theme/slots/Header/index.tsx                |  3 +--
 components/alert/design/demo/action.tsx           | 15 +++++++--------
 components/alert/design/demo/content.tsx          |  4 ++--
 components/alert/design/demo/type.tsx             | 14 +++++++-------
 .../config-provider/__tests__/style.test.tsx      |  8 ++------
 7 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/.dumi/pages/index/components/BannerRecommends.tsx b/.dumi/pages/index/components/BannerRecommends.tsx
index cb25d71dc4..58859a8d34 100644
--- a/.dumi/pages/index/components/BannerRecommends.tsx
+++ b/.dumi/pages/index/components/BannerRecommends.tsx
@@ -155,7 +155,7 @@ const BannerRecommends: React.FC = () => {
       <Alert
         showIcon
         type="error"
-        message={error.message}
+        title={error.message}
         description={process.env.NODE_ENV !== 'production' ? error.stack : undefined}
       />
     );
diff --git a/.dumi/theme/builtins/ResourceArticles/index.tsx b/.dumi/theme/builtins/ResourceArticles/index.tsx
index 7f0b83f4aa..809c81bdeb 100644
--- a/.dumi/theme/builtins/ResourceArticles/index.tsx
+++ b/.dumi/theme/builtins/ResourceArticles/index.tsx
@@ -156,7 +156,7 @@ const ResourceArticles: React.FC = () => {
       <Alert
         showIcon
         type="error"
-        message={error.message}
+        title={error.message}
         description={process.env.NODE_ENV !== 'production' ? error.stack : undefined}
       />
     );
diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx
index 1ce168ed17..17453dbb0e 100644
--- a/.dumi/theme/slots/Header/index.tsx
+++ b/.dumi/theme/slots/Header/index.tsx
@@ -412,9 +412,8 @@ const Header: React.FC = () => {
             }
             type="info"
             banner
-            closable
             showIcon={false}
-            onClose={onBannerClose}
+            closable={{ closeIcon: true, onClose: onBannerClose }}
           />
         </ConfigProvider>
       )}
diff --git a/components/alert/design/demo/action.tsx b/components/alert/design/demo/action.tsx
index 35e2ad9dbf..b3406007ae 100644
--- a/components/alert/design/demo/action.tsx
+++ b/components/alert/design/demo/action.tsx
@@ -54,22 +54,21 @@ const locales = {
 
 const Demo: React.FC = () => {
   const [locale] = useLocale(locales);
-
   const [expandA, setExpandA] = React.useState(false);
   const [expandB, setExpandB] = React.useState(true);
   return (
     <Flex gap="large" vertical style={{ maxWidth: 600 }}>
       <Flex gap="middle" vertical>
         <div>{locale.closeAlertTitle}</div>
-        <Alert showIcon closable message={locale.welcomeMessage} />
-        <Alert showIcon closable message={locale.helpTitle} description={locale.helpDescription} />
+        <Alert showIcon closable title={locale.welcomeMessage} />
+        <Alert showIcon closable title={locale.helpTitle} description={locale.helpDescription} />
       </Flex>
       <Flex gap="middle" vertical>
         <div>{locale.expandCollapseTitle}</div>
         <Alert
           showIcon
           closable
-          message={
+          title={
             <div>
               <Typography.Paragraph ellipsis={!expandA && { rows: 2 }} style={{ marginBottom: 8 }}>
                 {locale.longMessage}
@@ -84,7 +83,7 @@ const Demo: React.FC = () => {
         <Alert
           showIcon
           closable
-          message={
+          title={
             <div>
               <Typography.Paragraph ellipsis={!expandB && { rows: 2 }} style={{ marginBottom: 8 }}>
                 {locale.longMessage}
@@ -102,13 +101,13 @@ const Demo: React.FC = () => {
         <Alert
           showIcon
           closable
-          message={locale.singleLineMessage}
+          title={locale.singleLineMessage}
           action={<Typography.Link>{locale.relatedAction}</Typography.Link>}
         />
         <Alert
           showIcon
           closable
-          message={
+          title={
             <div>
               <Typography.Paragraph style={{ marginBottom: 8 }}>
                 {locale.multiLineMessage}
@@ -124,7 +123,7 @@ const Demo: React.FC = () => {
         <Alert
           showIcon
           closable
-          message={locale.alertTitle}
+          title={locale.alertTitle}
           description={
             <div>
               <Typography.Paragraph style={{ marginBottom: 8 }}>
diff --git a/components/alert/design/demo/content.tsx b/components/alert/design/demo/content.tsx
index d251861017..57b8627c51 100644
--- a/components/alert/design/demo/content.tsx
+++ b/components/alert/design/demo/content.tsx
@@ -23,8 +23,8 @@ const Demo: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <Flex gap="middle" vertical style={{ maxWidth: 600 }}>
-      <Alert message={locale.welcomeMessage} />
-      <Alert message={locale.helpTitle} description={locale.helpDescription} />
+      <Alert title={locale.welcomeMessage} />
+      <Alert title={locale.helpTitle} description={locale.helpDescription} />
     </Flex>
   );
 };
diff --git a/components/alert/design/demo/type.tsx b/components/alert/design/demo/type.tsx
index 96ba15c970..bab68577eb 100644
--- a/components/alert/design/demo/type.tsx
+++ b/components/alert/design/demo/type.tsx
@@ -63,37 +63,37 @@ const Demo: React.FC = () => {
         <Alert
           showIcon
           type="success"
-          message={locale.successMessage2}
+          title={locale.successMessage2}
           description={locale.successDescription2}
         />
       </Flex>
       <Flex gap="middle" vertical>
         <div>{locale.infoTitle}</div>
-        <Alert showIcon type="info" message={locale.infoMessage1} />
+        <Alert showIcon type="info" title={locale.infoMessage1} />
         <Alert
           showIcon
           type="info"
-          message={locale.infoMessage2}
+          title={locale.infoMessage2}
           description={locale.infoDescription2}
         />
       </Flex>
       <Flex gap="middle" vertical>
         <div>{locale.warningTitle}</div>
-        <Alert showIcon type="warning" message={locale.warningMessage1} />
+        <Alert showIcon type="warning" title={locale.warningMessage1} />
         <Alert
           showIcon
           type="warning"
-          message={locale.warningMessage2}
+          title={locale.warningMessage2}
           description={locale.warningDescription2}
         />
       </Flex>
       <Flex gap="middle" vertical>
         <div>{locale.errorTitle}</div>
-        <Alert showIcon type="error" message={locale.errorMessage1} />
+        <Alert showIcon type="error" title={locale.errorMessage1} />
         <Alert
           showIcon
           type="error"
-          message={locale.errorMessage2}
+          title={locale.errorMessage2}
           description={locale.errorDescription2}
         />
       </Flex>
diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
index 8c3f81b253..152939690f 100644
--- a/components/config-provider/__tests__/style.test.tsx
+++ b/components/config-provider/__tests__/style.test.tsx
@@ -987,12 +987,8 @@ describe('ConfigProvider support style and className props', () => {
 
   it('Should Alert style works', () => {
     const { container } = render(
-      <ConfigProvider
-        alert={{
-          style: { color: 'rgb(255, 0, 0)' },
-        }}
-      >
-        <Alert style={{ fontSize: '16px' }} message="Test Message" />
+      <ConfigProvider alert={{ style: { color: 'rgb(255, 0, 0)' } }}>
+        <Alert style={{ fontSize: '16px' }} title="Test Message" />
       </ConfigProvider>,
     );