feat: runtime config viewer

src/components/setting/config-viewer.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useRecoilValue } from "recoil";
+import {
+  Button,
+  Chip,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from "@mui/material";
+import { InfoRounded } from "@mui/icons-material";
+import { atomThemeMode } from "../../services/states";
+import { getRunningConfig } from "../../services/cmds";
+
+import "monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js";
+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 = () => {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+
+  const editorRef = useRef<any>();
+  const instanceRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const themeMode = useRecoilValue(atomThemeMode);
+
+  useEffect(() => {
+    if (!open) return;
+
+    getRunningConfig().then((data) => {
+      const dom = editorRef.current;
+
+      if (!dom) return;
+      if (instanceRef.current) instanceRef.current.dispose();
+
+      instanceRef.current = editor.create(editorRef.current, {
+        value: data ?? "# Error\n",
+        language: "yaml",
+        theme: themeMode === "light" ? "vs" : "vs-dark",
+        minimap: { enabled: false },
+        readOnly: true,
+      });
+    });
+
+    return () => {
+      if (instanceRef.current) {
+        instanceRef.current.dispose();
+        instanceRef.current = null;
+      }
+    };
+  }, [open]);
+
+  return (
+    <>
+      <Dialog open={open} onClose={() => setOpen(false)}>
+        <DialogTitle>
+          {t("Running Config")} <Chip label="ReadOnly" size="small" />
+        </DialogTitle>
+
+        <DialogContent sx={{ width: 520, pb: 1 }}>
+          <div style={{ width: "100%", height: "420px" }} ref={editorRef} />
+        </DialogContent>
+
+        <DialogActions>
+          <Button onClick={() => setOpen(false)}>{t("Back")}</Button>
+        </DialogActions>
+      </Dialog>
+
+      <InfoRounded fontSize="small" onClick={() => setOpen(true)} />
+    </>
+  );
+};
+export default ConfigViewer;

src/components/setting/setting-system.tsx

@@ -18,6 +18,7 @@ import { SettingList, SettingItem } from "./setting";
 import { CmdType } from "../../services/types";
 import GuardState from "./guard-state";
 import ServiceMode from "./service-mode";
+import ConfigViewer from "./config-viewer";
 import SysproxyTooltip from "./sysproxy-tooltip";
 import getSystem from "../../utils/get-system";
 
@@ -58,7 +59,14 @@ const SettingSystem = ({ onError }: Props) => {
   return (
     <SettingList title={t("System Setting")}>
       <SettingItem>
-        <ListItemText primary={t("Tun Mode")} />
+        <ListItemText
+          primary={
+            <Box sx={{ display: "flex", alignItems: "center" }}>
+              <span style={{ marginRight: 4 }}>{t("Tun Mode")}</span>
+              <ConfigViewer />
+            </Box>
+          }
+        />
         <GuardState
           value={enable_tun_mode ?? false}
           valueProps="checked"