File Management Component

一个功能完整的React文件管理组件，支持文件上传、下载、删除、重命名、文件夹操作等功能。

特性

• 📁 文件和文件夹管理
• ⬆️ 文件上传
• ⬇️ 单文件和批量下载
• 🗑️ 文件删除
• ✏️ 文件重命名
• 📊 空间使用情况显示
• 📱 响应式设计

安装

npm install file-management-component
# 或
yarn add file-management-component

使用

基本使用

import React, { useState, useEffect } from 'react';
import FileManagement from 'file-management-component';
import 'file-management-component/styles/index.css';

function App() {
  const [files, setFiles] = useState([]);
  const [loading, setLoading] = useState(false);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [spaceUsage, setSpaceUsage] = useState(null);

  // 获取文件列表
  const fetchFiles = async () => {
    setLoading(true);
    try {
      const response = await fetch('/api/files');
      const data = await response.json();
      setFiles(data.files);
      setSpaceUsage(data.spaceUsage);
    } catch (error) {
      console.error('获取文件列表失败:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchFiles();
  }, []);

  // 上传文件
  const handleUpload = async (files) => {
    const formData = new FormData();
    files.forEach(file => formData.append('files', file));
    
    try {
      await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });
      fetchFiles(); // 刷新文件列表
    } catch (error) {
      console.error('上传失败:', error);
    }
  };

  // 下载文件
  const handleDownload = async (file) => {
    try {
      const response = await fetch(`/api/download/${file.name}`);
      const blob = await response.blob();
      
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = file.name;
      link.click();
      window.URL.revokeObjectURL(url);
    } catch (error) {
      console.error('下载失败:', error);
    }
  };

  // 删除文件
  const handleDelete = async (file) => {
    try {
      await fetch(`/api/delete/${file.name}`, { method: 'DELETE' });
      fetchFiles(); // 刷新文件列表
    } catch (error) {
      console.error('删除失败:', error);
    }
  };

  // 重命名文件
  const handleRename = async (file, newName) => {
    try {
      await fetch(`/api/rename`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ oldName: file.name, newName }),
      });
      fetchFiles(); // 刷新文件列表
    } catch (error) {
      console.error('重命名失败:', error);
    }
  };

  // 创建文件夹
  const handleCreateFolder = async (folderName) => {
    try {
      await fetch('/api/create-folder', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ folderName }),
      });
      fetchFiles(); // 刷新文件列表
    } catch (error) {
      console.error('创建文件夹失败:', error);
    }
  };

  return (
    <FileManagement
      data={files}
      loading={loading}
      spaceUsage={spaceUsage}
      currentPath={pathItems.join('/')}
      breadcrumbItems={breadcrumbItems}
      currentPage={pagination.current}
      onPageChange={handlePageChange}
      selectedRowKeys={selectedRowKeys}
      onSelectionChange={setSelectedRowKeys}
      isCreatingFolder={isCreatingFolder}
      onStartCreateFolder={handleStartCreateFolder}
      onCancelCreateFolder={handleCancelCreateFolder}
      userInfo={userInfo}
      // 回调函数
      uploadProps={uploadProps}
      onDownload={handleDownload}
      onBatchDownload={handleBatchDownload}
      onDelete={handleDelete}
      onRename={handleRename}
      onCreateFolder={handleCreateFolder}
      onFolderClick={handleFolderClick}
      onPathChange={handlePathChange}
      // 显示控制
      showBatchDownload={true}
      showSpaceUsage={true}
      showCreatorColumn={false}
      showDeleteButton={true}
      showUpload={true}
      showRename={true}
      showCopyPath={true}
      showDownloadFolder={true}
    />
  );
}

export default App;

API

FileManagement Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | data | FileItem[] | [] | 文件列表数据 | | loading | boolean | false | 加载状态 | | showBatchDownload | boolean | true | 是否显示批量下载按钮 | | showSpaceUsage | boolean | true | 是否显示空间使用情况 | | showCreatorColumn | boolean | false | 是否显示创建者列 | | showDeleteButton | boolean | true | 是否显示删除按钮 | | showUpload | boolean | true | 是否显示上传功能 | | showRename | boolean | true | 是否显示重命名功能 | | showCopyPath | boolean | true | 是否显示复制路径功能 | | showDownloadFolder | boolean | true | 是否显示下载文件夹功能 | | spaceUsage | SpaceUsage | - | 空间使用情况 | | currentPath | string | '' | 当前路径 | | selectedRowKeys | string[] | [] | 选中的行键 | | onSelectionChange | function | - | 选择变化回调 | | onUpload | function | - | 上传回调 | | onDownload | function | - | 下载回调 | | onBatchDownload | function | - | 批量下载回调 | | onDelete | function | - | 删除回调 | | onRename | function | - | 重命名回调 | | onCreateFolder | function | - | 创建文件夹回调 | | onFolderClick | function | - | 文件夹点击回调 |

数据类型

interface FileItem {
  id?: string;
  name: string;
  type: 'file' | 'directory';
  size: number | string;
  modified_time: string;
  author?: string;
}

interface SpaceUsage {
  space_usage_bytes: number;
  total_space_bytes?: number;
  full_path: string;
}

样式自定义

组件使用CSS类名，可以通过覆盖CSS来自定义样式：

.file-management-component {
  /* 自定义组件容器样式 */
}

.file-management-header {
  /* 自定义头部样式 */
}

.file-action-link {
  /* 自定义操作链接样式 */
}

许可证

MIT