refactor: Associate Profile with Merge/Script.

src/components/profile/profile-item.tsx

@@ -59,7 +59,7 @@ export const ProfileItem = (props: Props) => {
   const loadingCache = useLoadingCache();
   const setLoadingCache = useSetLoadingCache();
 
-  const { uid, name = "Profile", extra, updated = 0 } = itemData;
+  const { uid, name = "Profile", extra, updated = 0, option } = itemData;
 
   // local file mode
   // remote file mode
@@ -105,6 +105,8 @@ export const ProfileItem = (props: Props) => {
   }, [hasUrl, updated]);
 
   const [fileOpen, setFileOpen] = useState(false);
+  const [mergeOpen, setMergeOpen] = useState(false);
+  const [scriptOpen, setScriptOpen] = useState(false);
   const [confirmOpen, setConfirmOpen] = useState(false);
 
   const onOpenHome = () => {
@@ -122,6 +124,16 @@ export const ProfileItem = (props: Props) => {
     setFileOpen(true);
   };
 
+  const onEditMerge = () => {
+    setAnchorEl(null);
+    setMergeOpen(true);
+  };
+
+  const onEditScript = () => {
+    setAnchorEl(null);
+    setScriptOpen(true);
+  };
+
   const onForceSelect = () => {
     setAnchorEl(null);
     onSelect(true);
@@ -174,33 +186,55 @@ export const ProfileItem = (props: Props) => {
   });
 
   const urlModeMenu = (
-    hasHome ? [{ label: "Home", handler: onOpenHome }] : []
+    hasHome ? [{ label: "Home", handler: onOpenHome, disabled: false }] : []
   ).concat([
-    { label: "Select", handler: onForceSelect },
-    { label: "Edit Info", handler: onEditInfo },
-    { label: "Edit File", handler: onEditFile },
-    { label: "Open File", handler: onOpenFile },
-    { label: "Update", handler: () => onUpdate(0) },
-    { label: "Update(Proxy)", handler: () => onUpdate(2) },
+    { label: "Select", handler: onForceSelect, disabled: false },
+    { label: "Edit Info", handler: onEditInfo, disabled: false },
+    { label: "Edit File", handler: onEditFile, disabled: false },
+    {
+      label: "Edit Merge",
+      handler: onEditMerge,
+      disabled: option?.merge === null,
+    },
+    {
+      label: "Edit Script",
+      handler: onEditScript,
+      disabled: option?.script === null,
+    },
+    { label: "Open File", handler: onOpenFile, disabled: false },
+    { label: "Update", handler: () => onUpdate(0), disabled: false },
+    { label: "Update(Proxy)", handler: () => onUpdate(2), disabled: false },
     {
       label: "Delete",
       handler: () => {
         setAnchorEl(null);
         setConfirmOpen(true);
       },
+      disabled: false,
     },
   ]);
   const fileModeMenu = [
-    { label: "Select", handler: onForceSelect },
-    { label: "Edit Info", handler: onEditInfo },
-    { label: "Edit File", handler: onEditFile },
-    { label: "Open File", handler: onOpenFile },
+    { label: "Select", handler: onForceSelect, disabled: false },
+    { label: "Edit Info", handler: onEditInfo, disabled: false },
+    { label: "Edit File", handler: onEditFile, disabled: false },
+    {
+      label: "Edit Merge",
+      handler: onEditMerge,
+      disabled: option?.merge === null,
+    },
+    {
+      label: "Edit Script",
+      handler: onEditScript,
+      disabled: option?.script === null,
+    },
+    { label: "Open File", handler: onOpenFile, disabled: false },
     {
       label: "Delete",
       handler: () => {
         setAnchorEl(null);
         setConfirmOpen(true);
       },
+      disabled: false,
     },
   ];
 
@@ -369,6 +403,7 @@ export const ProfileItem = (props: Props) => {
           <MenuItem
             key={item.label}
             onClick={item.handler}
+            disabled={item.disabled}
             sx={[
               {
                 minWidth: 120,
@@ -398,6 +433,24 @@ export const ProfileItem = (props: Props) => {
         onChange={onChange}
         onClose={() => setFileOpen(false)}
       />
+      <EditorViewer
+        mode="profile"
+        property={option?.merge ?? "123"}
+        open={mergeOpen}
+        language="yaml"
+        schema="merge"
+        onChange={onChange}
+        onClose={() => setMergeOpen(false)}
+      />
+      <EditorViewer
+        mode="profile"
+        property={option?.script ?? ""}
+        open={scriptOpen}
+        language="javascript"
+        schema={undefined}
+        onChange={onChange}
+        onClose={() => setScriptOpen(false)}
+      />
       <ConfirmViewer
         title={t("Confirm deletion")}
         message={t("This operation is not reversible")}

src/components/profile/profile-more.tsx

@@ -1,285 +0,0 @@
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useLockFn } from "ahooks";
-import {
-  Box,
-  Badge,
-  Chip,
-  Typography,
-  MenuItem,
-  Menu,
-  IconButton,
-  CircularProgress,
-} from "@mui/material";
-import { FeaturedPlayListRounded } from "@mui/icons-material";
-import { viewProfile } from "@/services/cmds";
-import { Notice } from "@/components/base";
-import { EditorViewer } from "@/components/profile/editor-viewer";
-import { ProfileBox } from "./profile-box";
-import { LogViewer } from "./log-viewer";
-import { ConfirmViewer } from "./confirm-viewer";
-
-interface Props {
-  selected: boolean;
-  activating: boolean;
-  itemData: IProfileItem;
-  enableNum: number;
-  logInfo?: [string, string][];
-  onEnable: () => void;
-  onDisable: () => void;
-  onMoveTop: () => void;
-  onMoveEnd: () => void;
-  onEdit: () => void;
-  onChange?: (prev?: string, curr?: string) => void;
-  onDelete: () => void;
-}
-
-// profile enhanced item
-export const ProfileMore = (props: Props) => {
-  const {
-    selected,
-    activating,
-    itemData,
-    enableNum,
-    logInfo = [],
-    onEnable,
-    onDisable,
-    onMoveTop,
-    onMoveEnd,
-    onDelete,
-    onEdit,
-    onChange,
-  } = props;
-
-  const { uid, type } = itemData;
-  const { t, i18n } = useTranslation();
-  const [anchorEl, setAnchorEl] = useState<any>(null);
-  const [position, setPosition] = useState({ left: 0, top: 0 });
-  const [fileOpen, setFileOpen] = useState(false);
-  const [confirmOpen, setConfirmOpen] = useState(false);
-  const [logOpen, setLogOpen] = useState(false);
-
-  const onEditInfo = () => {
-    setAnchorEl(null);
-    onEdit();
-  };
-
-  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 fnWrapper = (fn: () => void) => () => {
-    setAnchorEl(null);
-    return fn();
-  };
-
-  const hasError = !!logInfo.find((e) => e[0] === "exception");
-  const showMove = enableNum > 1 && !hasError;
-
-  const enableMenu = [
-    { label: "Disable", handler: fnWrapper(onDisable) },
-    { label: "Edit Info", handler: onEditInfo },
-    { label: "Edit File", handler: onEditFile },
-    { label: "Open File", handler: onOpenFile },
-    { label: "To Top", show: showMove, handler: fnWrapper(onMoveTop) },
-    { label: "To End", show: showMove, handler: fnWrapper(onMoveEnd) },
-    {
-      label: "Delete",
-      handler: () => {
-        setAnchorEl(null);
-        setConfirmOpen(true);
-      },
-    },
-  ];
-
-  const disableMenu = [
-    { label: "Enable", handler: fnWrapper(onEnable) },
-    { label: "Edit Info", handler: onEditInfo },
-    { label: "Edit File", handler: onEditFile },
-    { label: "Open File", handler: onOpenFile },
-    {
-      label: "Delete",
-      handler: () => {
-        setAnchorEl(null);
-        setConfirmOpen(true);
-      },
-    },
-  ];
-
-  const boxStyle = {
-    height: 26,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    lineHeight: 1,
-  };
-
-  return (
-    <>
-      <ProfileBox
-        aria-selected={selected}
-        onDoubleClick={onEditFile}
-        // onClick={() => onSelect(false)}
-        onContextMenu={(event) => {
-          const { clientX, clientY } = event;
-          setPosition({ top: clientY, left: clientX });
-          setAnchorEl(event.currentTarget);
-          event.preventDefault();
-        }}
-      >
-        {activating && (
-          <Box
-            sx={{
-              position: "absolute",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              top: 10,
-              left: 10,
-              right: 10,
-              bottom: 2,
-              zIndex: 10,
-              backdropFilter: "blur(2px)",
-            }}
-          >
-            <CircularProgress color="inherit" size={20} />
-          </Box>
-        )}
-        <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          mb={0.5}
-        >
-          <Typography
-            width="calc(100% - 52px)"
-            variant="h6"
-            component="h2"
-            noWrap
-            title={itemData.name}
-          >
-            {itemData.name}
-          </Typography>
-
-          <Chip
-            label={type}
-            color="primary"
-            size="small"
-            variant="outlined"
-            sx={{ height: 20, textTransform: "capitalize" }}
-          />
-        </Box>
-
-        <Box sx={boxStyle}>
-          {selected && type === "script" ? (
-            hasError ? (
-              <Badge color="error" variant="dot" overlap="circular">
-                <IconButton
-                  size="small"
-                  edge="start"
-                  color="error"
-                  title={t("Script Console")}
-                  onClick={() => setLogOpen(true)}
-                >
-                  <FeaturedPlayListRounded fontSize="inherit" />
-                </IconButton>
-              </Badge>
-            ) : (
-              <IconButton
-                size="small"
-                edge="start"
-                color="inherit"
-                title={t("Script Console")}
-                onClick={() => setLogOpen(true)}
-              >
-                <FeaturedPlayListRounded fontSize="inherit" />
-              </IconButton>
-            )
-          ) : (
-            <Typography
-              noWrap
-              title={itemData.desc}
-              sx={i18n.language === "zh" ? { width: "calc(100% - 75px)" } : {}}
-            >
-              {itemData.desc}
-            </Typography>
-          )}
-        </Box>
-      </ProfileBox>
-
-      <Menu
-        open={!!anchorEl}
-        anchorEl={anchorEl}
-        onClose={() => setAnchorEl(null)}
-        anchorPosition={position}
-        anchorReference="anchorPosition"
-        transitionDuration={225}
-        MenuListProps={{ sx: { py: 0.5 } }}
-        onContextMenu={(e) => {
-          setAnchorEl(null);
-          e.preventDefault();
-        }}
-      >
-        {(selected ? enableMenu : disableMenu)
-          .filter((item: any) => item.show !== false)
-          .map((item) => (
-            <MenuItem
-              key={item.label}
-              onClick={item.handler}
-              sx={[
-                { minWidth: 120 },
-                (theme) => {
-                  return {
-                    color:
-                      item.label === "Delete"
-                        ? theme.palette.error.main
-                        : undefined,
-                  };
-                },
-              ]}
-              dense
-            >
-              {t(item.label)}
-            </MenuItem>
-          ))}
-      </Menu>
-
-      <EditorViewer
-        mode="profile"
-        property={uid}
-        open={fileOpen}
-        language={type === "merge" ? "yaml" : "javascript"}
-        schema={type === "merge" ? "merge" : undefined}
-        onChange={onChange}
-        onClose={() => setFileOpen(false)}
-      />
-      <ConfirmViewer
-        title={t("Confirm deletion")}
-        message={t("This operation is not reversible")}
-        open={confirmOpen}
-        onClose={() => setConfirmOpen(false)}
-        onConfirm={() => {
-          onDelete();
-          setConfirmOpen(false);
-        }}
-      />
-      {selected && (
-        <LogViewer
-          open={logOpen}
-          logInfo={logInfo}
-          onClose={() => setLogOpen(false)}
-        />
-      )}
-    </>
-  );
-};

src/components/profile/profile-viewer.tsx

@@ -33,7 +33,7 @@ export interface ProfileViewerRef {
 }
 
 // create or edit the profile
-// remote / local / merge / script
+// remote / local
 export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
   (props, ref) => {
     const { t } = useTranslation();
@@ -92,9 +92,6 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
           if (form.type === "remote" && !form.url) {
             throw new Error("The URL should not be null");
           }
-          if (form.type !== "remote" && form.type !== "local") {
-            delete form.option;
-          }
 
           if (form.option?.update_interval) {
             form.option.update_interval = +form.option.update_interval;
@@ -168,8 +165,6 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
               <Select {...field} autoFocus label={t("Type")}>
                 <MenuItem value="remote">Remote</MenuItem>
                 <MenuItem value="local">Local</MenuItem>
-                <MenuItem value="script">Script</MenuItem>
-                <MenuItem value="merge">Merge</MenuItem>
               </Select>
             </FormControl>
           )}