html/admin-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ouyangxq
2026-10-20 10:11:31 +08:00
parent 7ff7c9914f
commit 3267679758
214 changed files with 10931 additions and 2654 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/inbounds/measurement/InboundMeasurementPanel.vue
+37 -24
View File
@@ -874,7 +874,7 @@ defineExpose({ saveDraft, submitForReview, updateWeightEvidence, submissionBlock
</div>
</footer>
<el-dialog class="admin-density-dialog" v-model="imagePreviewOpen" title="当前有效测量图片" width="min(720px, 92vw)" destroy-on-close @closed="releaseImagePreview">
<AppDialog class="admin-density-dialog" v-model="imagePreviewOpen" :title="detail?.inboundCode ? `当前有效测量图片 · ${detail.inboundCode}` : '当前有效测量图片'" width="min(720px, 92vw)" fullscreenable :show-footer="false" :close-on-click-modal="true" destroy-on-close append-to-body @closed="releaseImagePreview">
<div class="measurement-image-preview">
<el-skeleton v-if="imagePreviewLoading" :rows="5" animated />
<LoadErrorState v-else-if="imagePreviewError" title="图片加载失败" :message="imagePreviewError.message" :show-retry="false">
@@ -883,29 +883,40 @@ defineExpose({ saveDraft, submitForReview, updateWeightEvidence, submissionBlock
<img v-else-if="imagePreviewUrl" :src="imagePreviewUrl" alt="当前扫描箱测量图片" />
<el-empty v-else description="暂无可预览图片" />
</div>
</el-dialog>
</AppDialog>
<el-dialog class="admin-density-dialog" v-model="manualEntryOpen" title="手动录入箱规" width="min(680px, 92vw)" destroy-on-close>
<el-dialog class="admin-density-dialog" v-model="manualEntryOpen" :title="detail?.inboundCode ? `手动录入箱规 · ${detail.inboundCode}` : '手动录入箱规'" width="min(680px, 92vw)" destroy-on-close append-to-body>
<el-alert v-if="manualEntryErrors.length" type="error" :closable="false" show-icon class="manual-entry-alert" title="请修正以下问题">
<ul><li v-for="error in manualEntryErrors" :key="error">{{ error }}</li></ul>
</el-alert>
<el-form label-position="top" class="manual-entry-form" @submit.prevent="submitManualEntry">
<div class="measurement-form-grid">
<el-form-item label="箱号 *"><el-input v-model="manualForm.boxCode" placeholder="请输入已打印箱唛上的箱号" /></el-form-item>
<el-form-item label="测量长（cm） *"><el-input-number v-model="manualForm.length" :min="0.001" :precision="3" controls-position="right" placeholder="请输入测量长" /></el-form-item>
<el-form-item label="测量宽（cm） *"><el-input-number v-model="manualForm.width" :min="0.001" :precision="3" controls-position="right" placeholder="请输入测量宽" /></el-form-item>
<el-form-item label="测量高（cm） *"><el-input-number v-model="manualForm.height" :min="0.001" :precision="3" controls-position="right" placeholder="请输入测量高" /></el-form-item>
<el-form-item label="单箱毛重（kg） *"><el-input-number v-model="manualForm.weight" :min="0.001" :precision="3" controls-position="right" placeholder="请输入单箱毛重" /></el-form-item>
<el-form-item label="测量时间 *"><el-date-picker v-model="manualForm.measuredAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" format="YYYY-MM-DD HH:mm:ss" /></el-form-item>
<el-form-item label="设备/来源编号"><el-input v-model="manualForm.machineNo" maxlength="64" placeholder="请输入设备编号（选填）" /></el-form-item>
<el-form-item label="Shipment ID"><el-input v-model="manualForm.scannedShipmentId" maxlength="64" placeholder="请输入扫描运单号（选填）" /></el-form-item>
</div>
<el-form-item label="当前箱测量图片 *">
<el-upload class="manual-entry-upload" :auto-upload="false" :limit="1" accept="image/*" :on-change="selectManualImage" :on-remove="() => { manualEntryImage = null }">
<el-button><Upload :size="15" />选择图片</el-button>
<template #tip><div class="el-upload__tip">支持图片格式，大小不超过 5 MB</div></template>
</el-upload>
</el-form-item>
<el-form class="manual-entry-form" @submit.prevent="submitManualEntry">
<table class="density-table density-table--editable manual-entry-table" aria-label="手动录入箱规">
<colgroup><col class="manual-entry-label-column" /><col /><col class="manual-entry-label-column" /><col /></colgroup>
<tbody>
<tr>
<th scope="row"><label for="manual-box-code">箱号 *</label></th><td><el-input id="manual-box-code" v-model="manualForm.boxCode" placeholder="请输入已打印箱唛上的箱号" /></td>
<th scope="row"><label for="manual-length">测量长（cm） *</label></th><td><el-input-number id="manual-length" v-model="manualForm.length" :min="0.001" :precision="3" controls-position="right" placeholder="请输入测量长" /></td>
</tr>
<tr>
<th scope="row"><label for="manual-width">测量宽（cm） *</label></th><td><el-input-number id="manual-width" v-model="manualForm.width" :min="0.001" :precision="3" controls-position="right" placeholder="请输入测量宽" /></td>
<th scope="row"><label for="manual-height">测量高（cm） *</label></th><td><el-input-number id="manual-height" v-model="manualForm.height" :min="0.001" :precision="3" controls-position="right" placeholder="请输入测量高" /></td>
</tr>
<tr>
<th scope="row"><label for="manual-weight">单箱毛重（kg） *</label></th><td><el-input-number id="manual-weight" v-model="manualForm.weight" :min="0.001" :precision="3" controls-position="right" placeholder="请输入单箱毛重" /></td>
<th scope="row"><label for="manual-time">测量时间 *</label></th><td><el-date-picker id="manual-time" v-model="manualForm.measuredAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" format="YYYY-MM-DD HH:mm:ss" /></td>
</tr>
<tr>
<th scope="row"><label for="manual-machine">设备/来源编号</label></th><td><el-input id="manual-machine" v-model="manualForm.machineNo" maxlength="64" placeholder="请输入设备编号（选填）" /></td>
<th scope="row"><label for="manual-shipment">Shipment ID</label></th><td><el-input id="manual-shipment" v-model="manualForm.scannedShipmentId" maxlength="64" placeholder="请输入扫描运单号（选填）" /></td>
</tr>
<tr><th scope="row">当前箱测量图片 *</th><td colspan="3">
<el-upload class="manual-entry-upload" :auto-upload="false" :limit="1" accept="image/*" :on-change="selectManualImage" :on-remove="() => { manualEntryImage = null }">
<el-button><Upload :size="15" />选择图片</el-button>
<template #tip><div class="el-upload__tip">支持图片格式，大小不超过 5 MB</div></template>
</el-upload>
</td></tr>
</tbody>
</table>
</el-form>
<template #footer>
<el-button :disabled="manualEntrySubmitting" @click="manualEntryOpen = false">取消</el-button>
@@ -958,7 +969,6 @@ defineExpose({ saveDraft, submitForReview, updateWeightEvidence, submissionBlock
.measurement-section__heading > div { min-width: 0; }
.measurement-section-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--admin-space-3, 8px); }.measurement-section-actions :deep(.el-button) { margin-left: 0; }
.warehouse-suggestion-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-6, 16px); }.warehouse-suggestion-form :deep(.el-select),.warehouse-suggestion-form :deep(.el-input-number) { width: 100%; }.warehouse-suggestion-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }.suggestion-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--admin-space-1, 4px) 0 0; border: 1px solid var(--cc-border); border-radius: 6px; }.suggestion-preview div { padding: var(--admin-space-5, 12px); border-right: 1px solid var(--cc-border); }.suggestion-preview div:last-child { border-right: 0; }.suggestion-preview dt { color: var(--cc-muted); font-size: var(--admin-font-caption, 11px); }.suggestion-preview dd { margin: 5px 0 0; color: var(--cc-text); font-size: var(--admin-font-body, 13px); font-weight: 650; }
.measurement-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-6, 16px); }
.measurement-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--admin-space-5, 12px); }
.measurement-form label { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: #344054; font-size: var(--admin-font-caption, 12px); font-weight: 650; }
.measurement-form :deep(.el-input-number), .measurement-form :deep(.el-input) { width: 100%; }
@@ -971,7 +981,8 @@ defineExpose({ saveDraft, submitForReview, updateWeightEvidence, submissionBlock
.measurement-image-preview img { display: block; width: auto; max-width: 100%; max-height: 68vh; object-fit: contain; }
.manual-entry-alert { margin-bottom: var(--admin-space-6, 16px); }
.manual-entry-alert ul { margin: var(--admin-space-2, 6px) 0 0; padding-left: 18px; }
.manual-entry-form :deep(.el-input-number), .manual-entry-form :deep(.el-date-editor) { width: 100%; }
.manual-entry-table { table-layout: fixed; }
.manual-entry-label-column { width: 18%; }
.manual-entry-upload { width: 100%; }
.measurement-items-section { background: var(--admin-surface, #fff); }
.measurement-table { width: 100%; font-size: var(--admin-font-caption, 12px); }
@@ -991,7 +1002,6 @@ defineExpose({ saveDraft, submitForReview, updateWeightEvidence, submissionBlock
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (max-width: 960px) {
.measurement-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.measurement-data-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.measurement-row-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@@ -1003,7 +1013,10 @@ defineExpose({ saveDraft, submitForReview, updateWeightEvidence, submissionBlock
.measurement-tags { justify-content: flex-start; }
.measurement-section { padding-right: 14px; padding-left: 14px; }
.measurement-panel > :deep(.el-alert), .measurement-alert { margin-right: 14px; margin-left: 14px; }
.measurement-form-grid, .measurement-data-grid { grid-template-columns: 1fr; }
.measurement-data-grid { grid-template-columns: 1fr; }
.manual-entry-table colgroup { display: none; }
.manual-entry-table tr { display: grid; grid-template-columns: 36% minmax(0, 1fr); }
.manual-entry-table :is(th, td) { min-width: 0; }
.measurement-row-details { grid-template-columns: 1fr; padding-left: 54px; }
}
src/modules/inbounds/measurement/measurementDensity.css
+3 -3
View File
@@ -1,13 +1,13 @@
/* Measurement workspace: keep all sections inside the panel's content bounds. */
.inbound-measurement-workspace-dialog.inbound-density .measurement-summary-section { min-width: 0; margin: 0; padding: var(--admin-space-4, 10px) var(--admin-space-5, 12px); border: 1px solid #cce8df; border-left: 4px solid #20a477; border-radius: 8px; background: #f4fbf8; }
.inbound-measurement-workspace-dialog.inbound-density .measurement-summary-section { min-width: 0; margin: 0; padding: var(--admin-space-4, 10px) var(--admin-space-5, 12px); border: 1px solid var(--admin-dialog-summary-border); border-radius: var(--admin-dialog-section-radius); background: var(--admin-dialog-summary-bg); }
.inbound-measurement-workspace-dialog.inbound-density .measurement-summary-header { flex-wrap: wrap; align-items: center; gap: var(--admin-space-3, 8px) var(--admin-space-6, 16px); }
.inbound-measurement-workspace-dialog.inbound-density .measurement-summary-context { flex: 1 1 auto; }
.inbound-measurement-workspace-dialog.inbound-density .measurement-summary-context p > span { flex-shrink: 0; }
.inbound-measurement-workspace-dialog.inbound-density .measurement-summary-status { flex-wrap: wrap; }
.inbound-measurement-workspace-dialog.inbound-density .measurement-items-section { min-width: 0; margin: var(--admin-space-5, 12px) 0 0; padding: var(--admin-space-4, 10px) var(--admin-space-5, 12px); border: 1px solid #eadfc9; border-left: 4px solid #c79643; border-radius: 8px; background: #fffbf4; }
.inbound-measurement-workspace-dialog.inbound-density .measurement-items-section { min-width: 0; margin: var(--admin-space-5, 12px) 0 0; padding: var(--admin-space-4, 10px) var(--admin-space-5, 12px); border: 1px solid var(--admin-dialog-work-border); border-radius: var(--admin-dialog-section-radius); background: var(--admin-dialog-work-bg); }
.inbound-measurement-workspace-dialog.inbound-density .measurement-subheading { color: #18795d; font-size: var(--admin-font-section, 14px); }
.inbound-measurement-workspace-dialog.inbound-density .measurement-declaration { min-width: 0; margin-top: var(--admin-space-3, 8px); padding: var(--admin-space-4, 10px) var(--admin-space-5, 12px); border: 1px solid #d9e2fa; border-left: 4px solid #647fec; border-radius: 8px; background: #f7f9ff; }
.inbound-measurement-workspace-dialog.inbound-density .measurement-declaration { min-width: 0; margin-top: var(--admin-space-3, 8px); padding: var(--admin-space-4, 10px) var(--admin-space-5, 12px); border: 1px solid var(--admin-dialog-source-border); border-radius: var(--admin-dialog-section-radius); background: var(--admin-dialog-source-bg); }
@media (min-width: 961px) {
.inbound-density.admin-density-dialog .measurement-dialog-weight { padding-bottom: var(--admin-space-4, 10px); }