2026-05-08-03-03-52 修正DICOM切片范围为单范围条

工程分析/实现方案-2026-05-08-03-03-52.md

@@ -0,0 +1,53 @@
+# 实现方案：单条 DICOM 范围滑块
+
+时间戳：2026-05-08-03-03-52
+
+## 修改目标
+
+将逆向体素化工作区“DICOM 切片范围”从两个上下排列的原生进度条，改为一条自绘轨道叠加两个可拖动端点的范围条。
+
+## 涉及路径
+
+- `WebSite/src/components/ReverseWorkspace.tsx`
+- `WebSite/src/index.css`
+- `工程分析/经验记录.md`
+
+## 技术路线
+
+1. 在 `ReverseWorkspace.tsx` 中基于 `safeSliceStart`、`safeSliceEnd`、`displayStart`、`displayEnd` 计算范围条起止百分比。
+2. 替换原有两个 `<label><input type="range"></label>`。
+3. 使用一个 `relative` 容器绘制：
+   - 灰色底轨；
+   - 蓝色选中范围；
+   - 两个透明轨道的 `range input`，只显示滑块端点。
+4. 在 `index.css` 中新增 `.dicom-range-input` 样式，隐藏原生轨道，保留 thumb，并让 thumb 可点击拖动。
+5. 端点重合时提高“起点”滑块层级，便于从默认 `300-300` 状态向左拖出范围。
+
+## 数据流与交互流程
+
+- 用户拖动起点端点：调用 `setSliceStart(Number(event.target.value))`。
+- 用户拖动终点端点：调用 `setSliceEnd(Number(event.target.value))`。
+- 当前显示范围继续由 `displayStart = min(start, end)` 与 `displayEnd = max(start, end)` 决定。
+- 后续 `loadFusionVolume(displayStart/displayEnd)` 相关逻辑保持现状。
+
+## 兼容性与回滚方案
+
+- 若自定义样式在目标浏览器表现异常，可回滚本次对 `ReverseWorkspace.tsx` 和 `index.css` 的修改，恢复两个原生 range。
+- 本次不修改后端 API 和数据结构，回滚风险较低。
+
+## 风险控制
+
+- 保留无障碍 `aria-label`，明确起点和终点端点。
+- 通过 `npm run lint` 和 `npm run build` 检查 TypeScript 与构建。
+- 部署后通过页面源码或构建产物搜索确认不存在“起点/终点两个 label + 两个进度条”的旧结构。
+
+## 预计文件变更
+
+- 新增本次需求、实现、测试方案文档。
+- 修改 `ReverseWorkspace.tsx` 中 DICOM 范围控件 JSX。
+- 修改 `index.css` 增加范围条浏览器兼容样式。
+- 追加 `经验记录.md`。
+
+## 人工审核状态
+
+用户已在项目工作流历史中确认后续直接执行，本次不等待二次人工审核。