优化

src/modules/fba-pricing/carrier-rates/pages/CarrierRateDetailView.vue

@@ -3,7 +3,7 @@ import InlineHelp from '@/shared/components/InlineHelp.vue'
 import '@/styles/adminDensity.css'
 import '@/styles/adminWorkbench.css'
 import { computed, onMounted, ref, watch } from 'vue'
-import { AlertTriangle, ArrowLeft, CircleCheck, Download, FileSpreadsheet, RefreshCw, Ship, Warehouse } from '@lucide/vue'
+import { ArrowLeft, CircleCheck, Download, RefreshCw } from '@lucide/vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useRoute, useRouter } from 'vue-router'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
@@ -448,12 +448,6 @@ onMounted(() => {
           </div>
         </div>
       </template>
-      <template v-if="detail" #summary>
-        <dl class="density-detail-overview">
-          <div><dt>报价范围</dt><dd>{{ priceBookScopeLabel(detail.version.customerId) }}</dd></div>
-          <div><dt>上传时间</dt><dd>{{ formatDateTime(detail.version.createdAt) }}</dd></div>
-        </dl>
-      </template>
 
       <LoadErrorState v-if="loadError" title="船期价格表详情加载失败" :message="loadError.message" :loading="loading" @retry="loadDetail">
         <template #details><ApiErrorMeta :details="loadError" /></template>
@@ -462,9 +456,11 @@ onMounted(() => {
       <template v-else-if="detail">
         <section class="version-panel">
           <header class="section-heading">
-            <div><h2><FileSpreadsheet :size="18" />版本信息</h2><p>{{ detail.version.originalFileName }}</p></div>
+            <div><h2>版本信息</h2></div>
           </header>
           <dl class="detail-grid density-fields">
+            <div class="detail-grid__half"><dt>报价范围</dt><dd>{{ priceBookScopeLabel(detail.version.customerId) }}</dd></div>
+            <div class="detail-grid__half"><dt>上传时间</dt><dd>{{ formatDateTime(detail.version.createdAt) }}</dd></div>
             <div><dt>解析渠道</dt><dd>{{ detail.version.channelCount }}</dd></div>
             <div><dt>解析价格行</dt><dd>{{ detail.version.rateCount }}</dd></div>
             <div><dt>阻断错误</dt><dd :class="{ 'is-danger': detail.version.blockingErrorCount }">{{ detail.version.blockingErrorCount }}</dd></div>
@@ -475,7 +471,7 @@ onMounted(() => {
         </section>
 
         <section v-if="isPending && canEdit" class="mapping-section">
-          <header class="section-heading"><div><h2><Warehouse :size="18" />仓库映射<InlineHelp title="仓库映射规则"><p>来源编码必须匹配启用的平台公共仓库编码。</p></InlineHelp></h2></div></header>
+          <header class="section-heading"><div><h2>仓库映射<InlineHelp title="仓库映射规则"><p>来源编码必须匹配启用的平台公共仓库编码。</p></InlineHelp></h2></div></header>
           <el-alert
             v-if="nonMappingBlockingIssues.length"
             title="当前文件存在无法通过仓库映射解决的阻断错误，请修改原 Excel 后重新上传。"
@@ -514,37 +510,39 @@ onMounted(() => {
         </section>
 
         <section class="detail-section">
-          <header class="section-heading"><div><h2><AlertTriangle :size="18" />解析与校验<InlineHelp title="价格表确认规则"><p>阻断错误未解决时不能生效；价格行不可在页面内修改。</p></InlineHelp></h2></div></header>
+          <header class="section-heading"><div><h2>解析与校验<InlineHelp title="价格表确认规则"><p>阻断错误未解决时不能生效；价格行不可在页面内修改。</p></InlineHelp></h2></div></header>
           <el-empty v-if="!detail.issues.length" description="未发现解析问题" :image-size="72" />
           <el-table v-else :data="detail.issues" size="small" max-height="280" aria-label="价格表解析问题">
             <el-table-column label="级别" width="90"><template #default="{ row }"><el-tag :type="(row as PlatformPriceBookParseIssue).severity === 'BLOCKING' ? 'danger' : 'warning'" size="small">{{ (row as PlatformPriceBookParseIssue).severity === 'BLOCKING' ? '阻断' : '警告' }}</el-tag></template></el-table-column>
-            <el-table-column prop="issueCode" label="编码" min-width="165" show-overflow-tooltip />
-            <el-table-column prop="message" label="说明" min-width="250" show-overflow-tooltip />
+            <el-table-column prop="issueCode" label="编码" width="270" />
+            <el-table-column prop="message" label="说明" min-width="320" />
             <el-table-column label="来源" min-width="180"><template #default="{ row }">{{ issueLocation(row as PlatformPriceBookParseIssue) }}</template></el-table-column>
           </el-table>
         </section>
 
         <section class="detail-section channel-preview">
-          <header class="section-heading"><div><h2><Ship :size="18" />按渠道预览</h2></div></header>
+          <header class="section-heading"><div><h2>按渠道预览</h2></div></header>
           <el-empty v-if="!detail.channels.length" description="未解析出渠道" :image-size="72" />
           <template v-else>
             <el-tabs v-model="selectedChannelCode" class="channel-tabs density-element-tabs">
-              <el-tab-pane v-for="channel in detail.channels" :key="channel.channelCode" :name="channel.channelCode"><template #label><span class="density-tab-icon" aria-hidden="true">🚢</span>{{ channel.channelName }}</template></el-tab-pane>
+              <el-tab-pane v-for="channel in detail.channels" :key="channel.channelCode" :name="channel.channelCode"><template #label>{{ channel.channelName }}</template></el-tab-pane>
             </el-tabs>
-            <div class="channel-meta"><span>{{ priceModelLabel(selectedChannel?.priceModel || '') }}</span><span>表页：{{ selectedChannel?.sourceSheetName || '—' }}</span></div>
+            <dl class="channel-facts density-fields" aria-label="渠道信息">
+              <div><dt>渠道</dt><dd>{{ selectedChannel?.channelName || '—' }}</dd></div>
+              <div><dt>计价方式</dt><dd>{{ priceModelLabel(selectedChannel?.priceModel || '') }}</dd></div>
+              <div><dt>来源表页</dt><dd>{{ selectedChannel?.sourceSheetName || '—' }}</dd></div>
+              <div><dt>参考时效</dt><dd>{{ selectedChannel?.referenceTransit || '—' }}</dd></div>
+              <div><dt>最晚进仓时间</dt><dd>{{ selectedChannel?.latestWarehouseEntry || '—' }}</dd></div>
+              <div><dt>船期</dt><dd>{{ selectedChannel?.estimatedDepartureText || selectedChannel?.estimatedDepartureDate || '—' }}</dd></div>
+              <div class="channel-facts__wide"><dt>附加费</dt><dd>{{ selectedChannel?.surchargeDescription || '—' }}</dd></div>
+              <div class="channel-facts__wide"><dt>备注</dt><dd>{{ selectedChannel?.remark || '—' }}</dd></div>
+            </dl>
             <el-table :data="selectedChannelRates" size="small" max-height="440" border stripe aria-label="渠道价格行预览">
-              <el-table-column label="渠道" min-width="140" show-overflow-tooltip><template #default>{{ selectedChannel?.channelName || '—' }}</template></el-table-column>
-              <el-table-column prop="originWarehouseName" label="起运仓" min-width="130" show-overflow-tooltip />
+              <el-table-column prop="originWarehouseName" label="起运仓" min-width="180" />
               <el-table-column label="目的地" min-width="140"><template #default="{ row }">{{ rateDestinationLabel(row as PlatformPriceBookParsedRate) }}</template></el-table-column>
               <el-table-column label="包税方式" width="105"><template #default="{ row }">{{ pricingTaxModeLabel((row as PlatformPriceBookParsedRate).pricingTaxMode) }}</template></el-table-column>
               <el-table-column prop="chargeUnit" label="单位" width="78" />
               <el-table-column label="单价" min-width="120"><template #default="{ row }">{{ formatMoney((row as PlatformPriceBookParsedRate).unitPrice, (row as PlatformPriceBookParsedRate).currency) }}</template></el-table-column>
-              <el-table-column label="参考时效" min-width="130" show-overflow-tooltip><template #default>{{ selectedChannel?.referenceTransit || '—' }}</template></el-table-column>
-              <el-table-column label="最晚进仓时间" min-width="150" show-overflow-tooltip><template #default>{{ selectedChannel?.latestWarehouseEntry || '—' }}</template></el-table-column>
-              <el-table-column label="船期" min-width="150" show-overflow-tooltip><template #default>{{ selectedChannel?.estimatedDepartureText || selectedChannel?.estimatedDepartureDate || '—' }}</template></el-table-column>
-              <el-table-column label="附加费" min-width="180" show-overflow-tooltip><template #default>{{ selectedChannel?.surchargeDescription || '—' }}</template></el-table-column>
-              <el-table-column label="备注" min-width="180" show-overflow-tooltip><template #default>{{ selectedChannel?.remark || '—' }}</template></el-table-column>
-              <el-table-column label="生效状态" width="105"><template #default>{{ priceBookStatusMeta(detail.version.status).label }}</template></el-table-column>
               <el-table-column label="来源" min-width="170"><template #default="{ row }">{{ sourceLocation(row as PlatformPriceBookParsedRate) }}</template></el-table-column>
             </el-table>
           </template>
@@ -555,23 +553,24 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.price-book-detail { min-width: 0; max-width: 1880px; }
-.version-panel, .mapping-section, .detail-section { padding: var(--admin-space-5) 0; border-bottom: 1px solid var(--workbench-border); }
+.price-book-detail { min-width: 0; }
+.price-book-detail :deep(.density-detail-layout > .detail-page-layout__content) { padding: 0; }
+.price-book-detail .channel-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); --admin-field-label-width: 110px; }
+.channel-facts .channel-facts__wide { grid-column: 1 / -1; }
+.detail-grid dd, .channel-facts dd { overflow-wrap: anywhere; }
+.version-panel, .mapping-section, .detail-section { display: grid; min-width: 0; gap: var(--admin-space-5); padding: var(--admin-space-5) 0; border-bottom: 1px solid var(--workbench-border); }
 .detail-section:last-child { border-bottom: 0; }
 .price-book-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-3); }
+.detail-grid .detail-grid__half { grid-column: span 2; }
 .detail-grid .detail-grid__wide { grid-column: 1 / -1; }
 .section-heading > div { min-width: 0; }
-.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--admin-space-5); margin-bottom: var(--admin-space-5); }
+.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--admin-space-5); margin: 0; }
 .section-heading h2 { display: flex; align-items: center; gap: var(--admin-space-3); margin: 0; color: var(--workbench-text); font-size: var(--admin-font-section); }
