# 实现方案

时间戳：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`。
- 更新测试方案执行结果。
- 更新经验记录。

## 人工审核状态

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

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