## 任务描述

实现订单历史记录的前端显示功能，包括：
1. 创建历史记录时间线组件
2. 在订单详情页集成历史记录显示
3. 实现分页加载和错误处理

## 参考文档

- **技术规格**: `SPEC.md`
- **API 文档**: `API.md`

## 需要创建/修改的文件

### 1. 创建历史记录组件

**文件**: `frontend/src/components/orders/OrderHistory.vue`（新建）

创建一个时间线组件，显示订单操作历史。

**功能要求**:
- 时间线布局（垂直时间轴）
- 不同操作类型使用不同图标和颜色
- 显示操作人、时间、描述
- 支持分页加载（"查看更多"按钮）
- 空状态提示
- 加载状态和错误处理

**图标映射**:
```javascript
const actionIcons = {
  'propose_price_change': AlertCircle,  // 价格调整
  'confirm_price_change': CheckCircle,  // 确认价格
  'reject_price_change': XCircle,       // 拒绝价格
  'upload_receiving_photo': Camera,     // 上传照片
  'warehouse_receive_item': Package,    // 入库
  'ship_parcel': Truck,                 // 发货
  // ... 其他操作类型
}
```

**组件结构示例**:
```vue
<template>
  <div class="order-history">
    <h3 class="text-lg font-semibold mb-4">订单历史</h3>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="flex justify-center py-8">
      <Loader2 class="animate-spin" />
    </div>
    
    <!-- 错误状态 -->
    <div v-else-if="error" class="text-red-600 py-4">
      {{ error }}
    </div>
    
    <!-- 空状态 -->
    <div v-else-if="history.length === 0" class="text-gray-500 py-8 text-center">
      暂无历史记录
    </div>
    
    <!-- 时间线 -->
    <div v-else class="space-y-4">
      <div v-for="item in history" :key="item.id" class="flex gap-4">
        <!-- 图标 -->
        <div class="flex-shrink-0">
          <component :is="getIcon(item.action_type)" class="w-5 h-5" />
        </div>
        
        <!-- 内容 -->
        <div class="flex-1">
          <div class="flex items-center gap-2">
            <span class="font-medium">{{ item.actor_name }}</span>
            <span class="text-sm text-gray-500">{{ formatTime(item.created_at) }}</span>
          </div>
          <p class="text-gray-700 mt-1">{{ item.description }}</p>
        </div>
      </div>
      
      <!-- 加载更多 -->
      <button v-if="hasMore" @click="loadMore" class="btn-secondary w-full">
        查看更多
      </button>
    </div>
  </div>
</template>
```

### 2. 添加 API 服务方法

**文件**: `frontend/src/services/order.js`

添加获取订单历史的方法：

```javascript
async getOrderHistory(orderId, limit = 50, offset = 0) {
  const response = await api.get(`/orders/${orderId}/history`, {
    params: { limit, offset }
  })
  return response.data
}
```

### 3. 集成到订单详情页

**文件**: `frontend/src/views/orders/OrderDetailPage.vue`

在订单详情下方添加历史记录区块：

```vue
<template>
  <div class="order-detail-page">
    <!-- 现有的订单详情内容 -->
    <!-- ... -->
    
    <!-- 历史记录区块（新增） -->
    <div class="mt-8 bg-white rounded-lg shadow p-6">
      <OrderHistory :order-id="order.id" />
    </div>
  </div>
</template>

<script setup>
import OrderHistory from '@/components/orders/OrderHistory.vue'
// ... 其他导入
</script>
```

### 4. 更新类型定义

**文件**: `frontend/src/types/api.d.ts`

添加历史记录相关的类型定义：

```typescript
interface OrderHistoryItem {
  id: string
  action_type: string
  actor_id: string
  actor_name: string
  actor_role: 'client' | 'partner' | 'admin' | 'system'
  description: string
  created_at: string
  metadata: Record<string, any>
}

interface OrderHistoryResponse {
  order_id: string
  order_number: string
  total: number
  limit: number
  offset: number
  history: OrderHistoryItem[]
}
```

## 完成标准

- [ ] OrderHistory 组件创建完成，样式美观
- [ ] 时间线布局正确，不同操作有不同图标
- [ ] 时间格式友好（如"2小时前"、"昨天 14:30"）
- [ ] 分页加载功能正常
- [ ] 空状态、加载状态、错误状态处理完善
- [ ] 订单详情页正确集成历史记录组件
- [ ] 类型定义完整，TypeScript 检查通过
- [ ] 响应式设计，移动端显示正常

## 测试要点

1. 测试历史记录显示：
   - 创建测试订单，执行多个操作
   - 验证所有操作都显示在历史记录中
   - 验证时间、操作人、描述正确

2. 测试分页功能：
   - 创建有大量历史记录的订单
   - 点击"查看更多"加载更多记录
   - 验证不重复加载

3. 测试边界情况：
   - 新订单（无历史记录）
   - API 错误（网络失败）
   - 权限不足（403 错误）

4. 测试响应式：
   - 桌面端显示
   - 移动端显示
   - 平板显示

## UI/UX 要求

1. **时间线样式**：
   - 左侧图标，右侧内容
   - 图标之间用竖线连接
   - 不同操作类型用不同颜色

2. **时间格式**：
   - 1小时内：显示"X分钟前"
   - 24小时内：显示"X小时前"
   - 昨天：显示"昨天 HH:mm"
   - 更早：显示"MM-DD HH:mm"

3. **空状态**：
   - 显示友好的提示信息
   - 可选：显示一个图标

4. **加载状态**：
   - 使用 Loader2 旋转图标
   - 居中显示

## 注意事项

1. **使用现有组件库**：使用 Lucide Vue Next 图标，Tailwind CSS 样式
2. **保持一致性**：参考现有页面的样式和布局
3. **性能优化**：使用虚拟滚动（如果历史记录很多）
4. **错误处理**：API 调用失败时显示友好的错误信息
5. **国际化**：暂时使用中文，预留国际化接口