diff --git a/apps/server/src/upload/share-code.service.ts b/apps/server/src/upload/share-code.service.ts index 6dfebc6..dd1d538 100644 --- a/apps/server/src/upload/share-code.service.ts +++ b/apps/server/src/upload/share-code.service.ts @@ -63,9 +63,7 @@ export class ShareCodeService { }, }); } - this.logger.log(`Generated share code ${code} for file ${fileId}`); - return { code, expiresAt, diff --git a/apps/web/src/app/main/admin/deptsettingpage/page.tsx b/apps/web/src/app/main/admin/deptsettingpage/page.tsx index 7bfd279..40a307a 100644 --- a/apps/web/src/app/main/admin/deptsettingpage/page.tsx +++ b/apps/web/src/app/main/admin/deptsettingpage/page.tsx @@ -1,15 +1,19 @@ import { useTusUpload } from "@web/src/hooks/useTusUpload"; import { ShareCodeGenerator } from "../sharecode/sharecodegenerator"; import { ShareCodeValidator } from "../sharecode/sharecodevalidator"; -import { useState } from "react"; +import { useState, useRef, useCallback } from "react"; import { message, Progress, Button, Tabs } from "antd"; -import { UploadOutlined } from "@ant-design/icons"; +import { UploadOutlined, DeleteOutlined, InboxOutlined } from "@ant-design/icons"; const { TabPane } = Tabs; export default function DeptSettingPage() { const [uploadedFileId, setUploadedFileId] = useState(''); const [uploadedFileName, setUploadedFileName] = useState(''); + const [fileNameMap, setFileNameMap] = useState>({}); + const [uploadedFiles, setUploadedFiles] = useState<{id: string, name: string}[]>([]); + const [isDragging, setIsDragging] = useState(false); + const dropRef = useRef(null); // 使用您的 useTusUpload hook const { uploadProgress, isUploading, uploadError, handleFileUpload } = useTusUpload({ @@ -33,6 +37,17 @@ export default function DeptSettingPage() { setUploadedFileId(result.fileId); setUploadedFileName(result.fileName); + + // 添加到已上传文件列表 + setUploadedFiles(prev => [...prev, {id: result.fileId, name: file.name}]); + + // 在前端保存文件名映射(用于当前会话) + setFileNameMap(prev => ({ + ...prev, + [result.fileId]: file.name + })); + + // 上传成功后保存原始文件名到数据库 try { console.log('正在保存文件名到数据库:', result.fileName, '对应文件ID:', result.fileId); @@ -71,6 +86,47 @@ export default function DeptSettingPage() { ); }; + // 处理多个文件上传 + const handleFilesUpload = (files: FileList | File[]) => { + Array.from(files).forEach(file => { + handleFileSelect(file); + }); + }; + + // 拖拽相关处理函数 + const handleDragEnter = useCallback((e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + setIsDragging(true); + }, []); + + const handleDragLeave = useCallback((e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + setIsDragging(false); + }, []); + + const handleDragOver = useCallback((e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + setIsDragging(true); + }, []); + + const handleDrop = useCallback((e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + setIsDragging(false); + + if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { + handleFilesUpload(e.dataTransfer.files); + } + }, []); + + // 删除文件 + const handleDeleteFile = (index: number) => { + setUploadedFiles(prev => prev.filter((_, i) => i !== index)); + }; + // 处理分享码生成成功 const handleShareSuccess = (code: string) => { message.success('分享码生成成功:' + code); @@ -118,53 +174,113 @@ export default function DeptSettingPage() { {/* 文件上传区域 */}

第一步:上传文件

-
+
+ +

点击或拖拽文件到此区域进行上传

+

支持单个或批量上传文件

+ { - const file = e.target.files?.[0]; - if (file) { - handleFileSelect(file); + const files = e.target.files; + if (files && files.length > 0) { + handleFilesUpload(files); } }} disabled={isUploading} + multiple /> - - {isUploading && ( -
- -
- )} - - {uploadError && ( -
- {uploadError} -
- )}
+ + {/* 已上传文件列表 */} + {uploadedFiles.length > 0 && ( +
+ {uploadedFiles.map((file, index) => ( +
+
+
+ +
+ {file.name} +
+
+ ))} +
+ )} + + {isUploading && ( +
+ +
+ )} + + {uploadError && ( +
+ {uploadError} +
+ )}
{/* 生成分享码区域 */}