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 {
--- a/web/src/composables/useAppShell.js
+++ b/web/src/composables/useAppShell.js
@@ -73,6 +73,9 @@ export function useAppShell() {
  const { toast } = useToast()

  const customRange = ref(createCurrentYearDateRange())
+  const workbenchRequests = computed(() =>
+    mergeWorkbenchRequests(requests.value, workbenchApprovalRequests.value)
+  )

  const selectedRequest = computed(() => {
    const requestId = String(route.params.requestId || '')
@@ -86,9 +89,7 @@ export function useAppShell() {
      return snapshot
    }

-    const rawRequest = requests.value.find(
-      (item) => String(item.claimId || '').trim() === requestId || String(item.id || '').trim() === requestId
-    )
+    const rawRequest = workbenchRequests.value.find((item) => isSameRequestIdentity(item, requestId))
    const normalizedRequest = normalizeRequestForUi(rawRequest)
    if (normalizedRequest) {
      return normalizedRequest
@@ -239,10 +240,6 @@ export function useAppShell() {
    { immediate: true }
  )

-  const workbenchRequests = computed(() =>
-    mergeWorkbenchRequests(requests.value, workbenchApprovalRequests.value)
-  )
-
  const workbenchSummary = computed(() =>
    buildWorkbenchSummary(workbenchRequests.value, currentUser.value)
  )
@@ -641,6 +638,7 @@ export function useAppShell() {
    openTravelCreate,
    ranges,
    requestSummary,
+    workbenchRequests,
    workbenchSummary,
    requestsError,
    requestsLoading,
--- a/web/src/composables/useRequests.js
+++ b/web/src/composables/useRequests.js
@@ -739,7 +739,16 @@ function resolveProgressDisplayLabel(label, documentTypeCode, claim, approvalMet
  if (
    documentTypeCode !== DOCUMENT_TYPE_APPLICATION
    && approvalMeta.key !== 'completed'
-    && (normalizedLabel === '直属领导审批' || normalizedLabel === '财务审批')
+    && normalizedLabel === '直属领导审批'
+    && workflowNode.includes(normalizedLabel.replace(/审批$/, ''))
+  ) {
+    return '等待批复'
+  }
+
+  if (
+    documentTypeCode !== DOCUMENT_TYPE_APPLICATION
+    && approvalMeta.key !== 'completed'
+    && normalizedLabel === '财务审批'
    && workflowNode.includes(normalizedLabel.replace(/审批$/, ''))
  ) {
    return `等待 ${resolveReimbursementApproverName(claim, normalizedLabel)} 批复`
--- a/web/src/utils/requestProgressViewer.js
+++ b/web/src/utils/requestProgressViewer.js
@@ -0,0 +1,22 @@
+export function resolveProgressStepsForViewer(steps = [], options = {}) {
+  const safeSteps = Array.isArray(steps) ? steps : []
+  if (!options.isApplicationDocument || !options.isCurrentDirectManagerApprover) {
+    return safeSteps
+  }
+
+  return safeSteps.map((step) => {
+    if (!step?.current || step?.rawLabel !== '直属领导审批') {
+      return step
+    }
+    const nextLabel = '等待批复'
+    const currentLabel = String(step.label || '').trim()
+    const title = String(step.title || '').trim()
+    return {
+      ...step,
+      label: nextLabel,
+      title: currentLabel && title.includes(currentLabel)
+        ? title.replace(currentLabel, nextLabel)
+        : title
+    }
+  })
+}
--- a/web/src/views/AppShellRouteView.vue
+++ b/web/src/views/AppShellRouteView.vue
@@ -258,6 +258,7 @@ import TravelRequestDetailView from './TravelRequestDetailView.vue'
 import { useAppShell } from '../composables/useAppShell.js'
 import { useSystemState } from '../composables/useSystemState.js'
 import { filterNavItemsByAccess, isPlatformAdminUser } from '../utils/accessControl.js'
+import { isBusinessDocumentReference } from '../utils/aiDocumentDetailReference.js'
 import { loadAiWorkbenchConversationHistory, saveAiWorkbenchConversation } from '../utils/aiWorkbenchConversationStore.js'

 const employeeSummary = ref(null)
@@ -346,6 +347,7 @@ const {
  openTravelCreate,
  ranges,
  requestSummary,
+  workbenchRequests,
  workbenchSummary,
  requestsError,
  requestsLoading,
@@ -411,12 +413,24 @@ const resolvedDetailKpis = computed(() => (
 ))

 function openWorkbenchDocument(payload = {}) {
-  const requestId = String(payload.claimId || payload.id || payload.claimNo || payload.documentNo || '').trim()
+  const payloadClaimId = String(payload.claimId || payload.claim_id || '').trim()
+  const payloadId = String(payload.id || '').trim()
+  const payloadClaimNo = String(
+    payload.claimNo ||
+    payload.claim_no ||
+    payload.documentNo ||
+    payload.document_no ||
+    ''
+  ).trim()
+  const requestId = String(payloadClaimId || payloadId || payloadClaimNo).trim()
  if (!requestId) {
    return
  }

-  const request = requests.value.find((item) => (
+  const requestCandidates = Array.isArray(workbenchRequests.value) && workbenchRequests.value.length
+    ? workbenchRequests.value
+    : requests.value
+  const request = requestCandidates.find((item) => (
    String(item.claimId || '').trim() === requestId
    || String(item.id || '').trim() === requestId
    || String(item.claimNo || '').trim() === requestId
@@ -429,12 +443,15 @@ function openWorkbenchDocument(payload = {}) {
  )
    ? 'workbench'
    : ''
+  const payloadIdIsBusinessNo = isBusinessDocumentReference(payloadId)
+  const fallbackClaimId = payloadClaimId || (payloadClaimNo || payloadIdIsBusinessNo ? '' : payloadId || requestId)
+  const fallbackClaimNo = payloadClaimNo || (payloadIdIsBusinessNo ? payloadId : fallbackClaimId ? '' : requestId)
  const detailPayload = request || {
    ...payload,
-    id: payload.id || requestId,
-    claimId: payload.claimId || requestId,
-    claimNo: payload.claimNo || payload.documentNo || requestId,
-    documentNo: payload.documentNo || requestId,
+    id: payloadId || fallbackClaimId || fallbackClaimNo || requestId,
+    claimId: fallbackClaimId,
+    claimNo: fallbackClaimNo,
+    documentNo: String(payload.documentNo || payload.document_no || fallbackClaimNo || requestId).trim(),
    detailLookupOnly: true
  }
  openRequestDetail(detailPayload, { returnTo })
--- a/web/src/views/scripts/TravelRequestDetailView.js
+++ b/web/src/views/scripts/TravelRequestDetailView.js
@@ -51,6 +51,7 @@ import {
  buildApplicationDetailFactItems,
  buildRelatedApplicationFactItems
 } from '../../utils/expenseApplicationDetail.js'
+import { resolveProgressStepsForViewer } from '../../utils/requestProgressViewer.js'
 import { isArchivedRequestView, normalizeRequestForUi } from '../../utils/requestViewModel.js'
 import {
  buildAiAdviceViewModel,
@@ -1027,11 +1028,15 @@ export default {
      }
    ])

-    const progressSteps = computed(() =>
-      Array.isArray(request.value.progressSteps) && request.value.progressSteps.length
+    const progressSteps = computed(() => {
+      const sourceSteps = Array.isArray(request.value.progressSteps) && request.value.progressSteps.length
        ? request.value.progressSteps
        : buildFallbackProgressSteps(request.value)
-    )
+      return resolveProgressStepsForViewer(sourceSteps, {
+        isApplicationDocument: isApplicationDocument.value,
+        isCurrentDirectManagerApprover: isCurrentDirectManagerApprover.value
+      })
+    })

    const currentProgressRingMotion = {
      initial: {