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