2026-05-04-05-20-16 优化DICOM切片下载和3D预览

WebSite/server.ts

@@ -87,7 +87,11 @@ function listFiles(dir: string, extension: string) {
     .readdirSync(dir, { withFileTypes: true })
     .filter((entry) => entry.isFile() && entry.name.toLowerCase().endsWith(extension))
     .map((entry) => entry.name)
-    .sort((a, b) => a.localeCompare(b, 'zh-Hans-CN'));
+    .sort(naturalFileCompare);
+}
+
+function naturalFileCompare(a: string, b: string) {
+  return a.localeCompare(b, 'zh-Hans-CN', { numeric: true, sensitivity: 'base' });
 }
 
 function publicUser(user: UserRecord) {
@@ -279,7 +283,7 @@ function getProjectDicomFiles(project: ProjectRecord) {
   if (project.id !== 'head-ct-demo') {
     return [];
   }
-  return listFiles(dicomDir, '.dcm').sort((a, b) => Number.parseInt(a) - Number.parseInt(b));
+  return listFiles(dicomDir, '.dcm');
 }
 
 function readAsciiValue(buffer: Buffer, start: number, length: number) {
@@ -375,10 +379,12 @@ function parseDicomPreview(filePath: string, mode: DicomDisplayMode = 'default')
     pixels[i] = normalized;
   }
 
+  const enhancedPixels = enhanceDicomEdges(pixels, columns, rows);
+
   return {
     width: columns,
     height: rows,
-    pixels: pixels.toString('base64'),
+    pixels: enhancedPixels.toString('base64'),
     windowCenter,
     windowWidth,
     mode,
@@ -440,10 +446,13 @@ function createReformattedPreview(files: string[], plane: Exclude<DicomPlane, 'a
     }
   });
 
+  const cropped = cropDicomContent(pixels, outputWidth, outputHeight);
+  const enhancedPixels = enhanceDicomEdges(cropped.pixels, cropped.width, cropped.height);
+
   return {
-    width: outputWidth,
-    height: outputHeight,
-    pixels: pixels.toString('base64'),
+    width: cropped.width,
+    height: cropped.height,
+    pixels: enhancedPixels.toString('base64'),
     windowCenter: volume.windowCenter,
     windowWidth: volume.windowWidth,
     slice: clampedSlice,
@@ -453,6 +462,71 @@ function createReformattedPreview(files: string[], plane: Exclude<DicomPlane, 'a
   };
 }
 
