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

src/modules/inbounds/review/MeasurementReviewPanel.test.ts

@@ -143,19 +143,17 @@ describe('MeasurementReviewPanel', () => {
 
     const summary = wrapper.get('.review-data').text()
     expect(summary).toContain('审核数据总览')
-    const comparisonRows = wrapper.findAll('.review-comparison__row')
-    expect(comparisonRows).toHaveLength(2)
-    expect(comparisonRows[0].text()).toContain('客户申报')
-    expect(comparisonRows[0].text()).toContain('箱数9')
-    expect(comparisonRows[0].text()).toContain('毛重118 kg')
-    expect(comparisonRows[0].text()).not.toContain('实际品名')
-    expect(comparisonRows[0].text()).not.toContain('原单据号码')
-    expect(comparisonRows[1].text()).toContain('平台实测')
-    expect(comparisonRows[1].text()).toContain('箱数10 差异 +1')
-    expect(comparisonRows[1].text()).toContain('毛重120 kg · 差异 +2 kg')
-    expect(comparisonRows[1].text()).toContain('货物净重110 kg')
-    expect(comparisonRows[1].text()).toContain('体积2.2 m³ · 差异 +0.2 m³')
-    expect(comparisonRows[1].text()).toContain('体积重367.4 kg')
+    const comparisonRows = wrapper.findAll('.review-comparison tbody tr')
+    expect(comparisonRows.map(row => row.findAll('th, td').map(cell => cell.text()))).toEqual([
+      ['箱数', '9', '10', '差异 +1'],
+      ['毛重（kg）', '118', '120', '差异 +2 kg'],
+      ['体积（m³）', '2', '2.2', '差异 +0.2 m³'],
+    ])
+    expect(wrapper.get('.review-comparison').text()).not.toContain('实际品名')
+    expect(wrapper.get('.review-comparison').text()).not.toContain('原单据号码')
+    const extraFacts = wrapper.get('.review-extra-facts').text().replace(/\s/g, '')
+    expect(extraFacts).toContain('货物净重110kg')
+    expect(extraFacts).toContain('体积重367.4kg')
 
     const items = wrapper.get('.review-items').text()
     expect(items).toContain('箱规测量明细')
@@ -174,7 +172,7 @@ describe('MeasurementReviewPanel', () => {
     expect(source).toContain(':file-id="row.intelligentImageFileId"')
     expect(source).toContain('openImagePreview(row.intelligentImageFileId')
     expect(source).toContain('downloadInboundMeasurementImage')
-    expect(source).toContain('.review-table :deep(.el-table__header .cell) { white-space: nowrap; }')
+    expect(source).not.toContain('.review-table :deep(.el-table__header .cell) { white-space: nowrap; }')
     expect(source).toContain('.review-table :deep(.review-time-cell .cell) { white-space: nowrap; }')
   })
 
@@ -183,7 +181,10 @@ describe('MeasurementReviewPanel', () => {
     const wrapper = mount(MeasurementReviewPanel, { props: { customerId: '10001', inboundId: '90001' }, global: { plugins: [ElementPlus] } })
     await flushPromises()
 
-    expect(wrapper.get('.review-comparison').text()).not.toContain('差异')
+    const rows = wrapper.findAll('.review-comparison tbody tr')
+    expect(rows[0].findAll('td').at(-1)?.text()).toBe('一致')
+    expect(rows[1].findAll('td').map(cell => cell.text())).toEqual(['—', '120', '—'])
+    expect(rows[2].findAll('td').map(cell => cell.text())).toEqual(['—', '2.2', '—'])
   })
 
   it('reuses WeightOcrPanel and enables only its review correction mode', async () => {
@@ -216,6 +217,25 @@ describe('MeasurementReviewPanel', () => {
     expect(wrapper.emitted('changed')).toHaveLength(1)
   })
 
+  it('exposes the same guarded actions when a dialog owns the fixed footer', async () => {
+    vi.spyOn(ElMessageBox, 'confirm').mockResolvedValue(undefined as never)
+    vi.mocked(approveMeasurement).mockResolvedValue({ inboundId: '90001', measurementId: '70001', processStatus: 'WAIT_SPLIT', feeStatus: 'CALCULATED', initialPricingSucceeded: true, initialPricingMessage: null, initialFee: null })
+    const wrapper = mount(MeasurementReviewPanel, {
+      props: { customerId: '10001', inboundId: '90001', showActions: false },
+      global: { plugins: [ElementPlus] },
+    })
+    await flushPromises()
+    expect(wrapper.find('.review-toolbar__actions').exists()).toBe(false)
+    expect(wrapper.get('.review-toolbar__context').text()).toContain('客户：柏悦客户')
+    expect(wrapper.vm.approvalButtonLabel).toBe('通过并进入待分柜')
+    wrapper.vm.enableWeightCorrection()
+    await flushPromises()
+    expect(wrapper.getComponent({ name: 'WeightOcrPanel' }).props('correctionMode')).toBe(true)
+    await wrapper.vm.confirmApprove()
+    expect(approveMeasurement).toHaveBeenCalledWith('10001', '90001', { measurementId: '70001', expectedVersion: 7 })
+    expect(wrapper.emitted('changed')).toHaveLength(1)
+  })
+
   it('emits only after approval succeeds and blocks duplicate submissions', async () => {
     let finishApproval: (() => void) | undefined
     vi.mocked(approveMeasurement).mockImplementation(() => new Promise((resolve) => {

src/modules/inbounds/review/MeasurementReviewPanel.vue

@@ -6,6 +6,7 @@ import { Check, Pencil, RotateCcw } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
+import AppDialog from '@/shared/components/AppDialog.vue'
 import StatusBadge from '@/shared/components/StatusBadge.vue'
 import { downloadInboundMeasurementImage } from '../measurement/api'
 import MeasurementEvidenceThumbnail from '../measurement/components/MeasurementEvidenceThumbnail.vue'
@@ -14,7 +15,7 @@ import WeightOcrPanel from '../weight/components/WeightOcrPanel.vue'
 import { approveMeasurement, getMeasurementReviewDetail } from './api'
 import type { MeasurementReviewDetail } from './types'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   customerId?: string
   /** @deprecated 仅用于兼容尚未完成 customerId 映射的上层集成。 */
   tenantId?: string
@@ -25,7 +26,8 @@ const props = defineProps<{
   channelCode?: string | null
   postApproveLoading?: boolean
   approvalCompleted?: boolean
-}>()
+  showActions?: boolean
+}>(), { showActions: true })
 
 const emit = defineEmits<{ changed: [] }>()
 
@@ -61,9 +63,9 @@ function formatNumber(value: number | null | undefined, maximumFractionDigits =
 }
 
 function formatDifference(actual: number | null | undefined, declared: number | null | undefined, maximumFractionDigits = 3, unit = '') {
-  if (actual == null || declared == null || !Number.isFinite(actual) || !Number.isFinite(declared)) return null
+  if (actual == null || declared == null || !Number.isFinite(actual) || !Number.isFinite(declared)) return '—'
   const difference = actual - declared
-  if (difference === 0) return null
+  if (difference === 0) return '一致'
   const sign = difference > 0 ? '+' : ''
   return `差异 ${sign}${formatNumber(difference, maximumFractionDigits)}${unit}`
 }
@@ -129,6 +131,10 @@ async function handleWeightChanged() {
   await loadReview()
 }
 
+function enableWeightCorrection() {
+  correctionMode.value = true
+}
+
 async function confirmApprove() {
   if (!detail.value || !isPending.value || !canReview.value || actionLoading.value || props.postApproveLoading || props.approvalCompleted) return
   try {
@@ -168,15 +174,15 @@ onMounted(() => {
 })
 onBeforeUnmount(releaseImagePreview)
 
-defineExpose({ confirmApprove, isPending, canReview, actionLoading })
+defineExpose({ confirmApprove, enableWeightCorrection, approvalButtonLabel, isPending, canReview, actionLoading })
 </script>
 
 <template>
-  <section class="review-panel" aria-labelledby="measurement-review-title">
+  <section class="review-panel admin-density density-dialog-sections" aria-labelledby="measurement-review-title">
     <h2 id="measurement-review-title" class="sr-only">测量审核内容</h2>
     <div class="review-toolbar" aria-label="测量审核操作">
-      <div class="review-toolbar__actions">
-        <el-button v-if="isPending && canReview" type="primary" plain @click="correctionMode = true"><Pencil :size="16" />修改重量</el-button>
+      <div v-if="showActions" class="review-toolbar__actions">
+        <el-button v-if="isPending && canReview" type="primary" plain @click="enableWeightCorrection"><Pencil :size="16" />修改重量</el-button>
         <el-button v-if="isPending && canReview" type="primary" :loading="actionLoading === 'approve' || postApproveLoading" :disabled="approvalCompleted" @click="confirmApprove"><Check :size="16" />{{ approvalCompleted ? '审核已通过' : approvalButtonLabel }}</el-button>
       </div>
       <div class="review-toolbar__status">
@@ -198,33 +204,21 @@ defineExpose({ confirmApprove, isPending, canReview, actionLoading })
     <template v-else-if="detail">
       <el-alert v-if="detail.reviewReason" type="warning" :closable="false" show-icon :title="`最近审核说明：${detail.reviewReason}`" />
 
-      <section class="review-data" aria-labelledby="review-data-title">
-        <header class="review-section-heading"><h3 id="review-data-title">审核数据总览</h3></header>
-
-        <div class="review-comparison">
-          <div class="review-comparison__row review-comparison__row--declared">
-            <strong>客户申报</strong>
-            <dl class="review-declaration" aria-label="客户申报信息">
-              <div><dt>箱数</dt><dd>{{ formatNumber(detail.originalPackageCount, 0) }}</dd></div>
-              <div><dt>毛重</dt><dd>{{ formatNumber(detail.originalGrossWeightKg) }} <small>kg</small></dd></div>
-              <div><dt>体积</dt><dd>{{ formatNumber(detail.originalVolumeCbm, 4) }} <small>m³</small></dd></div>
-            </dl>
-          </div>
-          <div class="review-comparison__row">
-            <strong>平台实测</strong>
-            <dl class="review-metrics" aria-label="平台实测结果汇总">
-              <div><dt>箱数</dt><dd>{{ formatNumber(detail.actualPackageCount, 0) }}{{ formatDifference(detail.actualPackageCount, detail.originalPackageCount, 0) ? ` ${formatDifference(detail.actualPackageCount, detail.originalPackageCount, 0)}` : '' }}</dd></div>
-              <div><dt>毛重</dt><dd>{{ formatNumber(detail.actualGrossWeightKg) }} <small>kg<span v-if="formatDifference(detail.actualGrossWeightKg, detail.originalGrossWeightKg, 3, ' kg')"> · {{ formatDifference(detail.actualGrossWeightKg, detail.originalGrossWeightKg, 3, ' kg') }}</span></small></dd></div>
-              <div class="review-metric--primary"><dt>货物净重</dt><dd>{{ formatNumber(detail.actualNetWeightKg) }} <small>kg</small></dd></div>
-              <div><dt>体积</dt><dd>{{ formatNumber(detail.actualVolumeCbm, 4) }} <small>m³<span v-if="formatDifference(detail.actualVolumeCbm, detail.originalVolumeCbm, 4, ' m³')"> · {{ formatDifference(detail.actualVolumeCbm, detail.originalVolumeCbm, 4, ' m³') }}</span></small></dd></div>
-              <div><dt>体积重</dt><dd>{{ formatNumber(detail.volumeWeightKg) }} <small>kg</small></dd></div>
-            </dl>
-          </div>
-        </div>
+      <section class="review-data density-dialog-section" data-tone="summary" aria-labelledby="review-data-title">
+        <header class="review-section-heading density-dialog-section__title"><h3 id="review-data-title">审核数据总览</h3></header>
+        <table class="review-comparison density-table" aria-label="客户申报与平台实测对比">
+          <thead><tr><th scope="col">指标</th><th scope="col">客户申报</th><th scope="col">平台实测</th><th scope="col">差异（实测 − 申报）</th></tr></thead>
+          <tbody>
+            <tr><th scope="row">箱数</th><td>{{ formatNumber(detail.originalPackageCount, 0) }}</td><td>{{ formatNumber(detail.actualPackageCount, 0) }}</td><td>{{ formatDifference(detail.actualPackageCount, detail.originalPackageCount, 0) }}</td></tr>
+            <tr><th scope="row">毛重（kg）</th><td>{{ formatNumber(detail.originalGrossWeightKg) }}</td><td>{{ formatNumber(detail.actualGrossWeightKg) }}</td><td>{{ formatDifference(detail.actualGrossWeightKg, detail.originalGrossWeightKg, 3, ' kg') }}</td></tr>
+            <tr><th scope="row">体积（m³）</th><td>{{ formatNumber(detail.originalVolumeCbm, 4) }}</td><td>{{ formatNumber(detail.actualVolumeCbm, 4) }}</td><td>{{ formatDifference(detail.actualVolumeCbm, detail.originalVolumeCbm, 4, ' m³') }}</td></tr>
+          </tbody>
+        </table>
+        <div class="review-extra-facts"><span>货物净重 <strong>{{ formatNumber(detail.actualNetWeightKg) }}</strong> kg</span><span>体积重 <strong>{{ formatNumber(detail.volumeWeightKg) }}</strong> kg</span></div>
       </section>
 
-      <section class="review-items" aria-labelledby="review-items-title">
-        <header class="review-section-heading">
+      <section class="review-items density-dialog-section" data-tone="source" aria-labelledby="review-items-title">
+        <header class="review-section-heading density-dialog-section__title">
           <div>
             <h3 id="review-items-title">箱规测量明细</h3>
           </div>
@@ -271,8 +265,8 @@ defineExpose({ confirmApprove, isPending, canReview, actionLoading })
         <el-empty v-else description="暂无箱规测量明细" :image-size="48" />
       </section>
 
-      <section class="review-items review-weight-items" aria-labelledby="review-weight-title">
-        <header class="review-section-heading"><h3 id="review-weight-title">⚖ 称重明细</h3><div class="review-weight-totals"><span>实测毛重 <strong>{{ formatNumber(detail.actualGrossWeightKg, 3) }} KG</strong></span><span>货物重量 <strong>{{ formatNumber(detail.actualNetWeightKg, 3) }} KG</strong></span></div></header>
+      <section class="review-items review-weight-items density-dialog-section" data-tone="source" aria-labelledby="review-weight-title">
+        <header class="review-section-heading density-dialog-section__title"><h3 id="review-weight-title">称重明细</h3><span>{{ weightCount }} 条</span></header>
         <div v-if="weightCount" class="review-table-scroll">
           <el-table :data="detail.weightResults" border stripe table-layout="fixed" class="review-table review-weight-table">
             <el-table-column type="index" label="#" width="44" align="center" />
@@ -299,7 +293,7 @@ defineExpose({ confirmApprove, isPending, canReview, actionLoading })
       />
     </template>
 
-    <el-dialog class="admin-density-dialog" v-model="imagePreviewOpen" :title="imagePreviewTitle" width="min(760px, 92vw)" destroy-on-close append-to-body @closed="releaseImagePreview">
+    <AppDialog class="admin-density-dialog" v-model="imagePreviewOpen" :title="imagePreviewTitle" width="min(760px, 92vw)" fullscreenable :show-footer="false" :close-on-click-modal="true" destroy-on-close append-to-body @closed="releaseImagePreview">
       <div class="review-image-preview">
         <el-skeleton v-if="imagePreviewLoading" :rows="5" animated />
         <div v-else-if="imagePreviewError" class="review-image-preview__error">
@@ -309,76 +303,42 @@ defineExpose({ confirmApprove, isPending, canReview, actionLoading })
         <img v-else-if="imagePreviewUrl" :src="imagePreviewUrl" alt="当前箱规测量原图" />
         <el-empty v-else description="暂无可预览图片" />
       </div>
-    </el-dialog>
+    </AppDialog>
   </section>
 </template>
 
 <style scoped>
 .review-panel { display: grid; gap: var(--admin-space-5, 12px); color: var(--cc-text); }
-.review-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: sticky; top: -12px; z-index: 3; flex-wrap: wrap; margin: -var(--admin-space-5, 12px) -var(--admin-space-6, 16px) 0; padding: var(--admin-space-3, 8px) var(--admin-space-6, 16px); border-bottom: 1px solid var(--cc-border); background: linear-gradient(100deg, #f3f6ff 0%, #fff 48%, #eefaf7 100%); }
+.review-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-5, 12px); position: sticky; top: 0; z-index: 3; flex-wrap: wrap; padding: var(--admin-space-3, 8px) 0; border-bottom: 1px solid var(--cc-border); background: var(--admin-surface, #fff); }
 .review-toolbar__status, .review-toolbar__actions { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: var(--admin-space-3, 8px); }
 .review-toolbar__status > span { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
 .review-toolbar__actions { justify-content: flex-end; }
 .review-toolbar__actions :deep(.el-button) { margin-left: 0; }
 .review-toolbar__status > .review-toolbar__context { padding-left: var(--admin-space-3, 8px); border-left: 1px solid var(--cc-border); font-size: var(--admin-font-body, 13px); line-height: 1.55; overflow-wrap: anywhere; }
 .review-alert-title { display: inline-flex; align-items: center; gap: var(--admin-space-3, 8px); flex-wrap: wrap; }
-.review-data, .review-items { min-width: 0; padding: 0 0 var(--admin-space-5, 12px); border-bottom: 1px solid var(--cc-border); }
+.review-data, .review-items { min-width: 0; }
 .review-section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-6, 16px); margin-bottom: var(--admin-space-3, 8px); }
 .review-section-heading > div { min-width: 0; }
 .review-section-heading h3 { margin: 0; color: var(--cc-text); font-size: var(--admin-font-section, 14px); line-height: 1.35; }
 .review-section-heading > span { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); white-space: nowrap; }
-.review-comparison { border-top: 1px solid var(--cc-border); }
-.review-comparison__row { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; min-width: 0; padding: var(--admin-space-3, 8px) 0; }
-.review-comparison__row + .review-comparison__row { border-top: 1px dashed var(--cc-border); }
-.review-comparison__row > strong { color: #344054; font-size: var(--admin-font-caption, 12px); }
-.review-metrics, .review-declaration { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--admin-space-3, 8px) var(--admin-space-6, 16px); min-width: 0; margin: 0; }
-.review-declaration { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.review-metrics > div, .review-declaration > div { display: flex; min-width: 0; align-items: baseline; gap: var(--admin-space-2, 6px); }
-.review-metrics dt, .review-declaration dt { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); line-height: 1.4; }
-.review-metrics dd { margin: 0; overflow-wrap: anywhere; color: #172033; font-size: var(--admin-font-section, 14px); font-weight: 600; line-height: 1.35; }
-.review-metrics dd small, .review-declaration dd small { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); font-weight: 500; }
-.review-metrics .review-metric--primary dd { color: #067647; }
-.review-declaration dd { margin: 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: var(--admin-font-body, 13px); font-weight: 650; line-height: 1.4; }
+.review-comparison { table-layout: fixed; }
+.review-extra-facts { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--admin-space-5, 12px); margin-top: var(--admin-space-3, 8px); color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
+.review-extra-facts strong { color: var(--cc-text); }
 .review-table-scroll { width: 100%; min-width: 0; overflow: hidden; }
-.review-table { width: 100%; font-size: var(--admin-font-caption, 12px); }
-.review-table :deep(.el-table__header th) { padding: var(--admin-space-3, 8px) 0; background: #f6f8fa; color: #475467; font-size: var(--admin-font-caption, 12px); font-weight: 700; }
-.review-table :deep(.el-table__header .cell) { white-space: nowrap; }
-.review-table :deep(.el-table__cell) { padding: 7px 0; }
+.review-table { width: 100%; }
 .review-table :deep(.review-time-cell .cell) { white-space: nowrap; }
 .review-table :deep(.measurement-evidence-thumb) { min-width: 72px; border-radius: var(--admin-radius, 4px); }
-.review-data { border: 1px solid #dfe5ef; border-radius: 8px; overflow: hidden; background: #fff; }
-.review-data .review-section-heading { margin: 0; padding: 10px 14px 6px; border-bottom: 0; }
-.review-comparison__row { padding: 10px 14px; }
-.review-comparison__row--declared { background: linear-gradient(90deg, #ddf5e9, #eaf9f1); box-shadow: inset 4px 0 #25a879; }
-.review-comparison__row--declared > strong { color: #16845d; }
-.review-comparison__row + .review-comparison__row { border-top: 1px dashed #dfe4ed; }
-.review-comparison__row > strong { font-size: var(--admin-font-body, 13px); }
-.review-declaration dd, .review-metrics dd { font-size: var(--admin-font-body, 13px); }
-.review-metric--primary dd, .review-weight-value, .review-weight-totals strong { color: #138154 !important; font-weight: 750; }
-.review-weight-items { padding-top: 0; }
-.review-weight-totals { display: flex; gap: 18px; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
-.review-weight-totals span { padding: 4px 8px; border-radius: 7px; background: #f0faf5; }
-.review-weight-totals strong { margin-left: 6px; font-size: var(--admin-font-body, 13px); }
-.review-weight-table :deep(.el-table__header th) { background: linear-gradient(180deg, #f1f4fc, #e9eef8); }
-.review-weight-table :deep(.el-table__cell) { padding: 9px 0; }
-.review-location { display: inline-block; padding: 3px 7px; border: 1px solid #e2e8f2; border-radius: 5px; background: #f3f6fb; color: #53627a; white-space: nowrap; }
+.review-weight-value { color: var(--el-color-success-dark-2); font-weight: 600; }
+.review-location { white-space: nowrap; }
 .review-weight-editor--hidden { display: none; }
 .review-image-preview { display: grid; min-height: 240px; place-items: center; }
 .review-image-preview img { display: block; width: auto; max-width: 100%; max-height: 70vh; object-fit: contain; }
 .review-image-preview__error { display: grid; justify-items: center; gap: var(--admin-space-3, 8px); color: var(--el-color-danger); }
 @media (max-width: 720px) {
-  .review-toolbar { align-items: stretch; flex-direction: column; margin: -14px -14px 0; padding: 12px 14px; }
+  .review-toolbar { align-items: stretch; flex-direction: column; }
   .review-toolbar__status > .review-toolbar__context { width: 100%; padding-top: 8px; padding-left: 0; border-top: 1px solid var(--cc-border); border-left: 0; }
   .review-toolbar__actions { display: grid; width: 100%; grid-template-columns: 1fr; justify-content: stretch; }
   .review-toolbar__actions :deep(.el-button) { width: 100%; min-height: 44px; }
   .review-section-heading { align-items: stretch; flex-direction: column; }
-  .review-weight-totals { flex-wrap: wrap; gap: 6px; }
-  .review-comparison__row { grid-template-columns: 78px minmax(0, 1fr); align-items: start; }
-  .review-metrics, .review-declaration { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
-@media (max-width: 360px) {
-  .review-toolbar { margin: -10px -10px 0; padding: 10px; }
-  .review-comparison__row { grid-template-columns: 1fr; gap: 6px; }
-  .review-metrics, .review-declaration { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; }
 }
 </style>