# 实现方案 - 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 条。

## 人工审核状态

用户已在需求中明确：“本次的 需求分析、实现方案、测试方案、执行修改 都不用我人工二次确认了”。因此本方案记录后直接执行。