xyzw_web_helper/MD说明文件夹/功能更新-Token卡片显示发车状态v3.9.2.md

# 功能更新-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卡片中看到发车状态！**