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

## 人工审核状态

用户已在项目工作流历史中确认后续直接执行，本次不等待二次人工审核。