refactor: something

src/components/setting/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/palette-switch.tsx

@@ -0,0 +1,51 @@
+import { styled, Switch } from "@mui/material";
+
+// From: https://mui.com/components/switches/
+const PaletteSwitch = styled(Switch)(({ theme }) => ({
+  width: 62,
+  height: 34,
+  padding: 7,
+  "& .MuiSwitch-switchBase": {
+    margin: 1,
+    padding: 0,
+    transform: "translateX(6px)",
+    "&.Mui-checked": {
+      color: "#fff",
+      transform: "translateX(22px)",
+      "& .MuiSwitch-thumb:before": {
+        backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+          "#fff"
+        )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
+      },
+      "& + .MuiSwitch-track": {
+        opacity: 1,
+        backgroundColor: theme.palette.mode === "dark" ? "#8796A5" : "#aab4be",
+      },
+    },
+  },
+  "& .MuiSwitch-thumb": {
+    backgroundColor: theme.palette.mode === "dark" ? "#003892" : "#001e3c",
+    width: 32,
+    height: 32,
+    "&:before": {
+      content: "''",
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      left: 0,
+      top: 0,
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "center",
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+        "#fff"
+      )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
+    },
+  },
+  "& .MuiSwitch-track": {
+    opacity: 1,
+    backgroundColor: theme.palette.mode === "dark" ? "#8796A5" : "#aab4be",
+    borderRadius: 20 / 2,
+  },
+}));
+
+export default PaletteSwitch;

src/components/setting/setting-clash.tsx

@@ -10,7 +10,7 @@ import { getClashConfig, updateConfigs } from "../../services/api";
 import { SettingList, SettingItem } from "./setting";
 import { patchClashConfig } from "../../services/cmds";
 import { ApiType } from "../../services/types";
-import GuardState from "../guard-state";
+import GuardState from "./guard-state";
 
 interface Props {
   onError?: (err: Error) => void;

src/components/setting/setting-verge.tsx

@@ -4,9 +4,9 @@ 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";
+import GuardState from "./guard-state";
+import PaletteSwitch from "./palette-switch";
+import SysproxyTooltip from "./sysproxy-tooltip";
 
 interface Props {
   onError?: (err: Error) => void;

src/components/setting/sysproxy-tooltip.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import { InfoRounded } from "@mui/icons-material";
+import { ClickAwayListener, Tooltip } from "@mui/material";
+import { getSystemProxy } from "../../services/cmds";
+
+const SysproxyTooltip = () => {
+  const [open, setOpen] = useState(false);
+  const [info, setInfo] = useState<any>({});
+
+  const onShow = async () => {
+    const data = await getSystemProxy();
+    setInfo(data ?? {});
+    setOpen(true);
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    const timer = setTimeout(() => setOpen(false), 2000);
+    return () => clearTimeout(timer);
+  }, [open]);
+
+  // todo: add error info
+  const showTitle = (
+    <div>
+      <div>Enable: {(!!info.enable).toString()}</div>
+      <div>Server: {info.server}</div>
+      <div>Bypass: {info.bypass}</div>
+    </div>
+  );
+
+  return (
+    <ClickAwayListener onClickAway={() => setOpen(false)}>
+      <Tooltip
+        PopperProps={{
+          disablePortal: true,
+        }}
+        onClose={() => setOpen(false)}
+        open={open}
+        disableFocusListener
+        disableHoverListener
+        disableTouchListener
+        placement="top"
+        title={showTitle}
+        arrow
+      >
+        <InfoRounded fontSize="small" onClick={onShow} />
+      </Tooltip>
+    </ClickAwayListener>
+  );
+};
+
+export default SysproxyTooltip;