From 55576a7c848860bb38c2767165b1c67edd94232f Mon Sep 17 00:00:00 2001
From: ouyangxq <775153912@qq.com>
Date: Tue, 15 Sep 2026 18:16:09 +0800
Subject: [PATCH] fix(admin): unify inbound fee refresh controls

---
 .../inbounds/fee/InboundFeePanel.test.ts      | 22 +++++++++++++++++++
 src/modules/inbounds/fee/InboundFeePanel.vue  | 15 ++++++++-----
 .../InboundFeeDetailManager.test.ts           |  1 +
 .../components/InboundFeeDetailManager.vue    |  4 ++--
 .../pages/UnifiedOrdersView.test.ts           |  2 +-
 .../pages/UnifiedOrdersView.vue               |  1 -
 6 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/modules/inbounds/fee/InboundFeePanel.test.ts b/src/modules/inbounds/fee/InboundFeePanel.test.ts
index 4a0096b0..3930dfb7 100644
--- a/src/modules/inbounds/fee/InboundFeePanel.test.ts
+++ b/src/modules/inbounds/fee/InboundFeePanel.test.ts
@@ -121,6 +121,28 @@ describe('InboundFeePanel', () => {
     expect(wrapper.find('.surface-panel').exists()).toBe(false)
   })
 
