diff --git a/src/components/setting/setting-verge-advanced.tsx b/src/components/setting/setting-verge-advanced.tsx new file mode 100644 index 00000000..e5d91ba5 --- /dev/null +++ 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(null); + const hotkeyRef = useRef(null); + const miscRef = useRef(null); + const themeRef = useRef(null); + const layoutRef = useRef(null); + const updateRef = useRef(null); + const backupRef = useRef(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 ( + + + + + + + + + + backupRef.current?.open()} + label={t("Backup Setting")} + extra={ + + } + /> + + configRef.current?.open()} + label={t("Runtime Config")} + /> + + + } + /> + + + + + + + + + + + } + onClick={() => patchVerge({ enable_lite_mode: true })} + /> + + { + exitApp(); + }} + label={t("Exit")} + /> + + + v{version} + + + ); +}; + +export default SettingVergeAdvanced; diff --git a/src/components/setting/setting-verge.tsx b/src/components/setting/setting-verge-basic.tsx similarity index 78% rename from src/components/setting/setting-verge.tsx rename to src/components/setting/setting-verge-basic.tsx index a849e6d7..5c8d1132 100644 --- a/src/components/setting/setting-verge.tsx +++ b/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 { - exitApp, - openAppDir, - openCoreDir, - openLogsDir, - openDevTools, - copyClashEnv, -} from "@/services/cmds"; -import { check as checkUpdate } from "@tauri-apps/plugin-updater"; +import { Button, MenuItem, Select, Input } from "@mui/material"; +import { copyClashEnv } from "@/services/cmds"; 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(null); const hotkeyRef = useRef(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 ( - + @@ -261,62 +238,8 @@ const SettingVerge = ({ onError }: Props) => { onClick={() => hotkeyRef.current?.open()} label={t("Hotkey Setting")} /> - - backupRef.current?.open()} - label={t("Backup Setting")} - extra={ - - } - /> - - configRef.current?.open()} - label={t("Runtime Config")} - /> - - - } - /> - - - - - - - - - - - } - onClick={() => patchVerge({ enable_lite_mode: true })} - /> - - { - exitApp(); - }} - label={t("Exit")} - /> - - - v{version} - ); }; -export default SettingVerge; +export default SettingVergeBasic; diff --git a/src/locales/en.json b/src/locales/en.json index 7fbccfeb..e5e1ff6b 100644 --- a/src/locales/en.json +++ b/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", diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx index 8c7bc377..5e3bba8a 100644 --- a/src/pages/settings.tsx +++ b/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", }} > - + + + + + +