REVOXELSEG_DICOM/工程分析/实现方案-2026-05-19-23-47-31.md

实现方案-2026-05-19-23-47-31

实现方案文档路径

工程分析/实现方案-2026-05-19-23-47-31.md

修改目标

将逆向工作区右侧 Mask 展示 改造成二维多图层“逆向分割映射视图”，实现 DICOM Base Layer、STL 逆向投影 Overlay Label Map、构件层级属性联动和独立 Slice Navigator。

涉及路径

• WebSite/src/components/ReverseWorkspace.tsx
• WebSite/src/index.css
• 工程分析/需求分析-2026-05-19-23-47-31.md
• 工程分析/实现方案-2026-05-19-23-47-31.md
• 工程分析/测试方案-2026-05-19-23-47-31.md
• 工程分析/经验记录.md

技术路线

1. 在 ReverseWorkspace.tsx 中新增独立 mappingSlice 状态。
2. 将右侧 CutSectionPreview 替换为 VoxelizationMappingView。
3. VoxelizationMappingView 使用两个叠放 Canvas：
   • Base Canvas 绘制 api.getDicomPreview(project.id, mappingSlice, 'axial', 'soft') 返回的 DICOM 灰度像素。
   • Overlay Canvas 根据 STL preview 顶点、当前切片 Z 位置和 moduleStyles 生成 Label Map 投影。
4. Overlay 绘制规则：
   • 对每个可见 STL 构件读取颜色、透明度、partId。
   • 将 STL 顶点 bounds 归一化映射到 DICOM canvas。
   • 只绘制与当前 Z 切片带宽相交的三角面。
   • 隐藏构件不绘制，透明度随构件层级滑条变化。
5. 在右侧视图底部添加专属 Slice Navigator：
   • 独立范围为 0 ~ project.dicomCount - 1。
   • 支持拖动和左右单步按钮。
   • 不修改左侧 DICOM 范围，也不影响三维融合切分状态。
6. 保留 NII/NII.GZ 导出按钮。
7. 为新滑条补充稳定尺寸和样式，避免 UI 抖动。

兼容性与回滚方案

• 不修改后端接口和数据结构，回滚时只需恢复 ReverseWorkspace.tsx 与 index.css。
• 如果 STL preview 加载失败，右侧仍显示 DICOM Base Layer，并显示 Overlay 状态提示。
• 如果 DICOM preview 加载失败，显示加载或错误状态，不影响左侧三维融合视图。

预计文件变更

• 更新 ReverseWorkspace.tsx：新增二维映射视图、独立切片状态、右侧标题与图层联动。
• 更新 index.css：新增独立 Slice Navigator 滑条样式。
• 新增本次三份工程文档。
• 更新 经验记录.md。

提交与部署策略

• 仅暂存本次代码和文档文件。
• 提交信息使用：2026-05-19-23-47-31 优化逆向分割映射视图
• 运行 npm run lint、npm run build。
• 重新部署 tmux 会话 revoxelseg-dicom，验证 http://127.0.0.1:4000/api/health 和首页响应。