Files
REVOXELSEG_DICOM/工程分析/实现方案-2026-05-20-15-54-46.md

3.1 KiB
Raw Blame History

实现方案:逆向工作区控件外置、视图复位与手动拉伸

实现方案文档路径:工程分析/实现方案-2026-05-20-15-54-46.md

修改目标

优化逆向工作区整体布局和交互:右侧二维映射控件白底外置,支持缩放/平移/复位;左侧三维融合视图支持复位;主布局给右侧更多空间并底部对齐;位姿工具栏新增受角度约束的模型等比例拉伸。

涉及路径

  • WebSite/src/components/ReverseWorkspace.tsx
  • WebSite/src/index.css
  • 工程分析/需求分析-2026-05-20-15-54-46.md
  • 工程分析/实现方案-2026-05-20-15-54-46.md
  • 工程分析/测试方案-2026-05-20-15-54-46.md
  • 工程分析/经验记录.md

技术路线

  1. 调整逆向工作区主网格比例,左侧略窄,右侧加宽;统一设置三列拉伸高度,减少底部错位。
  2. 改造 VoxelizationMappingView
    • 顶部图层状态改成白底信息条;
    • 右侧 DICOM 切片位置 控件改成白底卡片,风格接近 DICOM 切片范围
    • 保留竖向切片条并外置于影像右侧;
    • 添加滚轮缩放、鼠标拖拽平移和“位置重置”按钮;
    • Base DICOM 与 Overlay Canvas 共用同一 transform。
  3. 改造 FusionThreeView
    • 新增 viewResetToken 属性;
    • 在 Three.js 场景内部保存 camera/controls 引用token 变化时恢复相机初始位置;
    • 在视图右侧或角落添加“位置重置”按钮入口。
  4. 位姿工具栏新增模型等比例拉伸按钮:
    • 判断 rotateX/Y/Z 是否均为 90 度整数倍;
    • 在可用时提供 X/Y/Z 方向拉伸按钮;
    • 拉伸仅调整 modelPose.scale,作为手动校正,不默认自动执行。
  5. 保持保存快照和导出语义使用现有 modelPose.scale,不新增后端结构。
  6. 运行 lint/build部署验证并提交 Gitea。

执行步骤

  • 阅读 ReverseWorkspace.tsx 中主布局、FusionThreeViewVoxelizationMappingView、位姿工具栏实现。
  • 修改二维映射视图布局和交互状态。
  • 修改三维融合视图复位接口和按钮。
  • 修改主布局比例和位姿拉伸按钮。
  • 运行 npm run lintnpm run build
  • 重新部署 tmux 服务并验证健康接口和首页。
  • 更新测试方案与经验记录。
  • 精确暂存本轮相关文件commit 并推送 Gitea。

兼容性与回滚方案

  • 二维缩放和平移仅影响 CSS transform可直接回滚到原 rotation transform。
  • 三维复位按钮只触发相机状态,不改变数据,可安全移除。
  • 手动拉伸只复用既有 scale 字段,不改变保存结果结构;若用户需要按轴非等比例拉伸,可后续新增独立 scaleX/Y/Z 字段。

预计文件变更

  • WebSite/src/components/ReverseWorkspace.tsx
  • WebSite/src/index.css
  • 本轮工程分析文档与 工程分析/经验记录.md

提交与部署策略

  • 暂存本轮相关代码和工程分析文档。
  • commit message 包含 2026-05-20-15-54-46
  • 推送到 Gitea 后重新部署并验证 http://127.0.0.1:4000/api/health 与首页。