2026-05-20-15-54-46 逆向工作区视图交互与布局优化

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

@@ -0,0 +1,65 @@
+# 实现方案：逆向工作区控件外置、视图复位与手动拉伸
+
+实现方案文档路径：`工程分析/实现方案-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` 与首页。