@spacecorexdev/core 0.0.2 → 0.0.5

package/src/ui/FileManager/FileTableView.tsx

@@ -0,0 +1,405 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { useLongPress } from '../../hooks/useLongPress';
+import { Table, Dropdown, MenuProps, TableProps, Tag } from 'antd';
+import type { SortOrder } from 'antd/es/table/interface';
+import { ProjectFile, FileSortBy } from './types';
+import { formatDatetime, formatDisksize } from '../../utils/formatters';
+import { uiFilePreview } from '../UIFilePreview/index';
+import { FileContextMenu } from './FileContextMenu';
+import { CheckOutlined, CloudOutlined, WarningOutlined, LinkOutlined } from '@ant-design/icons';
+import { getDisplayName } from './utils/fileUtils';
+import { sortTree } from './utils/fileTree';
+
+interface FileTableViewProps {
+  dataSource: ProjectFile[];
+  expandedRowKeys: string[];
+  selectedFolderId: string | null;
+  dragOverId: string | null;
+  dragSourceId: string | null;
+  smallView: boolean;
+  isFolderExpanded: (folderId: string) => boolean;
+  onExpand: (expanded: boolean, record: ProjectFile) => void;
+  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;
+  onMove: (sourceId: string, targetId: string | null) => 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;
+}
+
+// antd 通过 sortDirections.indexOf(当前顺序) + 1 计算下一次排序；
+// 只给两个方向时，第三次点击会进入“取消排序”并丢失 columnKey，导致只能排序一次。
+// 末尾重复 ascend 可让顺序在“升序 → 降序 → 升序”之间无限循环。
+const SORT_DIRECTIONS: SortOrder[] = ['ascend', 'descend', 'ascend'];
+
+const NAME_COL_MIN_WIDTH = 120;
+const NAME_COL_DEFAULT_WIDTH = 400;
+
+interface ResizableTitleProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  width?: number;
+  onResizeStart?: (e: React.MouseEvent) => void;
+}
+
+// 可拖拽调宽的表头单元格：仅有 onResizeStart 的列（名称列）渲染拖拽手柄
+const ResizableTitle: React.FC<ResizableTitleProps> = (props) => {
+  const { width, onResizeStart, style, children, ...restProps } = props;
+  if (!width || !onResizeStart) {
+    return <th style={style} {...restProps}>{children}</th>;
+  }
+  return (
+    <th style={{ ...style, position: 'relative' }} {...restProps}>
+      {children}
+      <span
+        className="file-table-col-resizer"
+        onMouseDown={onResizeStart}
+        onClick={(e) => e.stopPropagation()}
+        onDoubleClick={(e) => e.stopPropagation()}
+      />
+    </th>
+  );
+};
+
+const FileTableViewComponent: React.FC<FileTableViewProps> = ({
+  dataSource,
+  expandedRowKeys,
+  selectedFolderId,
+  dragOverId,
+  dragSourceId,
+  smallView,
+  isFolderExpanded,
+  onExpand,
+  onPreview,
+  onDownload,
+  onCopyLink,
+  onRename,
+  onEditDescs,
+  onDelete,
+  onEdit,
+  onGenerateTempLink,
+  onMove,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  onRowContextMenu,
+  onMoveToProject,
+  onCopyToProject,
+  onCopyToSelf,
+  onViewVersionHistory,
+  onJumpToContract,
+  sortBy,
+  sortOrder,
+  onSortByChange,
+}) => {
+  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 sortedDataSource = useMemo(() => {
+    return sortTree(dataSource, sortBy, sortOrder);
+  }, [dataSource, sortBy, sortOrder]);
+
+  // 名称列宽度（表头右侧手柄拖拽调节）
+  const [nameColWidth, setNameColWidth] = useState(NAME_COL_DEFAULT_WIDTH);
+
+  const handleNameColResizeStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const startX = e.clientX;
+    const startWidth = nameColWidth;
+    const handleMove = (ev: MouseEvent) => {
+      setNameColWidth(Math.max(NAME_COL_MIN_WIDTH, startWidth + ev.clientX - startX));
+    };
+    const handleUp = () => {
+      document.removeEventListener('mousemove', handleMove);
+      document.removeEventListener('mouseup', handleUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+    document.addEventListener('mousemove', handleMove);
+    document.addEventListener('mouseup', handleUp);
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+  }, [nameColWidth]);
+
+  const handleTableChange: TableProps<ProjectFile>['onChange'] = (_pagination, _filters, sorter) => {
+    const active = Array.isArray(sorter) ? sorter[0] : sorter;
+    const by = active?.columnKey as FileSortBy | undefined;
+    if (by !== 'fileName' && by !== 'fileSize' && by !== 'uploadTime') return;
+    // 相同字段由上层切换升/降序：antd 第三次点击会给出“取消排序”，这里忽略 order，保证升序↔降序循环
+    onSortByChange(by);
+  };
+
+  // 表头排序箭头状态：仅当前排序字段显示箭头
+  const columnSortOrder = (by: FileSortBy): 'ascend' | 'descend' | null =>
+    sortBy === by ? (sortOrder === 'asc' ? 'ascend' : 'descend') : null;
+
+  const handleRowClick = (record: ProjectFile) => () => {
+    if (!wasLongPressed(record)) {
+      if (record.fileType === 'folder') {
+        onExpand(!isFolderExpanded(record.id), record);
+      }
+    }
+    resetLongPress(record);
+  };
+  const indentSize = smallView ? 12 : 16;
+
+  const columnsBase = [
+    {
+      title: '名称',
+      dataIndex: 'fileName',
+      key: 'fileName',
+      width: nameColWidth,
+      onHeaderCell: () => ({
+        width: nameColWidth,
+        onResizeStart: handleNameColResizeStart,
+      }),
+      sorter: true,
+      sortDirections: SORT_DIRECTIONS,
+      sortOrder: columnSortOrder('fileName'),
+      render: (fileName: string, record: ProjectFile) => (
+        <div
+          style={{ paddingLeft: `${record.level ? record.level * indentSize + 8 : 8}px`, minWidth: 0, opacity: (record.isContractSubfolder || record.isContractLink) && record.contractSigned === false ? 0.55 : undefined }}
+          onContextMenu={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onRowContextMenu(e, record);
+          }}
+        >
+          <div className='flex items-center overflow-hidden'>
+            {uiFilePreview.getFileIcon({
+              fileName,
+              fileType: record.fileType,
+              isExpanded: isFolderExpanded(record.id),
+              isSecure: record.isSecure,
+              isVirtualContractFolder: record.isVirtualContractFolder,
+              isContractSubfolder: record.isContractSubfolder,
+              isContractTagFolder: record.isContractTagFolder,
+              contractSigned: record.contractSigned,
+            })}
+            {record.isContractLink && (
+              <LinkOutlined className='ml-1 text-green-600' style={{ fontSize: 12 }} />
+            )}
+            <span
+              className={`truncate ml-1 flex-1 ${record.isContractLink ? 'hover:underline cursor-pointer' : ''}`}
+              title={record.isContractLink ? `合同附件${record.descs ? `（${record.descs}）` : ''}` : getDisplayName(fileName, { isVirtualContractFolder: record.isVirtualContractFolder, isContractSubfolder: record.isContractSubfolder, descs: record.descs })}
+            >
+              {getDisplayName(fileName, { isVirtualContractFolder: record.isVirtualContractFolder, isContractSubfolder: record.isContractSubfolder, descs: record.descs })}
+            </span>
+            {record.isContractSubfolder && record.contractSigned === false && (
+              <Tag
+                className="ml-1"
+                style={{ marginInlineStart: 4 }}
+                title="该合同尚未签约，签约后盖章文件会显示在此文件夹中"
+              >
+                未签约
+              </Tag>
+            )}
+            {record.isLocalOnly && (
+              <Tag
+                icon={<CloudOutlined />}
+                color="orange"
+                className="ml-1"
+                style={{ marginInlineStart: 4 }}
+                title="仅保存在本地，尚未上传到服务器"
+              >
+                本地
+              </Tag>
+            )}
+            {!record.isLocalOnly && record.hasUnsyncedChanges && (
+              <Tag
+                icon={<WarningOutlined />}
+                color="warning"
+                className="ml-1"
+                style={{ marginInlineStart: 4 }}
+                title="本地有未同步的修改，重新上传后可与服务器一致"
+              >
+                未同步
+              </Tag>
+            )}
+            {record.hasLocalCache && (
+              <span className="ml-1 flex h-3 w-3 items-center justify-center rounded-full bg-green-600 text-white" title="已缓存到本地">
+                <CheckOutlined className="w-2 h-2" />
+              </span>
+            )}
+          </div>
+        </div>
+      ),
+    },
+    {
+      title: '大小',
+      dataIndex: 'fileSize',
+      key: 'fileSize',
+      width: 85,
+      className: 'font-thin',
+      sorter: true,
+      sortDirections: SORT_DIRECTIONS,
+      sortOrder: columnSortOrder('fileSize'),
+      render: (size: number) => (size == 0 ? '' : formatDisksize(size)),
+    },
+  ];
+
+  const columnsDesc =
+  {
+    title: '备注',
+    dataIndex: 'descs',
+    key: 'descs',
+    className: 'font-thin',
+    ellipsis: true,
+    render: (descs: string) => descs || '',
+  };
+
+  const columnsTablet = [
+    {
+      title: '上传人',
+      dataIndex: 'uploaderName',
+      key: 'uploaderName',
+      width: 80,
+      className: 'font-thin',
+    },
+    {
+      title: '上传时间',
+      dataIndex: 'uploadTime',
+      key: 'uploadTime',
+      width: 140,
+      className: 'font-thin',
+      sorter: true,
+      sortDirections: SORT_DIRECTIONS,
+      sortOrder: columnSortOrder('uploadTime'),
+      render: (date: Date) => formatDatetime(date),
+    },
+  ];
+
+
+  const columns = smallView
+    ? columnsBase
+    : columnsBase.concat(columnsTablet as any);
+
+  columns.push(columnsDesc as any);
+  
+  const getRowClassName = (record: ProjectFile) => {
+    if (record.fileType === 'folder' && record.id === selectedFolderId) {
+      return 'file-table-row-highlight';
+    }
+    if (record.fileType === 'folder' && dragOverId === record.id) {
+      return 'file-table-row-highlight';
+    }
+    return '';
+  };
+
+  return (
+    <div>
+      <Table
+        className='file-manager-table'
+        scroll={{ x: 800 }}
+        components={{ header: { cell: ResizableTitle } }}
+        columns={columns}
+        dataSource={sortedDataSource}
+        loading={false}
+        rowKey="id"
+        pagination={false}
+        size="small"
+        onChange={handleTableChange}
+        expandable={{
+          expandedRowKeys,
+          onExpand,
+          rowExpandable: (record: ProjectFile) => record.fileType === 'folder',
+        }}
+        expandIcon={() => null}
+      onRow={(record: ProjectFile) => ({
+        style: { cursor: 'pointer' },
+        title: record.isSecure ? '仅管理员可见' : getDisplayName(record.fileName, { isVirtualContractFolder: record.isVirtualContractFolder, isContractSubfolder: record.isContractSubfolder, descs: record.descs }),
+        draggable: !record.isContractLink && !record.isVirtualContractFolder && !record.isContractSubfolder && !record.isContractTagFolder,
+        onDragStart: (event) => {
+          if (record.isContractLink || record.isVirtualContractFolder || record.isContractSubfolder || record.isContractTagFolder) {
+            event.preventDefault();
+            return;
+          }
+          event.dataTransfer.setData('text/plain', record.id);
+          onDragStart(record.id);
+        },
+        onDragEnd: () => {
+          onDragEnd();
+        },
+        onDragOver: (event) => {
+          if (record.fileType === 'folder') {
+            event.preventDefault();
+            onDragOver(record.id);
+          }
+        },
+        onDragLeave: () => {
+          if (dragOverId === record.id) {
+            onDragLeave(record.id);
+          }
+        },
+        onDrop: (event) => {
+          if (record.fileType === 'folder') {
+            event.preventDefault();
+            const sourceId = event.dataTransfer.getData('text/plain');
+            if (sourceId) {
+              onDrop(sourceId, record.id);
+            }
+          }
+        },
+        onDoubleClick: () => {
+          if (record.fileType !== 'folder') {
+            onPreview(record);
+          }
+        },
+        onClick: handleRowClick(record),
+        onTouchStart: handleTouchStart(record),
+        onTouchMove: handleTouchMove(record),
+        onTouchEnd: handleTouchEnd(record),
+        onTouchCancel: handleTouchCancel(record),
+        onContextMenu: (event) => {
+          onRowContextMenu(event as any, record);
+        },
+      })}
+      rowClassName={getRowClassName}
+    />
+    </div>
+  );
+};
+
+export const FileTableView = memo(FileTableViewComponent);

