# 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行) ```vue
总体进度 🔄 第{{ batchStore.currentRetryRound }}轮重试 {{ batchStore.overallProgress }}%
``` **显示条件**：`currentRetryRound > 0` **标签类型**：`warning`（橙色） **图标**：🔄 #### 2. 统计信息 (`BatchTaskPanel.vue` 第407-412行) ```vue ``` **显示条件**：`autoRetryConfig.enabled` **数值格式**：`"当前/最大"` (字符串) **样式类**：`retry-round` #### 3. CSS样式 (`BatchTaskPanel.vue` 第1155-1158行) ```scss &.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个失败，可能有问题" ``` ## 📊 数据更新时机 ### 更新触发点 1. **任务开始** - `currentRetryRound` 重置为 0 - 不显示重试标签 2. **首次执行完成，有失败** - 等待5秒（配置的间隔） - `currentRetryRound` 更新为 1 - 显示"🔄 第1轮重试" 3. **第1轮重试完成，仍有失败** - 等待5秒 - `currentRetryRound` 更新为 2 - 显示"🔄 第2轮重试" 4. **达到最大次数或全部成功** - `currentRetryRound` 不再增加 - 任务完成后重置为 0 ### 实时性 - **执行中**：标签和数值实时更新 - **无延迟**：数值变化立即反映在UI - **自动刷新**：无需手动刷新页面 ## 🎯 测试方法 ### 测试1: 验证标签显示 1. 执行批量任务 2. 观察执行进度标题 3. 首次执行时应该**不显示**重试标签 4. 如果有失败，等待5秒 5. 应该显示"🔄 第1轮重试" ### 测试2: 验证数值准确性 1. 设置最大重试轮数为3 2. 执行任务 3. 观察"重试轮数"统计 4. 应该显示：0/3 → 1/3 → 2/3 → 3/3 ### 测试3: 验证禁用时不显示 1. 关闭自动重试开关 2. 执行任务 3. 统计信息中**不应该**显示"重试轮数" 4. 执行进度中**不应该**显示重试标签 ### 测试4: 验证样式 1. 检查"重试轮数"数值是否为橙色 2. 检查数值是否加粗 3. 检查重试标签是否为橙色背景 ## 📝 颜色系统 ### 统计信息颜色 ``` 成功：#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优化： 1. **可见性提升**：重试状态清晰可见 2. **信息丰富**：同时显示当前轮数和总轮数 3. **用户友好**：无需查看控制台即可了解进度 4. **视觉优化**：橙色高亮，易于识别 用户现在可以一眼看出： - ✅ 是否在重试中 - ✅ 当前第几轮重试 - ✅ 还有多少重试机会 - ✅ 重试进度如何 让批量任务的执行过程更加透明和可控！🎯