feat: better setting layout ui (#2809)

src/components/setting/setting-verge-advanced.tsx

@@ -0,0 +1,121 @@
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Typography } from "@mui/material";
+import {
+  exitApp,
+  openAppDir,
+  openCoreDir,
+  openLogsDir,
+  openDevTools,
+} from "@/services/cmds";
+import { check as checkUpdate } from "@tauri-apps/plugin-updater";
+import { useVerge } from "@/hooks/use-verge";
+import { version } from "@root/package.json";
+import { DialogRef, Notice } from "@/components/base";
+import { SettingList, SettingItem } from "./mods/setting-comp";
+import { ConfigViewer } from "./mods/config-viewer";
+import { HotkeyViewer } from "./mods/hotkey-viewer";
+import { MiscViewer } from "./mods/misc-viewer";
+import { ThemeViewer } from "./mods/theme-viewer";
+import { LayoutViewer } from "./mods/layout-viewer";
+import { UpdateViewer } from "./mods/update-viewer";
+import { BackupViewer } from "./mods/backup-viewer";
+import { TooltipIcon } from "@/components/base/base-tooltip-icon";
+
+interface Props {
+  onError?: (err: Error) => void;
+}
+
+const SettingVergeAdvanced = ({ onError }: Props) => {
+  const { t } = useTranslation();
+
+  const { verge, patchVerge, mutateVerge } = useVerge();
+  const configRef = useRef<DialogRef>(null);
+  const hotkeyRef = useRef<DialogRef>(null);
+  const miscRef = useRef<DialogRef>(null);
+  const themeRef = useRef<DialogRef>(null);
+  const layoutRef = useRef<DialogRef>(null);
+  const updateRef = useRef<DialogRef>(null);
+  const backupRef = useRef<DialogRef>(null);
+
+  const onCheckUpdate = async () => {
+    try {
+      const info = await checkUpdate();
+      if (!info?.available) {
+        Notice.success(t("Currently on the Latest Version"));
+      } else {
+        updateRef.current?.open();
+      }
+    } catch (err: any) {
+      Notice.error(err.message || err.toString());
+    }
+  };
+
+  return (
+    <SettingList title={t("Verge Advanced Setting")}>
+      <ThemeViewer ref={themeRef} />
+      <ConfigViewer ref={configRef} />
+      <HotkeyViewer ref={hotkeyRef} />
+      <MiscViewer ref={miscRef} />
+      <LayoutViewer ref={layoutRef} />
+      <UpdateViewer ref={updateRef} />
+      <BackupViewer ref={backupRef} />
+
+      <SettingItem
+        onClick={() => backupRef.current?.open()}
+        label={t("Backup Setting")}
+        extra={
+          <TooltipIcon
+            title={t("Backup Setting Info")}
+            sx={{ opacity: "0.7" }}
+          />
+        }
+      />
+
+      <SettingItem
+        onClick={() => configRef.current?.open()}
+        label={t("Runtime Config")}
+      />
+
+      <SettingItem
+        onClick={openAppDir}
+        label={t("Open Conf Dir")}
+        extra={
+          <TooltipIcon
+            title={t("Open Conf Dir Info")}
+            sx={{ opacity: "0.7" }}
+          />
+        }
+      />
+
+      <SettingItem onClick={openCoreDir} label={t("Open Core Dir")} />
+
+      <SettingItem onClick={openLogsDir} label={t("Open Logs Dir")} />
+
+      <SettingItem onClick={onCheckUpdate} label={t("Check for Updates")} />
+
+      <SettingItem onClick={openDevTools} label={t("Open Dev Tools")} />
+
+      <SettingItem
+        label={t("Lite Mode")}
+        extra={
+          <TooltipIcon title={t("Lite Mode Info")} sx={{ opacity: "0.7" }} />
+        }
+        onClick={() => patchVerge({ enable_lite_mode: true })}
+      />
+
+      <SettingItem
+        onClick={() => {
+          exitApp();
+        }}
+        label={t("Exit")}
+      />
+
+      <SettingItem label={t("Verge Version")}>
+        <Typography sx={{ py: "7px", pr: 1 }}>v{version}</Typography>
+      </SettingItem>
+    </SettingList>
+  );
+};
+
+export default SettingVergeAdvanced;

src/components/setting/setting-verge-basic.tsx

