feat: better setting layout ui (#2809)

2026-01-29 17:15:38 +08:00 · 2025-02-28 23:15:31 +08:00
parent dce1395af1
commit 5906e0126d
4 changed files with 141 additions and 85 deletions
--- a/src/components/setting/setting-verge-advanced.tsx
+++ b/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;