优化

src/modules/inbounds/weight/components/WeightOcrPanel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import {
@@ -493,7 +494,7 @@ defineExpose({ reload: loadWorkspace })
 </script>
 
 <template>
-  <section class="weight-workspace" aria-labelledby="weight-ocr-title">
+  <section class="weight-workspace admin-workbench" aria-labelledby="weight-ocr-title">
     <header class="weight-heading">
       <div>
         <h3 id="weight-ocr-title"><Scale :size="18" aria-hidden="true" />称重图片</h3>
@@ -580,7 +581,7 @@ defineExpose({ reload: loadWorkspace })
           </div>
 
           <div v-else-if="tableMode" class="weight-table-wrap">
-            <table class="weight-data-table">
+            <div class="workbench-evidence"><table class="weight-data-table">
               <thead><tr><th>#</th><th>称重图片</th><th>托盘编码</th><th>托盘类型</th><th>库位</th><th>实测毛重(KG)</th><th>服务端确认毛重(KG)</th><th>托盘皮重(KG)</th><th>货物重量(KG)</th><th>操作</th></tr></thead>
               <tbody>
                 <tr v-for="(row, index) in rows" :key="row.id">
@@ -596,7 +597,7 @@ defineExpose({ reload: loadWorkspace })
                   <td><el-tooltip v-if="canEdit && editable && !reviewMode" content="删除图片" placement="top"><el-button text type="danger" :aria-label="`删除称重图片 ${index + 1}`" :loading="isActionLoading('delete', row.id)" :disabled="Boolean(activeAction)" @click="removeResult(row)"><Trash2 :size="16" /></el-button></el-tooltip><span v-else>—</span></td>
                 </tr>
               </tbody>
-            </table>
+            </table></div>
           </div>
           <div v-else class="weight-grid">
             <article v-for="(row, index) in rows" :key="row.id" class="weight-card">
@@ -647,7 +648,7 @@ defineExpose({ reload: loadWorkspace })
       </template>
     </template>
 
-    <AppDialog class="admin-density-dialog"
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog"
       v-model="previewOpen"
       :title="workspace?.inboundCode ? `确认称重图片 · ${workspace.inboundCode}` : '确认称重图片'"
       :loading="previewLoading"
@@ -673,7 +674,7 @@ defineExpose({ reload: loadWorkspace })
         <img v-if="previewUrl" class="weight-preview" :src="previewUrl" alt="当前入库单的称重图片" />
         <section class="density-dialog-section" data-tone="work">
           <h3 class="density-dialog-section__title">称重数据</h3>
-          <table class="density-table density-table--editable weight-confirm-table" aria-label="称重关键数据">
+          <div class="workbench-evidence"><table class="density-table density-table--editable weight-confirm-table" aria-label="称重关键数据">
             <colgroup><col class="weight-confirm-label-column" /><col /></colgroup>
             <tbody>
               <tr><th scope="row"><span>托盘类型</span></th><td>{{ previewResult.palletType || '未记录类型' }}</td></tr>
@@ -704,7 +705,7 @@ defineExpose({ reload: loadWorkspace })
                 </td></tr>
               </template>
             </tbody>
-          </table>
+          </table></div>
         </section>
       </div>
     </AppDialog>
@@ -713,40 +714,40 @@ defineExpose({ reload: loadWorkspace })
 
 <style scoped>
 .weight-workspace { min-width: 0; color: var(--el-text-color-primary); }
-.weight-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: var(--admin-space-4, 10px); border-bottom: 1px solid var(--cc-border); }
+.weight-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: var(--admin-space-4, 10px); border-bottom: 1px solid var(--workbench-border); }
 .weight-heading h3 { display: flex; align-items: center; gap: var(--admin-space-3, 8px); margin: 0; font-size: 15px; }
