# 实现方案

开始时间：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` 计算。
- 构建和类型检查通过后再部署。

## 人工审核状态

用户已明确本次不需要人工二次确认，直接执行。