1.0
This commit is contained in:
266
MD说明文件夹/UI优化-自动跟随滚动位置优化v3.13.5.3.md
Normal file
266
MD说明文件夹/UI优化-自动跟随滚动位置优化v3.13.5.3.md
Normal file
@@ -0,0 +1,266 @@
|
||||
# UI优化 - 自动跟随滚动位置优化 v3.13.5.3
|
||||
|
||||
## 📋 问题描述
|
||||
|
||||
### 用户反馈
|
||||
在批量任务执行时，开启"自动跟随"功能后：
|
||||
- ❌ 正在执行的卡片只显示在屏幕最顶部一点点
|
||||
- ❌ 看不到周围的上下文（已完成和待执行的卡片）
|
||||
- ❌ 视觉效果不够直观
|
||||
|
||||
### 期望效果
|
||||
- ✅ 正在执行的卡片显示在更合适的位置
|
||||
- ✅ 能看到上面一些已完成的卡片（提供上下文）
|
||||
- ✅ 能看到下面更多待执行的卡片（了解进度）
|
||||
- ✅ 整体视觉效果更好
|
||||
|
||||
---
|
||||
|
||||
## 🔍 原因分析
|
||||
|
||||
### 原有实现
|
||||
```javascript
|
||||
// 旧代码：将目标卡片居中显示
|
||||
const itemTop = row * props.itemHeight
|
||||
const containerCenter = containerHeight.value / 2
|
||||
const targetScrollTop = Math.max(0, itemTop - containerCenter + props.itemHeight / 2)
|
||||
```
|
||||
|
||||
**问题：**
|
||||
- 居中显示虽然看起来合理，但实际体验不佳
|
||||
- 如果卡片在列表末尾，居中可能导致下方空白过多
|
||||
- 用户看不到足够的上下文信息
|
||||
- 滚动幅度可能过大，视觉突兀
|
||||
|
||||
---
|
||||
|
||||
## 🔧 优化方案
|
||||
|
||||
### 新的滚动逻辑
|
||||
将正在执行的卡片显示在 **视口的上3/4位置**
|
||||
|
||||
**优势：**
|
||||
1. **完整历史** - 显示3/4高度的已完成卡片，提供完整的历史记录
|
||||
2. **醒目位置** - 正在执行的卡片在较下方的醒目位置
|
||||
3. **简洁预览** - 显示1/4高度的待执行卡片，避免信息过载
|
||||
4. **专注当前** - 用户可以更专注于当前执行的任务和已完成的进度
|
||||
|
||||
### 实施代码
|
||||
**文件：** `src/components/VirtualScrollList.vue`
|
||||
|
||||
```javascript
|
||||
// 滚动到指定索引的item，显示在视口上3/4位置（优化后的自动跟随效果）
|
||||
const scrollToIndex = (index, behavior = 'smooth') => {
|
||||
if (!containerRef.value) return
|
||||
|
||||
// 计算该索引所在的行
|
||||
const row = Math.floor(index / columnsPerRow.value)
|
||||
|
||||
// 🎯 优化：将目标项显示在视口的上3/4位置
|
||||
// 这样可以：
|
||||
// 1. 上方显示大量已完成的卡片（完整的历史记录）
|
||||
// 2. 正在执行的卡片在较下方的醒目位置
|
||||
// 3. 下方保留少量空间显示即将执行的卡片
|
||||
const itemTop = row * props.itemHeight
|
||||
const viewportThreeQuarters = (containerHeight.value * 3) / 4 // 视口的3/4位置
|
||||
const targetScrollTop = Math.max(0, itemTop - viewportThreeQuarters)
|
||||
|
||||
containerRef.value.scrollTo({
|
||||
top: targetScrollTop,
|
||||
behavior
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 效果对比
|
||||
|
||||
### 优化前（居中显示）
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ │ 上方空白或少量卡片
|
||||
│ │
|
||||
│ ┌─────────────────────┐ │
|
||||
│ │ 正在执行的卡片 │ │ ← 居中位置
|
||||
│ └─────────────────────┘ │
|
||||
│ │
|
||||
│ │ 下方空白或少量卡片
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
**问题：** 上下文信息少，不够直观
|
||||
|
||||
### 优化后（上3/4位置）
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ ┌─────────────────────┐ │
|
||||
│ │ 已完成的卡片1 │ │
|
||||
│ └─────────────────────┘ │
|
||||
│ ┌─────────────────────┐ │
|
||||
│ │ 已完成的卡片2 │ │
|
||||
│ └─────────────────────┘ │ 上方3/4高度
|
||||
│ ┌─────────────────────┐ │ 显示已完成的卡片
|
||||
│ │ 已完成的卡片3 │ │ （更多历史记录）
|
||||
│ └─────────────────────┘ │
|
||||
│ ┌─────────────────────┐ │
|
||||
│ │ 已完成的卡片4 │ │
|
||||
│ └─────────────────────┘ │
|
||||
├─────────────────────────────────┤ ← 3/4分界线
|
||||
│ ┌─────────────────────┐ │
|
||||
│ │ 正在执行的卡片 │ │ ← 醒目位置
|
||||
│ └─────────────────────┘ │
|
||||
│ ┌─────────────────────┐ │ 下方1/4高度
|
||||
│ │ 待执行的卡片1 │ │ 显示即将执行的卡片
|
||||
│ └─────────────────────┘ │
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
**优势：** 完整历史记录，专注当前任务，简洁预览
|
||||
|
||||
---
|
||||
|
||||
## 🎯 使用效果
|
||||
|
||||
### 实际场景（900个token批量任务）
|
||||
|
||||
#### 任务开始阶段
|
||||
- ✅ 第1-3个token执行时，显示在顶部（因为上方没有足够卡片）
|
||||
- ✅ 第4个token开始，上方显示已完成的历史记录
|
||||
|
||||
#### 任务进行中（最佳体验阶段）
|
||||
- ✅ 上方：看到大量已完成的卡片（6-10个，绿色"已完成"）
|
||||
- ✅ 当前：正在执行的卡片（蓝色"执行中"）在较下方的醒目位置
|
||||
- ✅ 下方：看到1-2个即将执行的卡片（灰色"待执行"）
|
||||
|
||||
#### 任务尾声阶段
|
||||
- ✅ 可以看到大量已完成的卡片在上方（完整的执行历史）
|
||||
- ✅ 最后几个执行的卡片依然在醒目位置
|
||||
- ✅ 下方空间逐渐减少，清晰传达任务即将完成的信息
|
||||
|
||||
---
|
||||
|
||||
## 💡 其他优化建议
|
||||
|
||||
### 1. 视觉高亮（可选）
|
||||
可以考虑为正在执行的卡片添加更明显的视觉提示：
|
||||
```css
|
||||
/* 正在执行的卡片添加发光效果 */
|
||||
.executing-card {
|
||||
box-shadow: 0 0 20px rgba(103, 126, 234, 0.6);
|
||||
border: 2px solid #677eea;
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 滚动速度调整（可选）
|
||||
可以调整滚动动画时长：
|
||||
```javascript
|
||||
containerRef.value.scrollTo({
|
||||
top: targetScrollTop,
|
||||
behavior: 'smooth' // 或者使用 'auto' 实现瞬间滚动
|
||||
})
|
||||
```
|
||||
|
||||
### 3. 可配置的滚动位置（未来）
|
||||
允许用户自定义正在执行卡片的显示位置：
|
||||
- 上1/2位置（看到更多下方卡片）
|
||||
- 上2/3位置（平衡视图）
|
||||
- 上3/4位置（默认，更多历史记录）
|
||||
|
||||
---
|
||||
|
||||
## 📝 技术说明
|
||||
|
||||
### 滚动位置计算
|
||||
```javascript
|
||||
// 计算公式
|
||||
itemTop = row × itemHeight // 卡片顶部位置
|
||||
viewportThreeQuarters = (containerHeight × 3) / 4 // 视口3/4高度
|
||||
targetScrollTop = itemTop - viewportThreeQuarters // 目标滚动位置
|
||||
|
||||
// 示例（假设卡片高度220px，视口高度900px）
|
||||
// 第10个卡片（第10行）
|
||||
itemTop = 10 × 220 = 2200px
|
||||
viewportThreeQuarters = (900 × 3) / 4 = 675px
|
||||
targetScrollTop = 2200 - 675 = 1525px
|
||||
// 结果：容器滚动到1525px，第10个卡片显示在距离顶部675px的位置（3/4位置）
|
||||
```
|
||||
|
||||
### Grid布局适配
|
||||
代码已考虑Grid布局的列数：
|
||||
```javascript
|
||||
const row = Math.floor(index / columnsPerRow.value)
|
||||
```
|
||||
- 1列布局：index 0 → row 0
|
||||
- 5列布局：index 10 → row 2（第3行）
|
||||
- 自动适配不同屏幕宽度
|
||||
|
||||
---
|
||||
|
||||
## 🧪 测试建议
|
||||
|
||||
### 测试场景
|
||||
1. **小批量测试（10-20个token）**
|
||||
- 观察开始阶段的滚动效果
|
||||
- 验证上方没有卡片时的表现
|
||||
|
||||
2. **中批量测试（100个token）**
|
||||
- 观察中间阶段的上下文显示
|
||||
- 验证滚动是否平滑
|
||||
|
||||
3. **大批量测试（500-900个token）**
|
||||
- 观察尾声阶段的效果
|
||||
- 验证性能是否流畅
|
||||
|
||||
### 预期结果
|
||||
- ✅ 滚动位置合适，能看到上下文
|
||||
- ✅ 滚动动画平滑，不卡顿
|
||||
- ✅ 自动跟随开关正常工作
|
||||
- ✅ 手动滚动时自动停止跟随
|
||||
|
||||
---
|
||||
|
||||
## 🎨 用户体验提升
|
||||
|
||||
### 优化前的问题
|
||||
- ❌ "怎么只看到一点点？"
|
||||
- ❌ "不知道前面执行了什么"
|
||||
- ❌ "看不到后面还有多少任务"
|
||||
|
||||
### 优化后的体验
|
||||
- ✅ "一眼就能看到正在执行哪个"
|
||||
- ✅ "能看到前面完成了哪些"
|
||||
- ✅ "能看到后面还有什么任务"
|
||||
- ✅ "整体进度一目了然"
|
||||
|
||||
---
|
||||
|
||||
## 🔄 后续优化方向
|
||||
|
||||
### 短期（v3.14）
|
||||
- [ ] 添加正在执行卡片的高亮效果
|
||||
- [ ] 优化滚动动画曲线
|
||||
- [ ] 添加滚动位置的用户配置
|
||||
|
||||
### 中期（v3.15）
|
||||
- [ ] 支持键盘快捷键（上/下箭头）手动切换关注的卡片
|
||||
- [ ] 添加"跳转到首个失败"功能
|
||||
- [ ] 记住用户的滚动偏好
|
||||
|
||||
### 长期（v3.16+）
|
||||
- [ ] 支持多种滚动模式（跟随最新、跟随首个执行中、跟随失败）
|
||||
- [ ] 添加小地图导航（显示整体进度，点击跳转）
|
||||
- [ ] 智能预测滚动（根据执行速度预判）
|
||||
|
||||
---
|
||||
|
||||
## 📌 版本信息
|
||||
- **版本号：** v3.13.5.3
|
||||
- **优化类型：** UI/UX 优化
|
||||
- **影响范围：** 批量任务执行的自动跟随功能
|
||||
- **向后兼容：** ✅ 完全兼容
|
||||
- **用户操作：** 无需任何配置，自动生效
|
||||
|
||||
## 📚 相关文档
|
||||
- [性能优化总结 v3.13.5](./性能优化总结v3.13.5.md)
|
||||
- [问题修复-WebSocket连接关闭错误 v3.13.5.2](./问题修复-WebSocket连接关闭错误v3.13.5.2.md)
|
||||
- [UI优化-滚动视觉提示增强 v3.11.19](./UI优化-滚动视觉提示增强v3.11.19.md)
|
||||
|
||||
Reference in New Issue
Block a user