Преглед изворни кода

fix: 修复message 和 notification没有跟随antd主题变化的bug

BaiLuoYan пре 4 недеља
родитељ
комит
1a0a0a0dc7
3 измењених фајлова са 39 додато и 6 уклоњено
  1. 9 5
      src/App.tsx
  2. 28 0
      src/config/request/antdAppInstance.tsx
  3. 2 1
      src/config/request/requestErrorConfig.ts

+ 9 - 5
src/App.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 
-import { ConfigProvider, theme } from 'antd';
+import { App as AntdApp, ConfigProvider, theme } from 'antd';
 import enUS from 'antd/locale/en_US';
 import faIR from 'antd/locale/fa_IR';
 import zhCN from 'antd/locale/zh_CN';
 import { useTranslation } from 'react-i18next';
 import { RouterProvider } from 'react-router-dom';
 
+import { AntdAppInstanceCapture } from '@/config/request/antdAppInstance';
 import { DialogContainer } from './components/Dialog/DialogContainer';
 import router from './router';
 import models from './utils/model/autoImportModels';
@@ -30,10 +31,13 @@ const App: React.FC = () => {
 
     return (
         <ConfigProvider locale={locale} theme={{ algorithm: theme.darkAlgorithm }}>
-            <ModelProviders>
-                <RouterProvider router={router} />
-                <DialogContainer />
-            </ModelProviders>
+            <AntdApp>
+                <AntdAppInstanceCapture />
+                <ModelProviders>
+                    <RouterProvider router={router} />
+                    <DialogContainer />
+                </ModelProviders>
+            </AntdApp>
         </ConfigProvider>
     );
 };

+ 28 - 0
src/config/request/antdAppInstance.tsx

@@ -0,0 +1,28 @@
+import {
+    App,
+    message as defaultMessage,
+    notification as defaultNotification,
+} from 'antd';
+import type { MessageInstance } from 'antd/es/message/interface';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+
+/**
+ * 供请求层等非组件代码使用的 message/notification 实例。
+ * 由 AntdAppInstanceCapture 在 App 内通过 useApp() 注入,从而继承 ConfigProvider 的主题。
+ * 在 Capture 挂载前使用时会回退到 antd 默认静态 API(无主题)。
+ */
+let message: MessageInstance = defaultMessage;
+let notification: NotificationInstance = defaultNotification;
+
+export { message, notification };
+
+/**
+ * 必须在 <App> 内部渲染一次,用于把带主题的 message/notification 写入上述导出。
+ * 在 App.tsx 根级挂载即可。
+ */
+export function AntdAppInstanceCapture(): null {
+    const { message: m, notification: n } = App.useApp();
+    message = m;
+    notification = n;
+    return null;
+}

+ 2 - 1
src/config/request/requestErrorConfig.ts

@@ -1,4 +1,3 @@
-import { message, notification } from 'antd';
 import axios from 'axios';
 
 import { ErrorShowType } from '@/defines';
@@ -6,6 +5,8 @@ import { reportError } from '@/firebase';
 import { RequestConfig } from '@/utils/request/types';
 // import { toLoginPage } from '@/utils/routerUtils';
 
+import { message, notification } from './antdAppInstance';
+
 /**
  * @name 错误处理
  */