2026-04-29-22-49-38 - 修复WebSocket连接+项目状态异常+导入按钮无响应+后端WS路由

src/components/ProjectLibrary.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { UploadCloud, Film, Settings2, MoreHorizontal, Plus, Loader2 } from 'lucide-react';
 import { cn } from '../lib/utils';
 import { useStore } from '../store/useStore';
-import { getProjects, createProject } from '../lib/api';
+import { getProjects, createProject, uploadMedia } from '../lib/api';
 import type { Project } from '../store/useStore';
 
 interface ProjectLibraryProps {
@@ -19,6 +19,7 @@ export function ProjectLibrary({ onProjectSelect }: ProjectLibraryProps) {
   const [showModal, setShowModal] = useState(false);
   const [newName, setNewName] = useState('');
   const [newDesc, setNewDesc] = useState('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     setIsLoading(true);
@@ -74,10 +75,36 @@ export function ProjectLibrary({ onProjectSelect }: ProjectLibraryProps) {
             <Plus size={18} />
             <span>新建项目</span>
           </button>
-          <button className="flex items-center gap-2 bg-cyan-600 hover:bg-cyan-500 text-white px-5 py-2.5 rounded-lg font-medium text-sm transition-colors border border-cyan-500 shadow-lg shadow-cyan-900/20">
+          <button
+            onClick={() => fileInputRef.current?.click()}
+            className="flex items-center gap-2 bg-cyan-600 hover:bg-cyan-500 text-white px-5 py-2.5 rounded-lg font-medium text-sm transition-colors border border-cyan-500 shadow-lg shadow-cyan-900/20"
+          >
             <UploadCloud size={18} />
             <span>导入多媒体资源</span>
           </button>
+          <input
+            type="file"
+            ref={fileInputRef}
+            className="hidden"
+            accept="video/*,image/*,.dcm"
+            onChange={async (e) => {
+              const file = e.target.files?.[0];
+              if (!file) return;
+              try {
+                setIsLoading(true);
+                const result = await uploadMedia(file);
+                alert(`上传成功: ${file.name}\n已保存至: ${result.url}`);
+                const data = await getProjects();
+                setProjects(data);
+              } catch (err) {
+                console.error('Upload failed:', err);
+                alert('上传失败，请检查后端服务');
+              } finally {
+                setIsLoading(false);
+                if (fileInputRef.current) fileInputRef.current.value = '';
+              }
+            }}
+          />
         </div>
       </div>
 
@@ -102,10 +129,12 @@ export function ProjectLibrary({ onProjectSelect }: ProjectLibraryProps) {
                      {proj.fps || '30FPS'}
                    </span>
                    <span className="backdrop-blur-md bg-black/40 text-gray-200 text-[10px] px-2 py-1 rounded border border-white/10 flex items-center gap-1 uppercase tracking-widest">
-                     {proj.status === 'Ready' ? (
+                     {proj.status === 'Ready' || proj.status === 'ready' ? (
                        <><div className="w-1.5 h-1.5 bg-emerald-500 rounded-full" /> 已就绪</>
-                     ) : proj.status === 'Parsing' ? (
+                     ) : proj.status === 'Parsing' || proj.status === 'parsing' ? (
                        <><div className="w-1.5 h-1.5 bg-amber-500 rounded-full animate-pulse" /> 解析拆帧中</>
+                     ) : proj.status === 'pending' || proj.status === 'Pending' ? (
+                       <><div className="w-1.5 h-1.5 bg-blue-500 rounded-full" /> 待处理</>
                      ) : (
                        <><div className="w-1.5 h-1.5 bg-red-500 rounded-full" /> 异常</>
                      )}

src/lib/websocket.ts

@@ -20,7 +20,7 @@ class ProgressWebSocket {
   private shouldReconnect = false;
   private currentInterval = 3000;
 
-  constructor(url = 'ws://localhost:8000/ws/progress') {
+  constructor(url = 'ws://192.168.3.11:8000/ws/progress') {
     this.url = url;
   }