feat(web): 差旅申请详情进度 viewer 与审批/加载态组件增强

- 新增 requestProgressViewer，申请单在直属领导审批视角下将当前步骤展示为'等待批复'，travel-request-detail/app-shell/useRequests 接入
- TravelRequestApprovalDialog 增强审批交互，TableLoadingState 补充表格加载占位，ConfirmDialog 扩展确认对话框能力
- useAppShell/useRequests/AppShellRouteView 配套适配申请详情跳转与会话状态
- 同步更新 requestProgressSteps、travel-request-detail-leader-approval、assistant-session-draft-delete、documents-center-status-filter、app-shell-financial-assistant-entry、request-progress-viewer 等测试

web/src/components/shared/ConfirmDialog.vue

@@ -321,6 +321,60 @@ function handleCancel() {
   max-height: min(420px, calc(100dvh - 292px));
 }
 
+.shared-confirm-card--approval {
+  width: min(460px, calc(100vw - 40px));
+  gap: 10px;
+  padding: 18px 20px;
+  border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14);
+  border-radius: 6px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98));
+  box-shadow:
+    0 18px 40px rgba(15, 23, 42, 0.15),
+    0 1px 0 rgba(255, 255, 255, 0.88) inset;
+}
+
+.shared-confirm-card--approval .shared-confirm-badge {
+  min-height: 24px;
+  padding: 0 9px;
+  font-size: 11px;
+  font-weight: 850;
+}
+
+.shared-confirm-card--approval h4 {
+  font-size: 20px;
+  line-height: 1.38;
+  font-weight: 850;
+}
+
+.shared-confirm-card--approval p {
+  max-width: 34em;
+  color: #64748b;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.shared-confirm-card--approval .shared-confirm-body {
+  gap: 8px;
+  max-height: min(270px, calc(100dvh - 238px));
+}
+
+.shared-confirm-card--approval .shared-confirm-actions {
+  gap: 8px;
+  padding-top: 2px;
+}
+
+.shared-confirm-card--approval .shared-confirm-btn {
+  min-width: 118px;
+  min-height: 38px;
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.shared-confirm-card--approval .shared-confirm-btn.confirm.primary {
+  box-shadow: 0 10px 20px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
+}
+
 .shared-confirm-card--destructive {
   width: min(420px, calc(100vw - 40px));
   gap: 12px;

web/src/components/shared/TableLoadingState.vue

@@ -8,14 +8,13 @@
       :aria-label="ariaLabel"
       aria-live="polite"
     >
-      <FloatingLightBandWindow
-        :icon="icon"
-        :message="message"
-        :motion="motion"
-        :title="title"
-        :tone="tone"
-        :variant="variant"
-      />
+      <div class="table-loading-card">
+        <span class="table-loading-spinner" aria-hidden="true"></span>
+        <div class="table-loading-copy">
+          <strong v-if="title">{{ title }}</strong>
+          <p v-if="message">{{ message }}</p>
+        </div>
+      </div>
     </div>
   </Teleport>
 </template>
@@ -23,8 +22,6 @@
 <script setup>
 import { computed } from 'vue'
 
-import FloatingLightBandWindow from './FloatingLightBandWindow.vue'
-
 const props = defineProps({
   variant: {
     type: String,
@@ -59,6 +56,52 @@ const ariaLabel = computed(() => [props.title, props.message].filter(Boolean).jo
   color: #64748b;
 }
 
+.table-loading-card {
+  width: min(420px, 100%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 14px;
+  padding: 16px 18px;
+  border: 1px solid rgba(148, 163, 184, 0.24);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow:
+    0 14px 34px rgba(15, 23, 42, 0.08),
+    0 1px 0 rgba(255, 255, 255, 0.9) inset;
+}
+
+.table-loading-spinner {
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  border: 3px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.16);
+  border-top-color: var(--theme-primary-active, #255b7d);
+  border-radius: 999px;
+  animation: table-loading-spin 820ms linear infinite;
+}
+
+.table-loading-copy {
+  min-width: 0;
+  display: grid;
+  gap: 4px;
+  text-align: left;
+}
+
+.table-loading-copy strong {
+  color: #0f172a;
+  font-size: 15px;
+  line-height: 1.35;
+  font-weight: 850;
+}
+
+.table-loading-copy p {
+  margin: 0;
+  color: #64748b;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
 .table-loading-anchor {
   display: block;
   width: 0;
@@ -76,9 +119,7 @@ const ariaLabel = computed(() => [props.title, props.message].filter(Boolean).jo
   display: grid;
   place-items: center;
   padding: 24px;
-  background: rgba(248, 250, 252, 0.08);
-  backdrop-filter: blur(0.5px);
-  -webkit-backdrop-filter: blur(0.5px);
+  background: rgba(248, 250, 252, 0.10);
   pointer-events: none;
 }
 
@@ -127,9 +168,35 @@ const ariaLabel = computed(() => [props.title, props.message].filter(Boolean).jo
 }
 
 .table-loading.banner {
-  display: block;
+  display: grid;
+  place-items: center;
   min-height: 0;
   padding: 0;
   color: #255b7d;
 }
+
+.table-loading.banner .table-loading-card {
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: 8px;
+  box-shadow: none;
+}
+
+.table-loading.banner .table-loading-spinner {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+}
+
+@keyframes table-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .table-loading-spinner {
+    animation: none;
+  }
+}
 </style>