package/src/ui/FileManager/FileToolbar.tsx

@@ -0,0 +1,119 @@
+import React, { useState, memo } from 'react';
+import { Button, Dropdown, Divider, UploadFile } from 'antd';
+import { FolderAddOutlined, FileMarkdownFilled, FileExcelFilled, FileWordFilled, CaretDownOutlined, FileTextFilled } from '@ant-design/icons';
+import { UIFileUpload } from '../UIFileUpload';
+import { UITableGridViewToggle } from '../UIViewToggle';
+import { Space } from 'antd';
+import { ProjectRole } from './types';
+
+interface FileToolbarProps {
+  currentUserRole: ProjectRole | null;
+  viewMode: 'table' | 'grid';
+  onToggleViewMode: (mode: 'table' | 'grid') => void;
+  onCreateFolder: () => void;
+  onCreateMarkdown: () => void;
+  onCreateRdoc: () => void;
+  onCreateExcel: () => void;
+  onCreateWord: () => void;
+  onUploadFiles: (fileList: UploadFile[], serverData: any) => Promise<void> | void;
+}
+
+const FileToolbarComponent: React.FC<FileToolbarProps> = ({
+  currentUserRole,
+  viewMode,
+  onToggleViewMode,
+  onCreateFolder,
+  onCreateMarkdown,
+  onCreateRdoc,
+  onCreateExcel,
+  onCreateWord,
+  onUploadFiles,
+}) => {
+  const [uploadFileList, setUploadFileList] = useState<UploadFile[]>([]);
+
+  // 项目所有者/管理员：可新建文件夹、文档并上传文件
+  const canManage = currentUserRole === ProjectRole.MANAGER || currentUserRole === ProjectRole.OWNER;
+  // 后端策略调整：普通成员也可以上传文件；仅查看者等其他角色保持只读
+  const canUpload = canManage || currentUserRole === ProjectRole.MEMBER;
+
+  return (
+    <Space>
+      {canManage && (
+        <Dropdown
+          menu={{
+            items: [
+              {
+                key: '1',
+                label: (
+                  <>
+                    <FolderAddOutlined className="text-blue-400 mr-1" /> 新建文件夹
+                  </>
+                ),
+                onClick: onCreateFolder,
+              },
+              {
+                key: '6',
+                label: (
+                  <>
+                    <FileTextFilled className="text-yellow-600 mr-1" /> 新建文档
+                  </>
+                ),
+                onClick: onCreateRdoc,
+              },
+              {
+                key: '2',
+                label: (
+                  <>
+                    <FileMarkdownFilled className="text-gray-800 mr-1" /> 新建Markdown
+                  </>
+                ),
+                onClick: onCreateMarkdown,
+              },
+              {
+                key: '3',
+                label: (
+                  <>
+                    <FileWordFilled className="text-blue-600 mr-1" /> 新建Word
+                  </>
+                ),
+                onClick: onCreateWord,
+              },
+              {
+                key: '5',
+                label: (
+                  <>
+                    <FileExcelFilled className="text-green-600 mr-1" /> 新建Excel
+                  </>
+                ),
+                onClick: onCreateExcel,
+              },
+            ],
+          }}
+          placement="bottom"
+        >
+          <Button type="text">
+            新建 <CaretDownOutlined />
+          </Button>
+        </Dropdown>
+      )}
+      {canUpload && (
+        <UIFileUpload
+          fileList={uploadFileList}
+          onFinish={async (fileList, serverData) => {
+            await onUploadFiles(fileList, serverData);
+            setUploadFileList([]);
+          }}
+          onChange={setUploadFileList}
+          multiple={false}
+        />
+      )}
+      <Divider type="vertical" />
+      <UITableGridViewToggle
+        viewMode={viewMode}
+        onToggle={onToggleViewMode}
+      />
+    </Space>
+  );
+};
+
+export const FileToolbar = memo(FileToolbarComponent);

