fix(expenses): refine operation record audit UI

web/src/components/travel/TravelRequestExpenseCaseTimeline.vue

@@ -1,14 +1,16 @@
 <template>
-  <section class="expense-case-timeline" aria-label="费用事件时间线">
+  <section class="expense-case-timeline" aria-labelledby="expense-case-timeline-title">
     <div class="expense-case-timeline-head">
       <div>
         <div class="expense-case-timeline-title-row">
-          <h4>费用事件时间线</h4>
+          <h4 id="expense-case-timeline-title">费用操作记录</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>
+          <span v-if="displayedEvents.length">共 {{ displayedEvents.length }} 条记录</span>
+          <span v-if="displayedEvents.length">最新优先</span>
         </p>
         <p v-else>记录费用从申请、审批、报销到付款的真实办理轨迹。</p>
       </div>
@@ -19,12 +21,12 @@
         aria-label="刷新费用事件时间线"
         @click="refreshExpenseCaseTimeline"
       >
-        <i :class="loading ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-refresh'"></i>
+        <i :class="loading ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-refresh'" aria-hidden="true"></i>
         <span>刷新</span>
       </button>
     </div>
 
-    <div class="expense-case-timeline-body" aria-live="polite">
+    <div class="expense-case-timeline-body" :aria-busy="loading">
       <div v-if="loading && !timeline" class="expense-case-state loading">
         <i class="mdi mdi-loading mdi-spin"></i>
         <span>正在同步真实费用事件</span>
@@ -55,34 +57,50 @@
         </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 v-else-if="timeline" class="expense-case-event-table">
+        <div class="expense-case-event-columns" aria-hidden="true">
+          <span>发生时间</span>
+          <span>事件</span>
+          <span>操作人</span>
+        </div>
+        <ol class="expense-case-event-list">
+          <li
+            v-for="event in displayedEvents"
+            :key="event.id"
+            class="expense-case-event"
+            :class="event.tone"
+          >
+            <time
+              class="expense-case-event-time"
+              :datetime="event.occurredAt || undefined"
+            >
+              {{ event.occurredAtLabel }}
+            </time>
+            <div class="expense-case-event-main">
+              <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>
             </div>
-          </div>
-        </li>
-      </ol>
+            <div class="expense-case-event-actor" :title="event.actorLabel">
+              <i class="mdi mdi-account-outline" aria-hidden="true"></i>
+              <span>{{ event.actorLabel }}</span>
+            </div>
+          </li>
+        </ol>
+      </div>
     </div>
   </section>
 </template>
 
 <script setup>
-import { toRef } from 'vue'
+import { computed, toRef } from 'vue'
 
 import { useExpenseCaseTimeline } from '../../composables/requests/useExpenseCaseTimeline.js'
+import { orderExpenseCaseEventsForDisplay } from '../../utils/expenseCaseTimeline.js'
 
 const props = defineProps({
   claimId: { type: String, default: '' },
@@ -99,6 +117,8 @@ const {
   claimId: toRef(props, 'claimId'),
   refreshKey: toRef(props, 'refreshKey')
 })
+
+const displayedEvents = computed(() => orderExpenseCaseEventsForDisplay(timeline.value?.events))
 </script>
 
 <style scoped src="../../assets/styles/components/travel-request-expense-case-timeline.css"></style>