9.3 KiB
9.3 KiB
UI优化 - 自动跟随滚动位置优化 v3.13.5.3
📋 问题描述
用户反馈
在批量任务执行时，开启"自动跟随"功能后：
- ❌ 正在执行的卡片只显示在屏幕最顶部一点点
- ❌ 看不到周围的上下文（已完成和待执行的卡片）
- ❌ 视觉效果不够直观
期望效果
- ✅ 正在执行的卡片显示在更合适的位置
- ✅ 能看到上面一些已完成的卡片（提供上下文）
- ✅ 能看到下面更多待执行的卡片（了解进度）
- ✅ 整体视觉效果更好
🔍 原因分析
原有实现
// 旧代码：将目标卡片居中显示
const itemTop = row * props.itemHeight
const containerCenter = containerHeight.value / 2
const targetScrollTop = Math.max(0, itemTop - containerCenter + props.itemHeight / 2)
问题：
- 居中显示虽然看起来合理，但实际体验不佳
- 如果卡片在列表末尾，居中可能导致下方空白过多
- 用户看不到足够的上下文信息
- 滚动幅度可能过大，视觉突兀
🔧 优化方案
新的滚动逻辑
将正在执行的卡片显示在 视口的上3/4位置
优势：
- 完整历史 - 显示3/4高度的已完成卡片，提供完整的历史记录
- 醒目位置 - 正在执行的卡片在较下方的醒目位置
- 简洁预览 - 显示1/4高度的待执行卡片，避免信息过载
- 专注当前 - 用户可以更专注于当前执行的任务和已完成的进度
实施代码
文件： src/components/VirtualScrollList.vue
// 滚动到指定索引的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. 视觉高亮（可选）
可以考虑为正在执行的卡片添加更明显的视觉提示：
/* 正在执行的卡片添加发光效果 */
.executing-card {
box-shadow: 0 0 20px rgba(103, 126, 234, 0.6);
border: 2px solid #677eea;
}
2. 滚动速度调整（可选）
可以调整滚动动画时长：
containerRef.value.scrollTo({
top: targetScrollTop,
behavior: 'smooth' // 或者使用 'auto' 实现瞬间滚动
})
3. 可配置的滚动位置（未来）
允许用户自定义正在执行卡片的显示位置：
- 上1/2位置（看到更多下方卡片）
- 上2/3位置（平衡视图）
- 上3/4位置（默认，更多历史记录）
📝 技术说明
滚动位置计算
// 计算公式
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布局的列数：
const row = Math.floor(index / columnsPerRow.value)
- 1列布局：index 0 → row 0
- 5列布局：index 10 → row 2（第3行）
- 自动适配不同屏幕宽度
🧪 测试建议
测试场景
-
小批量测试（10-20个token）
- 观察开始阶段的滚动效果
- 验证上方没有卡片时的表现
-
中批量测试（100个token）
- 观察中间阶段的上下文显示
- 验证滚动是否平滑
-
大批量测试（500-900个token）
- 观察尾声阶段的效果
- 验证性能是否流畅
预期结果
- ✅ 滚动位置合适，能看到上下文
- ✅ 滚动动画平滑，不卡顿
- ✅ 自动跟随开关正常工作
- ✅ 手动滚动时自动停止跟随
🎨 用户体验提升
优化前的问题
- ❌ "怎么只看到一点点？"
- ❌ "不知道前面执行了什么"
- ❌ "看不到后面还有多少任务"
优化后的体验
- ✅ "一眼就能看到正在执行哪个"
- ✅ "能看到前面完成了哪些"
- ✅ "能看到后面还有什么任务"
- ✅ "整体进度一目了然"
🔄 后续优化方向
短期（v3.14）
- 添加正在执行卡片的高亮效果
- 优化滚动动画曲线
- 添加滚动位置的用户配置
中期（v3.15）
- 支持键盘快捷键（上/下箭头）手动切换关注的卡片
- 添加"跳转到首个失败"功能
- 记住用户的滚动偏好
长期（v3.16+）
- 支持多种滚动模式（跟随最新、跟随首个执行中、跟随失败）
- 添加小地图导航（显示整体进度，点击跳转）
- 智能预测滚动（根据执行速度预判）
📌 版本信息
- 版本号： v3.13.5.3
- 优化类型： UI/UX 优化
- 影响范围： 批量任务执行的自动跟随功能
- 向后兼容： ✅ 完全兼容
- 用户操作： 无需任何配置，自动生效