refactor: wrap app with antd App context for static methods

- Import and use new EscapeAntd component in main app layout
- Add ConfigProvider wrapper around app content
- Create EscapeAntd component to handle antd static functions using App context
- Export EscapeAntd component from components index
- Replace direct antd message and notification imports with EscapeAntd versions in request module

Signed-off-by: wecoding <wecoding@yeah.net>

Author: coding-hui

src/app.tsx

@@ -1,4 +1,4 @@
-import { AvatarDropdown, AvatarName, Footer, Question, SelectLang } from '@/components';
+import { AvatarDropdown, AvatarName, Footer, Question, SelectLang, EscapeAntd } from '@/components';
 import { currentUser as queryCurrentUser } from '@/services/system/login';
 import { LinkOutlined } from '@ant-design/icons';
 import queryString from 'query-string';
@@ -8,7 +8,7 @@ import type { RunTimeLayoutConfig } from '@umijs/max';
 import { history, Link } from '@umijs/max';
 import defaultSettings from '../config/defaultSettings';
 import { errorConfig } from './request';
-import { App } from 'antd';
+import { App, ConfigProvider } from 'antd';
 import { isLoginPath, isSessionExpiredPath } from '@/utils/is';
 import { PageEnum, TOKEN_KEY } from '@/enums';
 import { Session } from '@/utils/storage';
@@ -132,22 +132,25 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
     childrenRender: (children) => {
       if (initialState?.loading) return <PageLoading />;
       return (
-        <App>
-          {children}
-          {isDev && (
-            <SettingDrawer
-              disableUrlParams
-              enableDarkTheme
-              settings={initialState?.settings}
-              onSettingChange={(settings) => {
-                setInitialState((preInitialState) => ({
-                  ...preInitialState,
-                  settings,
-                }));
-              }}
-            />
-          )}
-        </App>
+        <ConfigProvider theme={{}}>
+          <App>
+            <EscapeAntd />
+            {children}
+            {isDev && (
+              <SettingDrawer
+                disableUrlParams
+                enableDarkTheme
+                settings={initialState?.settings}
+                onSettingChange={(settings) => {
+                  setInitialState((preInitialState) => ({
+                    ...preInitialState,
+                    settings,
+                  }));
+                }}
+              />
+            )}
+          </App>
+        </ConfigProvider>
       );
     },
     ...initialState?.settings,

src/components/EscapeAntd/index.tsx

@@ -0,0 +1,35 @@
+import {
+  message as antdMessage,
+  notification as antdNotification,
+  Modal as antdModal,
+  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 = antdMessage;
+let notification: NotificationInstance = antdNotification;
+
+// because warn is deprecated, so we need to remove it.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const { warn, ...resetFns } = antdModal;
+let modal: Omit<ModalStaticFunctions, 'warn'> = resetFns;
+
+/**
+ * This component is used to escape the antd's static functions.
+ */
+function EscapeAntd() {
+  const staticFunctions = App.useApp();
+
+  message = staticFunctions.message;
+  notification = staticFunctions.notification;
+  modal = staticFunctions.modal;
+
+  return null;
+}
+
+export { message, notification, modal };
+
+export default EscapeAntd;

src/components/index.ts

@@ -6,8 +6,9 @@
  * 布局组件
  */
 import Footer from './Footer';
+import EscapeAntd from './EscapeAntd';
 import { Question, SelectLang } from './RightContent';
 import { AvatarDropdown, AvatarName } from './RightContent/AvatarDropdown';
 import { SubjectTransfer } from './Transfer';
 
-export { Footer, Question, SelectLang, AvatarDropdown, AvatarName, SubjectTransfer };
+export { Footer, Question, SelectLang, AvatarDropdown, AvatarName, SubjectTransfer, EscapeAntd };

src/request.ts

@@ -1,6 +1,6 @@
 import type { RequestOptions } from '@@/plugin-request/request';
 import type { RequestConfig } from '@umijs/max';
-import { message, notification } from 'antd';
+import { message, notification } from '@/components/EscapeAntd';
 import { Session } from '@/utils/storage';
 
 // 错误处理方案： 错误类型