2026-05-20-15-33-38 逆向映射导航外置与遮挡优化

工程分析/实现方案-2026-05-20-15-33-38.md

@@ -0,0 +1,51 @@
+# 实现方案：右侧竖向 Slice Navigator 与影像遮挡治理
+
+实现方案文档路径：`工程分析/实现方案-2026-05-20-15-33-38.md`
+
+## 修改目标
+
+调整逆向分割映射视图布局：将切片导航从影像底部迁移到右侧竖向栏，并把 Overlay Label Map 的构件统计面板从影像内部移到影像下方，避免遮挡 DICOM 影像。
+
+## 涉及路径
+
+- `WebSite/src/components/ReverseWorkspace.tsx`
+- `工程分析/需求分析-2026-05-20-15-33-38.md`
+- `工程分析/实现方案-2026-05-20-15-33-38.md`
+- `工程分析/测试方案-2026-05-20-15-33-38.md`
+- `工程分析/经验记录.md`
+
+## 技术路线
+
+1. 定位 `VoxelizationMappingView` 中当前底部 `Slice Navigator` 与影像内 Overlay 状态面板。
+2. 将组件整体布局改为横向网格：左侧影像与独立信息区，右侧竖向切片导航栏。
+3. 保留顶部 `Base DICOM`、`Overlay Label Map`、`Z` 状态标签，但缩小为影像角落提示，避免大面积遮挡。
+4. 将构件统计列表改为影像下方独立面板，显示当前 Overlay 状态、构件数、边数、像素数和当前切片构件表。
+5. 为竖向 range 增加内联样式或类名，使用 `writingMode: 'vertical-rl'` 与 `direction: 'rtl'` 实现从上到下浏览切片。
+6. 执行类型检查、构建、部署验证。
+
+## 执行步骤
+
+- 阅读当前 `VoxelizationMappingView` JSX 与相关样式。
+- 修改布局结构和样式。
+- 检查 `mapping-slice-input` 是否有全局 CSS 影响，必要时增加独立竖向类。
+- 运行 `npm run lint` 和 `npm run build`。
+- 重启 `tmux` 服务并验证健康接口和首页。
+- 更新测试方案与经验记录。
+- 精确暂存、提交并推送 Gitea。
+
+## 兼容性与回滚方案
+
+- 该改动只影响前端布局，不改变数据结构和 API。
+- 如竖向 `range` 在某浏览器显示异常，可回滚为右侧竖排按钮加数值输入，或补充 WebKit 专用 CSS。
+- 项目库复用同一组件，因此无需额外复制样式逻辑。
+
+## 预计文件变更
+
+- `WebSite/src/components/ReverseWorkspace.tsx`
+- 本轮工程分析文档与 `工程分析/经验记录.md`
+
+## 提交与部署策略
+
+- 暂存本轮相关代码和工程分析文档。
+- commit message 包含 `2026-05-20-15-33-38`。
+- 推送 Gitea 后重启 `revoxelseg-dicom` 服务，验证 `http://127.0.0.1:4000/api/health` 与首页。