+function enhanceDicomEdges(pixels: Buffer, width: number, height: number) {
+  if (width < 3 || height < 3) {
+    return pixels;
+  }
+
+  const output = Buffer.from(pixels);
+  for (let y = 1; y < height - 1; y += 1) {
+    for (let x = 1; x < width - 1; x += 1) {
+      const index = y * width + x;
+      const center = pixels[index];
+      const neighborAverage = (
+        pixels[index - 1] +
+        pixels[index + 1] +
+        pixels[index - width] +
+        pixels[index + width]
+      ) / 4;
+      const sharpened = Math.round(center * 1.08 + (center - neighborAverage) * 0.55);
+      output[index] = Math.max(0, Math.min(255, sharpened));
+    }
+  }
+  return output;
+}
+
+function cropDicomContent(pixels: Buffer, width: number, height: number) {
+  const threshold = 12;
+  const columnHits = Array.from({ length: width }, () => 0);
+  const rowHits = Array.from({ length: height }, () => 0);
+
+  for (let y = 0; y < height; y += 1) {
+    for (let x = 0; x < width; x += 1) {
+      if (pixels[y * width + x] > threshold) {
+        columnHits[x] += 1;
+        rowHits[y] += 1;
+      }
+    }
+  }
+
+  const minColumnHits = Math.max(4, Math.floor(height * 0.012));
+  const minRowHits = Math.max(4, Math.floor(width * 0.012));
+  let minX = columnHits.findIndex((hits) => hits >= minColumnHits);
+  let maxX = width - 1 - [...columnHits].reverse().findIndex((hits) => hits >= minColumnHits);
+  let minY = rowHits.findIndex((hits) => hits >= minRowHits);
+  let maxY = height - 1 - [...rowHits].reverse().findIndex((hits) => hits >= minRowHits);
+
+  if (maxX < minX || maxY < minY) {
+    return { pixels, width, height };
+  }
+
+  const padding = 18;
+  minX = Math.max(0, minX - padding);
+  minY = Math.max(0, minY - padding);
+  maxX = Math.min(width - 1, maxX + padding);
+  maxY = Math.min(height - 1, maxY + padding);
+
+  const croppedWidth = maxX - minX + 1;
+  const croppedHeight = maxY - minY + 1;
+  const croppedPixels = Buffer.alloc(croppedWidth * croppedHeight);
+  for (let row = 0; row < croppedHeight; row += 1) {
+    const sourceStart = (minY + row) * width + minX;
+    pixels.copy(croppedPixels, row * croppedWidth, sourceStart, sourceStart + croppedWidth);
+  }
+
+  return { pixels: croppedPixels, width: croppedWidth, height: croppedHeight };
+}
+
 function createStlPreview(filePath: string, fileName: string, limit: number) {
   const cacheKey = `${fileName}:${limit}`;
   const cached = modelPreviewCache.get(cacheKey);
@@ -503,6 +577,52 @@ function createStlPreview(filePath: string, fileName: string, limit: number) {
   return payload;
 }
 
+function writeOctal(buffer: Buffer, value: number, offset: number, length: number) {
+  const text = value.toString(8).padStart(length - 1, '0').slice(-(length - 1));
+  buffer.write(`${text}\0`, offset, length, 'ascii');
+}
+
+function createTarEntryHeader(name: string, size: number, mtime: number) {
+  const header = Buffer.alloc(512);
+  const safeName = name.slice(0, 100);
+  header.write(safeName, 0, 100, 'utf8');
+  writeOctal(header, 0o644, 100, 8);
+  writeOctal(header, 0, 108, 8);
+  writeOctal(header, 0, 116, 8);
+  writeOctal(header, size, 124, 12);
+  writeOctal(header, Math.floor(mtime), 136, 12);
+  header.fill(' ', 148, 156);
+  header.write('0', 156, 1, 'ascii');
+  header.write('ustar', 257, 6, 'ascii');
+  header.write('00', 263, 2, 'ascii');
+
+  let checksum = 0;
+  for (const byte of header) {
+    checksum += byte;
+  }
+  writeOctal(header, checksum, 148, 8);
+  return header;
+}
+
+function createDicomTarGz(files: string[]) {
+  const chunks: Buffer[] = [];
+
+  files.forEach((fileName) => {
+    const filePath = path.join(dicomDir, fileName);
+    const stat = fs.statSync(filePath);
+    const data = fs.readFileSync(filePath);
+    chunks.push(createTarEntryHeader(`Head_CT_DICOM/${fileName}`, data.length, stat.mtimeMs / 1000));
+    chunks.push(data);
+    const remainder = data.length % 512;
+    if (remainder > 0) {
+      chunks.push(Buffer.alloc(512 - remainder));
+    }
+  });
+
+  chunks.push(Buffer.alloc(1024));
+  return zlib.gzipSync(Buffer.concat(chunks));
+}
+
 async function startServer() {
   const app = express();
   const host = process.argv.includes('--host') ? process.argv[process.argv.indexOf('--host') + 1] : '0.0.0.0';
@@ -655,6 +775,30 @@ async function startServer() {
     }
   });
 
