2026-05-24-15-37-16 修正mask线条桥接与DICOM复位入口

WebSite/src/components/ProjectLibrary.tsx

@@ -327,7 +327,7 @@ function getDicomDisplaySliceNumber(sliceIndex: number, totalSlices: number) {
   return total - Math.max(0, Math.min(total - 1, Math.round(sliceIndex)));
 }
 
-function DicomCanvas({ preview, rotation }: { preview: DicomPreview; rotation: number }) {
+function DicomCanvas({ preview, rotation, resetSignal }: { preview: DicomPreview; rotation: number; resetSignal: number }) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const [viewport, setViewport] = useState({ scale: 1, offsetX: 0, offsetY: 0 });
   const [isPanning, setIsPanning] = useState(false);
@@ -348,9 +348,10 @@ function DicomCanvas({ preview, rotation }: { preview: DicomPreview; rotation: n
     drawDicomPreviewToCanvas(canvas, preview, rotation);
   }, [preview, rotation]);
 
-  const resetViewport = () => {
+  useEffect(() => {
     setViewport({ scale: 1, offsetX: 0, offsetY: 0 });
-  };
+  }, [resetSignal]);
+
   const handleWheel = (event: React.WheelEvent<HTMLDivElement>) => {
     event.preventDefault();
     const scaleFactor = event.deltaY > 0 ? 0.9 : 1.1;
@@ -418,15 +419,6 @@ function DicomCanvas({ preview, rotation }: { preview: DicomPreview; rotation: n
           className="max-h-full max-w-full select-none object-contain rounded-xl bg-black shadow-2xl ring-1 ring-white/25"
         />
       </div>
-      <button
-        onClick={resetViewport}
-        onPointerDown={(event) => event.stopPropagation()}
-        className="absolute right-3 top-3 z-10 flex h-8 items-center gap-1.5 rounded-lg border border-white/10 bg-black/65 px-3 text-[10px] font-bold text-white/70 shadow-lg hover:border-cyan-300/30 hover:text-cyan-100"
-        title="重置 DICOM 图片位置"
-      >
-        <RefreshCcw size={13} />
-        位置重置
-      </button>
     </div>
   );
 }
@@ -838,6 +830,7 @@ export default function ProjectLibrary({
   const [plane, setPlane] = useState<Plane>('axial');
   const [displayMode, setDisplayMode] = useState<DisplayMode>('default');
   const [rotation, setRotation] = useState(0);
+  const [dicomViewportResetSignal, setDicomViewportResetSignal] = useState(0);
   const [isSliceChanging, setIsSliceChanging] = useState(false);
   const [solidityLevel, setSolidityLevel] = useState<SolidityLevel>('standard');
   const [modelPose, setModelPose] = useState<ModelPose>(defaultModelPose);
@@ -1814,6 +1807,13 @@ export default function ProjectLibrary({
                       >
                         <RotateCw size={12} /> 右转
                       </button>
+                      <button
+                        onClick={() => setDicomViewportResetSignal((value) => value + 1)}
+                        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="重置 DICOM 图片位置"
+                      >
+                        <RefreshCcw 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>
@@ -1822,7 +1822,7 @@ export default function ProjectLibrary({
                     </div>
                     <div className={`relative w-full h-full flex items-center justify-center transition-all duration-150 ${isSliceChanging ? 'scale-[1.01] opacity-85 brightness-110' : 'scale-100 opacity-100 brightness-100'}`}>
                        {dicomPreview ? (
-                         <DicomCanvas preview={dicomPreview} rotation={rotation} />
+                         <DicomCanvas preview={dicomPreview} rotation={rotation} resetSignal={dicomViewportResetSignal} />
                        ) : (
                          <p className="text-white/30 text-xs font-mono uppercase tracking-widest">
                            {selectedProject.dicomCount ? dicomError || '正在解析 DICOM 像素...' : '请导入DICOM影像'}