48 lines
1.6 KiB
Markdown
48 lines
1.6 KiB
Markdown
# 实现方案
|
||
|
||
开始时间：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` 计算。
|
||
- 构建和类型检查通过后再部署。
|
||
|
||
## 人工审核状态
|
||
|
||
用户已明确本次不需要人工二次确认，直接执行。
|