From 24b5b71b0f2684d40c88f8551c85cb1fafc76b67 Mon Sep 17 00:00:00 2001
From: caoxiaozhu <caoxiaozhu@users.noreply.github.com>
Date: Sun, 21 Jun 2026 22:49:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E5=B7=AE=E6=97=85=E7=94=B3?=
 =?UTF-8?q?=E8=AF=B7=E8=AF=A6=E6=83=85=E8=BF=9B=E5=BA=A6=20viewer=20?=
 =?UTF-8?q?=E4=B8=8E=E5=AE=A1=E6=89=B9/=E5=8A=A0=E8=BD=BD=E6=80=81?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=BC=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 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   | 54 +++++++++++
 .../components/shared/TableLoadingState.vue   | 95 ++++++++++++++++---
 .../travel/TravelRequestApprovalDialog.vue    | 20 ++--
 web/src/composables/useAppShell.js            | 12 +--
 web/src/composables/useRequests.js            | 11 ++-
 web/src/utils/requestProgressViewer.js        | 22 +++++
 web/src/views/AppShellRouteView.vue           | 29 ++++--
 .../views/scripts/TravelRequestDetailView.js  | 11 ++-
 ...p-shell-financial-assistant-entry.test.mjs |  2 +-
 .../assistant-session-draft-delete.test.mjs   |  6 +-
 .../documents-center-status-filter.test.mjs   | 14 +++
 web/tests/request-progress-viewer.test.mjs    | 49 ++++++++++
 web/tests/requestProgressSteps.test.mjs       | 11 ++-
 ...el-request-detail-leader-approval.test.mjs |  8 ++
 14 files changed, 295 insertions(+), 49 deletions(-)
 create mode 100644 web/src/utils/requestProgressViewer.js
 create mode 100644 web/tests/request-progress-viewer.test.mjs

