# 实现方案：右侧竖向 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` 与首页。