feat: setting page

src/pages/_layout.tsx

@@ -1,9 +1,10 @@
-import { useMemo } from "react";
-import { SWRConfig } from "swr";
+import { useEffect, useMemo } from "react";
+import useSWR, { SWRConfig } from "swr";
 import { Route, Routes } from "react-router-dom";
-import { useRecoilValue } from "recoil";
+import { useRecoilState } from "recoil";
 import { createTheme, List, Paper, ThemeProvider } from "@mui/material";
 import { atomPaletteMode } from "../states/setting";
+import { getVergeConfig } from "../services/command";
 import LogoSvg from "../assets/image/logo.svg";
 import LogPage from "../pages/log";
 import HomePage from "../pages/home";
@@ -14,34 +15,39 @@ import ConnectionsPage from "../pages/connections";
 import ListItemLink from "../components/list-item-link";
 import Traffic from "../components/traffic";
 
-const Layout = () => {
-  const paletteMode = useRecoilValue(atomPaletteMode);
+const routers = [
+  {
+    label: "代理",
+    link: "/proxy",
+  },
+  {
+    label: "规则",
+    link: "/rules",
+  },
+  {
+    label: "连接",
+    link: "/connections",
+  },
+  {
+    label: "日志",
+    link: "/log",
+  },
+  {
+    label: "设置",
+    link: "/setting",
+  },
+];
 
-  const routers = [
-    {
-      label: "代理",
-      link: "/proxy",
-    },
-    {
-      label: "规则",
-      link: "/rules",
-    },
-    {
-      label: "连接",
-      link: "/connections",
-    },
-    {
-      label: "日志",
-      link: "/log",
-    },
-    {
-      label: "设置",
-      link: "/setting",
-    },
-  ];
+const Layout = () => {
+  const [mode, setMode] = useRecoilState(atomPaletteMode);
+  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+
+  useEffect(() => {
+    setMode(vergeConfig?.theme_mode ?? "light");
+  }, [vergeConfig?.theme_mode]);
 
   const theme = useMemo(() => {
-    if (paletteMode === "light") {
+    if (mode === "light") {
       document.documentElement.style.background = "#f5f5f5";
       document.documentElement.style.setProperty(
         "--selection-color",
@@ -66,7 +72,7 @@ const Layout = () => {
         },
       },
       palette: {
-        mode: paletteMode,
+        mode,
         primary: {
           main: "#5b5c9d",
         },
@@ -76,7 +82,7 @@ const Layout = () => {
         },
       },
     });
-  }, [paletteMode]);
+  }, [mode]);
 
   return (
     <SWRConfig value={{}}>

src/pages/setting.tsx

@@ -1,101 +1,17 @@
-import { useState } from "react";
-import { useRecoilState } from "recoil";
-import {
-  Box,
-  List,
-  ListItem,
-  ListItemText,
-  ListSubheader,
-  Typography,
-  TextField,
-  styled,
-  Switch,
-  Select,
-  MenuItem,
-} from "@mui/material";
-import { atomPaletteMode } from "../states/setting";
-import PaletteSwitch from "../components/palette-switch";
-import { setSysProxy } from "../services/command";
-
-const MiniListItem = styled(ListItem)(({ theme }) => ({
-  paddingTop: 5,
-  paddingBottom: 5,
-}));
+import { Box, Typography } from "@mui/material";
+import SettingVerge from "../components/setting-verge";
+import SettingClash from "../components/setting-clash";
 
 const SettingPage = () => {
-  const [mode, setMode] = useRecoilState(atomPaletteMode);
-  const [proxy, setProxy] = useState(false);
-
-  const onSysproxy = (enable: boolean) => {
-    const value = proxy;
-    setProxy(enable);
-    setSysProxy(enable)
-      .then(() => {
-        console.log("success");
-      })
-      .catch((err) => {
-        setProxy(value); // recover
-        console.log(err);
-      });
-  };
-
   return (
-    <Box sx={{ width: 0.9, maxWidth: "850px", mx: "auto", mb: 2 }}>
+    <Box sx={{ width: 0.9, maxWidth: 850, mx: "auto", mb: 2 }}>
       <Typography variant="h4" component="h1" sx={{ py: 2 }}>
         Setting
       </Typography>
 
-      <List sx={{ borderRadius: 1, boxShadow: 2 }}>
-        <ListSubheader>通用设置</ListSubheader>
+      <SettingVerge />
 
-        <MiniListItem>
-          <ListItemText primary="外观主题" />
-          <PaletteSwitch
-            edge="end"
-            checked={mode !== "light"}
-            onChange={(_e, c) => setMode(c ? "dark" : "light")}
-          />
-        </MiniListItem>
-
-        <MiniListItem>
-          <ListItemText primary="开机自启" />
-          <Switch edge="end" />
-        </MiniListItem>
-
-        <MiniListItem>
-          <ListItemText primary="设置系统代理" />
-          <Switch
-            edge="end"
-            checked={proxy}
-            onChange={(_e, c) => onSysproxy(c)}
-          />
-        </MiniListItem>
-
-        <MiniListItem>
-          <ListItemText primary="局域网连接" />
-          <Switch edge="end" />
-        </MiniListItem>
-
-        <MiniListItem>
-          <ListItemText primary="IPv6" />
-          <Switch edge="end" />
-        </MiniListItem>
-
-        <MiniListItem>
-          <ListItemText primary="日志等级" />
-          <Select size="small" sx={{ width: 120 }}>
-            <MenuItem value="debug">Debug</MenuItem>
-            <MenuItem value="info">Info</MenuItem>
-            <MenuItem value="warning">Warning</MenuItem>
-            <MenuItem value="error">Error</MenuItem>
-          </Select>
-        </MiniListItem>
-
-        <MiniListItem>
-          <ListItemText primary="混合代理端口" />
-          <TextField size="small" defaultValue={7890} sx={{ width: 120 }} />
-        </MiniListItem>
-      </List>
+      <SettingClash />
     </Box>
   );
 };