diff --git a/web/src/components/shared/ConfirmDialog.vue b/web/src/components/shared/ConfirmDialog.vue
index 86da43c..5d97c51 100644
--- 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;
diff --git a/web/src/components/shared/TableLoadingState.vue b/web/src/components/shared/TableLoadingState.vue
index 95a69c8..82da0e2 100644
--- 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>
diff --git a/web/src/components/travel/TravelRequestApprovalDialog.vue b/web/src/components/travel/TravelRequestApprovalDialog.vue
index b480ead..47b4d22 100644
--- 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 {
diff --git a/web/src/composables/useAppShell.js b/web/src/composables/useAppShell.js
index 491c521..3396c5d 100644
--- 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,
diff --git a/web/src/composables/useRequests.js b/web/src/composables/useRequests.js
index 91cd956..ddae117 100644
--- 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)} 批复`
diff --git a/web/src/utils/requestProgressViewer.js b/web/src/utils/requestProgressViewer.js
new file mode 100644
index 0000000..233bbea
--- /dev/null
+++ 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
+    }
+  })
+}
diff --git a/web/src/views/AppShellRouteView.vue b/web/src/views/AppShellRouteView.vue
index 50b82fa..6a5385e 100644
--- 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 })
diff --git a/web/src/views/scripts/TravelRequestDetailView.js b/web/src/views/scripts/TravelRequestDetailView.js
index c728b19..1f02509 100644
--- 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: {
diff --git a/web/tests/app-shell-financial-assistant-entry.test.mjs b/web/tests/app-shell-financial-assistant-entry.test.mjs
index 0580a9a..a9c13fd 100644
--- a/web/tests/app-shell-financial-assistant-entry.test.mjs
+++ b/web/tests/app-shell-financial-assistant-entry.test.mjs
@@ -97,7 +97,7 @@ test('workbench summary merges approval inbox requests without polluting documen
   assert.match(appShellComposable, /const workbenchRequests = computed\(\(\) =>[\s\S]*mergeWorkbenchRequests\(requests\.value, workbenchApprovalRequests\.value\)/)
   assert.match(appShellComposable, /buildWorkbenchSummary\(workbenchRequests\.value, currentUser\.value\)/)
   assert.match(appShellRouteView, /<DocumentsCenterView[\s\S]*:filtered-requests="requests"/)
-  assert.doesNotMatch(appShellRouteView, /<DocumentsCenterView[\s\S]*workbenchRequests/)
+  assert.doesNotMatch(appShellRouteView, /<DocumentsCenterView(?:(?!\/>)[\s\S])*workbenchRequests/)
 })
 
 test('workbench progress refreshes after homepage create or detail updates', () => {
diff --git a/web/tests/assistant-session-draft-delete.test.mjs b/web/tests/assistant-session-draft-delete.test.mjs
index 400edd6..c6b5672 100644
--- a/web/tests/assistant-session-draft-delete.test.mjs
+++ b/web/tests/assistant-session-draft-delete.test.mjs
@@ -98,9 +98,9 @@ test('deleting an application draft marks AI workbench detail links as unavailab
         content: [
           '### 申请草稿已保存',
           '',
-          '| 单据类型 | 单据编号 | 单据状态 | 当前节点 | 操作 |',
-          '| --- | --- | --- | --- | --- |',
-          '| 出差申请 | AP-20260620-DRAFT | 草稿 | 待提交 | [查看](#ai-open-application-detail:claim_id%3Dclaim-draft-1%26claim_no%3DAP-20260620-DRAFT) |'
+          '| 单据类型 | 单据编号 | 单据状态 | 当前节点 | 日期 | 地点 | 事由 | 金额 | 操作 |',
+          '| --- | --- | --- | --- | --- | --- | --- | --- | --- |',
+          '| 出差申请 | AP-20260620-DRAFT | 草稿 | 待提交 | 2026-02-20 至 2026-02-23 | 上海 | 辅助国网仿生产服务器部署 | ¥2,600.00 | [查看](#ai-open-application-detail:claim_id%3Dclaim-draft-1%26claim_no%3DAP-20260620-DRAFT) |'
         ].join('\n')
       }
     ]
diff --git a/web/tests/documents-center-status-filter.test.mjs b/web/tests/documents-center-status-filter.test.mjs
index b32e724..89e6d56 100644
--- a/web/tests/documents-center-status-filter.test.mjs
+++ b/web/tests/documents-center-status-filter.test.mjs
@@ -16,6 +16,10 @@ const documentListSharedStyles = readFileSync(
   fileURLToPath(new URL('../src/assets/styles/components/document-list-shared.css', import.meta.url)),
   'utf8'
 )
+const tableLoadingState = readFileSync(
+  fileURLToPath(new URL('../src/components/shared/TableLoadingState.vue', import.meta.url)),
+  'utf8'
+)
 const reimbursementService = readFileSync(
   fileURLToPath(new URL('../src/services/reimbursements.js', import.meta.url)),
   'utf8'
@@ -38,6 +42,16 @@ test('documents center keeps only the top scope tabs and renders risk level as a
   assert.match(documentsCenterView, /aria-label="风险等级"/)
 })
 
+test('documents center loading state uses a compact spinner instead of light band progress', () => {
+  assert.match(documentsCenterView, /<TableLoadingState[\s\S]*title="单据数据同步中"[\s\S]*floating/)
+  assert.match(tableLoadingState, /class="table-loading-spinner"/)
+  assert.match(tableLoadingState, /@keyframes table-loading-spin/)
+  assert.match(tableLoadingState, /\.table-loading-card \{[\s\S]*width: min\(420px, 100%\);[\s\S]*display: inline-flex;/)
+  assert.match(tableLoadingState, /\.table-loading-spinner \{[\s\S]*border-top-color: var\(--theme-primary-active/)
+  assert.match(tableLoadingState, /@media \(prefers-reduced-motion: reduce\) \{[\s\S]*animation: none;/)
+  assert.doesNotMatch(tableLoadingState, /FloatingLightBandWindow/)
+})
+
 test('documents center top tabs start from all and show document category labels', () => {
   assert.match(documentsCenterView, /const DOCUMENT_SCOPE_ALL = '全部'/)
   assert.match(documentsCenterView, /const DOCUMENT_SCOPE_APPLICATION = '申请单'/)
diff --git a/web/tests/request-progress-viewer.test.mjs b/web/tests/request-progress-viewer.test.mjs
new file mode 100644
index 0000000..daeb468
--- /dev/null
+++ b/web/tests/request-progress-viewer.test.mjs
@@ -0,0 +1,49 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+
+import { resolveProgressStepsForViewer } from '../src/utils/requestProgressViewer.js'
+
+test('progress viewer keeps approver name for applicant view', () => {
+  const steps = [
+    {
+      label: '等待 李经理 批复',
+      rawLabel: '直属领导审批',
+      current: true,
+      title: '当前等待 李经理 批复已停留 3小时15分钟'
+    }
+  ]
+
+  assert.deepEqual(
+    resolveProgressStepsForViewer(steps, {
+      isApplicationDocument: true,
+      isCurrentDirectManagerApprover: false
+    }),
+    steps
+  )
+})
+
+test('progress viewer hides approver name for current direct manager approval view', () => {
+  const steps = [
+    {
+      label: '等待 李经理 批复',
+      rawLabel: '直属领导审批',
+      current: true,
+      title: '当前等待 李经理 批复已停留 3小时15分钟'
+    }
+  ]
+
+  assert.deepEqual(
+    resolveProgressStepsForViewer(steps, {
+      isApplicationDocument: true,
+      isCurrentDirectManagerApprover: true
+    }),
+    [
+      {
+        label: '等待批复',
+        rawLabel: '直属领导审批',
+        current: true,
+        title: '当前等待批复已停留 3小时15分钟'
+      }
+    ]
+  )
+})
diff --git a/web/tests/requestProgressSteps.test.mjs b/web/tests/requestProgressSteps.test.mjs
index cc4e2ab..4ed2cd3 100644
--- a/web/tests/requestProgressSteps.test.mjs
+++ b/web/tests/requestProgressSteps.test.mjs
@@ -19,7 +19,7 @@ const WAIT_SUBMIT = '\u5f85\u63d0\u4ea4'
 const LINKED_APPLICATION = '\u5173\u8054\u5355\u636e'
 const PAID = '\u5df2\u4ed8\u6b3e'
 const ARCHIVED = '\u5df2\u5f52\u6863'
-const WAIT_LEADER_LI_APPROVAL = '\u7b49\u5f85 Leader Li \u6279\u590d'
+const WAIT_APPROVAL = '\u7b49\u5f85\u6279\u590d'
 const WAIT_BUDGET_ZHAO_APPROVAL = '\u7b49\u5f85 \u8d75\u9884\u7b97 \u6279\u590d'
 const WAIT_BUDGET_P8_EXECUTIVE_APPROVAL = '\u7b49\u5f85 P8 Executive \u6279\u590d'
 const WAIT_FINANCE_FIONA_APPROVAL = '\u7b49\u5f85 Fiona Finance \u6279\u590d'
@@ -160,14 +160,14 @@ test('application claims are mapped as application documents', () => {
   assert.equal(request.expenseTableSummary, '预计金额已随申请提交')
   assert.deepEqual(
     request.progressSteps.map((step) => step.label),
-    [CREATE_APPLICATION, WAIT_LEADER_LI_APPROVAL, APPLICATION_LINK_STATUS, ARCHIVED]
+    [CREATE_APPLICATION, '等待 Leader Li 批复', APPLICATION_LINK_STATUS, ARCHIVED]
   )
   assert.equal(request.progressSteps.some((step) => step.label === 'AI预审'), false)
   assert.equal(request.progressSteps.some((step) => step.label === '财务审批'), false)
   assert.equal(request.progressSteps.some((step) => step.label === DIRECT_MANAGER_APPROVAL), false)
   assert.equal(request.progressSteps.some((step) => step.label === BUDGET_MANAGER_APPROVAL), false)
-  assert.equal(request.progressSteps.find((step) => step.label === WAIT_LEADER_LI_APPROVAL)?.rawLabel, DIRECT_MANAGER_APPROVAL)
-  assert.equal(request.progressSteps.find((step) => step.label === WAIT_LEADER_LI_APPROVAL)?.current, true)
+  assert.equal(request.progressSteps.find((step) => step.label === '等待 Leader Li 批复')?.rawLabel, DIRECT_MANAGER_APPROVAL)
+  assert.equal(request.progressSteps.find((step) => step.label === '等待 Leader Li 批复')?.current, true)
 })
 
 test('travel application detail splits trip time into departure and return rows', () => {
@@ -1241,7 +1241,8 @@ test('current direct manager step shows how long the claim has stayed there', ()
 
     assert.equal(submitStep.time, '王五提交')
     assert.match(submitStep.detail, /2026-05-20/)
-    assert.equal(leaderStep.label, '等待 李经理 批复')
+    assert.equal(leaderStep.label, '等待批复')
+    assert.doesNotMatch(leaderStep.label, /李经理/)
     assert.equal(leaderStep.rawLabel, '直属领导审批')
     assert.equal(leaderStep.current, true)
     assert.equal(leaderStep.time, '停留 3小时15分钟')
diff --git a/web/tests/travel-request-detail-leader-approval.test.mjs b/web/tests/travel-request-detail-leader-approval.test.mjs
index c30dd31..cf38499 100644
--- a/web/tests/travel-request-detail-leader-approval.test.mjs
+++ b/web/tests/travel-request-detail-leader-approval.test.mjs
@@ -146,6 +146,8 @@ test('approval-mode detail collects leader opinion inside confirm dialog before
   assert.match(detailTemplate, /v-model:risk-confirmed="approvalRiskConfirmed"/)
   assert.match(detailTemplate, /:risk-confirm-items="approvalRiskConfirmItems"/)
   assert.doesNotMatch(detailTemplate, /:next-stage="approvalNextStage"/)
+  assert.match(approvalDialog, /size="approval"/)
+  assert.match(approvalDialog, /actions-align="end"/)
   assert.doesNotMatch(approvalDialog, /submit-confirm-summary/)
   assert.doesNotMatch(approvalDialog, /单据编号/)
   assert.doesNotMatch(approvalDialog, /当前节点/)
@@ -184,8 +186,14 @@ test('approval-mode detail collects leader opinion inside confirm dialog before
   assert.match(approvalDialog, /update:risk-confirmed/)
   assert.match(approvalDialog, /:confirm-disabled="confirmDisabled"/)
   assert.match(approvalDialog, /props\.opinionRequired && !currentOpinion\.value\.trim\(\)/)
+  assert.match(approvalDialog, /\.approval-opinion-field \{[\s\S]*gap: 6px;[\s\S]*margin-top: 8px;/)
+  assert.match(approvalDialog, /\.approval-opinion-field textarea \{[\s\S]*min-height: 74px;/)
   assert.match(confirmDialog, /confirmDisabled:\s*\{\s*type:\s*Boolean,\s*default:\s*false\s*\}/)
   assert.match(confirmDialog, /:disabled="busy \|\| confirmDisabled"/)
+  assert.match(confirmDialog, /\.shared-confirm-card--approval \{[\s\S]*width: min\(460px, calc\(100vw - 40px\)\);/)
+  assert.match(confirmDialog, /\.shared-confirm-card--approval h4 \{[\s\S]*font-size: 20px;/)
+  assert.match(confirmDialog, /\.shared-confirm-card--approval \.shared-confirm-body \{[\s\S]*max-height: min\(270px, calc\(100dvh - 238px\)\);/)
+  assert.match(confirmDialog, /\.shared-confirm-card--approval \.shared-confirm-btn \{[\s\S]*min-width: 118px;[\s\S]*min-height: 38px;/)
 
   assert.match(detailStyles, /\.detail-card-title-with-icon \{[\s\S]*display: inline-flex;[\s\S]*align-items: center;[\s\S]*gap: 8px;/)
   assert.match(detailStyles, /\.detail-card-title-with-icon i \{[\s\S]*font-size: 18px;[\s\S]*line-height: 1;/)