@spacecorexdev/core 0.0.2 → 0.0.5

package/src/ui/FileManager/FileGridView.tsx

@@ -0,0 +1,529 @@
+import React, { memo, useMemo, useEffect } from 'react';
+import { useLongPress } from '../../hooks/useLongPress';
+import { Button } from 'antd';
+import { ProjectFile, FileSortBy } from './types';
+import { formatDisksize } from '../../utils/formatters';
+import { uiFilePreview } from '../UIFilePreview/index';
+import { FileContextMenu } from './FileContextMenu';
+import { htmlNoData } from '../../utils/htmlUtils';
+import { CheckOutlined, WarningOutlined, CloudOutlined, LinkOutlined, SortAscendingOutlined, SortDescendingOutlined } from '@ant-design/icons';
+import { getDisplayName } from './utils/fileUtils';
+import { sortTree } from './utils/fileTree';
+
+interface FileGridViewProps {
+  dataSource: ProjectFile[];
+  selectedFolderId: string | null;
+  dragOverId: string | null;
+  dragSourceId: string | null;
+  isFolderExpanded: (folderId: string) => boolean;
+  smallView: boolean;
+  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;
+  /** 切换当前目录（传入文件夹 ID，null 表示根目录） */
+  onFolderChange: (folderId: string | null) => void;
+  onMove: (sourceId: string, targetId: string) => void;
+  onDragStart: (fileId: string) => void;
+  onDragEnd: () => void;
+  onDragOver: (fileId: string) => void;
+  onDragLeave: (fileId: string) => void;
+  onDrop: (sourceId: string, targetId: string) => void;
+  onRowContextMenu: (event: React.MouseEvent, record: ProjectFile) => void;
+  /** 移动到其他项目回调 */
+  onMoveToProject?: (file: ProjectFile) => void;
+  /** 复制到其他项目回调 */
+  onCopyToProject?: (file: ProjectFile) => void;
+  /** 复制副本回调 */
+  onCopyToSelf?: (file: ProjectFile) => void;
+  /** 查看文件历史版本回调 */
+  onViewVersionHistory?: (file: ProjectFile) => void;
+  /** 跳转至合同回调 */
+  onJumpToContract?: (file: ProjectFile) => void;
+  /** 排序字段 */
+  sortBy: FileSortBy;
+  /** 排序顺序 */
+  sortOrder: 'asc' | 'desc';
+  /** 切换排序字段回调（如果是相同字段则切换顺序） */
+  onSortByChange: (by: FileSortBy) => void;
+  /** 切换排序顺序回调 */
+  onSortOrderToggle: () => void;
+}
+
+interface FileGridItemProps {
+  item: ProjectFile;
+  level: number;
+  selectedFolderId: string | null;
+  dragOverId: string | null;
+  isFolderExpanded: (folderId: string) => boolean;
+  smallView: boolean;
+  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;
+  onToggleExpand: (record: ProjectFile) => void;
+  onMove: (sourceId: string, targetId: string) => void;
+  onDragStart: (fileId: string) => void;
+  onDragEnd: () => void;
+  onDragOver: (fileId: string) => void;
+  onDragLeave: (fileId: string) => void;
+  onDrop: (sourceId: string, targetId: string) => void;
+  onRowContextMenu: (event: React.MouseEvent, record: ProjectFile) => void;
+ /** 移动到其他项目回调 */
+  onMoveToProject?: (file: ProjectFile) => void;
+  /** 复制到其他项目回调 */
+  onCopyToProject?: (file: ProjectFile) => void;
+  /** 复制副本回调 */
+  onCopyToSelf?: (file: ProjectFile) => void;
+  /** 查看文件历史版本回调 */
+  onViewVersionHistory?: (file: ProjectFile) => void;
+  /** 跳转至合同回调 */
+  onJumpToContract?: (file: ProjectFile) => void;
+}
+
+const FileGridItem: React.FC<FileGridItemProps> = ({
+  item,
+  level,
+  selectedFolderId,
+  dragOverId,
+  isFolderExpanded,
+  smallView,
+  onPreview,
+  onDownload,
+  onDownloadFolder,
+  onCopyLink,
+  onRename,
+  onEditDescs,
+  onDelete,
+  onEdit,
+  onGenerateTempLink,
+  onToggleExpand,
+  onMove,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  onRowContextMenu,
+  onMoveToProject,
+  onCopyToProject,
+  onCopyToSelf,
+  onViewVersionHistory,
+  onJumpToContract,
+}) => {
+  const { handleTouchStart, handleTouchMove, handleTouchEnd, handleTouchCancel, wasLongPressed, resetLongPress } = useLongPress<ProjectFile>(
+    (record, e) => {
+      const touch = e.touches[0];
+      const mockEvent = {
+        preventDefault: () => {},
+        stopPropagation: () => {},
+        clientX: touch.clientX,
+        clientY: touch.clientY,
+      } as unknown as React.MouseEvent;
+      onRowContextMenu(mockEvent, record);
+    },
+    { delay: 500, smallView }
+  );
+
+  const getItemClass = () => {
+    const classes = [
+      'relative',
+      'p-4',
+      'rounded-lg',
+      'cursor-pointer',
+      'hover:bg-tableHover',
+      'hover:-translate-y-px',
+      'hover:shadow-sm',
+      'transition-all',
+      'duration-200',
+    ];
+    
+    if (item.fileType === 'folder' && item.id === selectedFolderId) {
+      classes.push('bg-blue-100');
+    } else if (item.fileType === 'folder' && dragOverId === item.id) {
+      classes.push('bg-blue-50');
+    }
+    
+    return classes.join(' ');
+  };
+
+  const getItemTitle = () => {
+    let title = '位置：' + (item.filePath === '/' ? '/' : item.filePath.slice(0, item.filePath.length - 1));
+    if (item.isSecure) {
+      title += '（仅管理员可见）';
+    }
+    if (item.isContractLink) {
+      title += '（合同附件）';
+    }
+    if (item.isContractSubfolder && item.contractSigned === false) {
+      title += '（未签约）';
+    }
+    return title;
+  };
+
+  /** 未签约的合同子文件夹/附件：整体弱化显示 */
+  const isUnsignedContractItem = (item.isContractSubfolder || item.isContractLink) && item.contractSigned === false;
+
+  const handleDragOver = (e: React.DragEvent) => {
+    if (item.fileType === 'folder') {
+      e.preventDefault();
+      onDragOver(item.id);
+    }
+  };
+
+  const handleDragLeave = () => {
+    if (dragOverId === item.id) {
+      onDragLeave(item.id);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    if (item.fileType === 'folder') {
+      e.preventDefault();
+      const sourceId = e.dataTransfer.getData('text/plain');
+      if (sourceId) {
+        onMove(sourceId, item.id);
+      }
+      onDragLeave(item.id);
+    }
+  };
+
+  const handleDoubleClick = () => {
+    if (item.fileType !== 'folder') {
+      onPreview(item);
+    }
+  };
+
+  const handleClick = () => {
+    if (!wasLongPressed(item)) {
+      if (item.fileType === 'folder') {
+        onToggleExpand(item);
+      }
+    }
+    resetLongPress(item);
+  };
+
+  return (
+    <div
+      key={item.id}
+      title={getItemTitle()}
+      className={getItemClass()}
+      style={{ marginLeft: `${level * 16}px`, opacity: isUnsignedContractItem ? 0.55 : undefined }}
+      draggable={!item.isContractLink && !item.isVirtualContractFolder && !item.isContractSubfolder && !item.isContractTagFolder}
+      onDragStart={(e) => {
+        if (item.isContractLink || item.isVirtualContractFolder || item.isContractSubfolder || item.isContractTagFolder) {
+          e.preventDefault();
+          return;
+        }
+        e.dataTransfer.setData('text/plain', item.id);
+        onDragStart(item.id);
+      }}
+      onDragEnd={() => {
+        onDragEnd();
+      }}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      onDoubleClick={handleDoubleClick}
+      onClick={handleClick}
+      onTouchStart={handleTouchStart(item)}
+      onTouchMove={handleTouchMove(item)}
+      onTouchEnd={handleTouchEnd(item)}
+      onTouchCancel={handleTouchCancel(item)}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onRowContextMenu(e, item);
+      }}
+    >
+      <div className="flex flex-col items-center text-center">
+        <div className="relative mb-2">
+          <div className="text-4xl">
+            {uiFilePreview.getFileIcon({
+              fileName: item.fileName,
+              fileType: item.fileType,
+              isExpanded: isFolderExpanded(item.id),
+              isSecure: item.isSecure,
+              isVirtualContractFolder: item.isVirtualContractFolder,
+              isContractSubfolder: item.isContractSubfolder,
+              isContractTagFolder: item.isContractTagFolder,
+              contractSigned: item.contractSigned,
+              size: 32,
+            })}
+          </div>
+          {item.isContractLink && (
+            <span
+              className="absolute -top-1 -left-1 flex h-4 w-4 items-center justify-center rounded-full text-white text-[10px] shadow-sm"
+              style={{ backgroundColor: '#52c41a' }}
+              title="合同附件"
+            >
+              <LinkOutlined />
+            </span>
+          )}
+          {item.isLocalOnly && (
+            <span
+              className="absolute -top-1 -left-1 flex h-4 w-4 items-center justify-center rounded-full text-white text-[10px] shadow-sm"
+              style={{ backgroundColor: '#fa8c16' }}
+              title="仅保存在本地，尚未上传到服务器"
+            >
+              <CloudOutlined />
+            </span>
+          )}
+          {!item.isLocalOnly && item.hasUnsyncedChanges && (
+            <span
+              className="absolute -top-1 -left-1 flex h-4 w-4 items-center justify-center rounded-full text-white text-[10px] shadow-sm"
+              style={{ backgroundColor: '#faad14' }}
+              title="本地有未同步的修改，重新上传后可与服务器一致"
+            >
+              <WarningOutlined className="w-2.5 h-2.5" />
+            </span>
+          )}
+          {item.hasLocalCache && (
+            <span className="absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center rounded-full bg-green-600 text-white text-xs">
+              <CheckOutlined className="w-2 h-2" />
+            </span>
+          )}
+        </div>
+        <div
+          className={`text-sm w-full`}
+          style={{
+            display: '-webkit-box',
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            wordBreak: 'break-all',
+            lineHeight: '1.3em',
+            maxHeight: '2.6em',
+          }}
+          title={item.isContractLink ? `合同附件${item.descs ? `（${item.descs}）` : ''}` : getDisplayName(item.fileName, { isVirtualContractFolder: item.isVirtualContractFolder, isContractSubfolder: item.isContractSubfolder, descs: item.descs })}
+        >
+          {item.isLocalOnly && (
+            <span
+              className="mr-1 inline-flex items-center text-[10px] px-1 rounded"
+              style={{ backgroundColor: '#fff7e6', color: '#d46b08', border: '1px solid #ffd591' }}
+            >
+              本地
+            </span>
+          )}
+          {!item.isLocalOnly && item.hasUnsyncedChanges && (
+            <span
+              className="mr-1 inline-flex items-center text-[10px] px-1 rounded"
+              style={{ backgroundColor: '#fffbe6', color: '#ad6800', border: '1px solid #ffe58f' }}
+            >
+              未同步
+            </span>
+          )}
+          {item.isContractSubfolder && item.contractSigned === false && (
+            <span
+              className="mr-1 inline-flex items-center text-[10px] px-1 rounded"
+              style={{ backgroundColor: '#f3f4f6', color: '#6b7280', border: '1px solid #d1d5db' }}
+            >
+              未签约
+            </span>
+          )}
+          <span className="text-sm">{getDisplayName(item.fileName, { isVirtualContractFolder: item.isVirtualContractFolder, isContractSubfolder: item.isContractSubfolder, descs: item.descs })}</span>
+        </div>
+        <div className="text-xs text-gray-400 mt-1">
+          {item.fileSize > 0 ? formatDisksize(item.fileSize) : ''}
+        </div>
+      </div>
+      <FileContextMenu
+        record={item}
+        onPreview={onPreview}
+        onDownload={onDownload}
+        onDownloadFolder={onDownloadFolder}
+        onCopyLink={onCopyLink}
+        onRename={onRename}
+        onEditDescs={onEditDescs}
+        onDelete={onDelete}
+        onEdit={onEdit}
+        onGenerateTempLink={onGenerateTempLink}
+        onMoveToProject={onMoveToProject}
+        onCopyToProject={onCopyToProject}
+        onCopyToSelf={onCopyToSelf}
+        onViewVersionHistory={onViewVersionHistory}
+        onJumpToContract={onJumpToContract}
+        trigger="click"
+        placement="bottomRight"
+        className="absolute top-2 right-2 z-10"
+      />
+    </div>
+  );
+};
+
+const FileGridViewComponent: React.FC<FileGridViewProps> = ({
+  dataSource,
+  selectedFolderId,
+  dragOverId,
+  isFolderExpanded,
+  smallView,
+  onPreview,
+  onDownload,
+  onDownloadFolder,
+  onCopyLink,
+  onRename,
+  onEditDescs,
+  onDelete,
+  onEdit,
+  onGenerateTempLink,
+  onFolderChange,
+  onMove,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  onRowContextMenu,
+  onMoveToProject,
+  onCopyToProject,
+  onCopyToSelf,
+  onViewVersionHistory,
+  onJumpToContract,
+  sortBy,
+  sortOrder,
+  onSortByChange,
+  onSortOrderToggle,
+}) => {
+  // 排序后的数据
+  const sortedDataSource = useMemo(() => {
+    return sortTree(dataSource, sortBy, sortOrder);
+  }, [dataSource, sortBy, sortOrder]);
+
+  // 建立 id → 节点映射，用于按当前目录取子项
+  const folderMap = useMemo(() => {
+    const map = new Map<string, ProjectFile>();
+    const walk = (items: ProjectFile[]) => {
+      items.forEach((item) => {
+        map.set(item.id, item);
+        if (item.children && item.children.length > 0) {
+          walk(item.children);
+        }
+      });
+    };
+    walk(sortedDataSource);
+    return map;
+  }, [sortedDataSource]);
+
+  // selectedFolderId 为空表示根目录；进入目录后只展示该目录下的文件夹与文件
+  const currentFolder = selectedFolderId ? folderMap.get(selectedFolderId) : undefined;
+  const displayItems = currentFolder ? currentFolder.children || [] : sortedDataSource;
+
+  // 当前目录已不存在（如数据刷新、排序方式变化导致目录重建）时回到根目录
+  useEffect(() => {
+    if (selectedFolderId && !folderMap.has(selectedFolderId)) {
+      onFolderChange(null);
+    }
+  }, [selectedFolderId, folderMap, onFolderChange]);
+
+  const renderGridItems = (items: ProjectFile[]): React.ReactNode[] => {
+    return items.map((item) => (
+      <FileGridItem
+        key={item.id}
+        item={item}
+        level={0}
+        selectedFolderId={selectedFolderId}
+        dragOverId={dragOverId}
+        isFolderExpanded={isFolderExpanded}
+        smallView={smallView}
+        onPreview={onPreview}
+        onDownload={onDownload}
+        onDownloadFolder={onDownloadFolder}
+        onCopyLink={onCopyLink}
+        onRename={onRename}
+        onEditDescs={onEditDescs}
+        onDelete={onDelete}
+        onEdit={onEdit}
+        onGenerateTempLink={onGenerateTempLink}
+        onToggleExpand={(record) => onFolderChange(record.id)}
+        onMove={onMove}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+        onRowContextMenu={onRowContextMenu}
+        onMoveToProject={onMoveToProject}
+        onCopyToProject={onCopyToProject}
+        onCopyToSelf={onCopyToSelf}
+        onViewVersionHistory={onViewVersionHistory}
+        onJumpToContract={onJumpToContract}
+      />
+    ));
+  };
+
+  return dataSource.length == 0
+    ? (<div className="flex items-center justify-center">{htmlNoData()}</div>)
+    : (
+      <div>
+        {/* 排序控制栏 */}
+        <div className="flex items-center gap-2 mb-2 mt-2 px-2 flex-wrap">
+          <Button
+            type={sortBy === 'fileName' ? 'primary' : 'default'}
+            size="small"
+            onClick={() => onSortByChange('fileName')}
+            style={{ touchAction: 'manipulation' }}
+          >
+            按名称
+          </Button>
+          <Button
+            type={sortBy === 'fileType' ? 'primary' : 'default'}
+            size="small"
+            onClick={() => onSortByChange('fileType')}
+            style={{ touchAction: 'manipulation' }}
+          >
+            按类型
+          </Button>
+          <Button
+            type={sortBy === 'fileSize' ? 'primary' : 'default'}
+            size="small"
+            onClick={() => onSortByChange('fileSize')}
+            style={{ touchAction: 'manipulation' }}
+          >
+            按大小
+          </Button>
+          <Button
+            type={sortBy === 'uploadTime' ? 'primary' : 'default'}
+            size="small"
+            onClick={() => onSortByChange('uploadTime')}
+            style={{ touchAction: 'manipulation' }}
+          >
+            按时间
+          </Button>
+          <Button
+            type="text"
+            size="small"
+            icon={sortOrder === 'asc' ? <SortAscendingOutlined /> : <SortDescendingOutlined />}
+            onClick={onSortOrderToggle}
+            title={sortOrder === 'asc' ? '升序（点击切换为降序）' : '降序（点击切换为升序）'}
+            style={{ touchAction: 'manipulation' }}
+          >
+            {sortOrder === 'asc' ? '升序' : '降序'}
+          </Button>
+        </div>
+        <div className="grid grid-cols-3 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 xl:grid-cols-12 p-4">
+          {renderGridItems(displayItems)}
+          {currentFolder && displayItems.length === 0 && (
+            <div className="col-span-full text-center text-sm text-gray-400 py-6">该目录为空</div>
+          )}
+        </div>
+      </div>
+    );
+};
+
+export const FileGridView = memo(FileGridViewComponent);