2026-05-04-05-20-16 优化DICOM切片下载和3D预览

工程分析/实现方案-2026-05-04-05-20-16.md

@@ -0,0 +1,61 @@
+# 实现方案 - 2026-05-04-05-20-16
+
+## 修改目标
+
+围绕项目库 DICOM/3D 浏览体验和逆向工作区标题信息进行收敛修复，保证 DICOM 切片控制可连续移动、三平面可旋转且显示完整清晰，补充下载能力，并修复 3D 模型加载完成后仍不可见的问题。
+
+## 涉及路径
+
+- `WebSite/server.ts`
+- `WebSite/src/components/ProjectLibrary.tsx`
+- `WebSite/src/components/ReverseWorkspace.tsx`
+- `WebSite/src/lib/api.ts`
+- `WebSite/src/types.ts`
+- `工程分析/经验记录.md`
+
+## 技术路线
+
+1. DICOM 文件排序
+   - 将 DICOM 文件列表改为基于文件名的自然排序，确保 `1.dcm`、`2.dcm`、`10.dcm` 顺序正确。
+
+2. DICOM 重建与清晰度
+   - 后端对矢状面/冠状面重建结果进行非黑边界裁切并保留安全边距，减少“只显示一半”的视觉问题。
+   - 对预览灰度图做轻量边缘增强，提高 DCM 影像边界辨识度。
+
+3. 切片控制与旋转
+   - 前端新增上下箭头按钮，长按时用定时器连续推进或回退切片。
+   - DICOM 三平面统一支持左/右 90 度旋转，旋转状态参与画布绘制和 PNG 导出。
+
+4. 下载能力
+   - 后端新增 DICOM 序列压缩包接口，使用 `tar.gz` 生成压缩包，不引入额外依赖。
+   - 前端增加下载按钮，支持当前图片 PNG 和 DICOM 压缩包。
+
+5. 3D 模型显示
+   - 继续使用后端 STL 抽样预览，前端原生 Three.js 渲染。
+   - 修正模型居中和相机适配逻辑，增加坐标轴容错、投影兜底和加载进度。
+
+6. 逆向工作区
+   - 去掉 `Head_CT_DICOM ↔ Head_CT_ReConstruct` 路径说明，仅保留当前项目、DICOM 数量、STL 数量等上下文。
+
+## 数据流与交互流程
+
+- 项目库加载项目 -> 选择 DICOM 面/模式/切片 -> 后端返回灰度预览 -> 前端 canvas 绘制并按旋转角度显示。
+- 用户点击 PNG 下载 -> 使用当前 canvas 像素、平面、切片、模式、旋转角度生成命名完整的 PNG。
+- 用户点击 DICOM 压缩包下载 -> 后端按文件名自然排序打包 `Head_CT_DICOM`。
+- 用户进入 3D 模型页 -> 前端请求 STL 抽样预览 -> Three.js 居中缩放显示全部可见构件。
+
+## 兼容性与回滚方案
+
+- 若 DICOM 压缩包下载异常，不影响 DICOM 预览和 PNG 下载。
+- 若 WebGL 不可用，仍保留二维 canvas 投影兜底预览。
+- 回滚时可恢复本次提交前的 `server.ts`、项目库和逆向工作区组件。
+
+## 预计文件变更
+
+- 前后端代码 4-5 个文件。
+- 本次流程文档 3 个文件。
+- 经验记录追加 2-3 条。
+
+## 人工审核状态
+
+用户已在需求中明确：“本次的 需求分析、实现方案、测试方案、执行修改 都不用我人工二次确认了”。因此本方案记录后直接执行。