model-platform/frontend/app/features/platform/TreeContextMenu.tsx

import Icon from "../../components/common/Icon";
import type { ScriptItem, ScriptType } from "../../services/api";

type ContextMenuState = {
  x: number;
  y: number;
  kind: "root" | "directory" | "file";
  path: string;
  script?: ScriptItem;
};

type TreeContextMenuProps = {
  contextMenu: ContextMenuState | null;
  onOpenScript: (scriptId: string) => void;
  onRemoveScript: (script: ScriptItem) => void;
  onToggleLock: (script: ScriptItem) => void;
  onOpenCreateDialog: (parentPath: string, scriptType: ScriptType) => void;
  onOpenFolderDialog: (parentPath: string) => void;
  onChooseUpload: (parentPath: string) => void;
  onRemoveDirectory: (path: string) => void;
  onCopyResourcePath?: (jupyterPath: string) => void;
  onRemoveResource?: (resourceId: string) => void;
  onClose: () => void;
};

const menuItemClass =
  "flex h-[34px] cursor-pointer items-center gap-[9px] rounded-[5px] border-0 bg-transparent px-[9px] text-left text-[11px] text-[#34475a] hover:bg-[#eef6fd] hover:text-[#136dbd]";

const dangerItemClass =
  "flex h-[34px] cursor-pointer items-center gap-[9px] rounded-[5px] border-0 bg-transparent px-[9px] text-left text-[11px] text-[#c74848] hover:bg-[#fff0f0]";

export function TreeContextMenu({
  contextMenu,
  onOpenScript,
  onRemoveScript,
  onToggleLock,
  onOpenCreateDialog,
  onOpenFolderDialog,
  onChooseUpload,
  onRemoveDirectory,
  onCopyResourcePath,
  onRemoveResource,
  onClose,
}: TreeContextMenuProps) {
  if (!contextMenu) return null;

  const isDataResource = !!contextMenu.script?.script_id.startsWith("data:");

  return (
    <div
      className="fixed z-[1000] flex w-[180px] flex-col rounded-lg border border-[#d9e2ea] bg-white p-1.5 shadow-[0_14px_34px_rgb(18_43_68/20%)]"
      role="menu"
      style={{
        left: contextMenu.x,
        top: contextMenu.y,
      }}
      onPointerDown={(event) => event.stopPropagation()}
    >
      {contextMenu.kind === "file" && contextMenu.script ? (
        <>
          {isDataResource ? (
            <>
              <button
                type="button"
                role="menuitem"
                className={menuItemClass}
                onClick={() => {
                  if (onCopyResourcePath) {
                    onCopyResourcePath(contextMenu.script!.relative_path);
                  }
                  onClose();
                }}
              >
                <Icon name="database" size={16} />
                复制 Jupyter 路径
              </button>
              {onRemoveResource && (
                <button
                  className={dangerItemClass}
                  type="button"
                  role="menuitem"
                  onClick={() => {
                    const id = contextMenu.script!.script_id.replace(/^data:/, "");
                    onRemoveResource(id);
                    onClose();
                  }}
                >
                  <Icon name="close" size={16} />
                  删除资源
                </button>
              )}
            </>
          ) : (
            <>
              <button
                type="button"
                role="menuitem"
                className={menuItemClass}
                onClick={() => {
                  onOpenScript(contextMenu.script!.script_id);
                  onClose();
                }}
              >
                <Icon name="script" size={16} />
                打开文件
              </button>
              <button
                type="button"
                role="menuitem"
                className={menuItemClass}
                onClick={() => {
                  onToggleLock(contextMenu.script!);
                  onClose();
                }}
              >
                <Icon
                  name={contextMenu.script.is_locked ? "unlock" : "lock"}
                  size={16}
                />
                {contextMenu.script.is_locked ? "解锁文件" : "锁定文件"}
              </button>
              <button
                className={dangerItemClass}
                type="button"
                role="menuitem"
                onClick={() => onRemoveScript(contextMenu.script!)}
              >
                <Icon name="close" size={16} />
                删除文件
              </button>
            </>
          )}
        </>
      ) : (
        <>
          <button
            type="button"
            role="menuitem"
            className={menuItemClass}
            onClick={() => onOpenCreateDialog(contextMenu.path, "notebook")}
          >
            <Icon name="notebook" size={16} />
            新建 Notebook
          </button>
          <button
            type="button"
            role="menuitem"
            className={menuItemClass}
            onClick={() => onOpenCreateDialog(contextMenu.path, "python")}
          >
            <Icon name="python" size={16} />
            新建 Python 文件
          </button>
          <button
            type="button"
            role="menuitem"
            className={menuItemClass}
            onClick={() => onOpenFolderDialog(contextMenu.path)}
          >
            <Icon name="folder" size={16} />
            新建文件夹
          </button>
          <button
            type="button"
            role="menuitem"
            className={menuItemClass}
            onClick={() => onChooseUpload(contextMenu.path)}
          >
            <Icon name="upload" size={16} />
            上传到此处
          </button>
          {contextMenu.kind === "directory" && (
            <>
              <span className="mx-[3px] my-[5px] h-px bg-[#e7ecf1]" />
              <button
                className={dangerItemClass}
                type="button"
                role="menuitem"
                onClick={() => onRemoveDirectory(contextMenu.path)}
              >
                <Icon name="close" size={16} />
                删除文件夹
              </button>
            </>
          )}
        </>
      )}
    </div>
  );
}