From 2fad3c322d0a66295b6a7928f867fb4703138c77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B1=AA=E8=88=AA=E6=B4=8B?= Date: Fri, 31 May 2024 19:14:49 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20antd=E5=BC=B9=E5=B1=82=E7=AD=89=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=88=87=E6=8D=A2=E4=B8=BB=E9=A2=98=E5=90=8E=20?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=B8=8D=E6=AD=A3=E7=A1=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/App.tsx | 36 +++++++++++++++++++++++++++++----- src/Pages/Manage.tsx | 11 ++++++++--- src/components/Forms/Json.tsx | 7 +++++-- src/components/List/Public.tsx | 12 ++++++------ src/uitls/useTheme.ts | 2 +- 6 files changed, 52 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index a470f4d..44f5569 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index 046acc7..01417a1 100644 --- a/src/App.tsx +++ b/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) => ( + + {children} + + ), + }); + }, [locale, theme]); + + return {props.children}; +}; + function App() { const info = useInfo(); // const [gostConfig, setGostConfig] = useState(null); @@ -125,9 +149,11 @@ function App() { theme={{ algorithm: isDark ? theme.darkAlgorithm : undefined }} locale={zhCN} > - - {info ? : } - + + + {info ? : } + + ); diff --git a/src/Pages/Manage.tsx b/src/Pages/Manage.tsx index 7977057..964268f 100644 --- a/src/Pages/Manage.tsx +++ b/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([]); - const ref = useRef({}); const updateList = useCallback(async () => { @@ -235,7 +233,14 @@ const Manage = () => { - + {/* */} diff --git a/src/components/Forms/Json.tsx b/src/components/Forms/Json.tsx index 9c5f57b..c6a949e 100644 --- a/src/components/Forms/Json.tsx +++ b/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(); + root.render(); }, 100); } diff --git a/src/components/List/Public.tsx b/src/components/List/Public.tsx index f855400..19e5f8a 100644 --- a/src/components/List/Public.tsx +++ b/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 = (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 = (props) => { localConfig, }); const templates = UseTemplates({ name: keyName }); + const { modal, message, notification } = App.useApp(); const { deleteValue, updateValue, @@ -172,7 +172,7 @@ const PublicList: React.FC = (props) => { render: (value, record, index) => { // console.log("render", record); const isEnable = dataList.includes(record); - const content = {...record}; + const content = { ...record }; delete content.status; return ( diff --git a/src/uitls/useTheme.ts b/src/uitls/useTheme.ts index e4686f6..acf2891 100644 --- a/src/uitls/useTheme.ts +++ b/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 {