diff --git a/server.js b/server.js index fae0b43..3611d36 100644 --- a/server.js +++ b/server.js @@ -85,19 +85,19 @@ io.on('connection', (socket) => { io.emit('user:count', userCount); console.log(`User connected. Total users: ${userCount}`); - // Handle file upload events + // Handle file upload events (from client) socket.on('file:upload', (data) => { socket.broadcast.emit('file:uploaded', data); console.log('File uploaded:', data.filename); }); - // Handle file delete events + // Handle file delete events (from client) socket.on('file:delete', (data) => { socket.broadcast.emit('file:deleted', data); console.log('File deleted:', data.id); }); - // Handle file visibility toggle events + // Handle file visibility toggle events (from client) socket.on('file:toggle:visibility', (data) => { socket.broadcast.emit('file:visibility:changed', data); console.log('File visibility changed:', data.id, data.isVisible); diff --git a/src/app/globals.css b/src/app/globals.css index 47d2705..d431b58 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -64,7 +64,7 @@ } .upload-area { - @apply flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted/50 p-8 text-center transition-colors hover:border-muted-foreground/50 hover:bg-muted/75; + @apply flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted/50 p-8 text-center transition-colors hover:border-primary/80 hover:bg-muted/75; } .upload-area.drag-over { diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index db617f1..6020dcc 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -22,6 +22,8 @@ export const FileUpload: React.FC = ({ onUploadComplete }) => { const handleFileSelect = useCallback(async (file: File) => { const response = await uploadFile(file); if (response.success) { + // Don't call onUploadComplete here as the socket event will handle the update + // This prevents duplicate files from being added onUploadComplete?.(); } }, [uploadFile, onUploadComplete]); @@ -120,7 +122,9 @@ export const FileUpload: React.FC = ({ onUploadComplete }) => { )} - +
+ +

{isAuthenticated ? '拖拽文件到此处上传' : '需要登录后才能上传文件'} diff --git a/src/hooks/useFiles.ts b/src/hooks/useFiles.ts index c74665c..d937edf 100644 --- a/src/hooks/useFiles.ts +++ b/src/hooks/useFiles.ts @@ -109,7 +109,20 @@ export const useFiles = (initialParams?: FileQueryParams): UseFilesReturn => { if (!socket) return; const handleFileUploaded = (newFile: File) => { - setFiles(prev => [newFile, ...prev]); + setFiles(prev => { + // Check if file already exists by ID + const existingFileIndex = prev.findIndex(file => file.id === newFile.id); + + if (existingFileIndex >= 0) { + // File exists, replace it with the new one (in case of updates) + const updatedFiles = [...prev]; + updatedFiles[existingFileIndex] = newFile; + return updatedFiles; + } else { + // File doesn't exist, add it to the beginning + return [newFile, ...prev]; + } + }); }; const handleFileDeleted = (data: { id: number }) => { diff --git a/src/hooks/useUpload.ts b/src/hooks/useUpload.ts index b6de81c..d6c3a90 100644 --- a/src/hooks/useUpload.ts +++ b/src/hooks/useUpload.ts @@ -58,9 +58,8 @@ export const useUpload = (): UseUploadReturn => { const response = await uploadPromise; - if (response.success && socket) { - socket.emit('file:upload', response.file); - } + // The socket server will emit the file:uploaded event via HTTP request + // No need to emit it here to avoid duplicates return response; } catch (err) {