2026-05-20-14-19-23 逆向分割结果流程调整

WebSite/src/components/ProjectLibrary.tsx

@@ -22,7 +22,7 @@ import {
 } from 'lucide-react';
 import * as THREE from 'three';
 import { DicomInfo, DicomPreview, ModuleStyle, Project, SegmentationExportScope } from '../types';
-import { api, downloadDicomArchive, downloadMask, downloadProjectExportBundle, ProjectExportTarget } from '../lib/api';
+import { api, downloadDicomArchive, downloadProjectExportBundle, ProjectExportTarget } from '../lib/api';
 
 type Plane = 'axial' | 'sagittal' | 'coronal';
 type DisplayMode = DicomPreview['mode'];
@@ -655,6 +655,7 @@ export default function ProjectLibrary({
   const [modelPose, setModelPose] = useState<ModelPose>(defaultModelPose);
   const [moduleStyles, setModuleStyles] = useState<Record<string, ModuleStyle>>({});
   const [dicomPreview, setDicomPreview] = useState<DicomPreview | null>(null);
+  const [resultDicomPreview, setResultDicomPreview] = useState<DicomPreview | null>(null);
   const [dicomInfo, setDicomInfo] = useState<DicomInfo | null>(null);
   const [dicomInfoError, setDicomInfoError] = useState('');
   const [isDicomInfoOpen, setIsDicomInfoOpen] = useState(false);
@@ -746,6 +747,23 @@ export default function ProjectLibrary({
   const selectedSolidity = solidityOptions.find((option) => option.id === solidityLevel) ?? solidityOptions[0];
   const savedSegmentationResults = selectedProject?.segmentationResults ?? [];
   const latestSegmentationResult = savedSegmentationResults[savedSegmentationResults.length - 1];
+  const latestResultPose = latestSegmentationResult?.pose ?? modelPose;
+  const latestResultStyles = latestSegmentationResult?.moduleStyles ?? moduleStyles;
+  const resultMaxSlice = Math.max((selectedProject?.dicomCount ?? 1) - 1, 0);
+  const resultMappingSlice = Math.max(0, Math.min(resultMaxSlice, latestSegmentationResult?.mappingSlice ?? resultMaxSlice));
+  const resultVisibleModules = stlFiles
+    .map((fileName, index) => ({
+      fileName,
+      name: fileName.replace(/\.stl$/i, ''),
+      style: latestResultStyles[fileName] ?? {
+        visible: true,
+        color: defaultModuleColors[index % defaultModuleColors.length],
+        opacity: 0.72,
+        partId: index + 1,
+      },
+    }))
+    .filter(({ style }) => style.visible !== false);
+  const readonlyPoseChange = useMemo<React.Dispatch<React.SetStateAction<ModelPose>>>(() => () => undefined, []);
 
   const makeDefaultModuleStyle = (index: number, fallback?: Partial<ModuleStyle>): ModuleStyle => ({
     visible: fallback?.visible ?? true,
@@ -802,13 +820,14 @@ export default function ProjectLibrary({
   }, [initialViewMode]);
 
   useEffect(() => {
+    const latestResult = selectedProject?.segmentationResults?.[selectedProject.segmentationResults.length - 1];
     const next: Record<string, ModuleStyle> = {};
     stlFiles.forEach((fileName, index) => {
-      next[fileName] = makeDefaultModuleStyle(index, selectedProject?.moduleStyles?.[fileName] ?? moduleStyles[fileName]);
+      next[fileName] = makeDefaultModuleStyle(index, latestResult?.moduleStyles?.[fileName] ?? selectedProject?.moduleStyles?.[fileName] ?? moduleStyles[fileName]);
     });
     setModuleStyles(next);
     setSliceIndex(0);
-    setModelPose(defaultModelPose);
+    setModelPose(latestResult?.pose ?? defaultModelPose);
   }, [selectedProject?.id]);
 
   useEffect(() => {
@@ -843,6 +862,32 @@ export default function ProjectLibrary({
     };
   }, [selectedProject?.id, selectedProject?.dicomCount, sliceIndex, plane, displayMode, viewMode]);
 
+  useEffect(() => {
+    if (!selectedProject || viewMode !== 'mask' || !selectedProject.dicomCount) {
+      setResultDicomPreview(null);
+      return;
+    }
+
+    let cancelled = false;
+    const maxSlice = Math.max(selectedProject.dicomCount - 1, 0);
+    const previewSlice = Math.max(0, Math.min(maxSlice, latestSegmentationResult?.mappingSlice ?? maxSlice));
+    api.getDicomPreview(selectedProject.id, previewSlice, 'axial', 'soft')
+      .then((preview) => {
+        if (!cancelled) {
+          setResultDicomPreview(preview);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setResultDicomPreview(null);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedProject?.id, selectedProject?.dicomCount, viewMode, latestSegmentationResult?.id, latestSegmentationResult?.mappingSlice]);
+
   useEffect(() => () => {
     if (sliceRepeatRef.current !== null) {
       window.clearInterval(sliceRepeatRef.current);
@@ -1026,7 +1071,7 @@ export default function ProjectLibrary({
   const tabs = [
     { id: 'dicom' as const, label: 'DICOM 影像', icon: ImageIcon },
     { id: 'model' as const, label: '3D 模型', icon: Box },
-    { id: 'mask' as const, label: '分割结果', icon: Layers },
+    { id: 'mask' as const, label: '逆向分割结果', icon: Layers },
   ];
 
   return (
@@ -1500,61 +1545,104 @@ export default function ProjectLibrary({
               )}
 
               {viewMode === 'mask' && (
-                <div className="h-full grid grid-cols-1 gap-6 lg:grid-cols-[1fr_360px]">
-                  <div className="rounded-2xl border border-slate-100 bg-slate-950 p-4 text-white shadow-sm">
-                    <div className="mb-4 flex items-center justify-between gap-3">
-                      <div>
-                        <h3 className="font-bold">分割结果</h3>
-                        <p className="mt-1 text-[11px] font-bold text-white/40">
-                          来自逆向工作区保存的 Label Map 复核记录
+                <div className="h-full grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1fr)_340px]">
+                  <div className="grid min-h-0 grid-cols-1 gap-4 lg:grid-cols-2">
+                    <div className="relative min-h-[520px] overflow-hidden rounded-2xl border border-slate-900 bg-slate-950 text-white shadow-sm">
+                      <div className="absolute left-4 top-4 z-10 rounded-xl border border-white/10 bg-black/45 px-3 py-2 backdrop-blur">
+                        <p className="text-sm font-bold">影像与模型融合视角</p>
+                        <p className="mt-1 font-mono text-[10px] text-white/45">
+                          {latestSegmentationResult ? `Z ${resultMappingSlice + 1}/${selectedProject.dicomCount}` : '等待保存结果'}
                         </p>
                       </div>
-                      <span className="rounded-lg border border-white/10 bg-white/5 px-2 py-1 font-mono text-[10px] text-cyan-100">
-                        {savedSegmentationResults.length} 条
-                      </span>
+                      {latestSegmentationResult ? (
+                        <NativeStlViewer
+                          projectId={selectedProject.id}
+                          files={stlFiles}
+                          styles={latestResultStyles}
+                          detailLimit={selectedSolidity.limit}
+                          solidMode={solidityLevel === 'solid'}
+                          pose={latestResultPose}
+                          onPoseChange={readonlyPoseChange}
+                        />
+                      ) : (
+                        <div className="flex h-full items-center justify-center px-8 text-center text-sm font-bold text-white/35">
+                          暂无保存结果，请在逆向工作区保存当前映射。
+                        </div>
+                      )}
                     </div>
 
-                    {savedSegmentationResults.length ? (
-                      <div className="grid gap-3 md:grid-cols-2">
-                        {savedSegmentationResults.map((result, index) => (
-                          <div key={result.id} className="rounded-xl border border-white/10 bg-white/[0.04] p-3">
-                            <div className="mb-2 flex items-center justify-between gap-2">
-                              <p className="min-w-0 truncate text-sm font-bold">{result.name}</p>
-                              <span className="rounded bg-cyan-400/15 px-1.5 py-0.5 font-mono text-[9px] text-cyan-100">
-                                #{index + 1}
-                              </span>
-                            </div>
-                            <div className="grid grid-cols-2 gap-2 text-[10px] font-bold text-white/45">
-                              <span>范围：{result.segmentationScope === 'all' ? '所有类别' : '可见类别'}</span>
-                              <span className="text-right">{new Date(result.createdAt).toLocaleString('zh-CN', { hour12: false })}</span>
-                              <span className="font-mono">RX {result.pose.rotateX.toFixed(0)}°</span>
-                              <span className="text-right font-mono">TZ {result.pose.translateZ.toFixed(3)}</span>
+                    <div className="relative min-h-[520px] overflow-hidden rounded-2xl border border-slate-900 bg-black text-white shadow-sm">
+                      <div className="absolute left-4 top-4 z-10 flex flex-wrap gap-2">
+                        <span className="rounded-lg border border-white/10 bg-black/50 px-2.5 py-1 font-mono text-[10px] font-bold text-white/70 backdrop-blur">
+                          BASE DICOM
+                        </span>
+                        <span className="rounded-lg border border-cyan-300/40 bg-cyan-400/15 px-2.5 py-1 font-mono text-[10px] font-bold text-cyan-100 backdrop-blur">
+                          OVERLAY LABEL MAP
+                        </span>
+                        <span className="rounded-lg border border-white/10 bg-black/50 px-2.5 py-1 font-mono text-[10px] font-bold text-white/70 backdrop-blur">
+                          Z {resultMappingSlice + 1}/{selectedProject.dicomCount}
+                        </span>
+                      </div>
+                      <div className="absolute inset-0 flex items-center justify-center p-8">
+                        {latestSegmentationResult && resultDicomPreview ? (
+                          <div className="relative flex h-full w-full items-center justify-center">
+                            <DicomCanvas preview={resultDicomPreview} rotation={0} />
+                            <div className="pointer-events-none absolute inset-x-10 bottom-10 rounded-2xl border border-white/10 bg-black/55 p-3 backdrop-blur">
+                              <div className="mb-2 flex items-center justify-between gap-3 text-[11px] font-bold text-white/70">
+                                <span>当前切片构件</span>
+                                <span className="font-mono text-cyan-100">{resultVisibleModules.length} 个构件</span>
+                              </div>
+                              <div className="grid grid-cols-2 gap-2">
+                                {resultVisibleModules.slice(0, 8).map(({ fileName, name, style }) => (
+                                  <div key={fileName} className="flex min-w-0 items-center gap-2 rounded-lg bg-white/5 px-2 py-1">
+                                    <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: style.color }} />
+                                    <span className="min-w-0 flex-1 truncate text-[10px] font-bold text-white/75">{name}</span>
+                                    <span className="font-mono text-[9px] text-white/45">ID {style.partId}</span>
+                                  </div>
+                                ))}
+                              </div>
                             </div>
                           </div>
-                        ))}
+                        ) : (
+                          <p className="text-center text-sm font-bold text-white/30">
+                            {latestSegmentationResult ? '正在载入逆向分割映射视图...' : '暂无逆向分割映射视图'}
+                          </p>
+                        )}
                       </div>
-                    ) : (
-                      <div className="flex h-[420px] items-center justify-center rounded-2xl border border-dashed border-white/15 bg-white/[0.03] px-6 text-center text-sm font-bold text-white/35">
-                        暂无保存的分割结果，请在逆向工作区点击“保存至项目库”。
-                      </div>
-                    )}
+                    </div>
                   </div>
 
                   <div className="flex flex-col gap-4">
                     <div className="rounded-2xl border border-slate-100 bg-slate-50 p-5">
-                      <h3 className="mb-3 font-bold text-slate-800">导出分割包</h3>
-                      <p className="text-sm leading-6 text-slate-500">
-                        默认使用最新保存的分割结果位姿；可选择导出 DICOM、Label Map、位姿数据与原始 STL。
-                      </p>
+                      <div className="flex items-start justify-between gap-3">
+                        <div>
+                          <h3 className="font-bold text-slate-800">逆向分割结果</h3>
+                          <p className="mt-2 text-sm leading-6 text-slate-500">
+                            项目库仅保留最新一次保存结果，导出时默认沿用该结果的位姿、构件样式与类别范围。
+                          </p>
+                        </div>
+                        <span className={`rounded-lg px-2 py-1 text-[10px] font-bold ${latestSegmentationResult ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-200 text-slate-500'}`}>
+                          {latestSegmentationResult ? '已保存' : '未保存'}
+                        </span>
+                      </div>
+                      <div className="mt-4 grid grid-cols-2 gap-2 text-[10px] font-bold text-slate-500">
+                        <span className="rounded-lg bg-white px-2 py-2">切片：{selectedProject.dicomCount ? `${resultMappingSlice + 1}/${selectedProject.dicomCount}` : '--'}</span>
+                        <span className="rounded-lg bg-white px-2 py-2">类别：{latestSegmentationResult?.segmentationScope === 'all' ? '所有类别' : '可见类别'}</span>
+                        <span className="rounded-lg bg-white px-2 py-2">构件：{resultVisibleModules.length}</span>
+                        <span className="rounded-lg bg-white px-2 py-2">
+                          {latestSegmentationResult ? new Date(latestSegmentationResult.createdAt).toLocaleString('zh-CN', { hour12: false }) : '等待结果'}
+                        </span>
+                      </div>
                     </div>
+
                     <div className="relative">
                       <button
                         onClick={() => setShowMaskExportMenu((value) => !value)}
-                        disabled={maskExporting}
+                        disabled={maskExporting || !latestSegmentationResult}
                         className="flex w-full items-center justify-center gap-2 rounded-xl bg-emerald-600 px-5 py-3 text-sm font-bold text-white shadow-lg hover:bg-emerald-700 disabled:opacity-50"
                       >
                         <Download size={18} />
-                        {maskExporting ? '正在导出' : '导出全部 NII.GZ'}
+                        {maskExporting ? '正在导出' : '导出项目及结果'}
                       </button>
                       {showMaskExportMenu && (
                         <div className="absolute right-0 top-14 z-30 w-full rounded-2xl border border-slate-200 bg-white p-3 text-xs shadow-2xl">
@@ -1619,12 +1707,6 @@ export default function ProjectLibrary({
                         </div>
                       )}
                     </div>
-                    <button
-                      onClick={() => downloadMask(selectedProject.id, 'nii.gz', latestSegmentationResult?.pose ?? modelPose, maskSegmentationScope)}
-                      className="flex items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-5 py-3 text-sm font-bold text-slate-700 hover:bg-slate-50"
-                    >
-                      <Download size={18} /> 仅下载 NII.GZ
-                    </button>
                   </div>
                 </div>
               )}