# 物流轨迹自动加载优化

## 优化目标

将物流轨迹从"手动点击查询"改为"打开详情自动加载"，提升用户体验：
1. 打开订单详情时自动显示物流轨迹
2. 无需额外点击"查询轨迹"按钮
3. 保留"刷新轨迹"按钮用于手动更新

## 用户体验对比

### 优化前
```
用户操作流程：
1. 点击订单查看详情
2. 等待详情加载
3. 找到"查询轨迹"按钮
4. 点击"查询轨迹"
5. 等待轨迹加载
6. 查看物流信息

总步骤：6步
```

### 优化后
```
用户操作流程：
1. 点击订单查看详情
2. 等待详情和轨迹自动加载
3. 查看物流信息

总步骤：3步
减少：50%操作步骤
```

## 代码修改

### 1. 自动加载逻辑

**文件**：`admin/src/views/consumer/prescription/order_list.vue`

在 `openDetail()` 函数中添加自动加载：

```typescript
async function openDetail(id: number) {
    detailVisible.value = true
    detailData.value = null
    logisticsTracePayload.value = null
    detailLogisticsExpress.value = 'auto'
    detailLoading.value = true
    try {
        const res: any = await prescriptionOrderDetail({ id })
        const d = res?.data ?? res ?? null
        detailData.value = d
        if (d) {
            detailLogisticsExpress.value = String(d.express_company || 'auto') || 'auto'
            
            // 如果有快递单号，自动加载物流轨迹
            if (String(d.tracking_number || '').trim()) {
                fetchLogisticsTrace()
            }
        }
    } catch (e: any) {
        feedback.msgError(e?.message || '加载失败')
        detailVisible.value = false
    } finally {
        detailLoading.value = false
    }
}
```

**关键点**：
- 检查订单是否有快递单号
- 有快递单号时自动调用 `fetchLogisticsTrace()`
- 无快递单号时不调用，避免无效请求

### 2. UI调整

#### 按钮改为"刷新轨迹"

```vue
<el-button
    v-perms="['tcm.prescriptionOrder/logisticsTrace']"
    type="default"
    size="small"
    :loading="logisticsTraceLoading"
    @click="fetchLogisticsTrace"
>
    <template #icon>
        <el-icon><Refresh /></el-icon>
    </template>
    刷新轨迹
</el-button>
```

**改动**：
- 按钮文字：`查询轨迹` → `刷新轨迹`
- 按钮类型：`type="primary"` → `type="default"`（降低视觉优先级）
- 添加刷新图标：`<Refresh />`

#### 添加加载状态提示

```vue
<div v-if="logisticsTraceLoading && !logisticsTracePayload" class="text-sm text-gray-500 mb-2">
    <el-icon class="is-loading"><Loading /></el-icon>
    正在加载物流轨迹...
</div>
```

**作用**：
- 首次自动加载时显示加载提示
- 已有数据时不显示（避免闪烁）
- 使用旋转动画图标

#### 导入图标

```typescript
import { Refresh, Loading } from '@element-plus/icons-vue'
```

## 工作流程

### 完整流程

```
用户点击"查看详情"
    ↓
打开详情弹窗
    ↓
加载订单详情
    ↓
检查是否有快递单号？
    ↓ 有
自动调用 fetchLogisticsTrace()
    ↓
显示"正在加载物流轨迹..."
    ↓
查询数据库（优先）
    ↓
有数据？
    ↓ 有
显示物流轨迹（13条记录）
    ↓
显示数据来源和更新时间
```

### 手动刷新流程

```
用户点击"刷新轨迹"按钮
    ↓
重新调用 fetchLogisticsTrace()
    ↓
查询数据库（优先）
    ↓
无数据或需要更新？
    ↓ 是
调用快递100 API
    ↓
更新数据库
    ↓
显示最新轨迹
```

## 性能优化

### 1. 并行加载

订单详情和物流轨迹是并行加载的：
- 订单详情：`prescriptionOrderDetail()`
- 物流轨迹：`fetchLogisticsTrace()`（在详情加载完成后立即触发）

虽然不是完全并行，但由于物流查询从数据库读取（< 50ms），总体加载时间几乎不增加。

### 2. 条件加载

只有在有快递单号时才加载物流轨迹：
```typescript
if (String(d.tracking_number || '').trim()) {
    fetchLogisticsTrace()
}
```

避免无效请求。

### 3. 数据库优先

物流查询优先从数据库读取：
- 数据库查询：< 50ms
- API查询：> 1000ms

大部分情况下都能从数据库快速获取数据。

## 用户体验提升

### 1. 减少操作步骤
- 从6步减少到3步
- 减少50%操作

### 2. 信息即时可见
- 打开详情即可看到物流信息
- 无需额外操作

### 3. 保留手动控制
- "刷新轨迹"按钮用于手动更新
- 切换快递公司后可重新查询

### 4. 清晰的状态反馈
- 加载中：显示"正在加载物流轨迹..."
- 加载完成：显示轨迹列表
- 数据来源：显示"[数据库]"或"[API实时]"
- 更新时间：显示"最后更新：2026-04-07 17:14:16"

## 边界情况处理

### 1. 无快递单号
- 不调用物流查询
- 不显示物流轨迹区域

### 2. 数据库无数据
- 自动调用快递100 API
- 显示"[API实时]"标签

### 3. 查询失败
- 显示错误提示
- 保留"刷新轨迹"按钮供重试

### 4. 已签收订单
- 显示完整历史轨迹
- 显示"已签收"状态
- 数据不会再自动更新（定时任务已停止）

## 测试场景

### 场景1：有快递单号且数据库有数据
```
1. 打开订单详情
2. 自动显示"正在加载物流轨迹..."
3. < 50ms 后显示13条轨迹
4. 显示"[数据库]"标签
5. 显示"最后更新：2026-04-07 17:14:16"
```

### 场景2：有快递单号但数据库无数据
```
1. 打开订单详情
2. 自动显示"正在加载物流轨迹..."
3. 调用快递100 API（> 1s）
4. 显示轨迹
5. 显示"[API实时]"标签
6. 数据保存到数据库
```

### 场景3：无快递单号
```
1. 打开订单详情
2. 不显示物流轨迹区域
3. 不发起任何物流查询请求
```

### 场景4：手动刷新
```
1. 订单详情已打开，轨迹已显示
2. 点击"刷新轨迹"按钮
3. 重新查询（优先数据库）
4. 更新显示
```

## 相关文件

### 修改的文件
- `admin/src/views/consumer/prescription/order_list.vue` - 订单列表页面

### 相关文档
- `EXPRESS_TRACKING_DATABASE_QUERY.md` - 数据库查询优化
- `EXPRESS_TRACKING_SYNC_COMPLETE.md` - 同步完成报告
- `EXPRESS_TRACKING_SYSTEM.md` - 系统架构

## 总结

✅ 打开详情自动加载物流轨迹
✅ 减少50%用户操作步骤
✅ 保留手动刷新功能
✅ 添加加载状态提示
✅ 优化按钮文字和样式
✅ 条件加载，避免无效请求
✅ 数据库优先，快速响应

**用户体验提升**：
- 操作步骤：6步 → 3步
- 加载时间：< 50ms（数据库）
- 信息可见性：立即可见
- 操作便捷性：无需额外点击

**下一步**：
1. 前端测试自动加载功能
2. 验证各种边界情况
3. 收集用户反馈
4. 可选：添加"自动刷新"开关（用户可选择是否自动加载）