fix(file-upload): 优化文件上传逻辑并防止重复添加

- 更新服务器端文件上传处理逻辑，避免重复发送事件
- 客户端优化文件上传组件，防止重复添加文件
- 调整文件列表更新策略，支持文件更新
- 优化上传区域样式，提升用户体验

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);

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 {

src/components/FileUpload.tsx

@@ -22,6 +22,8 @@ export const FileUpload: React.FC<FileUploadProps> = ({ 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<FileUploadProps> = ({ onUploadComplete }) => {
                   <Lock className="w-6 h-6 text-orange-600" />
                 </div>
               )}
-              <Upload className={`w-12 h-12 ${!isAuthenticated ? 'text-orange-600' : 'text-muted-foreground'}`} />
+              <div className="flex justify-center">
+                <Upload className={`w-12 h-12 ${!isAuthenticated ? 'text-orange-600' : 'text-muted-foreground/70'}`} />
+              </div>
               <div className="space-y-2">
                 <p className="text-lg font-medium">
                   {isAuthenticated ? '拖拽文件到此处上传' : '需要登录后才能上传文件'}

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 }) => {

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) {