feat: update app demo

components/app/demo/basic.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+获取 `message`，`notification`，`modal` 静态方法。
+
+## en-US
+
+Static method for `message`,`notification`,`modal`.

components/app/demo/basic.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { App, Button, Space } from 'antd';
+
+// Sub page
+const MyPage = () => {
+  const { message, modal, notification } = App.useApp();
+
+  const showMessage = () => {
+    message.success('Success!');
+  };
+
+  const showModal = () => {
+    modal.warning({
+      title: 'This is a warning message',
+      content: 'some messages...some messages...',
+    });
+  };
+
+  const showNotification = () => {
+    notification.info({
+      message: `Notification topLeft`,
+      description: 'Hello, Ant Design!!',
+      placement: 'topLeft',
+    });
+  };
+
+  return (
+    <Space>
+      <Button type="primary" onClick={showMessage}>
+        Open message
+      </Button>
+      <Button type="primary" onClick={showModal}>
+        Open modal
+      </Button>
+      <Button type="primary" onClick={showNotification}>
+        Open notification
+      </Button>
+    </Space>
+  );
+};
+
+// Entry component
+export default () => (
+  <App>
+    <MyPage />
+  </App>
+);

components/app/index.en-US.md

@@ -16,9 +16,7 @@ Static function in React 18 concurrent mode will not well support. In v5, we rec
 ## Examples
 
 <!-- prettier-ignore -->
-<code src="./demo/message.tsx">message</code>
-<code src="./demo/notification.tsx">notification</code>
-<code src="./demo/modal.tsx">modal</code>
+<code src="./demo/basic.tsx">basic</code>
 
 ## How to use
 

components/app/index.zh-CN.md

@@ -18,11 +18,13 @@ demo:
 ## 代码演示
 
 <!-- prettier-ignore -->
-<code src="./demo/message.tsx">message</code>
-<code src="./demo/notification.tsx">notification</code>
-<code src="./demo/modal.tsx">modal</code>
+<code src="./demo/basic.tsx">basic</code>
 
-## How to use
+## 如何使用
+
+### 基础用法
+
+App 通过 Context 提供上下文方法调用，因而 useApp 需要作为子组件才能使用。我们推荐在应用中顶层包裹 App：
 
 ```tsx
 import React from 'react';
@@ -46,3 +48,77 @@ const MyApp: React.FC = () => (
 
 export default MyApp;
 ```
+
+注意：App.useApp 必须在 App 之下方可使用。
+
+### 与 ConfigProvider 先后顺序
+
+App 组件在能在`ConfigProvider`才能使用 token, 如果需要使用 Token,则 ConfigProvider 与 App 组件必须成对出现,不使用 token,则 App 可单独使用。
+
+```tsx
+<ConfigProvider theme={{ ... }}>
+  <App>
+    ...
+  </App>
+</ConfigProvider>
+```
+
+### 内嵌使用场景（如无必要，尽量不做嵌套）
+
+```tsx
+<App>
+  <Space>
+    ...
+    <App>...</App>
+  </Space>
+</App>
+```
+
+### 全局场景（rudux 场景）
+
+```tsx
+// Entry component
+import React, { useEffect } from 'react';
+import { App } from 'antd';
+import type { MessageInstance } from 'antd/es/message/interface';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
+
+let message: MessageInstance;
+let notification: NotificationInstance;
+let modal: Omit<ModalStaticFunctions, 'warn'>;
+
+export default () => {
+  const staticFunction = App.useApp();
+  message = staticFunction.message;
+  modal = staticFunction.modal;
+  notification = staticFunction.notification;
+  useEffect(() => {}, []);
+  return null;
+};
+
+export { message, notification, modal };
+```
+
+```tsx
+// sub page
+import React from 'react';
+import { Button, Space } from 'antd';
+import { message, modal, notification } from './store';
+
+export default () => {
+  const showMessage = () => {
+    console.log('message', message);
+    console.log('modal', modal);
+    message.success('Success!');
+  };
+
+  return (
+    <Space>
+      <Button type="primary" onClick={showMessage}>
+        Open message
+      </Button>
+    </Space>
+  );
+};
+```