优化

2026-08-06 13:56:13 +08:00
parent 356bec03fb
commit 85ca013928
14 changed files with 727 additions and 78 deletions
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Check, CircleDot, Clock3, Paperclip } from '@lucide/vue'
+import type { FirstLegOrder } from '@/modules/first-leg/types/firstLegOrder'
+import {
+  FIRST_LEG_PROGRESS_STAGES,
+  getFirstLegProgressIndex,
+  getFirstLegStatusLabel,
+} from '@/modules/first-leg/utils/firstLegOrder'
+
+const props = defineProps<{ order: FirstLegOrder }>()
+
+const currentIndex = computed(() => getFirstLegProgressIndex(props.order.status))
+const timeline = computed(() => [...props.order.timeline].reverse())
+
+function stageState(index: number) {
+  if (index < currentIndex.value) return 'is-complete'
+  if (index === currentIndex.value) return 'is-current'
+  return 'is-pending'
+}
+
+function formatDateTime(value: string) {
+  if (!value) return '时间待更新'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return value
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  })
+}
+</script>
+
+<template>
+  <section class="order-progress" aria-labelledby="order-progress-title">
+    <div class="progress-heading">
+      <div>
+        <h3 id="order-progress-title">订单进度</h3>
+        <span>从订单提交到派送完成</span>
+      </div>
+      <el-tag :type="order.status === 'DELIVERED' ? 'success' : order.status === 'DRAFT' || order.status === 'PENDING_REVIEW' ? 'warning' : 'info'" effect="light">
+        {{ getFirstLegStatusLabel(order.status) }}
+      </el-tag>
+    </div>
+
+    <ol class="progress-stages" aria-label="订单主状态阶段">
+      <li v-for="(stage, index) in FIRST_LEG_PROGRESS_STAGES" :key="stage.code" :class="stageState(index)" :aria-current="index === currentIndex ? 'step' : undefined">
+        <span class="stage-marker" aria-hidden="true"><Check v-if="index < currentIndex" :size="13" /><CircleDot v-else :size="13" /></span>
+        <span class="stage-label">{{ stage.label }}</span>
+      </li>
+    </ol>
+    <p v-if="order.status === 'DRAFT'" class="draft-progress-note">订单提交后开始记录主状态进度。</p>
+
+    <div class="timeline-heading">
+      <h4>进度记录</h4>
+      <span>{{ timeline.length }} 条</span>
+    </div>
+    <el-empty v-if="timeline.length === 0" class="timeline-empty" description="暂无进度记录" :image-size="52" />
+    <el-timeline v-else class="order-timeline">
+      <el-timeline-item v-for="item in timeline" :key="item.id" :timestamp="formatDateTime(item.occurredAt)" placement="top" :type="item.kind === 'MAIN_STATUS' ? 'primary' : 'info'">
+        <div class="timeline-title">
+          <strong>{{ item.title }}</strong>
+          <el-tag v-if="item.kind === 'CUSTOM_NODE'" size="small" effect="plain">业务节点</el-tag>
+          <el-tag v-else-if="item.status" size="small" effect="plain">{{ getFirstLegStatusLabel(item.status) }}</el-tag>
+        </div>
+        <p v-if="item.description">{{ item.description }}</p>
+        <div class="timeline-meta">
+          <span>{{ item.operatorName || '平台' }}</span>
+          <span v-if="item.kind === 'CUSTOM_NODE' && item.plannedAt"><Clock3 :size="13" />计划 {{ formatDateTime(item.plannedAt) }}</span>
+          <span v-if="item.attachmentCount"><Paperclip :size="13" />{{ item.attachmentCount }} 个附件</span>
+        </div>
+      </el-timeline-item>
+    </el-timeline>
+  </section>
+</template>
+
+<style scoped>
+.order-progress { margin-top: 22px; }
+.progress-heading, .timeline-heading, .timeline-title, .timeline-meta { display: flex; align-items: center; }
+.progress-heading { justify-content: space-between; gap: 14px; }
+.progress-heading > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
+.progress-heading h3, .timeline-heading h4 { margin: 0; color: var(--navy); }
+.progress-heading h3 { font-size: 15px; }
+.progress-heading span, .timeline-heading span { color: var(--muted); font-size: 11px; }
+.progress-stages { display: grid; grid-template-columns: repeat(7, minmax(76px, 1fr)); margin: 16px 0 0; padding: 0; overflow-x: auto; list-style: none; }
+.progress-stages li { position: relative; display: flex; min-width: 76px; align-items: center; flex-direction: column; gap: 7px; color: #96a0a6; font-size: 10px; text-align: center; }
+.progress-stages li::before { position: absolute; top: 10px; right: 50%; left: -50%; height: 2px; background: #e1e6e8; content: ''; }
+.progress-stages li:first-child::before { display: none; }
+.progress-stages li.is-complete::before, .progress-stages li.is-current::before { background: var(--primary); }
+.stage-marker { position: relative; z-index: 1; display: grid; width: 22px; height: 22px; place-items: center; border: 2px solid #d9e0e2; border-radius: 50%; background: #fff; }
+.is-complete .stage-marker, .is-current .stage-marker { border-color: var(--primary); color: var(--primary); }
+.is-complete .stage-marker { background: var(--primary); color: #fff; }
+.is-current .stage-label { color: var(--navy); font-weight: 700; }
+.draft-progress-note { margin: 12px 0 0; padding: 10px 12px; background: #f6f8f8; color: var(--muted); font-size: 11px; }
+.timeline-heading { justify-content: space-between; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
+.timeline-heading h4 { font-size: 13px; }
+.order-timeline { margin-top: 14px; padding-left: 5px; }
+.timeline-title { flex-wrap: wrap; gap: 8px; }
+.timeline-title strong { color: var(--navy); font-size: 12px; }
+.order-timeline p { margin: 6px 0; overflow-wrap: anywhere; color: var(--muted); font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
+.timeline-meta { flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 10px; }
+.timeline-meta span { display: inline-flex; align-items: center; gap: 4px; }
+.timeline-empty { padding: 12px 0 0; }
+@media (max-width: 720px) {
+  .progress-stages { grid-template-columns: repeat(7, 82px); padding-bottom: 8px; }
+  .progress-heading { align-items: flex-start; }
+}
+</style>