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: {
--- 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', () => {
--- 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')
      }
    ]
--- 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 = '申请单'/)
--- a/web/tests/request-progress-viewer.test.mjs
+++ 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分钟'
+      }
+    ]
+  )
+})
--- 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分钟')
--- 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;/)