fix: antd弹层等组件切换主题后 样式不正确

package.json

@@ -10,7 +10,7 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "init:monaco": "cpx ./node_modules/monaco-editor/min/** ./public/monaco-editor/min",
-    "prebuild": "npm run init:monaco"
+    "predev": "npm run init:monaco"
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",

src/App.tsx

@@ -1,5 +1,12 @@
-import React, { useState, useEffect, useRef, useMemo } from "react";
-import { ConfigProvider, message, theme } from "antd";
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useMemo,
+  useLayoutEffect,
+  useContext,
+} from "react";
+import { ConfigProvider, message, theme, App as AntdApp } from "antd";
 import {
   init,
   logout,
@@ -19,6 +26,23 @@ import { useIsDark } from "./uitls/useTheme";
 
 const Manage = React.lazy(() => import("./Pages/Manage"));
 
+const AntdGlobal: React.FC<{ children: React.ReactNode }> = (props) => {
+  const { locale, theme } = useContext(ConfigProvider.ConfigContext);
+  useLayoutEffect(() => {
+    // 处理切换主题后 弹层主题不正常的问题
+    ConfigProvider.config({
+      theme: theme,
+      holderRender: (children) => (
+        <ConfigProvider theme={theme}>
+          {children}
+        </ConfigProvider>
+      ),
+    });
+  }, [locale, theme]);
+
+  return <AntdApp>{props.children}</AntdApp>;
+};
+
 function App() {
   const info = useInfo();
   // const [gostConfig, setGostConfig] = useState<any>(null);
@@ -125,9 +149,11 @@ function App() {
         theme={{ algorithm: isDark ? theme.darkAlgorithm : undefined }}
         locale={zhCN}
       >
-        <React.Suspense fallback="loading...">
-          {info ? <Manage /> : <Home />}
-        </React.Suspense>
+        <AntdGlobal>
+          <React.Suspense fallback="loading...">
+            {info ? <Manage /> : <Home />}
+          </React.Suspense>
+        </AntdGlobal>
       </ConfigProvider>
     </Ctx.Provider>
   );

src/Pages/Manage.tsx

@@ -9,7 +9,6 @@ import {
   Modal,
   Radio,
   Row,
-  Select,
   Space,
   Switch,
 } from "antd";
@@ -58,7 +57,6 @@ const Manage = () => {
   const [loading, setLoading] = useState(false);
   const [isSaved, setIsSaved] = useState(true);
   const [locals, setLocals] = useState<any[]>([]);
-
   const ref = useRef<any>({});
 
   const updateList = useCallback(async () => {
@@ -235,7 +233,14 @@ const Manage = () => {
           </Form>
         </Modal>
       </Layout.Header>
-      <Layout.Content style={{ height: "100%", padding: 16, boxSizing:'border-box', overflow: "auto" }}>
+      <Layout.Content
+        style={{
+          height: "100%",
+          padding: 16,
+          boxSizing: "border-box",
+          overflow: "auto",
+        }}
+      >
         <Row gutter={[16, 16]} style={{ overflow: "hidden" }}>
           {/* <Col {...colSpan} xxl={16}> */}
           <ServiceCard colSpan={colSpan}></ServiceCard>

src/components/Forms/Json.tsx

@@ -1,6 +1,6 @@
 import React, { useRef } from "react";
 import ReactDOM from "react-dom/client";
-import { Button, Dropdown, Form, FormInstance, Space } from "antd";
+import { Button, Dropdown, Form, FormInstance, Space, ConfigProvider } from "antd";
 import { DownOutlined } from "@ant-design/icons";
 import { jsonFormat, jsonStringFormat, jsonParse, jsonEdit } from "../../uitls";
 import { Template } from "../../templates";
@@ -8,6 +8,8 @@ import { Template } from "../../templates";
 // import { useServerConfig } from "../../uitls/server";
 import ModalForm, { ModalFormProps } from "../ModalForm";
 import { CodeEditor } from "../../uitls/useMonacoEdit";
+import { globalConfig } from "antd/es/config-provider";
+import { HookAPI } from "antd/es/modal/useModal";
 
 const template2menu: any = (template: Template) => {
   const { children, ...other } = template;
@@ -206,9 +208,10 @@ export const showJsonForm = (props: JsonFromProps) => {
   const root = ReactDOM.createRoot(container);
   function render({ ...props }: JsonFromProps) {
     clearTimeout(timeoutId);
+    const config = globalConfig();
     timeoutId = setTimeout(() => {
       document.body.append(container);
-      root.render(<JsonForm {...props} />);
+      root.render(<ConfigProvider theme={config.getTheme()}><JsonForm {...props} /></ConfigProvider>);
     }, 100);
   }
 

src/components/List/Public.tsx

@@ -5,10 +5,10 @@ import React, {
   useMemo,
   useRef,
 } from "react";
-import { Button, Popconfirm, Space, Table } from "antd";
+import { Button, Popconfirm, Space, Table, App } from "antd";
 import { red, green } from "@ant-design/colors";
 import { getRESTfulApi } from "../../api";
-import JsonForm, { showJsonForm } from "../Forms/Json";
+import { showJsonForm } from "../Forms/Json";
 import { jsonFormatValue, jsonParse } from "../../uitls";
 import {
   CheckCircleOutlined,
@@ -17,7 +17,7 @@ import {
   EditOutlined,
   StopOutlined,
 } from "@ant-design/icons";
-import { GostCommit, fixOldCacheConfig } from "../../api/local";
+import { GostCommit } from "../../api/local";
 import Ctx, { CardCtx } from "../../uitls/ctx";
 import { useListData1, UseTemplates } from "../ListCard/hooks";
 import { configEvent } from "../../uitls/events";
@@ -31,7 +31,7 @@ export type PublicListProps = {
   rowKey?: string;
   keyword?: string;
   renderConfig?: (v: any, r: any, i: number) => React.ReactNode;
-  filter?:  (item: any, keyord: string) => boolean;
+  filter?: (item: any, keyord: string) => boolean;
 };
 
 export const UpdateCtx = React.createContext<{ update?: (v?: any) => any }>({});
@@ -55,7 +55,6 @@ const PublicList: React.FC<PublicListProps> = (props) => {
     keyword,
     renderConfig = defaultRenderConfig,
     filter = defFilter,
-
   } = props;
   const { localList, comm } = useContext(CardCtx);
   const { gostConfig, localConfig } = useContext(Ctx);
@@ -66,6 +65,7 @@ const PublicList: React.FC<PublicListProps> = (props) => {
     localConfig,
   });
   const templates = UseTemplates({ name: keyName });
+  const { modal, message, notification } = App.useApp();
   const {
     deleteValue,
     updateValue,
@@ -172,7 +172,7 @@ const PublicList: React.FC<PublicListProps> = (props) => {
             render: (value, record, index) => {
               // console.log("render", record);
               const isEnable = dataList.includes(record);
-              const content = {...record};
+              const content = { ...record };
               delete content.status;
               return (
                 <Space size={2}>

src/uitls/useTheme.ts

@@ -22,7 +22,7 @@ export const useIsDark = ()=> {
   const sysIsDark = useSysIsDark();
   const { theme: userTheme } = useSettings();
   const isDark = useMemo(() => {
-    console.log('useIsDark')
+    // console.log('useIsDark')
     if (!userTheme || userTheme === "system") {
       return sysIsDark;
     } else {