REVOXELSEG_DICOM/工程分析/实现方案-2026-05-20-23-28-51.md

实现方案-2026-05-20-23-28-51

实现方案文档路径

工程分析/实现方案-2026-05-20-23-28-51.md

修改目标

• 修复位姿按钮首次点击导致中部可视化工具栏滚动上跳。
• 统一项目库与逆向工作区竖向 Slice Navigator 滑块居中样式。
• 将项目库 Overlay Label Map 摘要从映射视图右侧黑色面板改为导出按钮下方浅色信息格。
• 调整逆向分割结果状态徽标与标题同行。
• 导入已有 DICOM/STL 时增加覆盖确认。
• DICOM 导入时生成并保存详细信息缓存，详情接口优先读取缓存。
• 项目库逆向分割页导出按钮移到顶部操作区。

涉及路径

• WebSite/src/components/ReverseWorkspace.tsx
• WebSite/src/components/ProjectLibrary.tsx
• WebSite/src/index.css
• WebSite/server.ts
• 工程分析/经验记录.md

技术路线

1. VoxelizationMappingView 新增 Overlay 统计回调和 overlayPlacement='none'，项目库使用外置浅色 Overlay 面板。
2. 在项目库 mask 视图顶部操作区渲染“导出项目及结果”按钮和下拉菜单，删除下方旧导出入口。
3. 调整竖向 range input CSS，使可点击层覆盖轨道但 thumb 视觉中心与轨道中心对齐。
4. 为位姿微调按钮增加 onMouseDown preventDefault，并在位姿更新时保持工具栏滚动位置。
5. 导入入口根据项目现有数据量弹出覆盖确认，再唤起文件选择。
6. 后端 DICOM 导入后调用现有 DICOM 信息解析逻辑，将结果写入上传目录缓存文件；/dicom-info 优先读取缓存。

执行步骤

1. 写入本次需求、实现、测试方案。
2. 定位映射视图、项目库 mask 页、位姿控件、CSS range 样式和导入接口。
3. 修改前端组件结构与样式。
4. 修改后端 DICOM 信息缓存逻辑。
5. 执行 npm run lint、npm run build。
6. 重启 revoxelseg-dicom tmux 服务并验证 /api/health 与首页。
7. 追加经验记录，提交并推送 Gitea。

兼容性与回滚方案

• 若外置 Overlay 面板出现异常，可将项目库 overlayPlacement 改回 side。
• DICOM 信息缓存失败时不阻断默认详情接口解析，可回退到实时解析。
• 导入覆盖确认只在前端增加，后端接口仍保持原有覆盖写入能力。

预计文件变更

• 前端组件 2 个，样式 1 个，后端 1 个，工程分析文档 4 个。

提交与部署策略

• 只暂存本次相关文件，忽略历史删除和软著未跟踪文件。
• commit message 包含 2026-05-20-23-28-51 与简要描述。
• 推送 Gitea 后重启 4000 服务。