优化

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, ref, watch } from 'vue'
 import { FileSpreadsheet, FileUp } from '@lucide/vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -318,13 +319,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <AdminPage as="div" class="price-book-page admin-density" spacing="normal">
+  <AdminPage as="div" class="price-book-page admin-density admin-workbench" spacing="normal">
     <ListPageLayout aria-label="承运商报价版本管理">
 
 
 
 
-      <section aria-live="polite"><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError"
+      <section aria-live="polite"><div class="workbench-table is-page-surface"><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError"
         v-model:page="page"
         v-model:page-size="pageSize"
         :data="pagedRows"
@@ -385,10 +386,10 @@ onMounted(() => {
         <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>
-      </DataTable></section>
+      </DataTable></div></section>
     </ListPageLayout>
 
-    <AppDialog class="admin-density-dialog"
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog"
       v-model="uploadOpen"
       title="上传船期价格表"
       width="min(560px, calc(100vw - 28px))"
@@ -400,13 +401,13 @@ onMounted(() => {
       <div class="density-dialog-sections">
 
       <el-form class="density-form" label-position="left" label-width="90px" :disabled="uploading">
-        <table class="density-table density-table--editable" aria-label="上传价格表资料"><tbody>
+        <div class="workbench-evidence"><table class="density-table density-table--editable" aria-label="上传价格表资料"><tbody>
           <tr><td><el-form-item label="报价范围"><template #label><span>报价范围<InlineHelp title="报价上传规则"><p>上传后先展示解析结果和仓库映射；确认后只替换同一报价范围的当前生效版本。客户专属报价生效后，计价时优先于平台公共报价。</p></InlineHelp></span></template><el-select v-model="uploadCustomerId" filterable :disabled="uploading" aria-label="上传报价范围"><el-option label="平台公共报价" value="0" /><el-option v-for="customer in customerOptions" :key="String(customer.id)" :label="`客户专属 · ${customer.tenantName || '未命名客户'}`" :value="String(customer.id)" /></el-select></el-form-item></td></tr>
           <tr><td><el-form-item label="价格表文件">
             <input ref="uploadInput" class="visually-hidden-input" type="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" aria-label="选择 XLSX 船期价格表" :disabled="uploading" @change="selectUploadFile" />
             <div class="upload-file-control"><el-button :disabled="uploading" @click="uploadInput?.click()"><FileSpreadsheet :size="16" />选择 XLSX 文件</el-button><span class="upload-file-name">{{ uploadFile?.name || '尚未选择文件' }}</span></div>
           </el-form-item></td></tr>
-        </tbody></table>
+        </tbody></table></div>
       </el-form>
       <p class="density-dialog-note">{{ uploadFile ? (uploadFile.size / 1024 / 1024).toFixed(2) + ' MB' : '最大 10MB' }}</p>
       <el-alert v-if="uploadFileError" :title="uploadFileError" type="error" :closable="false" show-icon />
@@ -419,11 +420,11 @@ onMounted(() => {
 <style scoped>
 .price-book-page { min-width: 0; }
 .version-cell { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
-.version-cell strong { color: var(--cc-text); }
-.version-cell span, .metric-cell span { color: var(--cc-muted); font-size: var(--admin-font-caption); }
+.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 strong { color: var(--cc-text); font-size: var(--admin-font-body); }
-.issue-counts { color: var(--cc-muted); font-size: var(--admin-font-caption); }
+.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; }
 .visually-hidden-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
 .upload-file-control { display: flex; align-items: center; gap: var(--admin-space-5); }