lin

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,

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<string>('');
     const [uploadedFileName, setUploadedFileName] = useState<string>('');
+    const [fileNameMap, setFileNameMap] = useState<Record<string, string>>({});
+    const [uploadedFiles, setUploadedFiles] = useState<{id: string, name: string}[]>([]);
+    const [isDragging, setIsDragging] = useState(false);
+    const dropRef = useRef<HTMLDivElement>(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<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
+    }, []);
+
+    const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+    }, []);
+
+    const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
+    }, []);
+
+    const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+        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,42 +174,103 @@ export default function DeptSettingPage() {
                     {/* 文件上传区域 */}
                     <div style={{ marginBottom: '40px' }}>
                         <h3>第一步：上传文件</h3>
-                        <div style={{ 
+                        <div 
+                            ref={dropRef}
+                            onDragEnter={handleDragEnter}
+                            onDragOver={handleDragOver}
+                            onDragLeave={handleDragLeave}
+                            onDrop={handleDrop}
+                            style={{ 
                                 padding: '20px',
-                            border: '2px dashed #d9d9d9',
+                                border: `2px dashed ${isDragging ? '#1890ff' : '#d9d9d9'}`,
                                 borderRadius: '8px',
-                            textAlign: 'center'
+                                textAlign: 'center',
-                        }}>
+                                backgroundColor: isDragging ? 'rgba(24, 144, 255, 0.05)' : 'transparent',
+                                transition: 'all 0.3s',
+                                marginBottom: '20px'
+                            }}
+                        >
+                            <InboxOutlined style={{ fontSize: '48px', color: isDragging ? '#1890ff' : '#d9d9d9' }} />
+                            <p>点击或拖拽文件到此区域进行上传</p>
+                            <p style={{ fontSize: '12px', color: '#888' }}>支持单个或批量上传文件</p>
+                            
                             <input
                                 type="file"
                                 id="file-input"
                                 style={{ display: 'none' }}
                                 onChange={(e) => {
-                                    const file = e.target.files?.[0];
+                                    const files = e.target.files;
-                                    if (file) {
+                                    if (files && files.length > 0) {
-                                        handleFileSelect(file);
+                                        handleFilesUpload(files);
                                     }
                                 }}
                                 disabled={isUploading}
+                                multiple
                             />
                             <label 
                                 htmlFor="file-input"
                                 style={{
                                     display: 'inline-block',
-                                    padding: '12px 24px',
+                                    padding: '8px 16px',
                                     backgroundColor: '#1890ff',
                                     color: 'white',
-                                    borderRadius: '6px',
+                                    borderRadius: '4px',
                                     cursor: 'pointer',
+                                    marginTop: '10px'
                                 }}
                             >
                                 <UploadOutlined /> 选择文件
                             </label>
+                        </div>
+
+                        {/* 已上传文件列表 */}
+                        {uploadedFiles.length > 0 && (
+                            <div style={{ 
+                                border: '1px solid #f0f0f0', 
+                                borderRadius: '4px',
+                                overflow: 'hidden'
+                            }}>
+                                {uploadedFiles.map((file, index) => (
+                                    <div key={file.id} style={{ 
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        padding: '10px 15px',
+                                        borderBottom: index < uploadedFiles.length - 1 ? '1px solid #f0f0f0' : 'none',
+                                        backgroundColor: index % 2 === 0 ? '#fafafa' : 'white'
+                                    }}>
+                                        <div style={{ 
+                                            display: 'flex', 
+                                            alignItems: 'center',
+                                            flex: 1
+                                        }}>
+                                            <div style={{ 
+                                                width: '20px', 
+                                                height: '20px', 
+                                                borderRadius: '50%', 
+                                                backgroundColor: '#52c41a',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                marginRight: '10px'
+                                            }}>
+                                                <span style={{ color: 'white', fontSize: '12px' }}>✓</span>
+                                            </div>
+                                            <span>{file.name}</span>
+                                        </div>
+                                        <Button 
+                                            type="text" 
+                                            icon={<DeleteOutlined style={{ color: '#ff4d4f' }} />} 
+                                            onClick={() => handleDeleteFile(index)}
+                                        />
+                                    </div>
+                                ))}
+                            </div>
+                        )}
 
                         {isUploading && (
                             <div style={{ marginTop: '20px' }}>
                                 <Progress 
-                                        percent={Object.values(uploadProgress)[0] || 0} 
+                                    percent={Math.round(Object.values(uploadProgress)[0] || 0)} 
                                     status="active" 
                                 />
                             </div>
@@ -165,7 +282,6 @@ export default function DeptSettingPage() {
                             </div>
                         )}
                     </div>
-                    </div>
 
                     {/* 生成分享码区域 */}
                     {uploadedFileId && (