3.1 KiB
3.1 KiB
实现方案:逆向工作区控件外置、视图复位与手动拉伸
实现方案文档路径:工程分析/实现方案-2026-05-20-15-54-46.md
修改目标
优化逆向工作区整体布局和交互:右侧二维映射控件白底外置,支持缩放/平移/复位;左侧三维融合视图支持复位;主布局给右侧更多空间并底部对齐;位姿工具栏新增受角度约束的模型等比例拉伸。
涉及路径
WebSite/src/components/ReverseWorkspace.tsxWebSite/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
技术路线
- 调整逆向工作区主网格比例,左侧略窄,右侧加宽;统一设置三列拉伸高度,减少底部错位。
- 改造
VoxelizationMappingView:- 顶部图层状态改成白底信息条;
- 右侧
DICOM 切片位置控件改成白底卡片,风格接近DICOM 切片范围; - 保留竖向切片条并外置于影像右侧;
- 添加滚轮缩放、鼠标拖拽平移和“位置重置”按钮;
- Base DICOM 与 Overlay Canvas 共用同一 transform。
- 改造
FusionThreeView:- 新增
viewResetToken属性; - 在 Three.js 场景内部保存 camera/controls 引用,token 变化时恢复相机初始位置;
- 在视图右侧或角落添加“位置重置”按钮入口。
- 新增
- 位姿工具栏新增模型等比例拉伸按钮:
- 判断
rotateX/Y/Z是否均为 90 度整数倍; - 在可用时提供 X/Y/Z 方向拉伸按钮;
- 拉伸仅调整
modelPose.scale,作为手动校正,不默认自动执行。
- 判断
- 保持保存快照和导出语义使用现有
modelPose.scale,不新增后端结构。 - 运行 lint/build,部署验证,并提交 Gitea。
执行步骤
- 阅读
ReverseWorkspace.tsx中主布局、FusionThreeView、VoxelizationMappingView、位姿工具栏实现。 - 修改二维映射视图布局和交互状态。
- 修改三维融合视图复位接口和按钮。
- 修改主布局比例和位姿拉伸按钮。
- 运行
npm run lint与npm run build。 - 重新部署
tmux服务并验证健康接口和首页。 - 更新测试方案与经验记录。
- 精确暂存本轮相关文件,commit 并推送 Gitea。
兼容性与回滚方案
- 二维缩放和平移仅影响 CSS transform,可直接回滚到原
rotationtransform。 - 三维复位按钮只触发相机状态,不改变数据,可安全移除。
- 手动拉伸只复用既有
scale字段,不改变保存结果结构;若用户需要按轴非等比例拉伸,可后续新增独立 scaleX/Y/Z 字段。
预计文件变更
WebSite/src/components/ReverseWorkspace.tsxWebSite/src/index.css- 本轮工程分析文档与
工程分析/经验记录.md
提交与部署策略
- 暂存本轮相关代码和工程分析文档。
- commit message 包含
2026-05-20-15-54-46。 - 推送到 Gitea 后重新部署并验证
http://127.0.0.1:4000/api/health与首页。