style(admin): unify dialog layouts and dense readonly presentation

src/modules/inbounds/fee/InboundFeePanel.test.ts

@@ -235,11 +235,13 @@ describe('InboundFeePanel', () => {
 
   it('treats A0404 as a neutral not-yet-generated state', async () => {
     vi.mocked(getLatestInboundFee).mockRejectedValue(new ApiResponseError('费用快照不存在', 'A0404'))
-    mountPanel(['firstleg:fba-pricing:view'])
+    const wrapper = mountPanel(['firstleg:fba-pricing:view'])
     await flushPromises()
 
     expect(document.body.textContent).toContain('尚未生成费用快照')
-    expect(document.body.textContent).toContain('测量审核完成后')
+    expect(document.body.textContent).not.toContain('测量审核完成后')
+    await wrapper.get('button[aria-label="查看计费说明"]').trigger('mouseenter')
+    await vi.waitFor(() => expect(document.body.textContent).toContain('测量审核完成后'))
     expect(document.querySelector('[role="alert"]')).toBeNull()
   })
 

src/modules/inbounds/fee/InboundFeePanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { computed, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
 import { Check, CircleDollarSign, PencilLine, RefreshCw, Send } from '@lucide/vue'
@@ -379,12 +380,11 @@ 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 }">
-      <h3 v-if="compact" id="inbound-fee-title" class="fee-heading-title--compact">头程自动初算</h3>
+      <h3 v-if="compact" id="inbound-fee-title" class="fee-heading-title--compact">头程自动初算 <InlineHelp title="计费说明"><p>测量审核完成后，系统会自动生成初算费用；人工确认后才发布。</p><p>实际重量与体积重量取大后计费，金额以服务端快照为准。</p></InlineHelp></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>
-          <p>测量审核后的头程费用，人工确认后才发布。</p>
+          <h3 id="inbound-fee-title">入库费用快照 <InlineHelp title="计费说明"><p>测量审核完成后，系统会自动生成初算费用；人工确认后才发布。</p><p>实际重量与体积重量取大后计费，金额以服务端快照为准。</p></InlineHelp></h3>
         </div>
       </div>
       <div class="fee-heading-actions">
@@ -470,7 +470,6 @@ defineExpose({ reload: loadFee })
     </el-alert>
 
     <el-empty v-else-if="notFound" :image-size="64" description="尚未生成费用快照">
-      <p class="empty-note">测量审核完成后，系统会自动生成初算费用；人工确认后才发布。</p>
     </el-empty>
 
     <div v-else-if="snapshot" class="fee-content">
@@ -504,7 +503,7 @@ defineExpose({ reload: loadFee })
 
       <section class="calculation-section" aria-labelledby="calculation-title">
         <div class="section-title">
-          <div><h4 id="calculation-title">计费依据</h4><p v-if="!compact">实际重量与体积重量取大后计费，金额以服务端快照为准。</p></div>
+          <div><h4 id="calculation-title">计费依据</h4></div>
           <div class="calculation-tags">
             <el-tag effect="plain">订单报关：{{ taxModeLabel(snapshot.taxMode) }}</el-tag>
             <el-tag effect="plain">报价税制：{{ pricingTaxModeLabel(snapshot.pricingTaxMode) }}</el-tag>