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` 与首页。

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

@@ -0,0 +1,64 @@
+# 测试方案：逆向工作区布局、缩放平移、复位与拉伸验证
+
+测试方案文档路径：`工程分析/测试方案-2026-05-20-15-54-46.md`
+
+## 静态检查
+
+- 确认 `DICOM 切片位置` 为白底外置控件，并位于二维影像右侧。
+- 确认 `Base DICOM` / `Overlay Label Map` 不再作为深色大块控件压在影像内部。
+- 确认 `VoxelizationMappingView` 支持 zoom/pan 状态和位置重置。
+- 确认 `FusionThreeView` 支持视图复位 token。
+- 确认三维拉伸按钮仅在 XYZ 旋转均为 90 度倍数时启用。
+- 确认主布局右侧视图宽度提升，三列底部更接近对齐。
+
+## 构建检查
+
+- 在 `WebSite/` 执行 `npm run lint`。
+- 在 `WebSite/` 执行 `npm run build`。
+
+## 关键业务场景验证
+
+- 右侧二维影像可滚轮缩放。
+- 右侧二维影像可鼠标拖拽平移。
+- 点击“位置重置”后二维影像恢复居中、1 倍缩放。
+- 点击三维融合视图复位按钮后相机恢复默认视角。
+- 旋转角度不是 90 度倍数时，拉伸按钮不可用。
+- 旋转角度满足 90 度倍数时，可触发 X/Y/Z 方向等比例拉伸并更新模型 scale。
+
+## 医学影像数据相关边界验证
+
+- 不修改 DICOM/STL 原始数据。
+- 不改变切片映射算法和导出接口。
+- 二维缩放和平移只影响浏览显示，不改变 Label Map 坐标。
+- 手动拉伸属于位姿参数调整，保存/导出沿用当前位姿。
+
+## 部署验证
+
+- 验证 `http://127.0.0.1:4000/api/health`。
+- 验证 `http://127.0.0.1:4000/` 返回 200。
+
+## Git/Gitea 备份验证
+
+- commit message 包含 `2026-05-20-15-54-46`。
+- 推送 Gitea 成功后记录 commit。
+- 确认未暂存历史删除状态、软著材料和运行态文件。
+
+## 风险与回归关注点
+
+- 右侧控件白底化后要保持与深色影像区边界清晰。
+- CSS transform 顺序需要同时覆盖 Base DICOM 与 Overlay，避免错位。
+- Three.js 复位不能打断现有 OrbitControls。
+- 当前实现为等比例 `scale` 调整，不提供非等比轴向拉伸。
+
+## 执行结果
+
+- `npm run lint`：通过，TypeScript 无报错。
+- `npm run build`：通过，Vite 完成生产构建；仅保留当前项目已有的大 chunk 体积提示。
+- 静态确认：右侧 `DICOM 切片位置` 已改为白底外置卡片，`Overlay Label Map` 状态与构件列表已位于影像外部。
+- 静态确认：`VoxelizationMappingView` 已加入滚轮缩放、鼠标拖拽平移和 `位置重置`。
+- 静态确认：`FusionThreeView` 已加入 `位置重置`，三维模型默认 Z 偏移已取消。
+- 静态确认：主布局改为左窄、中等、右宽的三列比例，并用 `flex-1` 包裹三维/二维视图以改善底部对齐。
+- 静态确认：已加入 X/Y/Z 等比例自动拉伸按钮，旋转 X/Y/Z 均为 90° 整数倍且数据加载完成时可用。
+- 部署验证：已重建 `tmux` 会话 `revoxelseg-dicom`，执行 `npm run serve -- --host 0.0.0.0 --port 4000`。
+- `curl -fsS http://127.0.0.1:4000/api/health`：通过，返回 `{"ok":true,"service":"revoxelseg-dicom",...}`。
+- `curl -I -fsS http://127.0.0.1:4000/`：通过，返回 `HTTP/1.1 200 OK`。

工程分析/经验记录.md

@@ -1315,3 +1315,21 @@ C. 解决问题方案
 D. 后续如何避免问题
 
 医学影像主画布应优先保持无遮挡，状态、统计、导航控件默认放在画布外侧。若必须悬浮在影像上，只能使用小尺寸状态标识，并在提交前检查是否遮挡解剖结构或分割边界。
