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

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