docs: add global message use case

components/app/index.en-US.md

@@ -121,6 +121,76 @@ export default () => {
 };
 ```
 
+### Global scene (JS/TS)
+
+Here is an example of using `Message` to handle request errors in axios global interceptors:
+
+```tsx
+// toast.ts
+import { App } from 'antd';
+import type { MessageInstance } from 'antd/es/message/interface';
+import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+
+let message: MessageInstance;
+let notification: NotificationInstance;
+let modal: Omit<ModalStaticFunctions, 'warn'>;
+
+export default function Toast() {
+  const staticFunction = App.useApp();
+  message = staticFunction.message;
+  modal = staticFunction.modal;
+  notification = staticFunction.notification;
+  return null;
+}
+
+export { message, notification, modal };
+```
+
+```tsx
+// App.tsx
+// Wrap the Toast component in the antd's App component to get the context
+import { App as AntdApp, ConfigProvider, Layout } from 'antd';
+
+import Toast from './toast';
+
+function App() {
+  return (
+    <ConfigProvider>
+      <AntdApp>
+        <Toast />
+      </AntdApp>
+    </ConfigProvider>
+  );
+}
+
+export default App;
+```
+
+```ts
+// fetch.ts
+// Instead of directly import from antd, import the message from the toast file
+import { message } from './toast';
+
+axios.interceptors.response.use(
+  function (response) {
+    return response;
+  },
+  function (error: AxiosError) {
+    if (error.response) {
+      if (error.response.status === 401) {
+        void message.error('user not login');
+      } else {
+        void message.error('error occur');
+      }
+    } else {
+      void message.error(error.message);
+    }
+    return Promise.reject(error);
+  },
+);
+```
+
 ## API
 
 Common props ref：[Common props](/docs/react/common-props)

components/app/index.zh-CN.md

@@ -122,6 +122,76 @@ export default () => {
 };
 ```
 
+### 全局 JS/TS 使用场景
+
+这里是一个在 Axios 拦截器中使用 Message 统一处理请求错误的例子：
+
+```tsx
+// toast.ts
+import { App } from 'antd';
+import type { MessageInstance } from 'antd/es/message/interface';
+import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+
+let message: MessageInstance;
+let notification: NotificationInstance;
+let modal: Omit<ModalStaticFunctions, 'warn'>;
+
+export default function Toast() {
+  const staticFunction = App.useApp();
+  message = staticFunction.message;
+  modal = staticFunction.modal;
+  notification = staticFunction.notification;
+  return null;
+}
+
+export { message, notification, modal };
+```
+
+```tsx
+// App.tsx
+// 将 Toast 组件包裹在 antd 的 App 组件中，以获取上下文
+import { App as AntdApp, ConfigProvider, Layout } from 'antd';
+
+import Toast from './toast';
+
+function App() {
+  return (
+    <ConfigProvider>
+      <AntdApp>
+        <Toast />
+      </AntdApp>
+    </ConfigProvider>
+  );
+}
+
+export default App;
+```
+
+```ts
+// fetch.ts
+// 从 toast 中导入 message，而不是直接从 antd 中导入
+import { message } from './toast';
+
+axios.interceptors.response.use(
+  function (response) {
+    return response;
+  },
+  function (error: AxiosError) {
+    if (error.response) {
+      if (error.response.status === 401) {
+        void message.error('user not login');
+      } else {
+        void message.error('error occur');
+      }
+    } else {
+      void message.error(error.message);
+    }
+    return Promise.reject(error);
+  },
+);
+```
+
 ## API
 
 通用属性参考：[通用属性](/docs/react/common-props)

components/message/demo/hooks.md

@@ -1,7 +1,7 @@
 ## zh-CN
 
-通过 `message.useMessage` 创建支持读取 context 的 `contextHolder`。请注意，我们推荐通过顶层注册的方式代替 `message` 静态方法，因为静态方法无法消费上下文，因而 ConfigProvider 的数据也不会生效。
+通过 `message.useMessage` 创建支持读取 context 的 `contextHolder`。请注意，我们推荐通过 [顶层注册](/components/app-cn) 的方式代替 `message` 静态方法，因为静态方法无法消费上下文，因而 ConfigProvider 的数据也不会生效。
 
 ## en-US
 
-Use `message.useMessage` to get `contextHolder` with context accessible issue. Please note that, we recommend to use top level registration instead of `message` static method, because static method cannot consume context, and ConfigProvider data will not work.
+Use `message.useMessage` to get `contextHolder` with context accessible issue. Please note that, we recommend to use [top level registration](/components/app-cn) instead of `message` static method, because static method cannot consume context, and ConfigProvider data will not work.

components/notification/demo/hooks.md

@@ -1,7 +1,7 @@
 ## zh-CN
 
-通过 `notification.useNotification` 创建支持读取 context 的 `contextHolder`。请注意，我们推荐通过顶层注册的方式代替 `notification` 静态方法，因为静态方法无法消费上下文，因而 ConfigProvider 的数据也不会生效。
+通过 `notification.useNotification` 创建支持读取 context 的 `contextHolder`。请注意，我们推荐通过 [顶层注册](/components/app-cn) 的方式代替 `notification` 静态方法，因为静态方法无法消费上下文，因而 ConfigProvider 的数据也不会生效。
 
 ## en-US
 
-Use `notification.useNotification` to get `contextHolder` with context accessible issue. Please note that, we recommend to use top level registration instead of `notification` static method, because static method cannot consume context, and ConfigProvider data will not work.
+Use `notification.useNotification` to get `contextHolder` with context accessible issue. Please note that, we recommend to use [top level registration](/components/app-cn) instead of `notification` static method, because static method cannot consume context, and ConfigProvider data will not work.