From 40977785c3d3ca1c4360ffdc592e8a331556319c Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Mon, 17 Jan 2022 02:42:52 +0800
Subject: [PATCH] feat: adjust setting typography
---
src/components/setting/setting-system.tsx | 67 +++++++++++++++++++++++
src/components/setting/setting-verge.tsx | 48 ++--------------
src/components/setting/setting.tsx | 4 +-
src/pages/settings.tsx | 18 ++++--
4 files changed, 86 insertions(+), 51 deletions(-)
create mode 100644 src/components/setting/setting-system.tsx
diff --git a/src/components/setting/setting-system.tsx b/src/components/setting/setting-system.tsx
new file mode 100644
index 0000000..5ccad99
--- /dev/null
+++ b/src/components/setting/setting-system.tsx
@@ -0,0 +1,67 @@
+import useSWR, { useSWRConfig } from "swr";
+import { Box, ListItemText, Switch } from "@mui/material";
+import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
+import { SettingList, SettingItem } from "./setting";
+import { CmdType } from "../../services/types";
+import GuardState from "./guard-state";
+import SysproxyTooltip from "./sysproxy-tooltip";
+
+interface Props {
+ onError?: (err: Error) => void;
+}
+
+const SettingSystem = ({ onError }: Props) => {
+ const { mutate } = useSWRConfig();
+ const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+
+ const {
+ enable_auto_launch: startup = false,
+ enable_system_proxy: proxy = false,
+ } = vergeConfig ?? {};
+
+ const onSwitchFormat = (_e: any, value: boolean) => value;
+ const onChangeData = (patch: Partial<CmdType.VergeConfig>) => {
+ mutate("getVergeConfig", { ...vergeConfig, ...patch }, false);
+ };
+
+ return (
+ <SettingList title="System Setting">
+ <SettingItem>
+ <ListItemText primary="Auto Launch" />
+ <GuardState
+ value={startup}
+ valueProps="checked"
+ onCatch={onError}
+ onFormat={onSwitchFormat}
+ onChange={(e) => onChangeData({ enable_auto_launch: e })}
+ onGuard={(e) => patchVergeConfig({ enable_auto_launch: e })}
+ >
+ <Switch edge="end" />
+ </GuardState>
+ </SettingItem>
+
+ <SettingItem>
+ <ListItemText
+ primary={
+ <Box sx={{ display: "flex", alignItems: "center" }}>
+ System Proxy
+ <SysproxyTooltip />
+ </Box>
+ }
+ />
+ <GuardState
+ value={proxy}
+ valueProps="checked"
+ onCatch={onError}
+ onFormat={onSwitchFormat}
+ onChange={(e) => onChangeData({ enable_system_proxy: e })}
+ onGuard={(e) => patchVergeConfig({ enable_system_proxy: e })}
+ >
+ <Switch edge="end" />
+ </GuardState>
+ </SettingItem>
+ </SettingList>
+ );
+};
+
+export default SettingSystem;
diff --git a/src/components/setting/setting-verge.tsx b/src/components/setting/setting-verge.tsx
index ceb621a..14c0791 100644
--- a/src/components/setting/setting-verge.tsx
+++ b/src/components/setting/setting-verge.tsx
@@ -1,12 +1,11 @@
import useSWR, { useSWRConfig } from "swr";
-import { Box, ListItemText, Switch, Typography } from "@mui/material";
+import { ListItemText, Switch, Typography } from "@mui/material";
import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
import { SettingList, SettingItem } from "./setting";
import { CmdType } from "../../services/types";
import { version } from "../../../package.json";
import GuardState from "./guard-state";
import PaletteSwitch from "./palette-switch";
-import SysproxyTooltip from "./sysproxy-tooltip";
interface Props {
onError?: (err: Error) => void;
@@ -16,12 +15,8 @@ const SettingVerge = ({ onError }: Props) => {
const { mutate } = useSWRConfig();
const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
- const {
- theme_mode: mode = "light",
- theme_blur: blur = false,
- enable_auto_launch: startup = false,
- enable_system_proxy: proxy = false,
- } = vergeConfig ?? {};
+ const { theme_mode: mode = "light", theme_blur: blur = false } =
+ vergeConfig ?? {};
const onSwitchFormat = (_e: any, value: boolean) => value;
const onChangeData = (patch: Partial<CmdType.VergeConfig>) => {
@@ -29,7 +24,7 @@ const SettingVerge = ({ onError }: Props) => {
};
return (
- <SettingList title="Common Setting">
+ <SettingList title="Verge Setting">
<SettingItem>
<ListItemText primary="Theme Mode" />
<GuardState
@@ -60,41 +55,6 @@ const SettingVerge = ({ onError }: Props) => {
</GuardState>
</SettingItem>
- <SettingItem>
- <ListItemText primary="Auto Launch" />
- <GuardState
- value={startup}
- valueProps="checked"
- onCatch={onError}
- onFormat={onSwitchFormat}
- onChange={(e) => onChangeData({ enable_auto_launch: e })}
- onGuard={(e) => patchVergeConfig({ enable_auto_launch: e })}
- >
- <Switch edge="end" />
- </GuardState>
- </SettingItem>
-
- <SettingItem>
- <ListItemText
- primary={
- <Box sx={{ display: "flex", alignItems: "center" }}>
- System Proxy
- <SysproxyTooltip />
- </Box>
- }
- />
- <GuardState
- value={proxy}
- valueProps="checked"
- onCatch={onError}
- onFormat={onSwitchFormat}
- onChange={(e) => onChangeData({ enable_system_proxy: e })}
- onGuard={(e) => patchVergeConfig({ enable_system_proxy: e })}
- >
- <Switch edge="end" />
- </GuardState>
- </SettingItem>
-
<SettingItem>
<ListItemText primary="Version" />
<Typography sx={{ py: "6px" }}>v{version}</Typography>
diff --git a/src/components/setting/setting.tsx b/src/components/setting/setting.tsx
index 49e9a22..817d6ef 100644
--- a/src/components/setting/setting.tsx
+++ b/src/components/setting/setting.tsx
@@ -6,9 +6,7 @@ export const SettingItem = styled(ListItem)(() => ({
paddingBottom: 5,
}));
-export const SettingList: React.FC<{
- title: string;
-}> = (props) => (
+export const SettingList: React.FC<{ title: string }> = (props) => (
<List>
<ListSubheader sx={{ background: "transparent" }} disableSticky>
{props.title}
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index f4e32b6..844b8cb 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -2,16 +2,26 @@ import { Paper } from "@mui/material";
import BasePage from "../components/base-page";
import SettingVerge from "../components/setting/setting-verge";
import SettingClash from "../components/setting/setting-clash";
+import SettingSystem from "../components/setting/setting-system";
+import Notice from "../components/notice";
const SettingPage = () => {
+ const onError = (error: any) => {
+ error && Notice.error(error.toString());
+ };
+
return (
<BasePage title="Settings">
- <Paper sx={{ borderRadius: 1, boxShadow: 2 }}>
- <SettingVerge />
+ <Paper sx={{ borderRadius: 1, boxShadow: 2, mb: 3 }}>
+ <SettingClash onError={onError} />
</Paper>
- <Paper sx={{ borderRadius: 1, boxShadow: 2, mt: 3 }}>
- <SettingClash />
+ <Paper sx={{ borderRadius: 1, boxShadow: 2, mb: 3 }}>
+ <SettingSystem onError={onError} />
+ </Paper>
+
+ <Paper sx={{ borderRadius: 1, boxShadow: 2 }}>
+ <SettingVerge onError={onError} />
</Paper>
</BasePage>
);
--
GitLab