admin/xyzw_web_helper

Fork 0

Files

kirin 90094ccd5a 1.0

2025-10-17 20:56:50 +08:00

9.1 KiB

Raw Permalink Blame History

功能更新：进度显示手动关闭

📋 更新说明

用户反馈：执行进度不要马上消失，希望提供一个关闭按钮让我自行控制。

解决方案：

✅ 执行完成后进度区域不自动隐藏
✅ 添加"关闭"按钮，用户手动控制关闭时机
✅ 可以在执行完成后继续查看结果
✅ 点击"关闭"按钮后进度区域才消失

🎯 功能特点

1. 保持显示

✅ 批量任务执行完成后，进度区域继续显示
✅ 可以继续查看每个Token的执行结果
✅ 可以点击"详情"按钮查看任务明细

2. 手动关闭

✅ 右上角显示"关闭"按钮
✅ 点击后进度区域消失
✅ 下次执行时自动重新显示

3. 方便对比

✅ 执行完成后可以对比不同Token的结果
✅ 可以截图保存执行结果
✅ 不用担心结果瞬间消失

🎨 界面展示

执行中

┌─────────────────────────────────────────┐
│ 执行进度                       [关闭]   │
├─────────────────────────────────────────┤
│ ⟳ 主号战士    [████████]  80%          │
│ ⟳ 小号法师    [████░░░░]  50%          │
│ ⏸ 练级号      [░░░░░░░░]   0%          │
└─────────────────────────────────────────┘

执行完成后

┌─────────────────────────────────────────┐
│ 执行进度                       [关闭]   │
├─────────────────────────────────────────┤
│ ✅ 主号战士    成功: 7  失败: 0  [详情] │
│ ✅ 小号法师    成功: 6  失败: 1  [详情] │
│ ❌ 练级号      成功: 3  失败: 4  [详情] │
└─────────────────────────────────────────┘
   ↑ 执行完成后继续显示，等待用户关闭

🔧 修改的文件

1. 核心Store

文件: src/stores/batchTaskStore.js

新增状态:

const showProgress = ref(false) // 是否显示进度区域

新增方法:

// 关闭进度显示
const closeProgressDisplay = () => {
  showProgress.value = false
  console.log(`🔒 进度显示已关闭`)
}

执行逻辑修改:

// 开始执行时显示进度
const startBatchExecution = async () => {
  showProgress.value = true // 显示进度区域
  // ... 执行任务
  // 完成后不自动隐藏，等待用户手动关闭
}

2. UI组件

文件: src/views/TokenImport.vue

显示条件修改:

<!-- 从 v-if="batchStore.isExecuting" -->
<!-- 改为 v-if="batchStore.showProgress" -->
<div v-if="batchStore.showProgress && tokenStore.hasTokens">

添加关闭按钮:

<div class="progress-header">
  <h2>执行进度</h2>
  <n-button secondary @click="handleCloseProgress">
    <template #icon>
      <n-icon><Close /></n-icon>
    </template>
    关闭
  </n-button>
</div>

🚀 使用方法

查看执行结果

步骤1：执行批量任务

1. 选择任务模板
2. 点击"开始执行"
3. 等待任务完成

步骤2：查看结果

任务执行完成后：
✅ 进度区域继续显示（不会消失）
✅ 可以查看每个Token的结果
✅ 可以点击"详情"查看失败原因
✅ 可以截图保存结果

步骤3：关闭显示

查看完结果后：
1. 点击右上角"关闭"按钮
2. 进度区域消失
3. 下次执行时自动重新显示

💡 使用场景

场景1：对比执行结果

需求：执行完成后对比不同Token的成功率

旧版本: ❌
- 执行完成后进度立即消失
- 无法对比结果
- 需要查看执行历史

新版本: ✅
- 执行完成后进度保持显示
- 可以直接对比各Token结果
- 一目了然

场景2：记录执行情况

需求：截图保存执行结果

旧版本: ❌
- 进度消失太快
- 来不及截图
- 无法保存当时的状态

新版本: ✅
- 执行完成后继续显示
- 从容截图
- 完整记录执行情况

场景3：分析失败原因

需求：查看哪些Token失败了，为什么失败

旧版本: ❌
- 进度消失后需要重新执行才能查看
- 或者去执行历史查找

新版本: ✅
- 执行完成后直接查看
- 点击"详情"分析失败原因
- 不需要重新执行

场景4：向他人展示

需求：展示批量任务的执行效果

旧版本: ❌
- 执行完成后进度消失
- 无法展示结果

