refactor: enforce 800 line source limits

web/src/components/travel/TravelRequestDetailHero.vue

@@ -0,0 +1,57 @@
+<template>
+  <article class="detail-hero panel">
+    <div class="hero-banner">
+      <div class="hero-banner-main">
+        <div class="applicant-card">
+          <div class="portrait">
+            <img src="/assets/person.png" alt="" />
+          </div>
+          <div class="applicant-copy">
+            <div class="applicant-name-row">
+              <h2>{{ profile.name }}</h2>
+              <span class="identity-badge">{{ profile.identity }}</span>
+            </div>
+            <div class="applicant-profile-meta">
+              <div class="applicant-profile-meta__org">
+                <span class="applicant-meta-item">
+                  <em>部门</em>
+                  <strong>{{ profile.department }}</strong>
+                </span>
+                <span class="applicant-meta-item applicant-meta-item--sub">
+                  <em>直属上司</em>
+                  <strong>{{ profile.manager }}</strong>
+                </span>
+              </div>
+              <div class="applicant-profile-meta__role">
+                <span class="applicant-meta-item">
+                  <em>职级</em>
+                  <strong>{{ profile.grade }}</strong>
+                </span>
+                <span class="applicant-meta-item">
+                  <em>岗位</em>
+                  <strong>{{ profile.position }}</strong>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="hero-fact-grid">
+          <div v-for="item in heroFactItems" :key="item.key" class="hero-fact">
+            <div class="hero-fact-label">
+              <i v-if="item.icon" :class="item.icon"></i>
+              <span>{{ item.label }}</span>
+            </div>
+            <strong :class="item.valueClass">{{ item.value }}</strong>
+          </div>
+        </div>
+      </div>
+    </div>
+  </article>
+</template>
+
+<script setup>
+defineProps({
+  profile: { type: Object, required: true },
+  heroFactItems: { type: Array, default: () => [] }
+})
+</script>

web/src/components/travel/TravelRequestProgressCard.vue

@@ -0,0 +1,43 @@
+<template>
+  <article class="progress-card panel">
+    <div class="progress-block">
+      <div class="progress-head">
+        <h3>{{ isApplicationDocument ? '申请进度' : '报销进度' }}</h3>
+      </div>
+      <div class="progress-line" :style="{ '--progress-columns': progressSteps.length }">
+        <div
+          v-for="step in progressSteps"
+          :key="step.label"
+          class="progress-step"
+          :class="{ active: step.active, current: step.current, done: step.done }"
+        >
+          <span>
+            <i
+              v-if="step.current"
+              v-motion
+              class="current-progress-ring"
+              :initial="currentProgressRingMotion.initial"
+              :enter="currentProgressRingMotion.enter"
+              aria-hidden="true"
+            ></i>
+            <i v-if="step.done" class="mdi mdi-check"></i>
+            <template v-else>{{ step.index }}</template>
+          </span>
+          <div class="progress-step-copy" :title="step.title || step.detail || step.time">
+            <strong>{{ step.label }}</strong>
+            <small class="progress-step-status">{{ step.time }}</small>
+            <em v-if="step.detail" class="progress-step-meta">{{ step.detail }}</em>
+          </div>
+        </div>
+      </div>
+    </div>
+  </article>
+</template>
+
+<script setup>
+defineProps({
+  isApplicationDocument: { type: Boolean, default: false },
+  progressSteps: { type: Array, default: () => [] },
+  currentProgressRingMotion: { type: Object, required: true }
+})
+</script>

web/src/components/travel/TravelRequestRelatedApplicationCard.vue

@@ -0,0 +1,32 @@
+<template>
+  <article v-if="!isApplicationDocument" class="detail-card panel">
+    <div class="detail-card-head">
+      <div>
+        <h3>关联单据信息</h3>
+        <p>展示本次报销关联的前置申请，便于核对申请内容、天数、事由和预计金额。</p>
+      </div>
+    </div>
+    <div v-if="relatedApplicationFactItems.length" class="application-detail-facts related-application-facts">
+      <div
+        v-for="item in relatedApplicationFactItems"
+        :key="item.key"
+        class="application-detail-fact related-application-fact"
+        :class="{ highlight: item.highlight, emphasis: item.emphasis }"
+      >
+        <span>{{ item.label }}</span>
+        <strong>{{ item.value }}</strong>
+      </div>
+    </div>
+    <div v-else class="related-application-empty">
+      <strong>暂未识别到关联申请单</strong>
+      <p>差旅报销应先关联已审批的申请单，请核对本单据是否由申请单生成或已在智能录入中完成关联。</p>
+    </div>
+  </article>
+</template>
+
+<script setup>
+defineProps({
+  isApplicationDocument: { type: Boolean, default: false },
+  relatedApplicationFactItems: { type: Array, default: () => [] }
+})
+</script>