267 lines
9.3 KiB
Markdown
267 lines
9.3 KiB
Markdown
# 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)
|
||
|