# 首页任务列表样式优化说明

## 修改概述

将首页（index.vue）的任务列表样式调整为与任务功能页面（task/index.vue）一致，提升用户体验的一致性。

## 主要改进

### 1. 任务头部优化

**之前**：
- 标题独立一行
- 没有状态标签

**现在**：
- 标题和状态标签并排显示
- 状态标签带有颜色标识，更直观

```vue
<!-- 任务头部：标题和状态标签 -->
<view class="task-header">
  <view class="task-title">{{ getTaskTypeText(task.type) }} - {{ task.vehicle }}</view>
  <view class="task-status" :class="getStatusClass(task.taskStatus)">
    {{ getStatusText(task.status) }}
  </view>
</view>
```

### 2. 任务编号突出显示

**之前**：
- 任务编号与其他信息混在一起

**现在**：
- 任务编号单独一行
- 使用虚线边框分隔
- 使用等宽字体（monospace）提升可读性

```vue
<!-- 任务编号单独一行 -->
<view class="task-code-row">
  <text class="task-code">{{ task.taskNo }}</text>
</view>
```

### 3. 状态颜色标识

添加了完整的状态颜色系统，与任务页面保持一致：

| 状态 | 颜色 | 背景色 |
|------|------|--------|
| 待处理 (PENDING) | 橙色 #ff9500 | #fff3e0 |
| 出发中 (DEPARTING) | 蓝色 #007AFF | #e3f2fd |
| 已到达 (ARRIVED) | 紫色 #9c27b0 | #f3e5f5 |
| 返程中 (RETURNING) | 青色 #009688 | #e0f2f1 |
| 已完成 (COMPLETED) | 绿色 #34C759 | #e8f5e9 |
| 已取消 (CANCELLED) | 灰色 #999 | #f5f5f5 |
| 处理中 (IN_PROGRESS) | 蓝色 #007AFF | #e3f2fd |

### 4. 信息展示优化

**调整内容**：
- 移除了任务状态信息行（已在头部显示）
- 优化了出发地和目的地的显示位置
- 保持出发时间和执行人员的显示

**布局结构**：
```
┌─────────────────────────────────────┐
│ 急救转运 - 粤A12345    [待处理]     │
├─────────────────────────────────────┤
│ TD1021                              │ ← 任务编号
├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤
│ 出发地: 广州天河    目的地: 广州东站 │
│ 出发时间: 13:20    执行人员: 张三   │
└─────────────────────────────────────┘
│ [出发]  [取消]                      │
└─────────────────────────────────────┘
```

## 代码变更

### 模板变更

```vue
<!-- 之前 -->
<view class="task-main">
  <view class="task-title">{{ getTaskTypeText(task.type) }} - {{ task.vehicle }}</view>
  <view class="task-info">
    <view class="info-row">
      <view class="info-item">
        <view class="label">任务编号:</view>
        <view class="value">{{ task.taskNo }}</view>
      </view>
      <view class="info-item">
        <view class="label">任务状态:</view>
        <view class="value">{{ getStatusText(task.status) }}</view>
      </view>
    </view>
    <!-- 其他信息 -->
  </view>
</view>

<!-- 现在 -->
<view class="task-main">
  <!-- 任务头部：标题和状态标签 -->
  <view class="task-header">
    <view class="task-title">{{ getTaskTypeText(task.type) }} - {{ task.vehicle }}</view>
    <view class="task-status" :class="getStatusClass(task.taskStatus)">
      {{ getStatusText(task.status) }}
    </view>
  </view>
  
  <!-- 任务编号单独一行 -->
  <view class="task-code-row">
    <text class="task-code">{{ task.taskNo }}</text>
  </view>
  
  <!-- 任务详细信息 -->
  <view class="task-info">
    <!-- 只保留出发地、目的地、时间、人员 -->
  </view>
</view>
```

### 方法新增

添加了 `getStatusClass()` 方法：

```javascript
getStatusClass(status) {
  const statusClassMap = {
    'PENDING': 'status-pending',
    'DEPARTING': 'status-departing',
    'ARRIVED': 'status-arrived',
    'RETURNING': 'status-returning',
    'COMPLETED': 'status-completed',
    'CANCELLED': 'status-cancelled',
    'IN_PROGRESS': 'status-in-progress'
  }
  return statusClassMap[status] || 'status-default'
}
```

### 样式变更

新增样式类：

```scss
.task-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15rpx;
  
  .task-title {
    flex: 1;
    font-size: 32rpx;
    font-weight: bold;
    padding-right: 20rpx;
    line-height: 1.4;
  }
  
  .task-status {
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    white-space: nowrap;
    flex-shrink: 0;
    
    &.status-pending { /* 橙色 */ }
    &.status-departing { /* 蓝色 */ }
    &.status-arrived { /* 紫色 */ }
    &.status-returning { /* 青色 */ }
    &.status-completed { /* 绿色 */ }
    &.status-cancelled { /* 灰色 */ }
  }
}

.task-code-row {
  margin-bottom: 15rpx;
  padding: 10rpx 0;
  border-bottom: 1rpx dashed #e0e0e0;
  
  .task-code {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    font-family: monospace;
  }
}
```

## 视觉对比

### 优化前
```
┌─────────────────────────────────────┐
│ 急救转运 - 粤A12345                 │
│                                     │
│ 任务编号: TD1021    任务状态: 待处理│
│ 出发地: 广州天河    目的地: 广州东站 │
│ 出发时间: 13:20    执行人员: 张三   │
└─────────────────────────────────────┘
```

### 优化后
```
┌─────────────────────────────────────┐
│ 急救转运 - 粤A12345    [待处理]     │ ← 状态标签带颜色
├─────────────────────────────────────┤
│ TD1021                              │ ← 编号突出显示
├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤
│ 出发地: 广州天河    目的地: 广州东站 │
│ 出发时间: 13:20    执行人员: 张三   │
└─────────────────────────────────────┘
```

## 一致性保证

### 与任务页面的一致性

| 特性 | 首页 | 任务页面 | 状态 |
|------|------|---------|------|
| 任务头部布局 | ✅ | ✅ | 一致 |
| 状态标签颜色 | ✅ | ✅ | 一致 |
| 任务编号样式 | ✅ | ✅ | 一致 |
| 信息行布局 | ✅ | ✅ | 一致 |
| 操作按钮样式 | ✅ | ✅ | 一致 |

## 用户体验提升

1. **视觉一致性**：首页和任务页面样式统一，降低学习成本
2. **信息层级**：通过颜色和布局突出重要信息（状态、编号）
3. **易读性**：任务编号使用等宽字体，更易识别
4. **直观性**：状态颜色标识，一眼就能看出任务状态

## 版本历史

- **2025-01-25 v1**: 初始版本
  - ✅ 调整任务头部布局，添加状态标签
  - ✅ 任务编号单独一行显示
  - ✅ 添加完整的状态颜色系统
  - ✅ 优化信息展示结构
  - ✅ 与任务页面样式保持一致