+  it('keeps the compact title and refresh action on one heading row', async () => {
+    const pinia = setupPermissions(['firstleg:fba-pricing:view'])
+    const wrapper = mount(InboundFeePanel, {
+      props: { customerId: '10001', inboundId: '88', compact: true, displayOnly: true },
+      global: { plugins: [pinia, ElementPlus] },
+    })
+    await flushPromises()
+
+    const heading = wrapper.get('.fee-heading--compact')
+    expect(heading.get('#inbound-fee-title').text()).toBe('头程自动初算')
+    expect(heading.find('button[aria-label="刷新费用快照"]').exists()).toBe(true)
+  })
+
+  it('keeps the refresh icon visible and spinning while the snapshot reloads', () => {
+    const source = readFileSync(resolve(process.cwd(), 'src/modules/inbounds/fee/InboundFeePanel.vue'), 'utf8')
+    expect(source).toContain('class="fee-refresh-button"')
+    expect(source).toContain(':aria-busy="loading"')
+    expect(source).toContain(`<RefreshCw :size="16" :class="{ 'is-spinning': loading }" />`)
+    expect(source).not.toMatch(/aria-label="刷新费用快照"[^>]*:loading=/)
+    expect(source).toContain('@keyframes fee-refresh-spin')
+  })
+
   it('supports a display-only fee snapshot without calculation or transition actions', async () => {
     vi.mocked(getLatestInboundFee).mockResolvedValue({ ...snapshot, feeStatus: 'CALCULATED', confirmedAt: null, sentAt: null })
     const pinia = setupPermissions([
diff --git a/src/modules/inbounds/fee/InboundFeePanel.vue b/src/modules/inbounds/fee/InboundFeePanel.vue
index 28f91214..ed9609f0 100644
--- a/src/modules/inbounds/fee/InboundFeePanel.vue
+++ b/src/modules/inbounds/fee/InboundFeePanel.vue
@@ -364,7 +364,8 @@ defineExpose({ reload: loadFee })
 <template>
   <section class="inbound-fee-panel" :aria-busy="loading" aria-labelledby="inbound-fee-title">
     <header class="fee-heading" :class="{ 'fee-heading--compact': compact }">
-      <div v-if="!compact" class="fee-heading-copy">
+      <h3 v-if="compact" id="inbound-fee-title" class="fee-heading-title--compact">头程自动初算</h3>
+      <div v-else class="fee-heading-copy">
         <span class="fee-heading-icon" aria-hidden="true"><CircleDollarSign :size="20" /></span>
         <div>
           <h3 id="inbound-fee-title">入库费用快照</h3>
@@ -374,12 +375,13 @@ defineExpose({ reload: loadFee })
       <div class="fee-heading-actions">
         <el-tooltip content="刷新费用快照" placement="top">
           <el-button
+            class="fee-refresh-button"
             circle
             aria-label="刷新费用快照"
-            :loading="loading"
-            :disabled="!customerContextId || !normalizedInboundId || !canView"
+            :aria-busy="loading"
+            :disabled="loading || !customerContextId || !normalizedInboundId || !canView"
             @click="loadFee()"
-          ><RefreshCw :size="16" /></el-button>
+          ><RefreshCw :size="16" :class="{ 'is-spinning': loading }" /></el-button>
         </el-tooltip>
         <el-button
           v-if="!displayOnly && canCalculate"
@@ -584,7 +586,8 @@ defineExpose({ reload: loadFee })
 <style scoped>
 .inbound-fee-panel { min-width: 0; color: var(--cc-text); }
 .fee-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; }
-.fee-heading--compact { justify-content: flex-end; padding-bottom: 6px; }
+.fee-heading--compact { align-items: center; justify-content: space-between; padding: 12px 0 8px; }
+.fee-heading h3.fee-heading-title--compact { color: #344054; font-size: var(--admin-font-section, 14px); line-height: 1.4; }
 .fee-heading-copy { display: flex; min-width: 0; align-items: flex-start; gap: 12px; }
 .fee-heading-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 10px; background: #eef4ff; color: var(--cc-primary); }
 .fee-heading h3, .section-title h4 { margin: 0; }
@@ -592,6 +595,7 @@ defineExpose({ reload: loadFee })
 .fee-heading p, .section-title p { margin: 5px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.55; }
 .fee-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
 .fee-heading-actions .el-button { margin-left: 0; }
+.fee-refresh-button .is-spinning { animation: fee-refresh-spin 0.8s linear infinite; }
 .fee-loading { padding: 20px 0; }
 .inbound-fee-panel :deep(.el-alert p) { margin: 5px 0 0; line-height: 1.55; }
 .inbound-fee-panel :deep(.el-alert .el-button) { margin-top: 8px; }
@@ -605,6 +609,7 @@ defineExpose({ reload: loadFee })
 .fee-total strong { color: #0f5c49; font-size: 21px; letter-spacing: -.01em; }
 .fee-summary-item strong { font-size: 15px; }
 .version-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+@keyframes fee-refresh-spin { to { transform: rotate(360deg); } }
 .calculation-section, .fee-timeline { padding: 10px 0; border-bottom: 1px solid var(--cc-border); }
 .section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
 .calculation-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
diff --git a/src/modules/unified-orders/components/InboundFeeDetailManager.test.ts b/src/modules/unified-orders/components/InboundFeeDetailManager.test.ts
index d7e6d970..74da0e97 100644
--- a/src/modules/unified-orders/components/InboundFeeDetailManager.test.ts
+++ b/src/modules/unified-orders/components/InboundFeeDetailManager.test.ts
@@ -182,6 +182,7 @@ describe('InboundFeeDetailManager', () => {
   })
 
   it('spins only the refresh icon while fee rows are loading', () => {
+    expect(source).toContain('class="fee-refresh-button" circle aria-label="刷新费用明细"')
     expect(source).toContain(':aria-busy="loading" :disabled="loading"')
     expect(source).toContain(`<RefreshCw :size="16" :class="{ 'is-spinning': loading }" />`)
     expect(source).not.toMatch(/aria-label="刷新费用明细"[^>]*:loading=/)
diff --git a/src/modules/unified-orders/components/InboundFeeDetailManager.vue b/src/modules/unified-orders/components/InboundFeeDetailManager.vue
index 0403c190..c1b3f520 100644
--- a/src/modules/unified-orders/components/InboundFeeDetailManager.vue
+++ b/src/modules/unified-orders/components/InboundFeeDetailManager.vue
@@ -276,7 +276,7 @@ onMounted(() => void load())
     <div class="fee-toolbar">
       <span>共 {{ rows.length }} 条应收应付费用明细</span>
       <div>
-        <el-tooltip content="刷新费用明细" placement="top"><el-button circle aria-label="刷新费用明细" :aria-busy="loading" :disabled="loading" @click="load"><RefreshCw :size="16" :class="{ 'is-spinning': loading }" /></el-button></el-tooltip>
+        <el-tooltip content="刷新费用明细" placement="top"><el-button class="fee-refresh-button" circle aria-label="刷新费用明细" :aria-busy="loading" :disabled="loading" @click="load"><RefreshCw :size="16" :class="{ 'is-spinning': loading }" /></el-button></el-tooltip>
         <el-button v-if="access.can('firstleg:inbound:fee-detail:edit') && canViewFeeItems" type="primary" @click="openEditor('create')"><Plus :size="16" />新增费用</el-button>
       </div>
     </div>
@@ -365,7 +365,7 @@ onMounted(() => void load())
 .fee-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-5); color: var(--el-text-color-secondary); font-size: var(--admin-font-body); }
 .fee-toolbar > div { display: flex; flex-wrap: wrap; gap: var(--admin-space-3); }
 .fee-toolbar :deep(.el-button + .el-button) { margin-left: 0; }
-.fee-toolbar .is-spinning { animation: fee-refresh-spin 0.8s linear infinite; }
+.fee-refresh-button .is-spinning { animation: fee-refresh-spin 0.8s linear infinite; }
 .fee-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-6); margin-top: var(--admin-space-5); }
 .fee-form :deep(.el-select), .fee-form :deep(.el-date-editor), .fee-form :deep(.el-input-number) { width: 100%; }
 .fee-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }
diff --git a/src/modules/unified-orders/pages/UnifiedOrdersView.test.ts b/src/modules/unified-orders/pages/UnifiedOrdersView.test.ts
index c5c36e7e..bb13bce3 100644
--- a/src/modules/unified-orders/pages/UnifiedOrdersView.test.ts
+++ b/src/modules/unified-orders/pages/UnifiedOrdersView.test.ts
@@ -602,7 +602,7 @@ describe('UnifiedOrdersView contract', () => {
     expect(source).toContain('display-only')
     expect(source).toContain(':key="`fee-${normalizedInboundId}-${feePanelRevision}`"')
     expect(source).toContain('feePanelRevision.value += 1')
-    expect(source).toContain('头程自动初算')
+    expect(source).not.toContain('<h3 class="fee-section-title">头程自动初算</h3>')
     expect(source).toContain('其他费用明细')
     expect(source).toContain('@changed="loadDetail(true)"')
     expect(source).toContain('firstLegTransportModeLabel(detail.order.order?.transportMode)')
diff --git a/src/modules/unified-orders/pages/UnifiedOrdersView.vue b/src/modules/unified-orders/pages/UnifiedOrdersView.vue
index deb31569..73d08f1c 100644
--- a/src/modules/unified-orders/pages/UnifiedOrdersView.vue
+++ b/src/modules/unified-orders/pages/UnifiedOrdersView.vue
@@ -2387,7 +2387,6 @@ onBeforeUnmount(() => {
                 <div><dt>对客费用合计</dt><dd>{{ feeMoney(customerFeeTotal) }}</dd><small>已发布头程费用 + 已审核其他应收</small></div>
                 <div><dt>已审核其他应付</dt><dd>{{ feeMoney(otherFeeSummary.approvedPayable) }}</dd><small>单列展示，不计入对客费用</small></div>
               </dl>
-              <h3 class="fee-section-title">头程自动初算</h3>
               <InboundFeePanel
                 :key="`fee-${normalizedInboundId}-${feePanelRevision}`"
                 :customer-id="String(detail.summary.tenantId)"