@spacecorexdev/core 0.0.2 → 0.0.5

package/src/ui/FileManager/FileContextMenu.tsx

@@ -0,0 +1,628 @@
+import React, { useState, useRef, useLayoutEffect, memo } from 'react';
+import { Dropdown, Button, MenuProps, Menu } from 'antd';
+import { DownloadOutlined, DeleteOutlined, EditOutlined, InfoCircleOutlined, MoreOutlined, CopyOutlined, ExportOutlined, FolderAddOutlined, HistoryOutlined, LinkOutlined, CommentOutlined, ClearOutlined, ArrowUpOutlined, FileAddOutlined } from '@ant-design/icons';
+import { ProjectFile } from './types';
+import { useEffectResize } from '../../utils/htmlUtils';
+import { ShareAltOutlined } from '@ant-design/icons';
+import { isEditableFileType, CONTRACTS_VIRTUAL_FOLDER_ID } from './utils/fileUtils';
+
+interface FileContextMenuProps {
+  record: ProjectFile;
+  onPreview: (file: ProjectFile) => void;
+  onDownload: (file: ProjectFile) => void;
+  /** 下载文件夹回调（仅管理员/负责人提供；不提供时隐藏「下载文件夹」） */
+  onDownloadFolder?: (file: ProjectFile) => void;
+  /** 复制链接回调（未提供时不显示「复制链接」） */
+  onCopyLink?: (file: ProjectFile) => void;
+  onRename: (file: ProjectFile) => void;
+  onEditDescs: (file: ProjectFile) => void;
+  onDelete: (fileId: string) => void;
+  onEdit?: (file: ProjectFile) => void;
+  /** 生成临时访问链接回调 */
+  onGenerateTempLink?: (file: ProjectFile) => void;
+  /** 移动到其他项目回调 */
+  onMoveToProject?: (file: ProjectFile) => void;
+  /** 复制到其他项目回调 */
+  onCopyToProject?: (file: ProjectFile) => void;
+  /** 复制副本回调 */
+  onCopyToSelf?: (file: ProjectFile) => void;
+  /** 查看文件历史版本回调 */
+  onViewVersionHistory?: (file: ProjectFile) => void;
+  /** 分享到微信回调 */
+  onShareToWechat?: (file: ProjectFile) => void;
+  /** 清理缓存回调 */
+  onClearCache?: (file: ProjectFile) => void;
+  /** 在新窗口打开回调 */
+  onOpenInNewWindow?: (file: ProjectFile) => void;
+  /** 跳转至合同回调 */
+  onJumpToContract?: (file: ProjectFile) => void;
+  /** 创建合同回调（仅合同根文件夹显示） */
+  onCreateContract?: (file: ProjectFile) => void;
+  /** 是否为管理员或负责人 */
+  isAdminOrOwner?: boolean;
+  trigger?: 'click' | 'hover' | 'contextMenu';
+  placement?: 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+  /** 手动控制显示状态（用于右键菜单） */
+  open?: boolean;
+  /** 菜单位置（用于右键菜单） */
+  position?: { x: number; y: number };
+  /** 自定义样式类名 */
+  className?: string;
+}
+
+const FileContextMenuComponent: React.FC<FileContextMenuProps> = ({
+  record,
+  onPreview,
+  onDownload,
+  onDownloadFolder,
+  onCopyLink,
+  onRename,
+  onEditDescs,
+  onDelete,
+  onEdit,
+  onGenerateTempLink,
+  onMoveToProject,
+  onCopyToProject,
+  onCopyToSelf,
+  onViewVersionHistory,
+  onShareToWechat,
+  onClearCache,
+  onOpenInNewWindow,
+  onJumpToContract,
+  onCreateContract,
+  isAdminOrOwner = false,
+  trigger = 'click',
+  placement = 'bottomRight',
+  open,
+  position,
+  className,
+}) => {
+
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffectResize(() => {
+    setIsMobile(true);
+  }, () => {
+    setIsMobile(false);
+  });
+
+  const menuItems: MenuProps['items'] = [];
+
+  // 移动/复制到其他项目的子菜单（按回调存在与否动态生成）
+  const moveCopyToProjectMenu: MenuProps['items'] = [];
+  if (onCopyToSelf) {
+    moveCopyToProjectMenu.push({
+      key: 'copyToSelf',
+      label: '复制副本',
+      icon: <FolderAddOutlined />,
+      onClick: (e: any) => {
+        onCopyToSelf(record);
+        e.domEvent.stopPropagation();
+      },
+    });
+  }
+  if (onCopyToProject) {
+    moveCopyToProjectMenu.push({
+      key: 'copyToProject',
+      label: '复制到其他项目',
+      icon: <FolderAddOutlined />,
+      onClick: (e: any) => {
+        onCopyToProject(record);
+        e.domEvent.stopPropagation();
+      },
+    });
+  }
+  if (onMoveToProject) {
+    moveCopyToProjectMenu.push({
+      key: 'moveToProject',
+      label: '移动到其他项目',
+      icon: <ExportOutlined />,
+      onClick: (e: any) => {
+        onMoveToProject(record);
+        e.domEvent.stopPropagation();
+      },
+    });
+  }
+
+  // 合同附件链接文件：仅支持预览和下载
+  if (record.isContractLink) {
+    menuItems.push(
+      {
+        key: 'preview',
+        label: '预览',
+        icon: <InfoCircleOutlined />,
+        onClick: (e: any) => {
+          onPreview(record);
+          e.domEvent.stopPropagation();
+        },
+      },
+      {
+        key: 'download',
+        label: '下载',
+        icon: <DownloadOutlined />,
+        onClick: (e: any) => {
+          onDownload(record);
+          e.domEvent.stopPropagation();
+        },
+      },
+    );
+    if (onJumpToContract) {
+      menuItems.push({
+        key: 'jumpToContract',
+        label: '跳转至合同',
+        icon: <ExportOutlined />,
+        onClick: (e: any) => {
+          onJumpToContract(record);
+          e.domEvent.stopPropagation();
+        },
+      });
+    }
+  } else if (record.isVirtualContractFolder) {
+    // 虚拟合同文件夹：不允许重命名/删除/移动
+    // 合同根文件夹（含纯虚拟与真实记录）均提供"创建合同"入口
+    if (onCreateContract) {
+      menuItems.push({
+        key: 'createContract',
+        label: '创建合同',
+        icon: <FileAddOutlined />,
+        onClick: (e: any) => {
+          onCreateContract(record);
+          e.domEvent.stopPropagation();
+        },
+      });
+    }
+
+    if (record.id !== CONTRACTS_VIRTUAL_FOLDER_ID) {
+      // 真实文件夹（由用户创建的 __contracts__）：允许编辑备注和临时访问链接
+      menuItems.push({
+        key: 'editDescs',
+        label: '编辑备注',
+        icon: <CommentOutlined />,
+        onClick: (e: any) => {
+          onEditDescs(record);
+          e.domEvent.stopPropagation();
+        },
+      });
+
+      if (onGenerateTempLink) {
+        menuItems.push({
+          key: 'generateTempLink',
+          label: '临时访问链接',
+          icon: <LinkOutlined />,
+          onClick: (e: any) => {
+            onGenerateTempLink(record);
+            e.domEvent.stopPropagation();
+          },
+        });
+      }
+    } else if (!onCreateContract) {
+      // 纯虚拟文件夹（无真实服务器记录）且未提供创建合同回调：仅显示提示
+      menuItems.push({
+        key: 'contractFolderHint',
+        label: '合同附件文件夹',
+        icon: <InfoCircleOutlined />,
+        disabled: true,
+      });
+    }
+  } else if (record.isContractSubfolder) {
+    // 合同子文件夹：仅支持跳转至合同，不允许重命名/删除/移动
+    if (onJumpToContract) {
+      menuItems.push({
+        key: 'jumpToContract',
+        label: '跳转至合同',
+        icon: <ExportOutlined />,
+        onClick: (e: any) => {
+          onJumpToContract(record);
+          e.domEvent.stopPropagation();
+        },
+      });
+    }
+  } else if (record.isContractTagFolder) {
+    // 合同分类标签文件夹（"按类型"排序时的虚拟分组）：仅显示提示
+    menuItems.push({
+      key: 'contractTagFolderHint',
+      label: '合同分类文件夹',
+      icon: <InfoCircleOutlined />,
+      disabled: true,
+    });
+  } else if (record.fileType === 'folder' || record.isSecure) {
+    // 加密文件（非文件夹）允许下载
+    if (record.isSecure && record.fileType !== 'folder') {
+      // 普通文件显示所有操作
+      menuItems.push({
+        key: 'preview',
+        label: '预览',
+        icon: <InfoCircleOutlined />,
+        onClick: (e: any) => {
+          onPreview(record);
+          e.domEvent.stopPropagation();
+        },
+      });
+
+      // 在新窗口打开
+      if (onOpenInNewWindow) {
+        menuItems.push({
+          key: 'openInNewWindow',
+          label: '在新窗口打开',
+          icon: <ArrowUpOutlined />,
+          onClick: (e: any) => {
+            onOpenInNewWindow(record);
+            e.domEvent.stopPropagation();
+          },
+        });
+      }
+
+      // 可编辑文件类型添加编辑菜单项
+      if (onEdit && isEditableFileType(record.fileName)) {
+        menuItems.push({
+          key: 'edit',
+          label: '编辑',
+          icon: <EditOutlined />,
+          onClick: (e: any) => {
+            onEdit(record);
+            e.domEvent.stopPropagation();
+          },
+        });
+      }
+
+      // 查看历史版本
+      if (onViewVersionHistory && isEditableFileType(record.fileName)) {
+        menuItems.push({
+          key: 'versionHistory',
+          label: '查看历史版本',
+          icon: <HistoryOutlined />,
+          onClick: (e: any) => {
+            onViewVersionHistory(record);
+            e.domEvent.stopPropagation();
+          },
+        });
+      }
+      menuItems.push({
+        key: 'download',
+        label: '下载',
+        icon: <DownloadOutlined />,
+        onClick: (e: any) => {
+          onDownload(record);
+          e.domEvent.stopPropagation();
+        },
+      });
+    }
+
+    // 下载文件夹：仅管理员/负责人可用（onDownloadFolder 由上层按权限注入）
+    if (
+      record.fileType === 'folder' &&
+      onDownloadFolder &&
+      !record.isVirtualContractFolder &&
+      !record.isContractSubfolder &&
+      !record.isContractTagFolder
+    ) {
+      menuItems.push({
+        key: 'downloadFolder',
+        label: '下载文件夹',
+        icon: <DownloadOutlined />,
+        onClick: (e: any) => {
+          onDownloadFolder(record);
+          e.domEvent.stopPropagation();
+        },
+      });
+    }
+
+    menuItems.push(
+      {
+        key: 'rename',
+        label: '重命名',
+        icon: <EditOutlined />,
+        onClick: (e: any) => {
+          onRename(record);
+          e.domEvent.stopPropagation();
+        },
+      },
+      {
+        key: 'editDescs',
+        label: '编辑备注',
+        icon: <CommentOutlined />,
+        onClick: (e: any) => {
+          onEditDescs(record);
+          e.domEvent.stopPropagation();
+        },
+      }
+    );
+
+    // 文件夹仅支持复制到其他项目（递归复制整个文件夹）；普通文件支持移动/复制
+    if (record.fileType === 'folder') {
+      if (onCopyToProject) {
+        menuItems.push({
+          key: 'copyToProject',
+          label: '复制到其他项目',
+          icon: <FolderAddOutlined />,
+          onClick: (e: any) => {
+            onCopyToProject(record);
+            e.domEvent.stopPropagation();
+          },
+        });
+      }
+    } else if (moveCopyToProjectMenu.length > 0) {
+      menuItems.push({
+        key: 'moveCopyToProject',
+        label: '移动/复制...',
+        icon: <ExportOutlined />,
+        children: moveCopyToProjectMenu,
+      });
+    }
+
+    // 管理员或负责人可以分享加密文件到微信
+    if (onShareToWechat && record.isSecure && isAdminOrOwner) {
+      menuItems.push({
+        key: 'shareToWechat',
+        label: '分享到微信',
+        icon: <ShareAltOutlined />,
+        onClick: (e: any) => {
+          onShareToWechat(record);
+          e.domEvent.stopPropagation();
+        },
+      });
+    }
+
+    // 加密文件（非文件夹）支持清理缓存
+    if (onClearCache && record.isSecure && record.fileType !== 'folder') {
+      menuItems.push({
+        key: 'clearCache',
+        label: '清理缓存',
+        icon: <ClearOutlined />,
+        onClick: (e: any) => {
+          onClearCache(record);
+          e.domEvent.stopPropagation();
+        },
+      });
+    }
+
+    if (record.fileType === 'folder' && onGenerateTempLink) {
+      menuItems.push({
+        key: 'generateTempLink',
+        label: '临时访问链接',
+        icon: <LinkOutlined />,
+        onClick: (e: any) => {
+          onGenerateTempLink(record);
+          e.domEvent.stopPropagation();
+        },
+      });
+    }
+
+    menuItems.push({
+      key: 'delete',
+      label: '删除',
+      icon: <DeleteOutlined />,
+      danger: true,
+      onClick: (e: any) => {
+        onDelete(record.id);
+        e.domEvent.stopPropagation();
+      },
+    });
+  } else {
+    // 普通文件显示所有操作
+    menuItems.push({
+      key: 'preview',
+      label: '预览',
+      icon: <InfoCircleOutlined />,
+      onClick: (e: any) => {
+        onPreview(record);
+        e.domEvent.stopPropagation();
+      },
+    });
+
+    // 在新窗口打开
+    if (onOpenInNewWindow) {
+      menuItems.push({
+        key: 'openInNewWindow',
+        label: '在新窗口打开',
+        icon: <ArrowUpOutlined />,
+        onClick: (e: any) => {
+          onOpenInNewWindow(record);
+          e.domEvent.stopPropagation();
+        },
+      });
+    }
+
+    // 可编辑文件类型添加编辑菜单项（PPT 编辑暂时关闭，仅保留预览）
+    if (onEdit && isEditableFileType(record.fileName) && !record.fileName.toLowerCase().endsWith('.pptx')) {
+      menuItems.push({
+        key: 'edit',
+        label: '编辑',
+        icon: <EditOutlined />,
+        onClick: (e: any) => {
+          onEdit(record);
+          e.domEvent.stopPropagation();
+        },
+      });
+    }
+
+    // 查看历史版本
+    if (onViewVersionHistory && isEditableFileType(record.fileName)) {
+      menuItems.push({
+        key: 'versionHistory',
+        label: '查看历史版本',
+        icon: <HistoryOutlined />,
+        onClick: (e: any) => {
+          onViewVersionHistory(record);
+          e.domEvent.stopPropagation();
+        },
+      });
+    }
+
+    menuItems.push(
+      {
+        key: 'download',
+        label: '下载',
+        icon: <DownloadOutlined />,
+        onClick: (e: any) => {
+          onDownload(record);
+          e.domEvent.stopPropagation();
+        },
+      },
+      {
+        key: 'rename',
+        label: '重命名',
+        icon: <EditOutlined />,
+        onClick: (e: any) => {
+          onRename(record);
+          e.domEvent.stopPropagation();
+        },
+      },
+      {
+        key: 'editDescs',
+        label: '编辑备注',
+        icon: <CommentOutlined />,
+        onClick: (e: any) => {
+          onEditDescs(record);
+          e.domEvent.stopPropagation();
+        },
+      }
+    );
+
+    // 添加移动/复制到其他项目子菜单（无任何回调时不显示）
+    if (moveCopyToProjectMenu.length > 0) {
+      menuItems.push({
+        key: 'moveCopyToProject',
+        label: '移动/复制...',
+        icon: <ExportOutlined />,
+        children: moveCopyToProjectMenu,
+      });
+    }
+
+    // 临时文件链接
+    if (onGenerateTempLink) {
+      menuItems.push({
+        key: 'generateTempLink',
+        label: '临时访问链接',
+        icon: <LinkOutlined />,
+        onClick: (e: any) => {
+          onGenerateTempLink(record);
+          e.domEvent.stopPropagation();
+        },
+      });
+    }
+
+    if (onCopyLink) {
+      menuItems.push({
+        key: 'copyLink',
+        label: '复制链接',
+        icon: <CopyOutlined />,
+        onClick: (e: any) => {
+          onCopyLink(record);
+          e.domEvent.stopPropagation();
+        },
+      });
+    }
+
+    // 分享到微信（有下载权限时显示）
+    if (onShareToWechat) {
+      menuItems.push({
+        key: 'shareToWechat',
+        label: '分享到微信',
+        icon: <ShareAltOutlined />,
+        onClick: (e: any) => {
+          onShareToWechat(record);
+          e.domEvent.stopPropagation();
+        },
+      });
+    }
+
+    if (onClearCache && record.fileType !== 'folder') {
+      menuItems.push({
+        key: 'clearCache',
+        label: '清理缓存',
+        icon: <ClearOutlined />,
+        onClick: (e: any) => {
+          onClearCache(record);
+          e.domEvent.stopPropagation();
+        },
+      });
+    }
+
+    menuItems.push({
+      key: 'delete',
+      label: '删除',
+      icon: <DeleteOutlined />,
+      danger: true,
+      onClick: (e: any) => {
+        onDelete(record.id);
+        e.domEvent.stopPropagation();
+      },
+    });
+  }
+
+  const isContextMenuMode = open !== undefined;
+
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [menuPosition, setMenuPosition] = useState({ left: 0, top: 0 });
+
+  useLayoutEffect(() => {
+    if (!isContextMenuMode || !open || !position || !menuRef.current) {
+      return;
+    }
+
+    const viewportPadding = 8;
+    const menuWidth = menuRef.current.offsetWidth || 160;
+    const menuHeight = menuRef.current.offsetHeight || 192;
+    const maxLeft = window.innerWidth - menuWidth - viewportPadding;
+    const maxTop = window.innerHeight - menuHeight - viewportPadding;
+
+    setMenuPosition({
+      left: Math.max(viewportPadding, Math.min(position.x, maxLeft)),
+      top: Math.max(viewportPadding, Math.min(position.y, maxTop)),
+    });
+  }, [isContextMenuMode, open, position]);
+
+  if (isContextMenuMode && open) {
+    return (
+      <div
+        className="fixed z-50"
+        style={{
+          left: menuPosition.left || position?.x || 0,
+          top: menuPosition.top || position?.y || 0,
+          minWidth: 160,
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <div ref={menuRef}>
+          <Menu
+            items={menuItems}
+            mode="vertical"
+            style={{
+              borderRadius: 6,
+              boxShadow: '0 2px 8px rgb(var(--shadow-color) / 0.15)',
+              background: 'rgb(var(--color-surface))',
+              border: '1px solid rgb(var(--color-border))',
+              padding: '4px 0',
+              fontSize: '14px',
+              minWidth: 160,
+              maxHeight: 'calc(100vh - 16px)',
+              overflowY: 'auto',
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className}>
+      {/* {isMobile && (
+        <Dropdown
+          menu={{ items: menuItems }}
+          trigger={[trigger]}
+          placement={placement}
+        >
+          {trigger === 'click' ? (
+            <Button type="text" icon={<MoreOutlined />} onClick={(e) => e.stopPropagation()} />
+          ) : (
+            <div />
+          )}
+        </Dropdown>)} */}
+    </div>
+  );
+};
+
+export const FileContextMenu = memo(FileContextMenuComponent);