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

修改概述

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

主要改进

1. 任务头部优化

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

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

<!-- 任务头部：标题和状态标签 -->
<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）提升可读性

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

3. 状态颜色标识

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

4. 信息展示优化

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

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

代码变更

模板变更

<!-- 之前 -->
<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() 方法：

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'
}

样式变更

新增样式类：

.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: 初始版本
• ✅ 调整任务头部布局，添加状态标签
• ✅ 任务编号单独一行显示
• ✅ 添加完整的状态颜色系统
• ✅ 优化信息展示结构
• ✅ 与任务页面样式保持一致