feat: setting page

src/components/guard-state.tsx

@@ -0,0 +1,58 @@
+import { cloneElement, isValidElement, ReactNode, useRef } from "react";
+import noop from "../utils/noop";
+
+interface Props<Value> {
+  value?: Value;
+  valueProps?: string;
+  onChangeProps?: string;
+  onChange?: (value: Value) => void;
+  onFormat?: (...args: any[]) => Value;
+  onGuard?: (value: Value) => Promise<void>;
+  onCatch?: (error: Error) => void;
+  children: ReactNode;
+}
+
+function GuardState<T>(props: Props<T>) {
+  const {
+    value,
+    children,
+    valueProps = "value",
+    onChangeProps = "onChange",
+    onGuard = noop,
+    onCatch = noop,
+    onChange = noop,
+    onFormat = (v: T) => v,
+  } = props;
+
+  const lockRef = useRef(false);
+
+  if (isValidElement(children)) {
+    const childProps = { ...children.props };
+
+    childProps[valueProps] = value;
+    childProps[onChangeProps] = async (...args: any[]) => {
+      // 多次操作无效
+      if (lockRef.current) return;
+
+      lockRef.current = true;
+      const oldValue = value;
+
+      try {
+        const newValue = (onFormat as any)(...args);
+        // 先在ui上响应操作
+        onChange(newValue);
+        await onGuard(newValue);
+      } catch (err: any) {
+        // 状态回退
+        onChange(oldValue!);
+        onCatch(err);
+      }
+      lockRef.current = false;
+    };
+    return cloneElement(children, childProps);
+  }
+
+  return children as any;
+}
+
+export default GuardState;

src/components/setting-clash.tsx

@@ -0,0 +1,101 @@
+import useSWR, { useSWRConfig } from "swr";
+import {
+  List,
+  ListItemText,
+  ListSubheader,
+  TextField,
+  Switch,
+  Select,
+  MenuItem,
+} from "@mui/material";
+import { ConfigType, getClashConfig, updateConfigs } from "../services/common";
+import { patchClashConfig } from "../services/command";
+import GuardState from "./guard-state";
+import SettingItem from "./setting-item";
+
+interface Props {
+  onError?: (err: Error) => void;
+}
+
+const SettingClash = ({ onError }: Props) => {
+  const { mutate } = useSWRConfig();
+  const { data: clashConfig } = useSWR("getClashConfig", getClashConfig);
+
+  const {
+    ipv6 = false,
+    "allow-lan": allowLan = false,
+    "log-level": logLevel = "silent",
+    "mixed-port": mixedPort = 7890,
+  } = clashConfig ?? {};
+
+  const onSwitchFormat = (_e: any, value: boolean) => value;
+
+  const onChangeData = (patch: Partial<ConfigType>) => {
+    mutate("getClashConfig", { ...clashConfig, ...patch }, false);
+  };
+
+  const onUpdateData = async (patch: Partial<ConfigType>) => {
+    await updateConfigs(patch);
+    await patchClashConfig(patch);
+  };
+
+  return (
+    <List sx={{ borderRadius: 1, boxShadow: 2, mt: 3 }}>
+      <ListSubheader>Clash设置</ListSubheader>
+
+      <SettingItem>
+        <ListItemText primary="局域网连接" />
+        <GuardState
+          value={allowLan}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ "allow-lan": e })}
+          onGuard={(e) => onUpdateData({ "allow-lan": e })}
+        >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary="IPv6" />
+        <GuardState
+          value={ipv6}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ ipv6: e })}
+          onGuard={(e) => onUpdateData({ ipv6: e })}
+        >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary="日志等级" />
+        <GuardState
+          value={logLevel}
+          onCatch={onError}
+          onFormat={(e: any) => e.target.value}
+          onChange={(e) => onChangeData({ "log-level": e })}
+          onGuard={(e) => onUpdateData({ "log-level": e })}
+        >
+          <Select size="small" sx={{ width: 120 }}>
+            <MenuItem value="info">Info</MenuItem>
+            <MenuItem value="warning">Warning</MenuItem>
+            <MenuItem value="error">Error</MenuItem>
+            <MenuItem value="debug">Debug</MenuItem>
+            <MenuItem value="silent">Silent</MenuItem>
+          </Select>
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary="混合代理端口" />
+        <TextField size="small" defaultValue={mixedPort!} sx={{ width: 120 }} />
+      </SettingItem>
+    </List>
+  );
+};
+
+export default SettingClash;

src/components/setting-item.tsx

@@ -0,0 +1,8 @@
+import { ListItem, styled } from "@mui/material";
+
+const SettingItem = styled(ListItem)(() => ({
+  paddingTop: 5,
+  paddingBottom: 5,
+}));
+
+export default SettingItem;

src/components/setting-verge.tsx

