diff --git a/src/components/setting/mods/config-viewer.tsx b/src/components/setting/mods/config-viewer.tsx index 88cfc28..3de9af7 100644 --- a/src/components/setting/mods/config-viewer.tsx +++ b/src/components/setting/mods/config-viewer.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from "react"; +import { useEffect, useRef } from "react"; import { useTranslation } from "react-i18next"; import { useRecoilValue } from "recoil"; import { @@ -9,7 +9,6 @@ import { DialogContent, DialogTitle, } from "@mui/material"; -import { InfoRounded } from "@mui/icons-material"; import { atomThemeMode } from "@/services/states"; import { getRuntimeYaml } from "@/services/cmds"; @@ -18,9 +17,15 @@ import "monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js"; import "monaco-editor/esm/vs/editor/contrib/folding/browser/folding.js"; import { editor } from "monaco-editor/esm/vs/editor/editor.api"; -const ConfigViewer = () => { +interface Props { + open: boolean; + onClose: () => void; +} + +const ConfigViewer = (props: Props) => { + const { open, onClose } = props; + const { t } = useTranslation(); - const [open, setOpen] = useState(false); const editorRef = useRef(); const instanceRef = useRef(null); @@ -53,29 +58,21 @@ const ConfigViewer = () => { }, [open]); return ( - <> - setOpen(false)}> - - {t("Runtime Config")} - + + + {t("Runtime Config")} + - -
- + +
+ - - - -
- - setOpen(true)} - /> - + + + +
); }; export default ConfigViewer; diff --git a/src/components/setting/setting-system.tsx b/src/components/setting/setting-system.tsx index 99f0d78..7ff8aba 100644 --- a/src/components/setting/setting-system.tsx +++ b/src/components/setting/setting-system.tsx @@ -12,7 +12,6 @@ import { SettingList, SettingItem } from "./setting"; import getSystem from "@/utils/get-system"; import GuardState from "./mods/guard-state"; import ServiceMode from "./mods/service-mode"; -import ConfigViewer from "./mods/config-viewer"; import SysproxyTooltip from "./mods/sysproxy-tooltip"; interface Props { @@ -51,7 +50,7 @@ const SettingSystem = ({ onError }: Props) => { return ( - }> + { const { t } = useTranslation(); - const { mutate } = useSWRConfig(); - const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig); + const { data: vergeConfig, mutate: mutateVerge } = useSWR( + "getVergeConfig", + getVergeConfig + ); const { theme_mode, theme_blur, traffic_graph, language } = vergeConfig ?? {}; const [themeOpen, setThemeOpen] = useState(false); + const [configOpen, setConfigOpen] = useState(false); const onSwitchFormat = (_e: any, value: boolean) => value; const onChangeData = (patch: Partial) => { - mutate("getVergeConfig", { ...vergeConfig, ...patch }, false); + mutateVerge({ ...vergeConfig, ...patch }, false); }; return ( @@ -104,6 +108,17 @@ const SettingVerge = ({ onError }: Props) => { + + setConfigOpen(true)} + > + + + + { setThemeOpen(false)} /> + setConfigOpen(false)} /> ); }; diff --git a/src/locales/en.json b/src/locales/en.json index 72d39bf..014c634 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -61,6 +61,9 @@ "theme.light": "Light", "theme.dark": "Dark", "theme.system": "System", + "Clash Field": "Clash Field", + "Runtime Config": "Runtime Config", + "ReadOnly": "ReadOnly", "Back": "Back", "Save": "Save", diff --git a/src/locales/zh.json b/src/locales/zh.json index d9750a6..f60789c 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -62,6 +62,8 @@ "theme.dark": "深色", "theme.system": "系统", "Clash Field": "Clash 字段", + "Runtime Config": "运行配置", + "ReadOnly": "只读", "Back": "返回", "Save": "保存",