speed up DICOM slice previews

WebSite/src/App.tsx

@@ -72,26 +72,39 @@ const API_BASE = typeof window === 'undefined'
 
 function LibraryDicomPreview({ item }: { item: LibraryItem }) {
   const [sliceIndex, setSliceIndex] = useState(Math.max(0, Math.floor((item.fileCount || 1) / 2)));
+  const [requestedSliceIndex, setRequestedSliceIndex] = useState(sliceIndex);
   const [previewImage, setPreviewImage] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
   const count = Math.max(1, item.fileCount || 1);
 
   useEffect(() => {
-    setSliceIndex(Math.max(0, Math.floor((item.fileCount || 1) / 2)));
+    const middleIndex = Math.max(0, Math.floor((item.fileCount || 1) / 2));
+    setSliceIndex(middleIndex);
+    setRequestedSliceIndex(middleIndex);
   }, [item.id, item.fileCount]);
 
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      setRequestedSliceIndex(sliceIndex);
+    }, 120);
+    return () => window.clearTimeout(timer);
+  }, [sliceIndex]);
+
   useEffect(() => {
     const controller = new AbortController();
     setIsLoading(true);
     setError('');
-    fetch(`${API_BASE}/api/library/preview?id=${encodeURIComponent(item.id)}&index=${sliceIndex}`, {
+    fetch(`${API_BASE}/api/library/preview?id=${encodeURIComponent(item.id)}&index=${requestedSliceIndex}`, {
       signal: controller.signal
     })
       .then(async response => {
         const data = await response.json();
         if (!response.ok) throw new Error(data.error || '预览生成失败');
-        setPreviewImage(data.image);
+        setPreviewImage(`${API_BASE}${data.imageUrl}`);
+        (data.neighbors || []).forEach((url: string) => {
+          fetch(`${API_BASE}${url}`, { signal: controller.signal }).catch(() => {});
+        });
       })
       .catch(error => {
         if ((error as Error).name !== 'AbortError') setError((error as Error).message);
@@ -100,7 +113,7 @@ function LibraryDicomPreview({ item }: { item: LibraryItem }) {
         if (!controller.signal.aborted) setIsLoading(false);
       });
     return () => controller.abort();
-  }, [item.id, sliceIndex]);
+  }, [item.id, requestedSliceIndex]);
 
   return (
     <div className="h-52 bg-slate-950 relative flex items-center justify-center border-b border-slate-100 shadow-inner overflow-hidden">