优化

src/modules/loading-lists/components/LoadingListDetailDrawer.vue

@@ -204,7 +204,7 @@ function formatNumber(value?: number | null, digits = 3) {
         >
           <template #toolbar-start><div class="detail-section__heading"><div><h2>装柜货物明细 <span>{{ detail.items.length }} 条</span></h2><p>仓库备注将随装柜完成资料下发海外仓</p></div></div></template>
           <template #actions="{ row }">
-            <el-button size="small" type="primary" plain :aria-label="`编辑 ${row.inboundCode || row.orderNo} 的备注`" @click="emit('editRemarks', row as LoadingItem)"><Pencil :size="14" />编辑备注</el-button>
+            <el-button :class="{ 'density-action': mode === 'preload' }" size="small" :type="mode === 'preload' ? undefined : 'primary'" :plain="mode !== 'preload'" :aria-label="`编辑 ${row.inboundCode || row.orderNo} 的备注`" @click="emit('editRemarks', row as LoadingItem)"><Pencil v-if="mode !== 'preload'" :size="14" />编辑备注</el-button>
           </template>
           <template #unitType="{ row }"><el-tag size="small" :type="row.unitType === 'SEALED_PALLET' ? 'success' : 'info'">{{ row.unitType === 'SEALED_PALLET' ? '封托托盘' : '箱件' }}</el-tag><small v-if="row.indivisible">整托不可拆</small></template>
           <template #grossWeight="{ row }">{{ formatNumber(row.grossWeightKg) }}</template>
@@ -236,58 +236,58 @@ function formatNumber(value?: number | null, digits = 3) {
 </template>
 
 <style scoped>
-.loading-detail-content { display: grid; min-width: 0; gap: 16px; padding: 16px; border: 1px solid var(--cc-border); border-radius: 8px; background: #fff; }
+.loading-detail-content { display: grid; min-width: 0; gap: var(--admin-space-6, 16px); padding: var(--admin-space-6, 16px); border: 1px solid var(--cc-border); border-radius: 8px; background: var(--admin-surface, #fff); }
 .detail-layout { display: grid; min-width: 0; }
 .detail-overview { min-width: 0; }
-.detail-page-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 8px 0 12px; }
+.detail-page-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--admin-space-6, 16px); padding: var(--admin-space-3, 8px) 0 var(--admin-space-5, 12px); }
 .detail-page-header--embedded { grid-template-columns: minmax(0, 1fr) auto; padding-top: 0; }
 .detail-page-header__back { margin-right: 2px; }
 .detail-page-header__identity { min-width: 0; }
 .detail-page-header__identity h1 { margin: 0; color: var(--cc-text); font-size: 18px; line-height: 1.35; }
-.detail-page-header__identity p { margin: 3px 0 0; color: var(--cc-muted); font-size: 12px; }
-.detail-page-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
+.detail-page-header__identity p { margin: 3px 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
+.detail-page-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--admin-space-3, 8px); }
 .detail-page-header__actions :deep(.el-button + .el-button) { margin-left: 0; }
-.detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 28px; padding: 10px 0 2px; border-top: 1px solid var(--cc-border); }
-.detail-summary > div { display: flex; min-width: 0; min-height: 26px; align-items: center; gap: 6px; }
-.detail-summary > div > span:first-child { flex: 0 0 auto; color: var(--cc-muted); font-size: 12px; white-space: nowrap; }
+.detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--admin-space-2, 6px) 28px; padding: var(--admin-space-4, 10px) 0 2px; border-top: 1px solid var(--cc-border); }
+.detail-summary > div { display: flex; min-width: 0; min-height: 26px; align-items: center; gap: var(--admin-space-2, 6px); }
+.detail-summary > div > span:first-child { flex: 0 0 auto; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); white-space: nowrap; }
 .detail-summary > div > span:first-child::after { content: "："; }
-.detail-summary strong { min-width: 0; color: var(--cc-text); font-size: 13px; overflow-wrap: anywhere; }
+.detail-summary strong { min-width: 0; color: var(--cc-text); font-size: var(--admin-font-body, 13px); overflow-wrap: anywhere; }
 .detail-summary :deep(.status-badge) { width: fit-content; }
