9.0 KiB
9.0 KiB
UI优化 - 显示重试轮数 v3.7.1
📌 更新时间
2025-10-07
🎯 优化目标
用户反馈
"如果存在有失败的token，我希望它能够显示第几次重试次数"
核心需求
在批量任务执行过程中，用户需要清楚地看到：
- 当前是否在重试中
- 当前是第几轮重试
- 重试的进度（已重试/总重试次数）
✨ UI改进
改进1: 执行进度标题
优化前
总体进度 45%
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
优化后
总体进度 🔄 第2轮重试 45%
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
实现效果：
- 首次执行时：只显示"总体进度"
- 重试中：显示橙色标签"🔄 第X轮重试"
- 动态更新：每轮重试时X会自动增加
改进2: 统计信息面板
优化前
总计 成功 失败 跳过 耗时
318 280 38 0 2分30秒
优化后（启用自动重试时）
总计 成功 失败 跳过 重试轮数 耗时
318 280 38 0 2/3 2分30秒
↑橙色高亮
实现效果：
- 仅在启用自动重试时显示
- 格式：
当前轮数/最大轮数 - 橙色高亮，字体加粗
- 实时更新
改进3: 配置区域
保持原有显示
最大重试轮数： [3 ▲▼] 轮 (0/3)
↑实时进度
📊 视觉效果示例
场景1: 首次执行
┌────────────────────────────────────────┐
│ 总体进度 15% │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
├────────────────────────────────────────┤
│ 总计 成功 失败 跳过 重试轮数 耗时 │
│ 318 45 0 0 0/3 30秒 │
└────────────────────────────────────────┘
场景2: 第1轮重试中
┌────────────────────────────────────────┐
│ 总体进度 🔄 第1轮重试 35% │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
├────────────────────────────────────────┤
│ 总计 成功 失败 跳过 重试轮数 耗时 │
│ 318 280 38 0 1/3 2分5秒 │
└────────────────────────────────────────┘
场景3: 第2轮重试中
┌────────────────────────────────────────┐
│ 总体进度 🔄 第2轮重试 70% │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
├────────────────────────────────────────┤
│ 总计 成功 失败 跳过 重试轮数 耗时 │
│ 318 310 8 0 2/3 2分35秒│
└────────────────────────────────────────┘
场景4: 所有成功
┌────────────────────────────────────────┐
│ 总体进度 100% │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
├────────────────────────────────────────┤
│ 总计 成功 失败 跳过 重试轮数 耗时 │
│ 318 318 0 0 3/3 3分10秒│
│ ↑完成所有重试 │
└────────────────────────────────────────┘
🔧 实现细节
代码位置
1. 执行进度标题 (BatchTaskPanel.vue 第363-376行)
<div class="progress-header">
<n-space align="center" :size="8">
<span>总体进度</span>
<!-- 🆕 重试标签 -->
<n-tag
v-if="batchStore.currentRetryRound > 0"
type="warning"
size="small"
:bordered="false"
>
🔄 第{{ batchStore.currentRetryRound }}轮重试
</n-tag>
</n-space>
<span>{{ batchStore.overallProgress }}%</span>
</div>
显示条件：currentRetryRound > 0
标签类型：warning（橙色）
图标：🔄
2. 统计信息 (BatchTaskPanel.vue 第407-412行)
<!-- 🆕 重试轮数统计 -->
<n-statistic
v-if="batchStore.autoRetryConfig.enabled"
label="重试轮数"
:value="`${batchStore.currentRetryRound}/${batchStore.autoRetryConfig.maxRetries}`"
class="retry-round"
/>
显示条件：autoRetryConfig.enabled
数值格式："当前/最大" (字符串)
样式类：retry-round
3. CSS样式 (BatchTaskPanel.vue 第1155-1158行)
&.retry-round .n-statistic-value__content {
color: #ff9800; // 橙色
font-weight: 600; // 加粗
}
💡 用户体验提升
提升1: 信息透明度
优化前：
- ❌ 不知道是否在重试
- ❌ 不知道重试了几轮
- ❌ 需要查看控制台才能了解
优化后：
- ✅ 清楚显示重试状态
- ✅ 实时显示重试轮数
- ✅ 一目了然的进度
提升2: 进度感知
用户可以清楚地知道：
看到"🔄 第1轮重试" → 知道在重试中
看到"1/3" → 知道还有2轮机会
看到"3/3" → 知道已达最大重试次数
提升3: 决策支持
重试轮数: 2/3
失败: 15
↓ 用户可以判断
"还有1轮重试机会，等等看"
或
"已经2轮了还有15个失败，可能有问题"
📊 数据更新时机
更新触发点
-
任务开始
currentRetryRound重置为 0- 不显示重试标签
-
首次执行完成，有失败
- 等待5秒（配置的间隔）
currentRetryRound更新为 1- 显示"🔄 第1轮重试"
-
第1轮重试完成，仍有失败
- 等待5秒
currentRetryRound更新为 2- 显示"🔄 第2轮重试"
-
达到最大次数或全部成功
currentRetryRound不再增加- 任务完成后重置为 0
实时性
- 执行中：标签和数值实时更新
- 无延迟：数值变化立即反映在UI
- 自动刷新：无需手动刷新页面
🎯 测试方法
测试1: 验证标签显示
- 执行批量任务
- 观察执行进度标题
- 首次执行时应该不显示重试标签
- 如果有失败，等待5秒
- 应该显示"🔄 第1轮重试"
测试2: 验证数值准确性
- 设置最大重试轮数为3
- 执行任务
- 观察"重试轮数"统计
- 应该显示：0/3 → 1/3 → 2/3 → 3/3
测试3: 验证禁用时不显示
- 关闭自动重试开关
- 执行任务
- 统计信息中不应该显示"重试轮数"
- 执行进度中不应该显示重试标签
测试4: 验证样式
- 检查"重试轮数"数值是否为橙色
- 检查数值是否加粗
- 检查重试标签是否为橙色背景
📝 颜色系统
统计信息颜色
成功：#18a058 (绿色)
失败：#d03050 (红色)
跳过：#f0a020 (黄色)
重试：#ff9800 (橙色) ← 🆕
重试标签颜色
类型：warning
背景：橙色半透明
文字：深橙色
图标：🔄
🔗 相关文件
src/components/BatchTaskPanel.vue- 第363-376行：执行进度标题（重试标签）
- 第407-412行：统计信息（重试轮数）
- 第1155-1158行：重试轮数样式
📌 注意事项
1. 显示条件
- 重试标签：仅当
currentRetryRound > 0时显示 - 重试统计：仅当
autoRetryConfig.enabled时显示
2. 数值含义
0/3：还未开始重试1/3：第1轮重试进行中或已完成3/3：已达最大重试次数
3. 标签位置
- 紧跟在"总体进度"文字后
- 不影响进度百分比显示
- 响应式布局，移动端自动换行
📅 版本信息
- 版本号: v3.7.1
- 更新日期: 2025-10-07
- 更新类型: UI优化
- 优先级: 中
- 影响范围: 批量任务执行界面
🎉 总结
通过这次UI优化：
- 可见性提升：重试状态清晰可见
- 信息丰富：同时显示当前轮数和总轮数
- 用户友好：无需查看控制台即可了解进度
- 视觉优化：橙色高亮，易于识别
用户现在可以一眼看出：
- ✅ 是否在重试中
- ✅ 当前第几轮重试
- ✅ 还有多少重试机会
- ✅ 重试进度如何
让批量任务的执行过程更加透明和可控！🎯