-.weight-heading h3 svg { color: var(--cc-primary); }
+.weight-heading h3 svg { color: var(--workbench-primary); }
 .weight-heading__actions { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--admin-space-6, 16px); }
 .pallet-picker { width: clamp(360px, 36vw, 520px); min-width: 0; }
 .pallet-picker :deep(.el-select) { width: 100%; }
 .weight-summary { display: flex; align-items: baseline; gap: var(--admin-space-2, 6px); white-space: nowrap; }
 .weight-summary-group { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
-.weight-summary span { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
+.weight-summary span { color: var(--workbench-muted); font-size: var(--admin-font-caption, 12px); }
 .weight-summary strong { color: #067647; font-size: var(--admin-font-title, 16px); }
 .visually-hidden-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
 .weight-action-error { margin-bottom: 14px; }
 .weight-list { min-height: 0; margin-top: 14px; }
-.weight-empty { display: flex; min-height: 0; align-items: center; gap: var(--admin-space-4, 10px); padding: var(--admin-space-1, 4px) 0 0; color: var(--cc-muted); }
+.weight-empty { display: flex; min-height: 0; align-items: center; gap: var(--admin-space-4, 10px); padding: var(--admin-space-1, 4px) 0 0; color: var(--workbench-muted); }
 .weight-empty strong { color: #344054; font-size: var(--admin-font-section, 14px); }
  .weight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
- .weight-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: 6px; background: var(--admin-surface, #fff); }
+ .weight-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--workbench-border); border-radius: 6px; background: var(--admin-surface, #fff); }
 .weight-card__body { padding: var(--admin-space-5, 12px); text-align: center; }
  .weight-delete { position: absolute; z-index: 2; top: 8px; right: 8px; width: 30px; height: 30px; padding: 0; border: 1px solid rgb(255 255 255 / 82%); background: rgb(255 255 255 / 92%); box-shadow: 0 1px 3px rgb(16 24 40 / 16%); }
  .weight-card__value { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: center; }
  .weight-card__value strong { color: #101828; font-size: 17px; }
- .weight-card__value:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: 4px; }
-.weight-card__facts { display: grid; gap: var(--admin-space-2, 6px); margin: var(--admin-space-4, 10px) 0 0; padding-top: var(--admin-space-4, 10px); border-top: 1px solid var(--cc-border); }
+ .weight-card__value:focus-visible { outline: 2px solid var(--workbench-primary); outline-offset: 4px; }
+.weight-card__facts { display: grid; gap: var(--admin-space-2, 6px); margin: var(--admin-space-4, 10px) 0 0; padding-top: var(--admin-space-4, 10px); border-top: 1px solid var(--workbench-border); }
 .weight-card__facts div { display: flex; justify-content: space-between; gap: var(--admin-space-3, 8px); font-size: var(--admin-font-caption, 11px); line-height: 1.4; }
-.weight-card__facts dt { color: var(--cc-muted); }
+.weight-card__facts dt { color: var(--workbench-muted); }
 .weight-card__facts dd { min-width: 0; margin: 0; color: #344054; overflow-wrap: anywhere; text-align: right; }
 .weight-card__correct { width: 100%; margin: var(--admin-space-5, 12px) 0 0; }
-.weight-table-wrap { overflow-x: auto; border: 1px solid #d7e0ef; border-radius: 8px; background: #fff; }
+.weight-table-wrap { overflow-x: auto; border: 1px solid var(--workbench-border); border-radius: 8px; background: #fff; }
 .weight-data-table { width: 100%; min-width: 1180px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--admin-font-caption, 12px); }
-.weight-data-table th { height: 42px; padding: 0 8px; border-bottom: 1px solid #d5dfee; background: linear-gradient(180deg, #f1f4fc, #e9eef8); color: #405473; font-weight: 700; white-space: nowrap; }
-.weight-data-table td { height: 76px; padding: 6px 8px; border-top: 1px solid #ebeff5; color: #4b5870; text-align: center; vertical-align: middle; white-space: nowrap; }
-.weight-data-table th + th, .weight-data-table td + td { border-left: 1px solid #edf0f5; }
-.weight-data-table tbody tr:nth-child(even) td { background: #f8faff; }
-.weight-data-table tbody tr:hover td { background: #edf3ff; }
+.weight-data-table th { height: 42px; padding: 0 8px; border-bottom: 1px solid var(--workbench-border); background: var(--workbench-surface-soft); color: var(--workbench-muted); font-weight: 700; white-space: nowrap; }
+.weight-data-table td { height: 76px; padding: 6px 8px; border-top: 1px solid var(--workbench-border); color: var(--workbench-text); text-align: center; vertical-align: middle; white-space: nowrap; }
+.weight-data-table th + th, .weight-data-table td + td { border-left: 1px solid var(--workbench-border); }
+.weight-data-table tbody tr:nth-child(even) td { background: var(--workbench-surface-soft); }
+.weight-data-table tbody tr:hover td { background: var(--workbench-accent-soft); }
 .weight-data-table :deep(.weight-thumb) { width: 90px; height: 60px; margin: auto; border-radius: 8px; }
 .weight-data-table .weight-gross-value { color: #33425f; font-weight: 750; }
 .weight-data-table .weight-net-value { color: #16875b; font-weight: 750; }