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

实现方案文档路径：`工程分析/实现方案-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` 与首页。