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;