REVOXELSEG_DICOM/工程分析/实现方案-2026-05-04-04-12-34.md

实现方案

时间戳：2026-05-04-04-12-34

修改目标

完善项目库导入/下载按钮语义、DICOM 三方向预览、STL 多模型颜色透明度控制、项目创建弹窗、删除确认和编辑自动保存。

涉及路径

• WebSite/server.ts
• WebSite/src/lib/api.ts
• WebSite/src/types.ts
• WebSite/src/components/ProjectLibrary.tsx
• 工程分析/测试方案-2026-05-04-04-12-34.md
• 工程分析/经验记录.md

技术路线

1. 后端 DICOM 预览扩展。
   • GET /api/projects/:projectId/dicom-preview?slice=&plane=
   • 支持 plane=axial|sagittal|coronal。
   • 横断面读取单张 DICOM。
   • 矢状面/冠状面从 DICOM 序列采样生成重建平面。
2. 后端项目删除。
   • 新增 DELETE /api/projects/:projectId。
   • 删除后写入共享状态。
3. 前端 API 扩展。
   • getDicomPreview(projectId, slice, plane)。
   • deleteProject(projectId)。
4. 项目库交互。
   • 顶部右侧按钮：DICOM/3D 视图显示“导入”；分割结果不显示顶部第二按钮。
   • 创建项目改为点击 + 弹窗输入名称。
   • 编辑项目名称改为输入框失焦或回车自动保存。
   • 删除项目点击垃圾桶后弹窗二次确认。
5. DICOM UI。
   • 增加横断面、矢状面、冠状面切换。
   • 右侧滑块改为稳定轨道，显示 第 n / 总数。
   • 圆点与轨道对齐。
6. 3D 模型 UI。
   • 右侧眼睛为全体显示/隐藏。
   • 每个 STL 使用颜色输入框和透明度滑块。
   • Three.js 同时渲染所有可见 STL，并应用对应颜色和透明度。
   • 删除无意义状态点。

数据流

DICOM：

前端选择方向和切片 -> 后端按方向返回灰度像素 -> 前端 canvas 绘制。

3D：

后端提供 STL 文件 -> 前端为每个 STL 建立颜色/透明度/可见性状态 -> Three.js 渲染多模型。

项目：

创建弹窗 -> POST /api/projects；编辑失焦 -> PATCH /api/projects/:id；删除确认 -> DELETE /api/projects/:id。

兼容性与回滚方案

• 保留原 axial 行为，新增方向参数不影响旧调用。
• 若矢状面/冠状面解析失败，前端显示错误态。
• 若 STL 多模型性能不足，可通过全体眼睛或单项眼睛隐藏模型。
• 回滚时恢复 ProjectLibrary.tsx 和相关 API 即可。

预计文件变更

• 修改 server.ts、api.ts、types.ts、ProjectLibrary.tsx。
• 更新测试方案执行结果。
• 更新经验记录。

人工审核状态

本次用户明确要求无需人工二次确认。

状态：自动确认，继续执行。