2026-05-08-02-54-30 调整模型切分范围条

2026-05-08 02:57:45 +08:00
parent 8e0e54fc3c
commit aee4466a94
6 changed files with 235 additions and 7 deletions
--- a/WebSite/src/App.tsx
+++ b/WebSite/src/App.tsx
@@ -2177,13 +2177,13 @@ export default function App() {
                        <span className="text-blue-600">起点 {clampedModelStart + 1}</span>
                        <span className="text-orange-600">终点 {clampedModelEnd + 1}</span>
                      </div>
-                      <div className="relative h-8">
-                        <div className="absolute left-0 right-0 top-3 h-1.5 rounded-full bg-slate-200"></div>
+                      <div className="relative h-10 px-1">
+                        <div className="absolute left-1 right-1 top-4 h-2 rounded-full bg-slate-200"></div>
                        <div
-                          className="absolute top-3 h-1.5 rounded-full bg-blue-500/60"
+                          className="absolute top-4 h-2 rounded-full bg-blue-600"
                          style={{
-                            left: `${Math.min(clampedModelStart, clampedModelEnd) / Math.max(1, viewerFrameCount - 1) * 100}%`,
-                            right: `${100 - Math.max(clampedModelStart, clampedModelEnd) / Math.max(1, viewerFrameCount - 1) * 100}%`,
+                            left: `calc(${Math.min(clampedModelStart, clampedModelEnd) / Math.max(1, viewerFrameCount - 1) * 100}% + 4px)`,
+                            right: `calc(${100 - Math.max(clampedModelStart, clampedModelEnd) / Math.max(1, viewerFrameCount - 1) * 100}% + 4px)`,
                          }}
                        ></div>
                        <input
@@ -2192,7 +2192,8 @@ export default function App() {
                          max={viewerFrameCount - 1}
                          value={clampedModelStart}
                          onChange={event => setModelClipStart(parseInt(event.target.value, 10))}
-                          className="absolute inset-x-0 top-0 w-full h-8 appearance-none bg-transparent accent-blue-600 cursor-pointer"
+                          className="dual-range-input dual-range-input-start absolute inset-x-0 top-0 z-20 w-full h-10 bg-transparent cursor-pointer"
+                          aria-label="模型切分起点帧"
                        />
                        <input
                          type="range"
@@ -2200,7 +2201,8 @@ export default function App() {
                          max={viewerFrameCount - 1}
                          value={clampedModelEnd}
                          onChange={event => setModelClipEnd(parseInt(event.target.value, 10))}
-                          className="absolute inset-x-0 top-0 w-full h-8 appearance-none bg-transparent accent-orange-500 cursor-pointer"
+                          className="dual-range-input dual-range-input-end absolute inset-x-0 top-0 z-30 w-full h-10 bg-transparent cursor-pointer"
+                          aria-label="模型切分终点帧"
                        />
                      </div>
                      <p className="text-[10px] font-bold text-slate-400">
--- a/WebSite/src/index.css
+++ b/WebSite/src/index.css
@@ -1 +1,56 @@
@import "tailwindcss";
+
+.dual-range-input {
+  -webkit-appearance: none;
+  appearance: none;
+  pointer-events: none;
+}
+
+.dual-range-input::-webkit-slider-runnable-track {
+  height: 0;
+  background: transparent;
+  border: 0;
+}
+
+.dual-range-input::-moz-range-track {
+  height: 0;
+  background: transparent;
+  border: 0;
+}
+
+.dual-range-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  pointer-events: auto;
+  width: 20px;
+  height: 20px;
+  margin-top: -9px;
+  border-radius: 9999px;
+  border: 3px solid #ffffff;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
+}
+
+.dual-range-input::-moz-range-thumb {
+  pointer-events: auto;
+  width: 20px;
+  height: 20px;
+  border-radius: 9999px;
+  border: 3px solid #ffffff;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
+}
+
+.dual-range-input-start::-webkit-slider-thumb {
+  background: #2563eb;
+}
+
+.dual-range-input-start::-moz-range-thumb {
+  background: #2563eb;
+}
+
+.dual-range-input-end::-webkit-slider-thumb {
+  background: #f97316;
+}
+
+.dual-range-input-end::-moz-range-thumb {
+  background: #f97316;
+}
--- a/工程分析/实现方案-2026-05-08-02-54-30.md
+++ b/工程分析/实现方案-2026-05-08-02-54-30.md
@@ -0,0 +1,47 @@
+# 实现方案
+
+开始时间：2026-05-08-02-54-30
+
+## 本次方案路径
+
+`工程分析/实现方案-2026-05-08-02-54-30.md`
+
+## 实现目标
+
+把模型切分的起点/终点 UI 从两条原生滑杆改为一个单条范围控件。
+
+## 涉及文件
+
+- `WebSite/src/App.tsx`
+- `WebSite/src/index.css`
+- `工程分析/经验记录.md`
+
+## 执行步骤
+
+1. 在 `App.tsx` 中调整模型切分范围控件：
+   - 只保留一个可见灰色轨道。
+   - 用一个绝对定位蓝色条显示 `min(start,end)` 到 `max(start,end)` 的范围。
+   - 两个透明 range input 叠加在同一轨道上，只显示手柄，不显示原生轨道。
+   - 起点端点使用蓝色，终点端点使用橙色。
+2. 在 `index.css` 中新增 `.dual-range-input` 样式：
+   - 隐藏 `::-webkit-slider-runnable-track` 和 `::-moz-range-track`。
+   - 自定义 `::-webkit-slider-thumb` 和 `::-moz-range-thumb`。
+   - 设置 pointer-events，避免透明 input 阻挡拖拽。
+3. 运行前端类型检查和构建。
+4. 更新经验记录。
+5. 提交并推送 Gitea，commit 信息使用 `2026-05-08-02-54-30 调整模型切分范围条`。
+6. 重新部署到 `http://192.168.3.11:3005/`。
+
+## 回滚思路
+
+如范围控件在浏览器中不可拖动，可回滚 `App.tsx` 和 `index.css` 中本次范围控件样式，恢复原两个 range input。
+
+## 风险控制
+
+- 仅调整 UI 展示和拖拽样式，不改后端 mask 生成逻辑。
+- 保留原有 `modelClipStart`、`modelClipEnd` 状态和 `clampedModelStart`、`clampedModelEnd` 计算。
+- 构建和类型检查通过后再部署。
+
+## 人工审核状态
+
+用户已明确本次不需要人工二次确认，直接执行。
--- a/工程分析/测试方案-2026-05-08-02-54-30.md
+++ b/工程分析/测试方案-2026-05-08-02-54-30.md
@@ -0,0 +1,61 @@
+# 测试方案
+
+开始时间：2026-05-08-02-54-30
+
+## 本次方案路径
+
+`工程分析/测试方案-2026-05-08-02-54-30.md`
+
+## 测试范围
+
+- 模型切分范围控件是否显示为一个单条范围条。
+- 起点/终点端点是否在同一条轨道上。
+- 起点/终点是否仍可拖动并允许交叉。
+- 前端类型检查和构建。
+- 重新部署访问验证。
+
+## 测试命令
+
+前端类型检查：
+
+```bash
+cd WebSite
+npm run lint
+```
+
+前端构建：
+
+```bash
+cd WebSite
+npm run build
+```
+
+部署验证：
+
+```bash
+curl -I --max-time 5 http://192.168.3.11:3005/
+```
+
+## 手工验证点
+
+- 打开 DICOM 阅览，上传 STL，启用模型切分。
+- 模型切分范围只显示一条轨道。
+- 蓝色范围条位于起点与终点之间。
+- 拖动蓝色起点端点、橙色终点端点，两个端点仍可交叉。
+- 起点帧/终点帧 mask 展示仍正常刷新。
+
+## 验收标准
+
+- 不再出现“起点”和“终点”两条独立进度条。
+- `npm run lint` 通过。
+- `npm run build` 通过。
+- Gitea commit/push 完成。
+- 重新部署后 `http://192.168.3.11:3005/` 返回 `200 OK`。
+
+## 残余风险
+
+- 原生 range 手柄在不同浏览器的细节样式可能略有差异，但应保持单条范围条的视觉结构。
+
+## 人工审核状态
+
+用户已明确本次不需要人工二次确认，直接执行。
--- a/工程分析/经验记录.md
+++ b/工程分析/经验记录.md
@@ -91,3 +91,21 @@ C. 解决问题方案
 D. 后续如何避免问题

 涉及医学影像与模型叠加时，mask 必须来自真实几何或分割数据，不能用装饰性形状替代。若 STL 与 DICOM 坐标系不一致，应优先补充配准矩阵或平移/旋转/缩放参数，而不是在图像上手工假标。
+
+## 2026-05-08-02-54-30 调整模型切分范围条
+
+A. 具体问题
+
+模型切分的起点和终点虽然逻辑上共用一段范围，但 UI 使用两个原生 range 叠加，浏览器仍显示两条完整蓝色轨道，看起来像两个独立进度条。
+
+B. 产生问题原因
+
+原生 `<input type="range">` 会绘制自己的轨道。两个 range 即使绝对定位叠在同一区域，也会各自显示一条轨道，不能自然表现为单条范围选择器。
+
+C. 解决问题方案
+
+将可见轨道改为自定义 div：一条灰色总轨道和一段蓝色选中范围；两个原生 range 仅保留透明拖拽层和手柄。通过 CSS 隐藏 WebKit/Firefox 的原生轨道，并分别给起点、终点手柄设置颜色。
+
+D. 后续如何避免问题
+
+实现双端范围选择器时，不要直接依赖两个原生 range 的默认轨道。应使用自定义轨道绘制范围，仅让原生 input 提供拖拽能力，或引入明确支持 range selection 的组件。
--- a/工程分析/需求分析-2026-05-08-02-54-30.md
+++ b/工程分析/需求分析-2026-05-08-02-54-30.md
@@ -0,0 +1,45 @@
+# 需求分析
+
+开始时间：2026-05-08-02-54-30
+
+## 原始需求
+
+用户要求严格使用代码编纂工作流，并在最开始确认整体流程。本次需求分析、实现方案、测试方案和执行修改都不需要人工二次确认。
+
+具体问题：模型切分中的起点、终点应合并到一个进度条里，这个控件应表现为一个“范围”，而不是两条独立进度条。用户截图显示当前界面仍然出现“起点”和“终点”两条蓝色进度条。
+
+## 目标
+
+- 将模型切分起点/终点控件改成一个真正的范围条。
+- 范围条只有一条灰色总轨道。
+- 起点和终点之间显示一段蓝色选中范围。
+- 两个端点在同一条轨道上拖动，允许交叉。
+- 保留现有起点帧/终点帧 mask 逻辑。
+
+## 影响范围
+
+- `WebSite/src/App.tsx`
+  - 调整模型切分范围控件 DOM 和样式。
+- `WebSite/src/index.css`
+  - 新增范围控件的原生 range 轨道隐藏和端点样式。
+- `工程分析/经验记录.md`
+
+## 当前定位
+
+当前实现使用两个原生 `<input type="range">` 叠放，但原生 range 的轨道仍可见，因此浏览器绘制出两条完整蓝色轨道，视觉上不是一个范围控件。
+
+## 约束
+
+- 不修改后端 STL mask 算法。
+- 不改变起点帧/终点帧计算逻辑。
+- 不新增前端依赖。
+- 本次不需要用户二次确认，可直接执行。
+
+## 风险点
+
+- 原生 range 在不同浏览器中伪元素样式不同，需要同时覆盖 WebKit 和 Firefox。
+- 两个端点重叠时，需要保证都能拖动。
+
+## 待确认事项
+
+用户已明确本次不需要人工二次确认，直接执行。