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 等测试
2026-06-21 22:49:58 +08:00
parent 8b3495455b
commit 24b5b71b0f
14 changed files with 295 additions and 49 deletions
--- a/web/src/components/shared/ConfirmDialog.vue
+++ b/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;
--- a/web/src/components/shared/TableLoadingState.vue
+++ b/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>
--- a/web/src/components/travel/TravelRequestApprovalDialog.vue
+++ b/web/src/components/travel/TravelRequestApprovalDialog.vue
@@ -3,6 +3,8 @@
    :open="open"
    :badge="badge"
    badge-tone="info"
+    size="approval"
+    actions-align="end"
    :title="title"
    :description="description"
    cancel-text="返回核对"
@@ -105,8 +107,8 @@ function handleRiskConfirmedChange(event) {
 <style scoped>
 .approval-risk-confirm-panel {
  display: grid;
-  gap: 10px;
-  padding: 12px;
+  gap: 8px;
+  padding: 10px;
  border: 1px solid #fed7aa;
  border-radius: 4px;
  background: #fff7ed;
@@ -147,7 +149,7 @@ function handleRiskConfirmedChange(event) {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: flex-start;
-  padding: 8px;
+  padding: 7px 8px;
  border: 1px solid rgba(251, 146, 60, 0.28);
  border-radius: 4px;
  background: #fff;
@@ -207,8 +209,8 @@ function handleRiskConfirmedChange(event) {

 .approval-opinion-field {
  display: grid;
-  gap: 8px;
-  margin-top: 14px;
+  gap: 6px;
+  margin-top: 8px;
 }

 .approval-opinion-field > span {
@@ -232,15 +234,15 @@ function handleRiskConfirmedChange(event) {

 .approval-opinion-field textarea {
  width: 100%;
-  min-height: 96px;
+  min-height: 74px;
  resize: vertical;
-  padding: 12px;
+  padding: 10px 11px;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
-  line-height: 1.6;
+  line-height: 1.55;
  outline: none;
 }

@@ -256,7 +258,7 @@ function handleRiskConfirmedChange(event) {
  gap: 12px;
  color: #64748b;
  font-size: 12px;
-  line-height: 1.5;
+  line-height: 1.45;
 }

 .approval-opinion-field small span {