package/src/ui/FileManager/FileVersionHistoryModal.tsx

@@ -0,0 +1,175 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Modal, Table, Spin, Empty, Button, Space, message } from 'antd';
+import { HistoryOutlined, DownloadOutlined, EyeOutlined, FileOutlined } from '@ant-design/icons';
+import { API } from '../../api/index';
+import { ResponseCode } from '../../api/_base';
+import { uiFilePreview, UIFilePreview } from '../UIFilePreview/index';
+import { ProjectFile } from './types';
+import { formatDatetime, formatDisksize } from '../../utils/formatters';
+import { ColumnsType } from 'antd/es/table';
+
+interface FileVersion {
+  id: string;
+  fileId: string;
+  fileSize: number;
+  fileResourcePath: string;
+  uploadTime: Date;
+  uploaderName: string;
+  uploadBy: string;
+}
+
+interface FileVersionHistoryModalProps {
+  visible: boolean;
+  file: ProjectFile | null;
+  onClose: () => void;
+}
+
+export const FileVersionHistoryModal: React.FC<FileVersionHistoryModalProps> = ({
+  visible,
+  file,
+  onClose,
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [versions, setVersions] = useState<FileVersion[]>([]);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [previewVisible, setPreviewVisible] = useState(false);
+
+  const loadVersions = useCallback(async () => {
+    if (!file) return;
+
+    setLoading(true);
+    try {
+      const res = await API.project.fileversion.listVersions({ fileId: file.id });
+      if (res.code === ResponseCode.SUCCESS && res.data) {
+        setVersions(res.data);
+      } else {
+        message.error('获取文件历史版本失败');
+      }
+    } catch (error) {
+      message.error('获取文件历史版本失败');
+    } finally {
+      setLoading(false);
+    }
+  }, [file]);
+
+  useEffect(() => {
+    if (visible && file) {
+      loadVersions();
+    } else {
+      setVersions([]);
+    }
+  }, [visible, file, loadVersions]);
+
+  const handlePreview = (version: FileVersion) => {
+    setPreviewUrl(version.fileResourcePath);
+    setPreviewVisible(true);
+  };
+
+  const handleDownload = (version: FileVersion) => {
+    uiFilePreview.downloadFile(version.fileResourcePath, undefined, version.fileId)
+      .catch(() => {
+        // downloadFile 内部已统一提示下载失败
+      });
+  };
+
+  const columns: ColumnsType<FileVersion> = [
+    {
+      title: '版本',
+      key: 'version',
+      width: 80,
+      render: (_: any, __: any, index: number) => (
+        <span className="text-blue-600">v{versions.length - index}</span>
+      ),
+    },
+    {
+      title: '文件大小',
+      dataIndex: 'fileSize',
+      key: 'fileSize',
+      width: 100,
+      render: (size: number) => formatDisksize(size),
+    },
+    {
+      title: '上传时间',
+      dataIndex: 'uploadTime',
+      key: 'uploadTime',
+      width: 160,
+      render: (time: Date) => formatDatetime(time),
+    },
+    {
+      title: '上传人',
+      dataIndex: 'uploaderName',
+      key: 'uploaderName',
+      width: 100,
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+      render: (_: any, record: FileVersion) => (
+        <Space>
+          <Button
+            type="text"
+            icon={<EyeOutlined />}
+            onClick={() => handlePreview(record)}
+            title="预览"
+          />
+          <Button
+            type="text"
+            icon={<DownloadOutlined />}
+            onClick={() => handleDownload(record)}
+            title="下载"
+          />
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <Modal
+        title={
+          <div className="flex items-center">
+            <HistoryOutlined className="mr-2" />
+            <span>文件历史版本 - {file?.fileName}</span>
+          </div>
+        }
+        open={visible}
+        onCancel={onClose}
+        footer={null}
+        width={720}
+        destroyOnHidden
+      >
+        <div className="py-4">
+          {loading ? (
+            <div className="flex justify-center items-center py-12">
+              <Spin />
+            </div>
+          ) : versions.length === 0 ? (
+            <Empty description="暂无历史版本" className="py-12" />
+          ) : (
+            <Table
+              columns={columns}
+              dataSource={versions}
+              rowKey="id"
+              pagination={false}
+              scroll={{ y: 400 }}
+              size="middle"
+            />
+          )}
+        </div>
+      </Modal>
+
+      {/* 文件预览 */}
+      <UIFilePreview
+        fileUrl={previewUrl}
+        fileName={file?.fileName}
+        visible={previewVisible}
+        onClose={() => setPreviewVisible(false)}
+        editable={false}
+        uploadPercent={undefined}
+      />
+    </>
+  );
+};
+
+export default FileVersionHistoryModal;