9.4 KiB
9.4 KiB
功能更新-Token卡片显示发车状态 v3.9.2
📋 功能描述
在批量任务执行进度的token卡片中添加发车状态和发车上限显示，方便用户实时查看每个账号的发车情况。
🎯 用户需求
发车状态，发车上限，也添加到执行进度的token卡片里面
✨ 新增功能
1. 发车状态显示
在每个token卡片中显示：
- 🚗 发车图标：直观识别发车信息
- 发车次数：今日已发车次数/上限（X/4）
- 状态标签：根据发车次数变色
- 绿色：0-2次（正常）
- 黄色：3次（即将达到上限）
- 红色：4次（已达上限）
- 状态文本：剩余次数或达到上限提示
2. 显示位置
发车状态显示在token卡片的卡片主体（card-body）中：
┌─────────────────────────────────┐
│ 🟢 Token_123 [已完成] [详情] [子任务]│
├─────────────────────────────────┤
│ [成功: 7] [失败: 0] │ ← 结果统计
│ │
│ 🚗 [发车: 2/4] 剩余2次 │ ← ✨ 新增发车状态
└─────────────────────────────────┘
🔧 技术实现
1. 数据读取
从 localStorage 读取每日发车次数（按账号和日期独立计数）：
// 获取今日发车次数
const dailyCarSendCount = computed(() => {
const today = new Date().toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
})
const key = `car_daily_send_count_${today}_${props.tokenId}`
return parseInt(localStorage.getItem(key) || '0')
})
2. 状态标签类型
根据发车次数动态设置标签颜色：
// 发车状态类型
const carStatusType = computed(() => {
const count = dailyCarSendCount.value
if (count >= 4) return 'error' // 红色：已达上限
if (count >= 3) return 'warning' // 黄色：即将达到上限
return 'success' // 绿色：正常
})
3. 状态文本
根据发车次数显示不同的提示文本：
// 发车状态文本
const carStatusText = computed(() => {
const count = dailyCarSendCount.value
if (count >= 4) return '今日已达上限'
if (count === 0) return '今日未发车'
return `剩余${4 - count}次`
})
4. UI组件
使用 Naive UI 组件构建发车状态显示：
<!-- 发车状态 -->
<div class="car-status-section">
<n-space size="small" align="center">
<n-icon size="16" color="#667eea">
<component :is="CarSportSharp" />
</n-icon>
<n-tag
:type="carStatusType"
size="small"
:bordered="false"
>
发车: {{ dailyCarSendCount }}/4
</n-tag>
<n-text depth="3" style="font-size: 12px;">
{{ carStatusText }}
</n-text>
</n-space>
</div>
5. 样式设计
美化发车状态显示区域：
.car-status-section {
margin-top: 8px;
padding: 8px 12px;
background: rgba(102, 126, 234, 0.05); // 淡紫色背景
border-radius: 8px;
border: 1px solid rgba(102, 126, 234, 0.1);
}
// 深色主题
html.dark .card-body .car-status-section {
background: rgba(102, 126, 234, 0.1);
border-color: rgba(102, 126, 234, 0.2);
}
🎨 显示效果
不同状态的显示
状态1：今日未发车（0/4）
┌─────────────────────────────────┐
│ 🚗 [发车: 0/4] 今日未发车 │ ← 绿色标签
└─────────────────────────────────┘
状态2：部分发车（2/4）
┌─────────────────────────────────┐
│ 🚗 [发车: 2/4] 剩余2次 │ ← 绿色标签
└─────────────────────────────────┘
状态3：即将达到上限（3/4）
┌─────────────────────────────────┐
│ 🚗 [发车: 3/4] 剩余1次 │ ← 黄色标签（警告）
└─────────────────────────────────┘
状态4：已达上限（4/4）
┌─────────────────────────────────┐
│ 🚗 [发车: 4/4] 今日已达上限 │ ← 红色标签（错误）
└─────────────────────────────────┘
📊 完整卡片示例
任务执行中
┌─────────────────────────────────┐
│ 🔄 Token_ABC123 [执行中] [详情] [子任务]│
├─────────────────────────────────┤
│ 一键补差 3/7 │
│ ▓▓▓▓▓▓░░░░░░░░░░░░ 43% │
│ │
│ 🚗 [发车: 1/4] 剩余3次 │ ← 发车状态
└─────────────────────────────────┘
任务完成
┌─────────────────────────────────┐
│ ✓ Token_XYZ789 [已完成] [详情] [子任务]│
├─────────────────────────────────┤
│ [成功: 7] [失败: 0] │
│ │
│ 🚗 [发车: 4/4] 今日已达上限 │ ← 发车状态（红色）
└─────────────────────────────────┘
📝 相关文件
修改的文件
src/components/TaskProgressCard.vue
-
导入图标（第380行）：
- 添加
CarSportSharp图标
- 添加
-
HTML模板（第94-111行）：
- 添加发车状态显示区域
-
任务标签映射（第407-415行）：
- 添加
sendCar: '发车'映射
- 添加
-
计算属性（第417-442行）：
dailyCarSendCount：获取今日发车次数carStatusType：计算状态标签类型carStatusText：计算状态提示文本
-
样式（第639-645行）：
- 添加
.car-status-section样式
- 添加
-
深色主题（第745-748行）：
- 添加深色主题下的样式
-
子任务说明（第277行）：
- 添加发车任务说明
新增文件
MD说明/功能更新-Token卡片显示发车状态v3.9.2.md
🧪 测试场景
场景1：查看未发车账号
- 执行批量任务
- 查看执行进度
- 预期结果：
- 未发车的账号显示"发车: 0/4"
- 绿色标签
- 提示"今日未发车"
场景2：查看部分发车账号
- 账号已发车2次
- 执行批量任务
- 预期结果：
- 显示"发车: 2/4"
- 绿色标签
- 提示"剩余2次"
场景3：查看即将达到上限账号
- 账号已发车3次
- 执行批量任务
- 预期结果：
- 显示"发车: 3/4"
- 黄色标签（警告）
- 提示"剩余1次"
场景4：查看已达上限账号
- 账号已发车4次
- 执行批量任务
- 预期结果：
- 显示"发车: 4/4"
- 红色标签（错误）
- 提示"今日已达上限"
场景5：跨日期重置
- 第一天发车4次
- 第二天查看
- 预期结果：
- 显示"发车: 0/4"（自动重置）
- 绿色标签
- 提示"今日未发车"
💡 设计亮点
1. 实时同步
- 使用
computed属性，实时从 localStorage 读取最新发车次数 - 无需手动刷新，自动更新显示
2. 视觉反馈
- 颜色渐变：绿色 → 黄色 → 红色
- 直观表达发车进度和警告
3. 信息完整
- 次数显示：X/4
- 状态文本：剩余X次 / 今日未发车 / 今日已达上限
- 图标标识：🚗 一眼识别
4. 布局合理
- 紧凑显示，不占用过多空间
- 与现有结果统计区域风格统一
5. 主题适配
- 支持亮色和深色主题
- 自动调整背景和边框颜色
🔄 版本信息
- 版本号: v3.9.2
- 更新日期: 2025-01-08
- 更新内容:
- Token卡片新增发车状态显示
- 支持实时显示发车次数和上限
- 根据发车次数动态变色（绿/黄/红）
- 添加状态提示文本
- 依赖版本: v3.9.1
🚀 使用说明
查看发车状态
- 启动批量任务执行
- 在执行进度区域查看每个token卡片
- 卡片底部会显示发车状态：🚗 发车: X/4
状态说明
- 绿色标签：正常，还有发车额度
- 黄色标签：警告，仅剩1次
- 红色标签：已达上限，今日无法继续发车
注意事项
- 发车次数按账号（tokenId）和日期独立计数
- 每天0点自动重置为0/4
- 显示的是实时数据，会随着任务执行自动更新
🐛 已知问题
无
📈 后续计划
- 添加发车历史记录查看
- 支持点击发车状态查看详细发车记录
- 添加发车成功/失败统计
✅ 功能已完成！刷新页面（Ctrl + F5）即可在token卡片中看到发车状态！