feat: update profile with system proxy/clash proxy

src/components/profile/info-editor.tsx

@@ -8,7 +8,9 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
+  FormControlLabel,
   IconButton,
+  Switch,
   TextField,
 } from "@mui/material";
 import { Settings } from "@mui/icons-material";
@@ -34,11 +36,15 @@ const InfoEditor = (props: Props) => {
 
   useEffect(() => {
     if (itemData) {
+      const { option } = itemData;
       setForm({ ...itemData });
-      setOption(itemData.option ?? {});
+      setOption(option ?? {});
       setShowOpt(
         itemData.type === "remote" &&
-          (!!itemData.option?.user_agent || !!itemData.option?.update_interval)
+          (!!option?.user_agent ||
+            !!option?.update_interval ||
+            !!option?.self_proxy ||
+            !!option?.with_proxy)
       );
     }
   }, [itemData]);
@@ -138,6 +144,46 @@ const InfoEditor = (props: Props) => {
             onKeyDown={(e) => e.key === "Enter" && onUpdate()}
           />
         )}
+
+        {form.type === "remote" && showOpt && (
+          <FormControlLabel
+            label={t("Use System Proxy")}
+            labelPlacement="start"
+            sx={{ ml: 0, my: 1 }}
+            control={
+              <Switch
+                color="primary"
+                checked={option.with_proxy ?? false}
+                onChange={(_e, c) =>
+                  setOption((o) => ({
+                    self_proxy: c ? false : o.self_proxy ?? false,
+                    with_proxy: c,
+                  }))
+                }
+              />
+            }
+          />
+        )}
+
+        {form.type === "remote" && showOpt && (
+          <FormControlLabel
+            label={t("Use Clash Proxy")}
+            labelPlacement="start"
+            sx={{ ml: 0, my: 1 }}
+            control={
+              <Switch
+                color="primary"
+                checked={option.self_proxy ?? false}
+                onChange={(_e, c) =>
+                  setOption((o) => ({
+                    with_proxy: c ? false : o.with_proxy ?? false,
+                    self_proxy: c,
+                  }))
+                }
+              />
+            }
+          />
+        )}
       </DialogContent>
 
       <DialogActions sx={{ px: 2, pb: 2, position: "relative" }}>

src/components/profile/profile-item.tsx

@@ -110,12 +110,32 @@ const ProfileItem = (props: Props) => {
     }
   });
 
-  const onUpdate = useLockFn(async (withProxy: boolean) => {
+  /// 0 不使用任何代理
+  /// 1 使用配置好的代理
+  /// 2 至少使用一个代理，根据配置，如果没配置，默认使用系统代理
+  const onUpdate = useLockFn(async (type: 0 | 1 | 2) => {
     setAnchorEl(null);
     setLoadingCache((cache) => ({ ...cache, [itemData.uid]: true }));
 
+    const option: Partial<CmdType.ProfileOption> = {};
+
+    if (type === 0) {
+      option.with_proxy = false;
+      option.self_proxy = false;
+    } else if (type === 1) {
+      // nothing
+    } else if (type === 2) {
+      if (itemData.option?.self_proxy) {
+        option.with_proxy = false;
+        option.self_proxy = true;
+      } else {
+        option.with_proxy = true;
+        option.self_proxy = false;
+      }
+    }
+
     try {
-      await updateProfile(itemData.uid, { with_proxy: withProxy });
+      await updateProfile(itemData.uid, option);
       mutate("getProfiles");
     } catch (err: any) {
       const errmsg = err?.message || err.toString();
@@ -142,8 +162,8 @@ const ProfileItem = (props: Props) => {
     { label: "Edit Info", handler: onEditInfo },
     { label: "Edit File", handler: onEditFile },
     { label: "Open File", handler: onOpenFile },
-    { label: "Update", handler: () => onUpdate(false) },
-    { label: "Update(Proxy)", handler: () => onUpdate(true) },
+    { label: "Update", handler: () => onUpdate(0) },
+    { label: "Update(Proxy)", handler: () => onUpdate(2) },
     { label: "Delete", handler: onDelete },
   ];
   const fileModeMenu = [
@@ -199,7 +219,7 @@ const ProfileItem = (props: Props) => {
               disabled={loading}
               onClick={(e) => {
                 e.stopPropagation();
-                onUpdate(false);
+                onUpdate(1);
               }}
             >
               <RefreshRounded color="inherit" />

src/components/profile/profile-new.tsx

@@ -9,10 +9,12 @@ import {
   DialogContent,
   DialogTitle,
   FormControl,
+  FormControlLabel,
   IconButton,
   InputLabel,
   MenuItem,
   Select,
+  Switch,
   TextField,
 } from "@mui/material";
 import { Settings } from "@mui/icons-material";
@@ -40,7 +42,11 @@ const ProfileNew = (props: Props) => {
 
   const [showOpt, setShowOpt] = useState(false);
   // can add more option
-  const [option, setOption] = useSetState({ user_agent: "" });
+  const [option, setOption] = useSetState({
+    user_agent: "",
+    with_proxy: false,
+    self_proxy: false,
+  });
   // file input
   const fileDataRef = useRef<string | null>(null);
 
@@ -141,6 +147,46 @@ const ProfileNew = (props: Props) => {
             onChange={(e) => setOption({ user_agent: e.target.value })}
           />
         )}
+
+        {form.type === "remote" && showOpt && (
+          <FormControlLabel
+            label={t("Use System Proxy")}
+            labelPlacement="start"
+            sx={{ ml: 0, my: 1 }}
+            control={
+              <Switch
+                color="primary"
+                checked={option.with_proxy}
+                onChange={(_e, c) =>
+                  setOption((o) => ({
+                    self_proxy: c ? false : o.self_proxy,
+                    with_proxy: c,
+                  }))
+                }
+              />
+            }
+          />
+        )}
+
+        {form.type === "remote" && showOpt && (
+          <FormControlLabel
+            label={t("Use Clash Proxy")}
+            labelPlacement="start"
+            sx={{ ml: 0, my: 1 }}
+            control={
+              <Switch
+                color="primary"
+                checked={option.self_proxy}
+                onChange={(_e, c) =>
+                  setOption((o) => ({
+                    with_proxy: c ? false : o.with_proxy,
+                    self_proxy: c,
+                  }))
+                }
+              />
+            }
+          />
+        )}
       </DialogContent>
 
       <DialogActions sx={{ px: 2, pb: 2, position: "relative" }}>

src/services/types.d.ts

@@ -124,6 +124,7 @@ declare namespace CmdType {
   interface ProfileOption {
     user_agent?: string;
     with_proxy?: boolean;
+    self_proxy?: boolean;
     update_interval?: number;
   }