feat: 文件下载/上传

napcat.webui/src/pages/dashboard/file_manager.tsx

@@ -2,10 +2,13 @@ import { BreadcrumbItem, Breadcrumbs } from '@heroui/breadcrumbs'
 import { Button } from '@heroui/button'
 import { Input } from '@heroui/input'
 import type { Selection, SortDescriptor } from '@react-types/shared'
+import clsx from 'clsx'
+import { motion } from 'motion/react'
 import path from 'path-browserify'
 import { useEffect, useState } from 'react'
+import { useDropzone } from 'react-dropzone'
 import toast from 'react-hot-toast'
-import { FiMove, FiPlus } from 'react-icons/fi'
+import { FiDownload, FiMove, FiPlus, FiUpload } from 'react-icons/fi'
 import { MdRefresh } from 'react-icons/md'
 import { TbTrash } from 'react-icons/tb'
 import { TiArrowBack } from 'react-icons/ti'
@@ -13,6 +16,7 @@ import { useLocation, useNavigate } from 'react-router-dom'
 
 import CreateFileModal from '@/components/file_manage/create_file_modal'
 import FileEditModal from '@/components/file_manage/file_edit_modal'
+import FilePreviewModal from '@/components/file_manage/file_preview_modal'
 import FileTable from '@/components/file_manage/file_table'
 import MoveModal from '@/components/file_manage/move_modal'
 import RenameModal from '@/components/file_manage/rename_modal'
@@ -49,6 +53,8 @@ export default function FileManagerPage() {
   const [renamingFile, setRenamingFile] = useState<string>('')
   const [moveTargetPath, setMoveTargetPath] = useState('')
   const [jumpPath, setJumpPath] = useState('')
+  const [previewFile, setPreviewFile] = useState<string>('')
+  const [showUpload, setShowUpload] = useState<boolean>(false)
 
   const sortFiles = (files: FileInfo[], descriptor: typeof sortDescriptor) => {
     return [...files].sort((a, b) => {
@@ -266,6 +272,62 @@ export default function FileManagerPage() {
     setIsMoveModalOpen(true)
   }
 
+  const handleDownload = (filePath: string) => {
+    FileManager.download(filePath)
+  }
+
+  const handleBatchDownload = async () => {
+    const selectedArray =
+      selectedFiles instanceof Set
+        ? Array.from(selectedFiles)
+        : files.map((f) => f.name)
+    if (selectedArray.length === 0) return
+    const paths = selectedArray.map((key) =>
+      path.join(currentPath, key.toString())
+    )
+    await FileManager.batchDownload(paths)
+  }
+
+  const handlePreview = (filePath: string) => {
+    setPreviewFile(filePath)
+  }
+
+  const onDrop = async (acceptedFiles: File[]) => {
+    try {
+      // 遍历处理文件，保持文件夹结构
+      const processedFiles = acceptedFiles.map((file) => {
+        const relativePath = file.webkitRelativePath || file.name
+        // 不需要额外的编码处理，浏览器会自动处理
+        return new File([file], relativePath, {
+          type: file.type,
+          lastModified: file.lastModified
+        })
+      })
+
+      toast
+        .promise(FileManager.upload(currentPath, processedFiles), {
+          loading: '正在上传文件...',
+          success: '上传成功',
+          error: '上传失败'
+        })
+        .then(() => {
+          loadFiles()
+        })
+    } catch (error) {
+      toast.error('上传失败')
+    }
+  }
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    noClick: true,
+    onDragOver: (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+    },
+    useFsAccessApi: false // 添加此选项以避免某些浏览器的文件系统API问题
+  })
+
   return (
     <div className="p-4">
       <div className="mb-4 flex items-center gap-4 sticky top-14 z-10 bg-content1 py-1">
@@ -302,6 +364,17 @@ export default function FileManagerPage() {
         >
           <MdRefresh />
         </Button>
+        <Button
+          color="danger"
+          size="sm"
+          isIconOnly
+          variant="flat"
+          onPress={() => setShowUpload((prev) => !prev)}
+          className="text-lg"
+        >
+          <FiUpload />
+        </Button>
+
         {((selectedFiles instanceof Set && selectedFiles.size > 0) ||
           selectedFiles === 'all') && (
           <>
@@ -332,6 +405,18 @@ export default function FileManagerPage() {
               {selectedFiles instanceof Set ? selectedFiles.size : files.length}
               )
             </Button>
+            <Button
+              color="danger"
+              size="sm"
+              variant="flat"
+              onPress={handleBatchDownload}
+              className="text-sm"
+              startContent={<FiDownload className="text-lg" />}
+            >
+              (
+              {selectedFiles instanceof Set ? selectedFiles.size : files.length}
+              )
+            </Button>
           </>
         )}
         <Breadcrumbs className="flex-1 shadow-small px-2 py-2 rounded-lg">
@@ -362,6 +447,26 @@ export default function FileManagerPage() {
         />
       </div>
 
+      <motion.div
+        initial={{ height: 0 }}
+        animate={{ height: showUpload ? 'auto' : 0 }}
+        transition={{ duration: 0.2 }}
+        className={clsx(
+          'border-dashed rounded-lg text-center',
+          isDragActive ? 'border-primary bg-primary/10' : 'border-default-300',
+          showUpload ? 'mb-4 border-2' : 'border-none'
+        )}
+        onDragOver={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+        }}
+      >
+        <div {...getRootProps()} className="w-full h-full p-4">
+          <input {...getInputProps()} multiple />
+          <p>拖拽文件或文件夹到此处上传，或点击选择文件</p>
+        </div>
+      </motion.div>
+
       <FileTable
         files={files}
         currentPath={currentPath}
@@ -372,6 +477,7 @@ export default function FileManagerPage() {
         onSelectionChange={setSelectedFiles}
         onDirectoryClick={handleDirectoryClick}
         onEdit={handleEdit}
+        onPreview={handlePreview}
         onRenameRequest={(name) => {
           setRenamingFile(name)
           setNewFileName(name)
@@ -380,6 +486,7 @@ export default function FileManagerPage() {
         onMoveRequest={handleMoveClick}
         onCopyPath={handleCopyPath}
         onDelete={handleDelete}
+        onDownload={handleDownload}
       />
 
       <FileEditModal
@@ -394,6 +501,12 @@ export default function FileManagerPage() {
         }
       />
 
+      <FilePreviewModal
+        isOpen={!!previewFile}
+        filePath={previewFile}
+        onClose={() => setPreviewFile('')}
+      />
+
       <CreateFileModal
         isOpen={isCreateModalOpen}
         fileType={fileType}