feat: supports edit profile file

src/components/profile/file-editor.tsx

@@ -0,0 +1,97 @@
+import useSWR from "swr";
+import { useEffect, useRef } from "react";
+import { useLockFn } from "ahooks";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from "@mui/material";
+import {
+  getVergeConfig,
+  readProfileFile,
+  saveProfileFile,
+} from "../../services/cmds";
+import Notice from "../base/base-notice";
+
+import "monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js";
+import "monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js";
+import "monaco-editor/esm/vs/editor/contrib/folding/browser/folding.js";
+import { editor } from "monaco-editor/esm/vs/editor/editor.api";
+
+interface Props {
+  uid: string;
+  open: boolean;
+  mode: "yaml" | "javascript";
+  onClose: () => void;
+  onChange?: () => void;
+}
+
+const FileEditor = (props: Props) => {
+  const { uid, open, mode, onClose, onChange } = props;
+
+  const { t } = useTranslation();
+  const editorRef = useRef<any>();
+  const instanceRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+  const { theme_mode } = vergeConfig ?? {};
+
+  useEffect(() => {
+    if (!open) return;
+
+    readProfileFile(uid).then((data) => {
+      const dom = editorRef.current;
+
+      if (!dom) return;
+      if (instanceRef.current) instanceRef.current.dispose();
+
+      instanceRef.current = editor.create(editorRef.current, {
+        value: data,
+        language: mode,
+        theme: theme_mode === "light" ? "vs" : "vs-dark",
+        minimap: { enabled: false },
+      });
+    });
+
+    return () => {
+      if (instanceRef.current) {
+        instanceRef.current.dispose();
+        instanceRef.current = null;
+      }
+    };
+  }, [open]);
+
+  const onSave = useLockFn(async () => {
+    const value = instanceRef.current?.getValue();
+
+    if (value == null) return;
+
+    try {
+      await saveProfileFile(uid, value);
+      onChange?.();
+    } catch (err: any) {
+      Notice.error(err.message || err.toString());
+    }
+  });
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>{t("Edit File")}</DialogTitle>
+
+      <DialogContent sx={{ width: 520, pb: 1 }}>
+        <div style={{ width: "100%", height: "420px" }} ref={editorRef} />
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose}>{t("Cancel")}</Button>
+        <Button onClick={onSave} variant="contained">
+          {t("Save")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default FileEditor;

src/components/profile/profile-item.tsx

@@ -21,6 +21,7 @@ import { atomLoadingCache } from "../../services/states";
 import { updateProfile, deleteProfile, viewProfile } from "../../services/cmds";
 import parseTraffic from "../../utils/parse-traffic";
 import ProfileEdit from "./profile-edit";
+import FileEditor from "./file-editor";
 import Notice from "../base/base-notice";
 
 const Wrapper = styled(Box)(({ theme }) => ({
@@ -54,7 +55,7 @@ const ProfileItem = (props: Props) => {
   const [position, setPosition] = useState({ left: 0, top: 0 });
   const [loadingCache, setLoadingCache] = useRecoilState(atomLoadingCache);
 
-  const { name = "Profile", extra, updated = 0 } = itemData;
+  const { uid, name = "Profile", extra, updated = 0 } = itemData;
   const { upload = 0, download = 0, total = 0 } = extra ?? {};
   const from = parseUrl(itemData.url);
   const expire = parseExpire(extra?.expire);
@@ -70,18 +71,16 @@ const ProfileItem = (props: Props) => {
   const loading = loadingCache[itemData.uid] ?? false;
 
   const [editOpen, setEditOpen] = useState(false);
-  const onEdit = () => {
+  const [fileOpen, setFileOpen] = useState(false);
+
+  const onEditInfo = () => {
     setAnchorEl(null);
     setEditOpen(true);
   };
 
-  const onView = async () => {
+  const onEditFile = () => {
     setAnchorEl(null);
-    try {
-      await viewProfile(itemData.uid);
-    } catch (err: any) {
-      Notice.error(err?.message || err.toString());
-    }
+    setFileOpen(true);
   };
 
   const onForceSelect = () => {
@@ -89,6 +88,15 @@ const ProfileItem = (props: Props) => {
     onSelect(true);
   };
 
+  const onOpenFile = useLockFn(async () => {
+    setAnchorEl(null);
+    try {
+      await viewProfile(itemData.uid);
+    } catch (err: any) {
+      Notice.error(err?.message || err.toString());
+    }
+  });
+
   const onUpdate = useLockFn(async (withProxy: boolean) => {
     setAnchorEl(null);
     setLoadingCache((cache) => ({ ...cache, [itemData.uid]: true }));
@@ -122,16 +130,18 @@ const ProfileItem = (props: Props) => {
 
   const urlModeMenu = [
     { label: "Select", handler: onForceSelect },
-    { label: "Edit", handler: onEdit },
-    { label: "File", handler: onView },
+    { 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: "Delete", handler: onDelete },
   ];
   const fileModeMenu = [
     { label: "Select", handler: onForceSelect },
-    { label: "Edit", handler: onEdit },
-    { label: "File", handler: onView },
+    { label: "Edit Info", handler: onEditInfo },
+    { label: "Edit File", handler: onEditFile },
+    { label: "Open File", handler: onOpenFile },
     { label: "Delete", handler: onDelete },
   ];
 
@@ -256,6 +266,7 @@ const ProfileItem = (props: Props) => {
         onClose={() => setAnchorEl(null)}
         anchorPosition={position}
         anchorReference="anchorPosition"
+        transitionDuration={225}
         onContextMenu={(e) => {
           setAnchorEl(null);
           e.preventDefault();
@@ -279,6 +290,15 @@ const ProfileItem = (props: Props) => {
           onClose={() => setEditOpen(false)}
         />
       )}
+
+      {fileOpen && (
+        <FileEditor
+          uid={uid}
+          open={fileOpen}
+          mode="yaml"
+          onClose={() => setFileOpen(false)}
+        />
+      )}
     </>
   );
 };

src/components/profile/profile-more.tsx

@@ -1,6 +1,7 @@
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useLockFn } from "ahooks";
 import {
   alpha,
   Box,
@@ -12,9 +13,10 @@ import {
 } from "@mui/material";
 import { CmdType } from "../../services/types";
 import { viewProfile } from "../../services/cmds";
-import ProfileEdit from "./profile-edit";
-import Notice from "../base/base-notice";
 import enhance from "../../services/enhance";
+import ProfileEdit from "./profile-edit";
+import FileEditor from "./file-editor";
+import Notice from "../base/base-notice";
 
 const Wrapper = styled(Box)(({ theme }) => ({
   width: "100%",
@@ -57,6 +59,7 @@ const ProfileMore = (props: Props) => {
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [position, setPosition] = useState({ left: 0, top: 0 });
   const [editOpen, setEditOpen] = useState(false);
+  const [fileOpen, setFileOpen] = useState(false);
   const [status, setStatus] = useState(enhance.status(uid));
 
   // unlisten when unmount
@@ -65,40 +68,47 @@ const ProfileMore = (props: Props) => {
   // error during enhanced mode
   const hasError = selected && status?.status === "error";
 
-  const onEdit = () => {
+  const onEditInfo = () => {
     setAnchorEl(null);
     setEditOpen(true);
   };
 
-  const onView = async () => {
+  const onEditFile = () => {
+    setAnchorEl(null);
+    setFileOpen(true);
+  };
+
+  const onOpenFile = useLockFn(async () => {
     setAnchorEl(null);
     try {
       await viewProfile(itemData.uid);
     } catch (err: any) {
       Notice.error(err?.message || err.toString());
     }
-  };
+  });
 
-  const closeWrapper = (fn: () => void) => () => {
+  const fnWrapper = (fn: () => void) => () => {
     setAnchorEl(null);
     return fn();
   };
 
   const enableMenu = [
-    { label: "Disable", handler: closeWrapper(onDisable) },
-    { label: "Refresh", handler: closeWrapper(onEnhance) },
-    { label: "Edit", handler: onEdit },
-    { label: "File", handler: onView },
-    { label: "To Top", show: !hasError, handler: closeWrapper(onMoveTop) },
-    { label: "To End", show: !hasError, handler: closeWrapper(onMoveEnd) },
-    { label: "Delete", handler: closeWrapper(onDelete) },
+    { label: "Disable", handler: fnWrapper(onDisable) },
+    { label: "Refresh", handler: fnWrapper(onEnhance) },
+    { label: "Edit Info", handler: onEditInfo },
+    { label: "Edit File", handler: onEditFile },
+    { label: "Open File", handler: onOpenFile },
+    { label: "To Top", show: !hasError, handler: fnWrapper(onMoveTop) },
+    { label: "To End", show: !hasError, handler: fnWrapper(onMoveEnd) },
+    { label: "Delete", handler: fnWrapper(onDelete) },
   ];
 
   const disableMenu = [
-    { label: "Enable", handler: closeWrapper(onEnable) },
-    { label: "Edit", handler: onEdit },
-    { label: "File", handler: onView },
-    { label: "Delete", handler: closeWrapper(onDelete) },
+    { label: "Enable", handler: fnWrapper(onEnable) },
+    { label: "Edit Info", handler: onEditInfo },
+    { label: "Edit File", handler: onEditFile },
+    { label: "Open File", handler: onOpenFile },
+    { label: "Delete", handler: fnWrapper(onDelete) },
   ];
 
   const boxStyle = {
@@ -208,6 +218,7 @@ const ProfileMore = (props: Props) => {
         onClose={() => setAnchorEl(null)}
         anchorPosition={position}
         anchorReference="anchorPosition"
+        transitionDuration={225}
         onContextMenu={(e) => {
           setAnchorEl(null);
           e.preventDefault();
@@ -233,6 +244,15 @@ const ProfileMore = (props: Props) => {
           onClose={() => setEditOpen(false)}
         />
       )}
+
+      {fileOpen && (
+        <FileEditor
+          uid={uid}
+          open={fileOpen}
+          mode={type === "merge" ? "yaml" : "javascript"}
+          onClose={() => setFileOpen(false)}
+        />
+      )}
     </>
   );
 };