66 lines
3.1 KiB
Markdown
66 lines
3.1 KiB
Markdown
# 实现方案：逆向工作区控件外置、视图复位与手动拉伸
|
||
|
||
实现方案文档路径：`工程分析/实现方案-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` 中主布局、`FusionThreeView`、`VoxelizationMappingView`、位姿工具栏实现。
|
||
- 修改二维映射视图布局和交互状态。
|
||
- 修改三维融合视图复位接口和按钮。
|
||
- 修改主布局比例和位姿拉伸按钮。
|
||
- 运行 `npm run lint` 与 `npm 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` 与首页。
|