-.detail-summary small { color: var(--cc-muted); font-size: 11px; }
+.detail-summary small { color: var(--cc-muted); font-size: var(--admin-font-caption, 11px); }
 .detail-summary__wide { grid-column: auto; }
 .detail-layout :deep(.detail-page-layout__content) { display: grid; min-width: 0; gap: 20px; }
-.readiness-note { display: flex; min-width: 0; align-items: center; padding: 2px 4px; color: var(--cc-text); font-size: 12px; }
+.readiness-note { display: flex; min-width: 0; align-items: center; padding: 2px var(--admin-space-1, 4px); color: var(--cc-text); font-size: var(--admin-font-caption, 12px); }
 .readiness-note strong { flex: 0 0 auto; color: var(--el-color-warning-dark-2); }
 .readiness-note span { min-width: 0; color: var(--cc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.detail-section, .history-section { min-width: 0; overflow: hidden; padding: 16px 0 0; border-top: 1px solid var(--cc-border); }
+.detail-section, .history-section { min-width: 0; overflow: hidden; padding: var(--admin-space-6, 16px) 0 0; border-top: 1px solid var(--cc-border); }
 .detail-section__heading h2 { margin: 0; font-size: 15px; }
-.detail-section__heading h2 span { margin-left: 6px; color: var(--cc-muted); font-size: 12px; font-weight: 400; }
-.detail-section__heading p { margin: 2px 0 0; color: var(--cc-muted); font-size: 11px; line-height: 1.35; }
-.detail-section :deep(.data-table__toolbar) { min-height: 52px; padding: 7px 12px; }
+.detail-section__heading h2 span { margin-left: var(--admin-space-2, 6px); color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); font-weight: 400; }
+.detail-section__heading p { margin: 2px 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption, 11px); line-height: 1.35; }
+.detail-section :deep(.data-table__toolbar) { min-height: 52px; padding: 7px var(--admin-space-5, 12px); }
 .detail-section :deep(.el-table) { width: 100%; }
 .detail-section :deep(.el-table th.el-table__cell) { padding: 7px 0; }
