# 实现方案-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` 和首页响应。