+
+## 2026-05-20-15-54-46 视图交互状态与位姿参数要分层处理
+
+A. 具体问题
+
+用户要求右侧二维影像支持滚轮缩放、拖拽移动、位置重置，同时三维融合视图也需要视角复位，并增加按方向的三维等比例拉伸。如果把这些交互都写进位姿数据，容易把临时浏览状态误保存进项目结果。
+
+B. 产生问题原因
+
+二维缩放/平移、三维相机复位属于查看视口状态；模型平移、旋转、缩放属于会影响分割映射和导出的位姿参数。两类状态此前都在可视化层发生，如果不区分，很容易导致“只是看大一点”变成“改变了结果”。
+
+C. 解决问题方案
+
+二维映射视图新增独立 `mappingViewport`，只通过 CSS transform 同步作用于 Base DICOM 与 Overlay Canvas，不写入保存结果；三维融合视图用内部 `rootPose` 复位浏览相机，也不改变 `modelPose`。模型等比例拉伸则明确更新 `modelPose.scale`，并限制在旋转 X/Y/Z 均为 90° 整数倍时才可触发。
+
+D. 后续如何避免问题
+
+新增影像查看交互时必须先判断它属于“浏览视口”还是“结果位姿”。浏览视口状态默认不进入保存和导出；只有会改变模型与 DICOM 空间关系的参数才进入 `modelPose`、保存快照和导出数据。

工程分析/需求分析-2026-05-20-15-54-46.md

@@ -0,0 +1,64 @@
+# 需求分析：逆向工作区视图比例、白底控件、平移缩放与三维拉伸
+
+开始时间：`2026-05-20-15-54-46`
+
+## 原始需求摘要
+
+用户要求继续优化逆向工作区：
+
+1. “DICOM 切片位置”展示效果要类似“DICOM 切片范围”，白底、格式统一，不放入 DICOM 图像中，放到图片右侧；`Overlay Label Map` 也不要放在图片中。
+2. 左侧“模型显示/影像与模型融合视角”略微变小、变窄，为右侧视图留出更多空间。
+3. 右侧 DICOM 影像支持鼠标滚轮放大缩小、鼠标拖拽移动；“逆向分割映射视图”增加位置重置按钮；“影像与模型融合视角”右侧也增加位置重置按钮。
+4. 逆向工作区底部三列不平行，需要拉长“逆向分割映射视图”和“可视化工具栏”，让底部对齐。
+5. “影像与模型融合视角”右侧增加自动拉伸按钮；仅当旋转 XYZ 都为 0 或 90 的整数倍时可用；按特定方向对模型做三维等比例拉伸。当前初始状态若存在自动拉伸导致 DICOM 与模型顶/底不在同一平面，后续以手动选择拉伸方向为准，不再默认自动拉伸。
+
+## 业务目标
+
+- 让右侧二维映射视图的控件与中部工具栏控件风格一致，避免深色大面板压缩或遮挡影像。
+- 增强二维映射视图审查能力，支持缩放、拖拽和平移复位。
+- 增强三维融合视图审查能力，提供视角复位和受约束的模型等比例拉伸操作。
+- 优化三列布局比例和底部对齐，使右侧影像审查区更宽、更稳。
+
+## 输入与输出
+
+输入：
+
+- `WebSite/src/components/ReverseWorkspace.tsx`
+- `WebSite/src/index.css`
+- 复用逆向视图的 `WebSite/src/components/ProjectLibrary.tsx`
+
+输出：
+
+- 右侧“DICOM 切片位置”改为白底控制卡片，放在影像右侧外部。
+- `Base DICOM` / `Overlay Label Map` 信息移出影像内部，以独立白底图层状态展示。
+- 二维映射视图支持滚轮缩放、拖拽平移、位置复位。
+- 三维融合视图支持位置复位。
+- 模型位姿增加手动三维等比例拉伸控制，旋转角度满足 90 度倍数时可用。
+- 左中右布局比例调整，右侧视图获得更多宽度，底部保持对齐。
+
+## 影响范围
+
+- 逆向工作区三列主布局。
+- `FusionThreeView` 三维场景交互与工具按钮。
+- `VoxelizationMappingView` 二维映射视图交互、控件样式和白底布局。
+- 项目库中复用的两类视图会同步获得复位/缩放等能力。
+
+## 关键约束
+
+- 不改变 DICOM/STL 原始数据和导出算法。
+- 不默认自动拉伸模型，避免再次引入初始错位；自动拉伸由用户手动触发。
+- 三维拉伸只在 XYZ 旋转均为 90 度整数倍时启用。
+- 二维影像缩放和平移只影响浏览视口，不改变切片索引、分割映射和导出结果。
+- 不提交历史删除状态、软著文档和无关运行态文件。
+
+## 风险点
+
+- Three.js 场景复位需要在组件内部暴露状态触发，避免影响原有 OrbitControls。
+- 二维 Canvas 缩放和平移需要同时作用于 Base DICOM 和 Overlay Label Map，保持叠加严格同步。
+- 三维模型拉伸方向若与医学物理坐标不完全一致，需要在 UI 上做成“手动校正”而非默认自动修正。
+- 调整三列比例可能影响较小视口下的滚动和可用宽度。
+
+## 默认假设
+
+- “模型显示”指左侧“影像与模型融合视角”的三维模型/融合视图区域。
+- “自动拉伸”本轮实现为用户手动点击的等比例缩放操作，按 X/Y/Z 方向选择基于 DICOM 体范围估算缩放，不在初始加载时自动执行。