feat(expenses): show unified expense event timeline

web/src/components/travel/TravelRequestExpenseCaseTimeline.vue

@@ -0,0 +1,104 @@
+<template>
+  <section class="expense-case-timeline" aria-label="费用事件时间线">
+    <div class="expense-case-timeline-head">
+      <div>
+        <div class="expense-case-timeline-title-row">
+          <h4>费用事件时间线</h4>
+          <span v-if="timeline" class="expense-case-stage">{{ timeline.stageLabel }}</span>
+        </div>
+        <p v-if="timeline" class="expense-case-meta">
+          <span>{{ timeline.caseNo || '统一费用事件' }}</span>
+          <span>已串联 {{ timeline.linkCount }} 张业务单据</span>
+        </p>
+        <p v-else>记录费用从申请、审批、报销到付款的真实办理轨迹。</p>
+      </div>
+      <button
+        class="expense-case-refresh"
+        type="button"
+        :disabled="loading"
+        aria-label="刷新费用事件时间线"
+        @click="refreshExpenseCaseTimeline"
+      >
+        <i :class="loading ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-refresh'"></i>
+        <span>刷新</span>
+      </button>
+    </div>
+
+    <div class="expense-case-timeline-body" aria-live="polite">
+      <div v-if="loading && !timeline" class="expense-case-state loading">
+        <i class="mdi mdi-loading mdi-spin"></i>
+        <span>正在同步真实费用事件</span>
+      </div>
+
+      <div v-else-if="errorMessage" class="expense-case-state error">
+        <i class="mdi mdi-alert-circle-outline"></i>
+        <div>
+          <strong>费用事件加载失败</strong>
+          <span>{{ errorMessage }}</span>
+        </div>
+        <button type="button" @click="refreshExpenseCaseTimeline">重新加载</button>
+      </div>
+
+      <div v-else-if="notAvailable" class="expense-case-state empty">
+        <i class="mdi mdi-timeline-alert-outline"></i>
+        <div>
+          <strong>当前单据尚未纳入统一费用事件</strong>
+          <span>上方进度仍可正常使用，后续业务动作写入后将自动展示办理记录。</span>
+        </div>
+      </div>
+
+      <div v-else-if="timeline && !timeline.events.length" class="expense-case-state empty">
+        <i class="mdi mdi-timeline-clock-outline"></i>
+        <div>
+          <strong>统一费用事件已建立</strong>
+          <span>暂无可展示的办理记录。</span>
+        </div>
+      </div>
+
+      <ol v-else-if="timeline" class="expense-case-event-list">
+        <li
+          v-for="event in timeline.events"
+          :key="event.id"
+          class="expense-case-event"
+          :class="event.tone"
+        >
+          <span class="expense-case-event-icon" aria-hidden="true">
+            <i :class="event.icon"></i>
+          </span>
+          <div class="expense-case-event-copy">
+            <strong>{{ event.label }}</strong>
+            <p>{{ event.summary }}</p>
+            <div class="expense-case-event-meta">
+              <span><i class="mdi mdi-account-outline"></i>{{ event.actorLabel }}</span>
+              <time :datetime="event.occurredAt || undefined">{{ event.occurredAtLabel }}</time>
+            </div>
+          </div>
+        </li>
+      </ol>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { toRef } from 'vue'
+
+import { useExpenseCaseTimeline } from '../../composables/requests/useExpenseCaseTimeline.js'
+
+const props = defineProps({
+  claimId: { type: String, default: '' },
+  refreshKey: { type: String, default: '' }
+})
+
+const {
+  timeline,
+  loading,
+  errorMessage,
+  notAvailable,
+  refreshExpenseCaseTimeline
+} = useExpenseCaseTimeline({
+  claimId: toRef(props, 'claimId'),
+  refreshKey: toRef(props, 'refreshKey')
+})
+</script>
+
+<style scoped src="../../assets/styles/components/travel-request-expense-case-timeline.css"></style>