@@ -0,0 +1,89 @@
+import useSWR, { useSWRConfig } from "swr";
+import { List, ListItemText, ListSubheader, Switch } from "@mui/material";
+import {
+  getVergeConfig,
+  patchVergeConfig,
+  setSysProxy,
+  VergeConfig,
+} from "../services/command";
+import GuardState from "./guard-state";
+import SettingItem from "./setting-item";
+import PaletteSwitch from "./palette-switch";
+
+interface Props {
+  onError?: (err: Error) => void;
+}
+
+const SettingVerge = ({ onError }: Props) => {
+  const { mutate } = useSWRConfig();
+  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+
+  const {
+    theme_mode: mode = "light",
+    enable_self_startup: startup = false,
+    enable_system_proxy: proxy = false,
+  } = vergeConfig ?? {};
+
+  const onSwitchFormat = (_e: any, value: boolean) => value;
+
+  const onChangeData = (patch: Partial<VergeConfig>) => {
+    mutate("getVergeConfig", { ...vergeConfig, ...patch }, false);
+  };
+
+  return (
+    <List sx={{ borderRadius: 1, boxShadow: 2 }}>
+      <ListSubheader>通用设置</ListSubheader>
+
+      <SettingItem>
+        <ListItemText primary="外观主题" />
+        <GuardState
+          value={mode === "dark"}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ theme_mode: e ? "dark" : "light" })}
+          onGuard={async (c) => {
+            await patchVergeConfig({ theme_mode: c ? "dark" : "light" });
+          }}
+        >
+          <PaletteSwitch edge="end" />
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary="开机自启" />
+        <GuardState
+          value={startup}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ enable_self_startup: e })}
+          onGuard={async (e) => {
+            await patchVergeConfig({ enable_self_startup: e });
+          }}
+        >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary="设置系统代理" />
+        <GuardState
+          value={proxy}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ enable_system_proxy: e })}
+          onGuard={async (e) => {
+            await setSysProxy(e);
+            await patchVergeConfig({ enable_system_proxy: e });
+          }}
+        >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+    </List>
+  );
+};
+
+export default SettingVerge;

src/pages/_layout.tsx

@@ -1,9 +1,10 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
-import { SWRConfig } from "swr";
+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,10 +15,7 @@ import ConnectionsPage from "../pages/connections";
 import ListItemLink from "../components/list-item-link";
 import Traffic from "../components/traffic";
 
-const Layout = () => {
+const routers = [
-  const paletteMode = useRecoilValue(atomPaletteMode);
-
-  const routers = [
   {
     label: "代理",
     link: "/proxy",
@@ -38,10 +36,18 @@ const Layout = () => {
     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 { Box, Typography } from "@mui/material";
-import { useRecoilState } from "recoil";
+import SettingVerge from "../components/setting-verge";
-import {
+import SettingClash from "../components/setting-clash";
-  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,
-}));
 
 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 }}>
+      <SettingVerge />
-        <ListSubheader>通用设置</ListSubheader>
 
-        <MiniListItem>
+      <SettingClash />
-          <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>
     </Box>
   );
 };

src/services/command.ts

@@ -1,4 +1,5 @@
 import { invoke } from "@tauri-apps/api/tauri";
+import { ConfigType } from "./common";
 
 export async function restartSidecar() {
   return invoke<void>("restart_sidecar");
@@ -14,6 +15,10 @@ export async function getClashInfo() {
   return invoke<ClashInfo | null>("get_clash_info");
 }
 
+export async function patchClashConfig(payload: Partial<ConfigType>) {
+  return invoke<void>("patch_clash_config", { payload });
+}
+
 export async function importProfile(url: string) {
   return invoke<void>("import_profile", { url });
 }
@@ -56,3 +61,17 @@ export async function putProfiles(current: number) {
 export async function setSysProxy(enable: boolean) {
   return invoke<void>("set_sys_proxy", { enable });
 }
+
+export interface VergeConfig {
+  theme_mode?: "light" | "dark";
+  enable_self_startup?: boolean;
+  enable_system_proxy?: boolean;
+}
+
+export async function getVergeConfig() {
+  return invoke<VergeConfig>("get_verge_config");
+}
+
+export async function patchVergeConfig(payload: VergeConfig) {
+  return invoke<void>("patch_verge_config", { payload });
+}

src/services/common.ts

@@ -12,14 +12,18 @@ export async function getVersion() {
 export interface ConfigType {
   port: number;
   mode: string;
+  ipv6: boolean;
   "socket-port": number;
   "allow-lan": boolean;
   "log-level": string;
   "mixed-port": number;
+  "redir-port": number;
+  "socks-port": number;
+  "tproxy-port": number;
 }
 
 /// Get current base configs
-export async function getConfigs() {
+export async function getClashConfig() {
   return (await getAxios()).get("/configs") as Promise<ConfigType>;
 }
 

src/utils/noop.ts

@@ -0,0 +1 @@
+export default function noop() {}