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" }}>