新版本: ✅
- 执行完成后保持显示
- 可以详细展示每个Token的结果
- 更有说服力

🔄 工作流程

完整流程

1. 点击"开始执行"
   ↓
2. showProgress = true
   ↓
3. 显示进度区域
   ↓
4. 执行批量任务
   ↓
5. 任务执行完成
   ↓
6. isExecuting = false (任务完成)
   但 showProgress = true (继续显示)
   ↓
7. 用户查看结果、点击详情、截图等
   ↓
8. 用户点击"关闭"按钮
   ↓
9. showProgress = false
   ↓
10. 进度区域消失

状态说明

// 执行中
isExecuting: true
showProgress: true
→ 显示进度区域，显示执行中状态

// 执行完成
isExecuting: false
showProgress: true
→ 仍然显示进度区域，显示完成状态

// 用户关闭
isExecuting: false
showProgress: false
→ 进度区域消失

🎯 对比优势

旧版本（自动消失）

优点：
- 界面简洁，执行完自动清理

缺点：
❌ 无法查看执行结果
❌ 来不及截图
❌ 无法对比不同Token
❌ 需要查看历史记录

新版本（手动关闭）

优点：
✅ 可以仔细查看结果
✅ 可以从容截图
✅ 可以对比分析
✅ 可以展示给他人
✅ 更灵活的控制

缺点：
- 需要手动点击关闭（但这正是用户需要的控制）

🔍 技术细节

状态管理

// batchTaskStore.js
const showProgress = ref(false)

// 开始执行时显示
startBatchExecution() {
  showProgress.value = true
  isExecuting.value = true
  // ... 执行任务
}

// 执行完成时不隐藏
finishBatchExecution() {
  isExecuting.value = false
  // showProgress 保持 true，等待用户关闭
}

// 用户点击关闭
closeProgressDisplay() {
  showProgress.value = false
}

显示逻辑

<!-- 只要 showProgress 为 true 就显示 -->
<div v-if="batchStore.showProgress && tokenStore.hasTokens">
  <div class="progress-header">
    <h2>执行进度</h2>
    <!-- 始终显示关闭按钮 -->
    <n-button @click="handleCloseProgress">关闭</n-button>
  </div>
  <!-- 进度卡片列表 -->
</div>

💡 使用技巧

1. 执行完成后的操作

推荐顺序：
1. 查看总体统计（成功数、失败数）
2. 找出失败的Token
3. 点击"详情"查看失败原因
4. 截图保存（如需要）
5. 记录或处理失败问题
6. 点击"关闭"清理界面

2. 批量分析

对于多个Token：
1. 从上到下浏览所有Token
2. 对比成功率
3. 找出共同的失败任务
4. 针对性优化任务模板

3. 结果导出

虽然没有导出功能，但可以：
1. 截图保存结果
2. 或在控制台查看详细日志
3. 或查看执行历史记录

🔄 与其他功能的配合

1. 任务详情查看

执行完成后 → 保持显示 → 点击"详情" → 查看每个任务结果

2. 执行历史

执行完成后 → 查看当前结果 → 关闭显示 → 可在历史记录中回顾

3. 定时任务

定时执行 → 查看结果 → 分析问题 → 优化配置 → 下次定时更好

⚠️ 注意事项

1. 刷新页面

⚠️ 刷新页面后进度区域会消失
💡 执行结果仍可在历史记录中查看

2. 重新执行

✅ 关闭当前进度显示后可以重新执行
✅ 新执行会自动显示新的进度区域

3. 多次执行

✅ 每次执行都会重置进度区域
✅ 上一次的结果会被新的覆盖
💡 想保留结果可以先截图

🎉 总结

本次更新让进度显示变得可控：

核心改进

✅ 执行完成后不自动消失 - 可以仔细查看
✅ 添加关闭按钮 - 用户手动控制
✅ 灵活性更高 - 想看多久看多久
✅ 更好的用户体验 - 不会错过结果

实用价值

✅ 可以对比分析结果
✅ 可以截图保存
✅ 可以展示给他人
✅ 可以详细排查问题

简单易用

✅ 无需配置，自动生效
✅ 关闭按钮位置显眼
✅ 一键关闭，简单方便

现在你可以从容地查看批量任务的执行结果了！ 🎯

📚 相关文档

功能更新-任务详情查看.md - 查看每个任务的执行情况
功能更新-自定义并发数.md - 调整并发执行数量
批量任务使用说明.md - 完整功能说明

9.1 KiB Raw Permalink Blame History Unescape Escape