-.section-heading h2 svg { color: var(--workbench-primary); }
-.section-heading p { overflow-wrap: anywhere; margin: 5px 0 0; color: var(--workbench-muted); font-size: var(--admin-font-caption); line-height: 1.55; }
 .is-danger { color: var(--el-color-danger) !important; }
-.mapping-section, .detail-section { display: grid; min-width: 0; gap: var(--admin-space-5); }
-.mapping-section .section-heading, .detail-section .section-heading { margin-bottom: 0; }
 .mapping-groups { display: grid; gap: var(--admin-space-5); }
 .mapping-group { display: grid; gap: var(--admin-space-3); }
 .mapping-group h3 { margin: 0; color: var(--workbench-text); font-size: var(--admin-font-body); }
-.mapping-row { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(320px, 1fr); align-items: center; gap: var(--admin-space-6); padding: var(--admin-space-5) var(--admin-space-5); border: 1px solid var(--workbench-border); border-radius: var(--admin-radius); background: var(--cc-surface-soft, #f8fafc); }
+.mapping-row { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(320px, 1fr); align-items: center; gap: var(--admin-space-6); padding: var(--admin-space-5); border: 1px solid var(--workbench-border); border-radius: var(--admin-radius); background: var(--cc-surface-soft, #f8fafc); }
 .mapping-row > div { display: grid; min-width: 0; gap: var(--admin-space-1); }
 .mapping-row strong { overflow-wrap: anywhere; color: var(--workbench-text); font-size: var(--admin-font-body); }
 .mapping-row span { color: var(--workbench-muted); font-size: var(--admin-font-caption); }
@@ -580,8 +579,8 @@ onMounted(() => {
 .mapping-load-error strong { color: var(--cc-danger); font-size: var(--admin-font-body); }
 .mapping-load-error p { margin: var(--admin-space-1) 0; color: var(--workbench-text); font-size: var(--admin-font-caption); }
 .channel-tabs { width: 100%; min-width: 0; margin-bottom: 0; overflow: hidden; }
+.channel-tabs :deep(.el-tabs__header) { margin-bottom: 0; }
 .channel-preview :deep(.el-table) { width: 100%; max-width: 100%; min-width: 0; }
-.channel-meta { display: flex; flex-wrap: wrap; gap: var(--admin-space-2) var(--admin-space-5); margin: calc(-1 * var(--admin-space-1)) 0 0; color: var(--workbench-muted); font-size: var(--admin-font-caption); }
 @media (max-width: 720px) {
   .detail-heading, .mapping-load-error { align-items: stretch; flex-direction: column; }
   .detail-toolbar { width: 100%; }

src/modules/fba-pricing/carrier-rates/pages/CarrierRatesView.test.ts

@@ -56,8 +56,8 @@ describe('CarrierRatesView price-book source contract', () => {
   })
 
   it('shows all source-backed prototype price metadata without inventing cost breakdowns', () => {
-    for (const label of ['渠道', '参考时效', '最晚进仓时间', '船期', '附加费', '备注', '生效状态']) {
-      expect(detailSource).toContain(`label="${label}"`)
+    for (const label of ['渠道', '参考时效', '最晚进仓时间', '船期', '附加费', '备注']) {
+      expect(detailSource).toContain(`<dt>${label}</dt>`)
     }
     for (const field of ['referenceTransit', 'latestWarehouseEntry', 'estimatedDepartureText', 'surchargeDescription', 'remark']) {
       expect(detailSource).toContain(`selectedChannel?.${field}`)

src/modules/fba-pricing/carrier-rates/pages/CarrierRatesView.vue

@@ -82,15 +82,15 @@ const queryFields = computed<QueryField[]>(() => [
 ])
 
 const columns: DataTableColumn[] = [
-  { key: 'actions', label: '操作', width: 300, fixed: 'left', slotName: 'actions' },
-  { key: 'scope', label: '报价范围', minWidth: 190, slotName: 'scope' },
-  { key: 'version', label: '价格表版本', minWidth: 180, slotName: 'version' },
+  { key: 'actions', label: '操作', width: 210, fixed: 'left', slotName: 'actions' },
+  { key: 'scope', label: '报价范围', minWidth: 160, slotName: 'scope' },
+  { key: 'version', label: '价格表版本', width: 110, slotName: 'version' },
   { key: 'originalFileName', prop: 'originalFileName', label: '原始文件', minWidth: 250, showOverflowTooltip: true, defaultVisible: false },
-  { key: 'status', label: '状态', width: 110, slotName: 'status' },
-  { key: 'contents', label: '解析结果', minWidth: 155, slotName: 'contents' },
-  { key: 'issues', label: '校验结果', minWidth: 150, slotName: 'issues' },
+  { key: 'status', label: '状态', width: 100, slotName: 'status' },
+  { key: 'contents', label: '解析结果', minWidth: 170, slotName: 'contents' },
+  { key: 'issues', label: '校验结果', width: 140, slotName: 'issues' },
   { key: 'createdAt', label: '上传时间', minWidth: 165, formatter: (row: PlatformPriceBookVersion) => formatDateTime(row.createdAt) },
-  { key: 'effectivePeriod', label: '实际生效区间', minWidth: 290, formatter: (row: PlatformPriceBookVersion) => formatEffectivePeriod(row) },
+  { key: 'effectivePeriod', label: '实际生效区间', minWidth: 260, formatter: (row: PlatformPriceBookVersion) => formatEffectivePeriod(row) },
 ]
 
 const canEdit = computed(() => access.can('firstleg:fba-pricing:rate:edit'))
@@ -382,7 +382,7 @@ onMounted(() => {
         <template #version="{ row }"><div class="version-cell"><strong>V{{ (row as PlatformPriceBookVersion).versionNo }}</strong></div></template>
         <template #scope="{ row }"><el-tag :type="(row as PlatformPriceBookVersion).customerId === '0' ? 'info' : 'warning'" effect="light">{{ priceBookScopeLabel((row as PlatformPriceBookVersion).customerId) }}</el-tag></template>
         <template #status="{ row }"><el-tag :type="priceBookStatusMeta((row as PlatformPriceBookVersion).status).type" effect="light">{{ priceBookStatusMeta((row as PlatformPriceBookVersion).status).label }}</el-tag></template>
-        <template #contents="{ row }"><div class="metric-cell"><strong>{{ (row as PlatformPriceBookVersion).channelCount }}</strong><span>渠道</span><strong>{{ (row as PlatformPriceBookVersion).rateCount }}</strong><span>价格行</span></div></template>
+        <template #contents="{ row }"><div class="metric-cell"><span><strong>{{ (row as PlatformPriceBookVersion).channelCount }}</strong> 渠道</span><span><strong>{{ (row as PlatformPriceBookVersion).rateCount }}</strong> 价格行</span></div></template>
         <template #issues="{ row }"><div class="issue-counts"><span :class="{ 'is-blocking': (row as PlatformPriceBookVersion).blockingErrorCount }">阻断 {{ (row as PlatformPriceBookVersion).blockingErrorCount }}</span><span>警告 {{ (row as PlatformPriceBookVersion).warningCount }}</span></div></template>
         <template #empty><el-empty description="暂无船期价格表版本" /></template>
         <template #pagination-left>共 {{ rows.length }} 个版本 · {{ activeCount }} 个生效中 · {{ pendingCount }} 个待确认</template>
@@ -423,6 +423,7 @@ onMounted(() => {
 .version-cell strong { color: var(--workbench-text); }
 .version-cell span, .metric-cell span { color: var(--workbench-muted); font-size: var(--admin-font-caption); }
 .metric-cell, .issue-counts { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--admin-space-1) var(--admin-space-3); }
+.metric-cell > span, .issue-counts > span { white-space: nowrap; }
 .metric-cell strong { color: var(--workbench-text); font-size: var(--admin-font-body); }
 .issue-counts { color: var(--workbench-muted); font-size: var(--admin-font-caption); }
 .issue-counts .is-blocking, .is-danger { color: var(--el-color-danger); font-weight: 700; }