feat: adjust runtime config

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<any>();
   const instanceRef = useRef<editor.IStandaloneCodeEditor | null>(null);
@@ -53,29 +58,21 @@ const ConfigViewer = () => {
   }, [open]);
 
   return (
-    <>
+    <Dialog open={open} onClose={onClose}>
-      <Dialog open={open} onClose={() => setOpen(false)}>
+      <DialogTitle>
-        <DialogTitle>
+        {t("Runtime Config")} <Chip label={t("ReadOnly")} size="small" />
-          {t("Runtime Config")} <Chip label="ReadOnly" size="small" />
+      </DialogTitle>
-        </DialogTitle>
 
-        <DialogContent sx={{ width: 520, pb: 1 }}>
+      <DialogContent sx={{ width: 520, pb: 1 }}>
-          <div style={{ width: "100%", height: "420px" }} ref={editorRef} />
+        <div style={{ width: "100%", height: "420px" }} ref={editorRef} />
-        </DialogContent>
+      </DialogContent>
 
-        <DialogActions>
+      <DialogActions>
-          <Button variant="outlined" onClick={() => setOpen(false)}>
+        <Button variant="outlined" onClick={onClose}>
-            {t("Back")}
+          {t("Back")}
-          </Button>
+        </Button>
-        </DialogActions>
+      </DialogActions>
-      </Dialog>
+    </Dialog>
-
-      <InfoRounded
-        fontSize="small"
-        style={{ cursor: "pointer", opacity: 0.75 }}
-        onClick={() => setOpen(true)}
-      />
-    </>
   );
 };
 export default ConfigViewer;

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 (
     <SettingList title={t("System Setting")}>
-      <SettingItem label={t("Tun Mode")} extra={<ConfigViewer />}>
+      <SettingItem label={t("Tun Mode")}>
         <GuardState
           value={enable_tun_mode ?? false}
           valueProps="checked"

src/components/setting/setting-verge.tsx

@@ -1,4 +1,4 @@
-import useSWR, { useSWRConfig } from "swr";
+import useSWR from "swr";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -18,6 +18,7 @@ import { ArrowForward } from "@mui/icons-material";
 import { SettingList, SettingItem } from "./setting";
 import { version } from "@root/package.json";
 import ThemeModeSwitch from "./mods/theme-mode-switch";
+import ConfigViewer from "./mods/config-viewer";
 import GuardState from "./mods/guard-state";
 import SettingTheme from "./setting-theme";
 
@@ -27,16 +28,19 @@ interface Props {
 
 const SettingVerge = ({ onError }: Props) => {
   const { t } = useTranslation();
-  const { mutate } = useSWRConfig();
+  const { data: vergeConfig, mutate: mutateVerge } = useSWR(
-  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+    "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<CmdType.VergeConfig>) => {
-    mutate("getVergeConfig", { ...vergeConfig, ...patch }, false);
+    mutateVerge({ ...vergeConfig, ...patch }, false);
   };
 
   return (
@@ -104,6 +108,17 @@ const SettingVerge = ({ onError }: Props) => {
         </IconButton>
       </SettingItem>
 
+      <SettingItem label={t("Runtime Config")}>
+        <IconButton
+          color="inherit"
+          size="small"
+          sx={{ my: "2px" }}
+          onClick={() => setConfigOpen(true)}
+        >
+          <ArrowForward />
+        </IconButton>
+      </SettingItem>
+
       <SettingItem label={t("Open App Dir")}>
         <IconButton
           color="inherit"
@@ -131,6 +146,7 @@ const SettingVerge = ({ onError }: Props) => {
       </SettingItem>
 
       <SettingTheme open={themeOpen} onClose={() => setThemeOpen(false)} />
+      <ConfigViewer open={configOpen} onClose={() => setConfigOpen(false)} />
     </SettingList>
   );
 };

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",

src/locales/zh.json

@@ -62,6 +62,8 @@
   "theme.dark": "深色",
   "theme.system": "系统",
   "Clash Field": "Clash 字段",
+  "Runtime Config": "运行配置",
+  "ReadOnly": "只读",
 
   "Back": "返回",
   "Save": "保存",