-.detail-section :deep(.el-table td.el-table__cell) { padding: 6px 0; }
+.detail-section :deep(.el-table td.el-table__cell) { padding: var(--admin-space-2, 6px) 0; }
 .detail-section :deep(.identifier-column .cell) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .detail-section small { display: block; margin-top: 3px; color: var(--cc-muted); }
 .remark-cell { min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
-.history-section header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
-.history-section h2 { margin: 0; font-size: 16px; }
-.history-section header span { color: var(--cc-muted); font-size: 12px; }
-.preload-density { gap: 12px; padding: 12px; border-radius: 4px; }
-.preload-density .detail-page-header { gap: 12px; padding: 0 0 8px; }
-.preload-density .detail-page-header__identity h1 { font-size: 16px; overflow-wrap: anywhere; }
+.history-section header { display: flex; align-items: baseline; gap: var(--admin-space-4, 10px); margin-bottom: 18px; }
+.history-section h2 { margin: 0; font-size: var(--admin-font-title, 16px); }
+.history-section header span { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
+.preload-density { gap: var(--admin-space-5, 12px); padding: var(--admin-space-5, 12px); border-radius: var(--admin-radius, 4px); }
+.preload-density .detail-page-header { gap: var(--admin-space-5, 12px); padding: 0 0 var(--admin-space-3, 8px); }
+.preload-density .detail-page-header__identity h1 { font-size: var(--admin-font-title, 16px); overflow-wrap: anywhere; }
 .preload-density .detail-page-header__actions { flex-wrap: wrap; }
 .preload-density .detail-summary { gap: 0; padding: 0; border-left: 1px solid var(--cc-border); }
-.preload-density .detail-summary > div { gap: 0; align-items: stretch; min-height: 36px; border-bottom: 1px solid var(--cc-border); border-right: 1px solid var(--cc-border); }
-.preload-density .detail-summary > div > span:first-child { display: flex; align-items: center; flex: 0 0 96px; padding: 6px 8px; background: #f8fafc; }
+.preload-density .detail-summary > div { gap: 0; align-items: stretch; min-height: var(--admin-row-height, 36px); border-bottom: 1px solid var(--cc-border); border-right: 1px solid var(--cc-border); }
+.preload-density .detail-summary > div > span:first-child { display: flex; align-items: center; flex: 0 0 96px; padding: var(--admin-space-2, 6px) var(--admin-space-3, 8px); background: var(--admin-label-bg, #f8fafc); }
 .preload-density .detail-summary > div > span:first-child::after { content: none; }
-.preload-density .detail-summary strong, .preload-density .detail-summary :deep(.status-badge) { align-self: center; margin: 6px 8px; font-weight: 400; }
+.preload-density .detail-summary strong, .preload-density .detail-summary :deep(.status-badge) { align-self: center; margin: var(--admin-space-2, 6px) var(--admin-space-3, 8px); font-weight: 400; }
 .preload-density .detail-summary__wide { grid-column: span 2; }
-.preload-density .detail-layout :deep(.detail-page-layout__content) { gap: 12px; }
-.preload-density .detail-section, .preload-density .history-section { padding-top: 8px; }
-.preload-density .detail-section__heading h2, .preload-density .history-section h2 { font-size: 14px; }
-.preload-density .history-section header { margin-bottom: 8px; }
-.preload-density .detail-section__heading p, .preload-density small { font-size: 12px; }
+.preload-density .detail-layout :deep(.detail-page-layout__content) { gap: var(--admin-space-5, 12px); }
+.preload-density .detail-section, .preload-density .history-section { padding-top: var(--admin-space-3, 8px); }
+.preload-density .detail-section__heading h2, .preload-density .history-section h2 { font-size: var(--admin-font-section, 14px); }
+.preload-density .history-section header { margin-bottom: var(--admin-space-3, 8px); }
+.preload-density .detail-section__heading p, .preload-density small { font-size: var(--admin-font-caption, 12px); }
 .preload-density .readiness-note { align-items: baseline; }
 .preload-density .readiness-note span { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
 @media (max-width: 720px) { .preload-density .detail-summary { grid-template-columns: 1fr; } .preload-density .detail-summary__wide { grid-column: auto; } }

src/modules/loading-lists/components/LoadingListsView.test.ts

@@ -136,7 +136,8 @@ describe('LoadingListsView', () => {
   })
 
   it('uses bordered list actions with a stable 320px layout', () => {
-    expect(source).toContain('size="small" type="primary" plain')
+    expect(source).toContain(":class=\"{ 'density-action': isPreload }\"")
+    expect(source).toContain(':type="isPreload ? undefined : \'primary\'" :plain="!isPreload"')
     expect(source).not.toContain('<el-button v-if="canView" link')
     expect(source).toContain("key: 'actions', label: '操作', fixed: 'left', width: 110")
     expect(source).toContain('flex-wrap: wrap')
@@ -201,7 +202,7 @@ describe('LoadingListsView', () => {
     expect(detailSource).toContain('min-height: 26px')
     expect(detailSource).toContain('> div > span:first-child::after { content: "："; }')
     expect(detailSource).not.toContain('> div > span::after { content: "："; }')
-    expect(detailSource).toContain('background: #fff')
+    expect(detailSource).toContain('background: var(--admin-surface, #fff)')
     expect(detailSource).toContain('overflow-wrap: anywhere')
     expect(detailSource).toContain("className: 'identifier-column'")
     expect(detailSource).toContain('showOverflowTooltip: true')
@@ -217,7 +218,7 @@ describe('LoadingListsView', () => {
     expect(detailSource).toContain('<section class="detail-section">')
     expect(detailSource).not.toContain('class="detail-section surface-panel"')
     expect(detailSource).not.toContain('class="history-section surface-panel"')
-    expect(detailSource).toContain('padding: 16px 0 0')
+    expect(detailSource).toContain('padding: var(--admin-space-6, 16px) 0 0')
     expect(detailSource).toContain("fixed: 'left', width: 132")
   })
 

src/modules/loading-lists/components/LoadingListsView.vue

@@ -219,8 +219,8 @@ onMounted(() => {
           <ContainerSimulationCreate :dense="isPreload" v-if="canCreate" success-message="模拟柜及预装清单已创建" @created="onSimulationCreated" />
         </template>
         <template #actions="{ row }">
-          <div class="row-actions">
-            <el-button v-if="canView" size="small" type="primary" plain @click="openDetail(row)"><Eye :size="15" />查看</el-button>
+          <div class="row-actions" :class="{ 'density-actions': isPreload }">
+            <el-button v-if="canView" :class="{ 'density-action': isPreload }" size="small" :type="isPreload ? undefined : 'primary'" :plain="!isPreload" @click="openDetail(row)"><Eye v-if="!isPreload" :size="15" />查看</el-button>
           </div>
         </template>
         <template #customers="{ row }"><LineClampText :content="(row as PreloadSummary).customers.map((item) => item.customerName || '客户信息缺失').join('、')" /></template>
@@ -239,9 +239,9 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.loading-lists-page { display: grid; min-width: 0; gap: 16px; }
-.table-panel { min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); background: #fff; }
-.row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
+.loading-lists-page { display: grid; min-width: 0; gap: var(--admin-space-6, 16px); }
+.table-panel { min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); background: var(--admin-surface, #fff); }
+.row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-2, 6px); }
 .row-actions :deep(.el-button) { margin-left: 0; }
 @media (max-width: 720px) { .row-actions { gap: 4px; } }
 </style>

src/modules/loading-lists/components/PalletLabelPrintDialog.vue

@@ -60,7 +60,7 @@ async function print() {
 </template>
 
 <style scoped>
-.print-scope { display:flex; margin:18px 0 12px; }
-.print-options { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
+.print-scope { display:flex; margin:18px 0 var(--admin-space-5, 12px); }
+.print-options { display:flex; align-items:center; gap:var(--admin-space-5, 12px); margin-bottom:var(--admin-space-6, 16px); }
 .print-options .el-select { width:240px; }
 </style>

src/modules/loading-lists/pages/PreloadPlanDetailView.test.ts

@@ -10,7 +10,7 @@ describe('PreloadPlanDetailView prototype contract', () => {
     expect(source).toContain('<AdminPage>')
     expect(source).toContain('@back="goBack"')
     expect(source).toContain("router.push({ name: 'loading-plans' })")
-    expect(source).toContain('@media (min-width: 1920px) { .preload-detail-page { width: 100%; max-width: none; gap: 12px; } }')
+    expect(source).toContain('@media (min-width: 1920px) { .preload-detail-page { width: 100%; max-width: none; gap: var(--admin-space-5, 12px); } }')
     expect(source).not.toContain('AppDrawer')
   })
 

src/modules/loading-lists/pages/PreloadPlanDetailView.vue

@@ -290,13 +290,13 @@ watch([planId, warehouseId], () => void loadDetail())
 </template>
 
 <style scoped>
-.preload-detail-page { display: grid; min-width: 0; width: 100%; gap: 12px; }
-.transport-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
+.preload-detail-page { display: grid; min-width: 0; width: 100%; gap: var(--admin-space-5, 12px); }
+.transport-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-6, 16px); }
 .transport-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }
-.confirm-content { display: grid; gap: 12px; }
+.confirm-content { display: grid; gap: var(--admin-space-5, 12px); }
 .remarks-form { margin-top: 14px; }
-.remarks-form small { display: block; margin-top: 4px; color: var(--cc-muted); }
+.remarks-form small { display: block; margin-top: var(--admin-space-1, 4px); color: var(--cc-muted); }
 :global(.loading-transport-dialog.el-dialog) { max-height: 90vh; overflow: hidden; }
-@media (min-width: 1920px) { .preload-detail-page { width: 100%; max-width: none; gap: 12px; } }
+@media (min-width: 1920px) { .preload-detail-page { width: 100%; max-width: none; gap: var(--admin-space-5, 12px); } }
 @media (max-width: 720px) { .transport-form { grid-template-columns: 1fr; } .transport-form :deep(.el-form-item:last-child) { grid-column: auto; } }
 </style>