@@ -1,18 +1,9 @@
 import { useCallback, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { open } from "@tauri-apps/plugin-dialog";
-import { Button, MenuItem, Select, Input, Typography } from "@mui/material";
+import { Button, MenuItem, Select, Input } from "@mui/material";
-import {
+import { copyClashEnv } from "@/services/cmds";
-  exitApp,
-  openAppDir,
-  openCoreDir,
-  openLogsDir,
-  openDevTools,
-  copyClashEnv,
-} from "@/services/cmds";
-import { check as checkUpdate } from "@tauri-apps/plugin-updater";
 import { useVerge } from "@/hooks/use-verge";
-import { version } from "@root/package.json";
 import { DialogRef, Notice } from "@/components/base";
 import { SettingList, SettingItem } from "./mods/setting-comp";
 import { ThemeModeSwitch } from "./mods/theme-mode-switch";
@@ -49,7 +40,7 @@ const languageOptions = Object.entries(languages).map(([code, _]) => {
   return { code, label: labels[code] };
 });
 
-const SettingVerge = ({ onError }: Props) => {
+const SettingVergeBasic = ({ onError }: Props) => {
   const { t } = useTranslation();
 
   const { verge, patchVerge, mutateVerge } = useVerge();
@@ -60,7 +51,6 @@ const SettingVerge = ({ onError }: Props) => {
     env_type,
     startup_script,
     start_page,
-    enable_lite_mode,
   } = verge ?? {};
   const configRef = useRef<DialogRef>(null);
   const hotkeyRef = useRef<DialogRef>(null);
@@ -74,26 +64,13 @@ const SettingVerge = ({ onError }: Props) => {
     mutateVerge({ ...verge, ...patch }, false);
   };
 
-  const onCheckUpdate = async () => {
-    try {
-      const info = await checkUpdate();
-      if (!info?.available) {
-        Notice.success(t("Currently on the Latest Version"));
-      } else {
-        updateRef.current?.open();
-      }
-    } catch (err: any) {
-      Notice.error(err.message || err.toString());
-    }
-  };
-
   const onCopyClashEnv = useCallback(async () => {
     await copyClashEnv();
     Notice.success(t("Copy Success"), 1000);
   }, []);
 
   return (
-    <SettingList title={t("Verge Setting")}>
+    <SettingList title={t("Verge Basic Setting")}>
       <ThemeViewer ref={themeRef} />
       <ConfigViewer ref={configRef} />
       <HotkeyViewer ref={hotkeyRef} />
@@ -261,62 +238,8 @@ const SettingVerge = ({ onError }: Props) => {
         onClick={() => hotkeyRef.current?.open()}
         label={t("Hotkey Setting")}
       />
-
-      <SettingItem
-        onClick={() => backupRef.current?.open()}
-        label={t("Backup Setting")}
-        extra={
-          <TooltipIcon
-            title={t("Backup Setting Info")}
-            sx={{ opacity: "0.7" }}
-          />
-        }
-      />
-
-      <SettingItem
-        onClick={() => configRef.current?.open()}
-        label={t("Runtime Config")}
-      />
-
-      <SettingItem
-        onClick={openAppDir}
-        label={t("Open Conf Dir")}
-        extra={
-          <TooltipIcon
-            title={t("Open Conf Dir Info")}
-            sx={{ opacity: "0.7" }}
-          />
-        }
-      />
-
-      <SettingItem onClick={openCoreDir} label={t("Open Core Dir")} />
-
-      <SettingItem onClick={openLogsDir} label={t("Open Logs Dir")} />
-
-      <SettingItem onClick={onCheckUpdate} label={t("Check for Updates")} />
-
-      <SettingItem onClick={openDevTools} label={t("Open Dev Tools")} />
-
-      <SettingItem
-        label={t("Lite Mode")}
-        extra={
-          <TooltipIcon title={t("Lite Mode Info")} sx={{ opacity: "0.7" }} />
-        }
-        onClick={() => patchVerge({ enable_lite_mode: true })}
-      />
-
-      <SettingItem
-        onClick={() => {
-          exitApp();
-        }}
-        label={t("Exit")}
-      />
-
-      <SettingItem label={t("Verge Version")}>
-        <Typography sx={{ py: "7px", pr: 1 }}>v{version}</Typography>
-      </SettingItem>
     </SettingList>
   );
 };
 
-export default SettingVerge;
+export default SettingVergeBasic;

src/locales/en.json

@@ -277,7 +277,8 @@
   "Open UWP tool": "Open UWP tool",
   "Open UWP tool Info": "Since Windows 8, UWP apps (such as Microsoft Store) are restricted from directly accessing local host network services, and this tool can be used to bypass this restriction",
   "Update GeoData": "Update GeoData",
-  "Verge Setting": "Verge Setting",
+  "Verge Basic Setting": "Verge Basic Setting",
+  "Verge Advanced Setting": "Verge Advanced Setting",
   "Language": "Language",
   "Theme Mode": "Theme Mode",
   "theme.light": "Light",

src/pages/settings.tsx

@@ -11,7 +11,8 @@ import { useTranslation } from "react-i18next";
 import { BasePage, Notice } from "@/components/base";
 import { GitHub, HelpOutlineRounded, Telegram } from "@mui/icons-material";
 import { openWebUrl } from "@/services/cmds";
-import SettingVerge from "@/components/setting/setting-verge";
+import SettingVergeBasic from "@/components/setting/setting-verge-basic";
+import SettingVergeAdvanced from "@/components/setting/setting-verge-advanced";
 import SettingClash from "@/components/setting/setting-clash";
 import SettingSystem from "@/components/setting/setting-system";
 import { useThemeMode } from "@/services/states";
@@ -98,7 +99,17 @@ const SettingPage = () => {
               backgroundColor: isDark ? "#282a36" : "#ffffff",
             }}
           >
-            <SettingVerge onError={onError} />
+            <SettingVergeBasic onError={onError} />
+          </Box>
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <Box
+            sx={{
+              borderRadius: 2,
+              backgroundColor: isDark ? "#282a36" : "#ffffff",
+            }}
+          >
+            <SettingVergeAdvanced onError={onError} />
           </Box>
         </Grid>
       </Grid>