324 lines
9.4 KiB
Markdown
324 lines
9.4 KiB
Markdown
# 功能更新-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 读取每日发车次数（按账号和日期独立计数）：
|
||
|
||
```javascript
|
||
// 获取今日发车次数
|
||
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. **状态标签类型**
|
||
|
||
根据发车次数动态设置标签颜色：
|
||
|
||
```javascript
|
||
// 发车状态类型
|
||
const carStatusType = computed(() => {
|
||
const count = dailyCarSendCount.value
|
||
if (count >= 4) return 'error' // 红色：已达上限
|
||
if (count >= 3) return 'warning' // 黄色：即将达到上限
|
||
return 'success' // 绿色：正常
|
||
})
|
||
```
|
||
|
||
### 3. **状态文本**
|
||
|
||
根据发车次数显示不同的提示文本：
|
||
|
||
```javascript
|
||
// 发车状态文本
|
||
const carStatusText = computed(() => {
|
||
const count = dailyCarSendCount.value
|
||
if (count >= 4) return '今日已达上限'
|
||
if (count === 0) return '今日未发车'
|
||
return `剩余${4 - count}次`
|
||
})
|
||
```
|
||
|
||
### 4. **UI组件**
|
||
|
||
使用 Naive UI 组件构建发车状态显示：
|
||
|
||
```vue
|
||
<!-- 发车状态 -->
|
||
<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. **样式设计**
|
||
|
||
美化发车状态显示区域：
|
||
|
||
```scss
|
||
.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`**
|
||
1. **导入图标**（第380行）：
|
||
- 添加 `CarSportSharp` 图标
|
||
|
||
2. **HTML模板**（第94-111行）：
|
||
- 添加发车状态显示区域
|
||
|
||
3. **任务标签映射**（第407-415行）：
|
||
- 添加 `sendCar: '发车'` 映射
|
||
|
||
4. **计算属性**（第417-442行）：
|
||
- `dailyCarSendCount`：获取今日发车次数
|
||
- `carStatusType`：计算状态标签类型
|
||
- `carStatusText`：计算状态提示文本
|
||
|
||
5. **样式**（第639-645行）：
|
||
- 添加 `.car-status-section` 样式
|
||
|
||
6. **深色主题**（第745-748行）：
|
||
- 添加深色主题下的样式
|
||
|
||
7. **子任务说明**（第277行）：
|
||
- 添加发车任务说明
|
||
|
||
### 新增文件
|
||
- `MD说明/功能更新-Token卡片显示发车状态v3.9.2.md`
|
||
|
||
## 🧪 测试场景
|
||
|
||
### 场景1：查看未发车账号
|
||
1. 执行批量任务
|
||
2. 查看执行进度
|
||
3. **预期结果**：
|
||
- 未发车的账号显示"发车: 0/4"
|
||
- 绿色标签
|
||
- 提示"今日未发车"
|
||
|
||
### 场景2：查看部分发车账号
|
||
1. 账号已发车2次
|
||
2. 执行批量任务
|
||
3. **预期结果**：
|
||
- 显示"发车: 2/4"
|
||
- 绿色标签
|
||
- 提示"剩余2次"
|
||
|
||
### 场景3：查看即将达到上限账号
|
||
1. 账号已发车3次
|
||
2. 执行批量任务
|
||
3. **预期结果**：
|
||
- 显示"发车: 3/4"
|
||
- **黄色标签**（警告）
|
||
- 提示"剩余1次"
|
||
|
||
### 场景4：查看已达上限账号
|
||
1. 账号已发车4次
|
||
2. 执行批量任务
|
||
3. **预期结果**：
|
||
- 显示"发车: 4/4"
|
||
- **红色标签**（错误）
|
||
- 提示"今日已达上限"
|
||
|
||
### 场景5：跨日期重置
|
||
1. 第一天发车4次
|
||
2. 第二天查看
|
||
3. **预期结果**：
|
||
- 显示"发车: 0/4"（自动重置）
|
||
- 绿色标签
|
||
- 提示"今日未发车"
|
||
|
||
## 💡 设计亮点
|
||
|
||
### 1. **实时同步**
|
||
- 使用 `computed` 属性，实时从 localStorage 读取最新发车次数
|
||
- 无需手动刷新，自动更新显示
|
||
|
||
### 2. **视觉反馈**
|
||
- 颜色渐变：绿色 → 黄色 → 红色
|
||
- 直观表达发车进度和警告
|
||
|
||
### 3. **信息完整**
|
||
- 次数显示：X/4
|
||
- 状态文本：剩余X次 / 今日未发车 / 今日已达上限
|
||
- 图标标识：🚗 一眼识别
|
||
|
||
### 4. **布局合理**
|
||
- 紧凑显示，不占用过多空间
|
||
- 与现有结果统计区域风格统一
|
||
|
||
### 5. **主题适配**
|
||
- 支持亮色和深色主题
|
||
- 自动调整背景和边框颜色
|
||
|
||
## 🔄 版本信息
|
||
|
||
- **版本号**: v3.9.2
|
||
- **更新日期**: 2025-01-08
|
||
- **更新内容**:
|
||
- Token卡片新增发车状态显示
|
||
- 支持实时显示发车次数和上限
|
||
- 根据发车次数动态变色（绿/黄/红）
|
||
- 添加状态提示文本
|
||
- **依赖版本**: v3.9.1
|
||
|
||
## 🚀 使用说明
|
||
|
||
### 查看发车状态
|
||
1. 启动批量任务执行
|
||
2. 在执行进度区域查看每个token卡片
|
||
3. 卡片底部会显示发车状态：🚗 发车: X/4
|
||
|
||
### 状态说明
|
||
- **绿色标签**：正常，还有发车额度
|
||
- **黄色标签**：警告，仅剩1次
|
||
- **红色标签**：已达上限，今日无法继续发车
|
||
|
||
### 注意事项
|
||
1. 发车次数按账号（tokenId）和日期独立计数
|
||
2. 每天0点自动重置为0/4
|
||
3. 显示的是实时数据，会随着任务执行自动更新
|
||
|
||
## 🐛 已知问题
|
||
|
||
无
|
||
|
||
## 📈 后续计划
|
||
|
||
- [ ] 添加发车历史记录查看
|
||
- [ ] 支持点击发车状态查看详细发车记录
|
||
- [ ] 添加发车成功/失败统计
|
||
|
||
---
|
||
|
||
**✅ 功能已完成！刷新页面（Ctrl + F5）即可在token卡片中看到发车状态！**
|
||
|