54 lines
2.2 KiB
Markdown
54 lines
2.2 KiB
Markdown
# 实现方案：单条 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`。
|
||
|
||
## 人工审核状态
|
||
|
||
用户已在项目工作流历史中确认后续直接执行，本次不等待二次人工审核。
|