+  app.get('/api/projects/:projectId/dicom-archive', (req, res) => {
+    const project = findProject(readState(), req.params.projectId);
+    if (!project) {
+      res.status(404).json({ message: '项目不存在' });
+      return;
+    }
+
+    const files = getProjectDicomFiles(project);
+    if (!files.length) {
+      res.status(404).json({ message: '当前项目没有可下载的 DICOM 文件' });
+      return;
+    }
+
+    try {
+      const archive = createDicomTarGz(files);
+      const filename = `${project.id}-${project.dicomPath || 'DICOM'}-${files.length}-files.tar.gz`;
+      res.setHeader('Content-Type', 'application/gzip');
+      res.setHeader('Content-Disposition', `attachment; filename="${filename}"`);
+      res.send(archive);
+    } catch (error) {
+      res.status(500).json({ message: error instanceof Error ? error.message : 'DICOM 压缩包生成失败' });
+    }
+  });
+
   app.get('/api/projects/:projectId/models/:fileName', (req, res) => {
     const project = findProject(readState(), req.params.projectId);
     const fileName = path.basename(req.params.fileName);

WebSite/src/components/ProjectLibrary.tsx

@@ -3,10 +3,14 @@ import {
   Plus, 
   Search, 
   Eye, 
+  FileArchive,
   RotateCw, 
+  RotateCcw,
   Box,
   Image as ImageIcon,
   ChevronRight,
+  ChevronUp,
+  ChevronDown,
   Edit2,
   FolderRoot,
   Download,
@@ -17,7 +21,7 @@ import {
 } from 'lucide-react';
 import * as THREE from 'three';
 import { DicomPreview, Project } from '../types';
-import { api, downloadMask } from '../lib/api';
+import { api, downloadDicomArchive, downloadMask } from '../lib/api';
 
 type Plane = 'axial' | 'sagittal' | 'coronal';
 type DisplayMode = DicomPreview['mode'];
@@ -42,8 +46,9 @@ function drawFallbackModelPreview(
   previews: Array<{ payload: ModelPreviewPayload; style: ModuleStyle }>,
 ) {
   const rect = canvas.getBoundingClientRect();
-  const width = Math.max(Math.floor(rect.width), 1);
-  const height = Math.max(Math.floor(rect.height), 1);
+  const parentRect = canvas.parentElement?.getBoundingClientRect();
+  const width = Math.max(Math.floor(rect.width || parentRect?.width || 720), 1);
+  const height = Math.max(Math.floor(rect.height || parentRect?.height || 460), 1);
   canvas.width = width * window.devicePixelRatio;
   canvas.height = height * window.devicePixelRatio;
   canvas.style.width = `${width}px`;
@@ -100,7 +105,56 @@ function drawFallbackModelPreview(
   context.globalAlpha = 1;
 }
 
-function DicomCanvas({ preview }: { preview: DicomPreview }) {
+function drawDicomPreviewToCanvas(canvas: HTMLCanvasElement, preview: DicomPreview, rotation: number) {
+  const normalizedRotation = ((rotation % 360) + 360) % 360;
+  const sourceCanvas = document.createElement('canvas');
+  sourceCanvas.width = preview.width;
+  sourceCanvas.height = preview.height;
+  const sourceContext = sourceCanvas.getContext('2d');
+  const targetContext = canvas.getContext('2d');
+  if (!sourceContext || !targetContext) {
+    return;
+  }
+
+  const binary = atob(preview.pixels);
+  const imageData = sourceContext.createImageData(preview.width, preview.height);
+  for (let i = 0; i < binary.length; i += 1) {
+    const value = binary.charCodeAt(i);
+    const offset = i * 4;
+    imageData.data[offset] = value;
+    imageData.data[offset + 1] = value;
+    imageData.data[offset + 2] = value;
+    imageData.data[offset + 3] = 255;
+  }
+  sourceContext.putImageData(imageData, 0, 0);
+
+  const isQuarterTurn = normalizedRotation === 90 || normalizedRotation === 270;
+  canvas.width = isQuarterTurn ? preview.height : preview.width;
+  canvas.height = isQuarterTurn ? preview.width : preview.height;
+  targetContext.clearRect(0, 0, canvas.width, canvas.height);
+  targetContext.save();
+  targetContext.imageSmoothingEnabled = true;
+
+  if (normalizedRotation === 90) {
+    targetContext.translate(canvas.width, 0);
+    targetContext.rotate(Math.PI / 2);
+  } else if (normalizedRotation === 180) {
+    targetContext.translate(canvas.width, canvas.height);
+    targetContext.rotate(Math.PI);
+  } else if (normalizedRotation === 270) {
+    targetContext.translate(0, canvas.height);
+    targetContext.rotate(-Math.PI / 2);
+  }
+
+  targetContext.drawImage(sourceCanvas, 0, 0);
+  targetContext.restore();
+}
+
+function safeFilePart(value: string) {
+  return value.trim().replace(/[^\u4e00-\u9fa5a-zA-Z0-9._-]+/g, '-').replace(/^-+|-+$/g, '') || 'dicom';
+}
+
+function DicomCanvas({ preview, rotation }: { preview: DicomPreview; rotation: number }) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
 
   useEffect(() => {
@@ -108,30 +162,13 @@ function DicomCanvas({ preview }: { preview: DicomPreview }) {
     if (!canvas) {
       return;
     }
-    const context = canvas.getContext('2d');
-    if (!context) {
-      return;
-    }
-
-    const binary = atob(preview.pixels);
-    const imageData = context.createImageData(preview.width, preview.height);
-    for (let i = 0; i < binary.length; i += 1) {
-      const value = binary.charCodeAt(i);
-      const offset = i * 4;
-      imageData.data[offset] = value;
-      imageData.data[offset + 1] = value;
-      imageData.data[offset + 2] = value;
-      imageData.data[offset + 3] = 255;
-    }
-    context.putImageData(imageData, 0, 0);
-  }, [preview]);
+    drawDicomPreviewToCanvas(canvas, preview, rotation);
+  }, [preview, rotation]);
 
   return (
     <canvas
       ref={canvasRef}
-      width={preview.width}
-      height={preview.height}
-      className="max-h-full max-w-full object-contain rounded-xl shadow-2xl"
+      className="max-h-full max-w-full object-contain rounded-xl bg-black shadow-2xl ring-1 ring-white/25"
     />
   );
 }
@@ -167,6 +204,8 @@ function NativeStlViewer({
     const scene = new THREE.Scene();
     scene.background = new THREE.Color('#f8fafc');
     const camera = new THREE.PerspectiveCamera(45, Math.max(container.clientWidth, 1) / Math.max(container.clientHeight, 1), 0.1, 1000);
+    camera.position.set(4.5, 3.5, 5);
+    camera.lookAt(0, 0, 0);
     let renderer: THREE.WebGLRenderer | null = null;
     try {
       renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
@@ -265,10 +304,16 @@ function NativeStlViewer({
             const box = new THREE.Box3().setFromObject(group);
             const center = box.getCenter(new THREE.Vector3());
             const size = box.getSize(new THREE.Vector3());
-            group.position.sub(center);
             const maxSize = Math.max(size.x, size.y, size.z) || 1;
-            group.scale.setScalar(4 / maxSize);
-            camera.position.set(4.5, 3.5, 5);
+            group.traverse((object) => {
+              if (object instanceof THREE.Mesh) {
+                object.geometry.translate(-center.x, -center.y, -center.z);
+                object.geometry.computeBoundingSphere();
+                object.geometry.computeVertexNormals();
+              }
+            });
+            group.position.set(0, 0, 0);
+            group.scale.setScalar(4.2 / maxSize);
             camera.lookAt(0, 0, 0);
             setStatus(failed ? `完成，${failed} 个模型加载失败` : '模型加载完成');
           }
@@ -350,6 +395,7 @@ export default function ProjectLibrary({ onReverse }: { onReverse: (projId: stri
   const [sliceIndex, setSliceIndex] = useState(0);
   const [plane, setPlane] = useState<Plane>('axial');
   const [displayMode, setDisplayMode] = useState<DisplayMode>('default');
+  const [rotation, setRotation] = useState(0);
   const [moduleStyles, setModuleStyles] = useState<Record<string, ModuleStyle>>({});
   const [dicomPreview, setDicomPreview] = useState<DicomPreview | null>(null);
   const [dicomError, setDicomError] = useState('');
@@ -359,6 +405,7 @@ export default function ProjectLibrary({ onReverse }: { onReverse: (projId: stri
   const [editingProjectId, setEditingProjectId] = useState('');
   const [editingName, setEditingName] = useState('');
   const [actionMessage, setActionMessage] = useState('');
+  const sliceRepeatRef = useRef<number | null>(null);
 
   const refreshProjects = () => {
     setLoading(true);
@@ -400,6 +447,7 @@ export default function ProjectLibrary({ onReverse }: { onReverse: (projId: stri
     { id: 'contrast', label: '高对比' },
   ];
   const allModulesVisible = stlFiles.length > 0 && stlFiles.every((file) => moduleStyles[file]?.visible !== false);
+  const sliceTotal = dicomPreview?.total ?? selectedProject?.dicomCount ?? 0;
 
   useEffect(() => {
     const next: Record<string, ModuleStyle> = {};
@@ -439,6 +487,19 @@ export default function ProjectLibrary({ onReverse }: { onReverse: (projId: stri
       cancelled = true;
     };
   }, [selectedProject?.id, selectedProject?.dicomCount, sliceIndex, plane, displayMode, viewMode]);
+
+  useEffect(() => () => {
+    if (sliceRepeatRef.current !== null) {
+      window.clearInterval(sliceRepeatRef.current);
+    }
+  }, []);
+
+  useEffect(() => {
+    const max = Math.max(sliceTotal - 1, 0);
+    if (sliceIndex > max) {
+      setSliceIndex(max);
+    }
+  }, [sliceIndex, sliceTotal]);
   
   const updateModuleStyle = (fileName: string, partial: Partial<ModuleStyle>) => {
     setModuleStyles(prev => ({
@@ -468,6 +529,49 @@ export default function ProjectLibrary({ onReverse }: { onReverse: (projId: stri
     });
   };
 
+  const stepSlice = (delta: number) => {
+    setSliceIndex((current) => {
+      const max = Math.max((dicomPreview?.total ?? selectedProject?.dicomCount ?? 1) - 1, 0);
+      return Math.max(0, Math.min(max, current + delta));
+    });
+  };
+
+  const stopSliceStep = () => {
+    if (sliceRepeatRef.current !== null) {
+      window.clearInterval(sliceRepeatRef.current);
+      sliceRepeatRef.current = null;
+    }
+  };
+
+  const startSliceStep = (delta: number) => {
+    stopSliceStep();
+    stepSlice(delta);
+    sliceRepeatRef.current = window.setInterval(() => stepSlice(delta), 110);
+  };
+
+  const rotateDicom = (delta: number) => {
+    setRotation((current) => ((current + delta) % 360 + 360) % 360);
+  };
+
+  const downloadCurrentDicomPng = () => {
+    if (!dicomPreview || !selectedProject) {
+      setActionMessage('当前没有可下载的 DICOM 图片');
+      return;
+    }
+
+    const canvas = document.createElement('canvas');
+    drawDicomPreviewToCanvas(canvas, dicomPreview, rotation);
+    const link = document.createElement('a');
+    const planeLabel = planeOptions.find((option) => option.id === plane)?.label ?? plane;
+    const modeLabel = displayModes.find((mode) => mode.id === displayMode)?.label ?? displayMode;
+    link.href = canvas.toDataURL('image/png');
+    link.download = `${safeFilePart(selectedProject.name)}_${planeLabel}_slice-${dicomPreview.slice + 1}-of-${dicomPreview.total}_${modeLabel}_rot-${rotation}.png`;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setActionMessage('已生成当前 DICOM 图片 PNG');
+  };
+
   const handleCreateProject = async () => {
     const name = newProjectName.trim();
     if (!name) {
@@ -712,6 +816,22 @@ export default function ProjectLibrary({ onReverse }: { onReverse: (projId: stri
                         </button>
                       ))}
                     </div>
+                    <div className="absolute top-28 right-4 z-10 flex rounded-lg bg-white/5 p-1 backdrop-blur-sm border border-white/10">
+                      <button
+                        onClick={() => rotateDicom(-90)}
+                        className="px-3 py-1.5 rounded-md text-[10px] font-bold text-white/60 hover:bg-white/10 hover:text-white transition-all flex items-center gap-1"
+                        title="左旋转 90°"
+                      >
+                        <RotateCcw size={12} /> 左转
+                      </button>
+                      <button
+                        onClick={() => rotateDicom(90)}
+                        className="px-3 py-1.5 rounded-md text-[10px] font-bold text-white/60 hover:bg-white/10 hover:text-white transition-all flex items-center gap-1"
+                        title="右旋转 90°"
+                      >
+                        <RotateCw size={12} /> 右转
+                      </button>
+                    </div>
                     <div className="absolute top-4 left-4 text-white/40 font-mono text-[10px] space-y-1">
                       <p>PATIENT ID: {selectedProject.id}_XYZ</p>
                       <p>SCAN DATE: {selectedProject.createTime}</p>
@@ -719,7 +839,7 @@ export default function ProjectLibrary({ onReverse }: { onReverse: (projId: stri
                     </div>
                     <div className="relative w-full h-full flex items-center justify-center">
                        {dicomPreview ? (
-                         <DicomCanvas preview={dicomPreview} />
+                         <DicomCanvas preview={dicomPreview} rotation={rotation} />
                        ) : (
                          <p className="text-white/30 text-xs font-mono uppercase tracking-widest">{dicomError || '正在解析 DICOM 像素...'}</p>
                        )}
@@ -733,18 +853,62 @@ export default function ProjectLibrary({ onReverse }: { onReverse: (projId: stri
                   <div className="w-24 h-full flex flex-col items-center py-4 bg-slate-50 rounded-2xl">
                     <span className="text-[10px] text-slate-400 font-bold mb-3">切片</span>
                     <span className="text-[10px] text-slate-500 font-bold mb-4 whitespace-nowrap">
-                      {sliceIndex + 1} / {dicomPreview?.total ?? selectedProject.dicomCount}
+                      {sliceIndex + 1} / {sliceTotal || selectedProject.dicomCount}
                     </span>
+                    <button
+                      onMouseDown={() => startSliceStep(1)}
+                      onMouseUp={stopSliceStep}
+                      onMouseLeave={stopSliceStep}
+                      onTouchStart={(event) => {
+                        event.preventDefault();
+                        startSliceStep(1);
+                      }}
+                      onTouchEnd={stopSliceStep}
+                      className="mb-3 h-8 w-8 rounded-full bg-white text-slate-500 shadow-sm border border-slate-100 hover:text-blue-600 hover:border-blue-100 flex items-center justify-center"
+                      title="长按向上移动切片"
+                    >
+                      <ChevronUp size={16} />
+                    </button>
                     <input 
                       type="range"
                       min="0"
-                      max={Math.max((dicomPreview?.total ?? selectedProject.dicomCount) - 1, 0)}
+                      max={Math.max((sliceTotal || selectedProject.dicomCount) - 1, 0)}
                       value={sliceIndex}
                       onChange={(e) => setSliceIndex(Number(e.target.value))}
                       className="flex-1 w-6 accent-blue-600 cursor-pointer"
                       style={{ writingMode: 'vertical-lr', direction: 'rtl' }}
                     />
+                    <button
+                      onMouseDown={() => startSliceStep(-1)}
+                      onMouseUp={stopSliceStep}
+                      onMouseLeave={stopSliceStep}
+                      onTouchStart={(event) => {
+                        event.preventDefault();
+                        startSliceStep(-1);
+                      }}
+                      onTouchEnd={stopSliceStep}
+                      className="mt-3 h-8 w-8 rounded-full bg-white text-slate-500 shadow-sm border border-slate-100 hover:text-blue-600 hover:border-blue-100 flex items-center justify-center"
+                      title="长按向下移动切片"
+                    >
+                      <ChevronDown size={16} />
+                    </button>
                     <span className="text-[10px] text-blue-600 font-bold mt-4">#{sliceIndex + 1}</span>
+                    <div className="mt-5 flex w-full flex-col gap-2 px-2">
+                      <button
+                        onClick={downloadCurrentDicomPng}
+                        className="h-8 rounded-lg bg-blue-600 text-white text-[10px] font-bold flex items-center justify-center gap-1 hover:bg-blue-700"
+                        title="下载当前图片 PNG"
+                      >
+                        <Download size={12} /> PNG
+                      </button>
+                      <button
+                        onClick={() => selectedProject && downloadDicomArchive(selectedProject.id)}
+                        className="h-8 rounded-lg bg-white text-slate-600 text-[10px] font-bold flex items-center justify-center gap-1 border border-slate-200 hover:bg-slate-100"
+                        title="下载 DICOM 影像压缩包"
+                      >
+                        <FileArchive size={12} /> DCM
+                      </button>
+                    </div>
                   </div>
                 </div>
               )}

WebSite/src/components/ReverseWorkspace.tsx

@@ -117,7 +117,7 @@ export default function ReverseWorkspace({ projectId }: { projectId: string }) {
         <div>
           <h2 className="text-2xl font-bold text-slate-800">逆向工作区</h2>
           <p className="text-slate-500 mt-1">
-            {project ? `${project.name} · ${project.dicomPath} ↔ ${project.modelPath}` : '配准 DICOM 影像与三维模型，生成像素映射关系'}
+            {project ? `当前项目：${project.name}` : '配准 DICOM 影像与三维模型，生成像素映射关系'}
           </p>
           {project && (
             <div className="mt-3 flex flex-wrap gap-2 text-[11px] font-bold">

WebSite/src/lib/api.ts

@@ -81,3 +81,24 @@ export async function downloadMask(projectId: string, format: 'nii' | 'nii.gz' =
   link.remove();
   URL.revokeObjectURL(url);
 }
+
+export async function downloadDicomArchive(projectId: string) {
+  const response = await fetch(`/api/projects/${projectId}/dicom-archive`);
+
+  if (!response.ok) {
+    throw new Error(`DICOM 压缩包下载失败：${response.status}`);
+  }
+
+  const blob = await response.blob();
+  const disposition = response.headers.get('Content-Disposition') ?? '';
+  const match = disposition.match(/filename="([^"]+)"/);
+  const filename = match?.[1] ?? `${projectId}-dicom-series.tar.gz`;
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  URL.revokeObjectURL(url);
+}