(),
+ };
+};
+
+const useApp = () => {
+ return useInjectAppContext();
+};
+
+const App = defineComponent({
+ name: 'AApp',
+ props: initDefaultProps(AppProps(), {}),
+ setup(props, { slots }) {
+ const { prefixCls } = useConfigInject('app', props);
+ const [wrapSSR, hashId] = useStyle(prefixCls);
+ const customClassName = computed(() => {
+ return classNames(hashId.value, prefixCls.value, props.rootClassName);
+ });
+
+ const appConfig = useInjectAppConfigContext();
+ const mergedAppConfig = computed(() => ({
+ message: { ...appConfig.message, ...props.message },
+ notification: { ...appConfig.notification, ...props.notification },
+ }));
+ useProvideAppConfigContext(mergedAppConfig.value);
+
+ const [messageApi, messageContextHolder] = useMessage(mergedAppConfig.value.message);
+ const [notificationApi, notificationContextHolder] = useNotification(
+ mergedAppConfig.value.notification,
+ );
+ const [ModalApi, ModalContextHolder] = useModal();
+
+ const memoizedContextValue = computed(() => ({
+ message: messageApi,
+ notification: notificationApi,
+ modal: ModalApi,
+ }));
+ useProvideAppContext(memoizedContextValue.value);
+
+ return () => {
+ return wrapSSR(
+
+ {ModalContextHolder()}
+ {messageContextHolder()}
+ {notificationContextHolder()}
+ {slots.default?.()}
+
,
+ );
+ };
+ },
+});
+
+App.useApp = useApp;
+
+App.install = function (app: TypeApp) {
+ app.component(App.name, App);
+};
+
+export default App as typeof App &
+ Plugin & {
+ readonly useApp: typeof useApp;
+ };
diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md
new file mode 100644
index 000000000..e362ee065
--- /dev/null
+++ b/components/app/index.zh-CN.md
@@ -0,0 +1,130 @@
+---
+category: Components
+subtitle: 包裹组件
+cols: 1
+type: 其它
+title: App
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*TBTSR4PyVmkAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JGb3RIzyOCkAAAAAAAAAAAAADrJ8AQ/original
+---
+
+新的包裹组件，提供重置样式和提供消费上下文的默认环境。
+
+## 何时使用
+
+- 提供可消费 provide/inject 的 `message.xxx`、`Modal.xxx`、`notification.xxx` 的静态方法，可以简化 useMessage 等方法需要手动植入 `contextHolder` 的问题。
+- 提供基于 `.ant-app` 的默认重置样式，解决原生元素没有 antd 规范样式的问题。
+
+## API
+
+### App
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| message | App 内 Message 的全局配置 | [MessageConfig](/components/message-cn/#messageconfig) | - | 4.x |
+| notification | App 内 Notification 的全局配置 | [NotificationConfig](/components/notification-cn/#notificationconfig) | - | 4.x |
+
+## 如何使用
+
+### 基础用法
+
+App 组件通过 `provide/inject` 提供上下文方法调用，因而 useApp 需要作为子组件才能使用，我们推荐在应用中顶层包裹 App。
+
+```html
+/*myPage.vue*/
+
+
+ Open message
+ Open modal
+ Open notification
+
+
+
+
+```
+
+注意：App.useApp 必须在 App 之下方可使用。
+
+#### 内嵌使用场景（如无必要，尽量不做嵌套）
+
+```html
+
+
+ ...
+ ...
+
+
+```
+
+#### 与 ConfigProvider 先后顺序
+
+App 组件只能在 `ConfigProvider` 之下才能使用 Design Token， 如果需要使用其样式重置能力，则 ConfigProvider 与 App 组件必须成对出现。
+
+```html
+
+ ...
+
+```
+
+#### 全局场景 (pinia 场景)
+
+```ts
+import { App } from 'ant-design-vue';
+import type { MessageInstance } from 'ant-design-vue/es/message/interface';
+import type { ModalStaticFunctions } from 'ant-design-vue/es/modal/confirm';
+import type { NotificationInstance } from 'ant-design-vue/es/notification/interface';
+
+export const useGloablStore = defineStore('global', () => {
+ const message: MessageInstance = ref();
+ const notification: NotificationInstance = ref();
+ const modal: Omit = ref();
+ (() => {
+ const staticFunction = App.useApp();
+ message.value = staticFunction.message;
+ modal.value = staticFunction.modal;
+ notification.value = staticFunction.notification;
+ })();
+
+ return { message, notification, modal };
+});
+```
+
+```html
+// sub page
+
+
+ Open message
+
+
+
+
+```
diff --git a/components/app/style/index.ts b/components/app/style/index.ts
new file mode 100644
index 000000000..031b0ffd0
--- /dev/null
+++ b/components/app/style/index.ts
@@ -0,0 +1,22 @@
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook } from '../../theme/internal';
+
+export type ComponentToken = {};
+
+interface AppToken extends FullToken<'App'> {}
+
+// =============================== Base ===============================
+const genBaseStyle: GenerateStyle = token => {
+ const { componentCls, colorText, fontSize, lineHeight, fontFamily } = token;
+ return {
+ [componentCls]: {
+ color: colorText,
+ fontSize,
+ lineHeight,
+ fontFamily,
+ },
+ };
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook('App', token => [genBaseStyle(token)]);
diff --git a/components/components.ts b/components/components.ts
index 7b741d1c6..2118711be 100644
--- a/components/components.ts
+++ b/components/components.ts
@@ -261,3 +261,6 @@ export { default as QRCode } from './qrcode';
export type { TourProps, TourStepProps } from './tour';
export { default as Tour } from './tour';
+
+export type { AppProps } from './app';
+export { default as App } from './app';
diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts
index 92f2fffb8..329cba4fd 100644
--- a/components/theme/interface/components.ts
+++ b/components/theme/interface/components.ts
@@ -46,7 +46,7 @@ import type { ComponentToken as TypographyComponentToken } from '../../typograph
import type { ComponentToken as UploadComponentToken } from '../../upload/style';
import type { ComponentToken as TourComponentToken } from '../../tour/style';
import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style';
-// import type { ComponentToken as AppComponentToken } from '../../app/style';
+import type { ComponentToken as AppComponentToken } from '../../app/style';
import type { ComponentToken as WaveToken } from '../../_util/wave/style';
export interface ComponentTokenMap {
@@ -112,7 +112,7 @@ export interface ComponentTokenMap {
Progress?: ProgressComponentToken;
Tour?: TourComponentToken;
QRCode?: QRCodeComponentToken;
- // App?: AppComponentToken;
+ App?: AppComponentToken;
// /** @private Internal TS definition. Do not use. */
Wave?: WaveToken;