优化

src/modules/overseas-master-data/pages/TripOperationsView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import { useExportTask } from '@/modules/downloads'
 import '@/styles/adminDensity.css'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
@@ -66,9 +67,9 @@ async function download() { exporting.value = true; try { await submitExport('TR
 const money = (rows: TripOperationsMoney[]) => rows.length ? rows.map(r => `${r.currency} ${r.amount.toFixed(2)}`).join(' / ') : '—'
 watch([page, size], load); onMounted(load); onBeforeUnmount(() => { sequence++ })
 </script>
-<template><AdminPage class="admin-density"><ListPageLayout aria-label="出车记录">
+<template><AdminPage class="admin-density admin-workbench"><ListPageLayout aria-label="出车记录">
   <template #metrics>
-    <section class="operations-overview" aria-labelledby="operations-statistics-title" :aria-busy="loading">
+    <section class="operations-overview workbench-panel is-compact" aria-labelledby="operations-statistics-title" :aria-busy="loading">
       <header class="operations-heading">
         <h2 id="operations-statistics-title">出车数据统计</h2>
         <div class="operations-heading-tools">
@@ -92,7 +93,7 @@ watch([page, size], load); onMounted(load); onBeforeUnmount(() => { sequence++ }
   <template #state>
     <LoadErrorState v-if="error" title="查询或导出失败" :message="error.message" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
   </template>
-  <DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="true" preference-key="fleet-operations-table" v-model:page="page" v-model:page-size="size" :data="result?.page.records || []" :columns="columns" :total="result?.page.total || 0" :loading="loading" row-key="tripNo" empty-text="该范围暂无实际出车记录">
+  <div class="workbench-table is-page-surface"><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="true" preference-key="fleet-operations-table" v-model:page="page" v-model:page-size="size" :data="result?.page.records || []" :columns="columns" :total="result?.page.total || 0" :loading="loading" row-key="tripNo" empty-text="该范围暂无实际出车记录">
     <template #toolbar-start><h1>出车记录</h1></template>
     <template #filters><QueryToolbar v-model="filters" :fields="fields" ariaLabel="运营记录查询" preference-key="fleet-operations-query" :loading="loading" @search="search" @reset="resetFilters" /></template>
     <template #toolbar-actions><el-button v-if="access.can('platform:fleet:operations:export') && access.can('platform:download:list')" :loading="exporting" @click="download">导出</el-button></template>
@@ -102,15 +103,15 @@ watch([page, size], load); onMounted(load); onBeforeUnmount(() => { sequence++ }
     <template #agreed="{ row }">{{ money(row.externalAgreedAmounts) }}</template><template #finance="{ row }"><TripOperationsFinanceCell :trip-no="row.tripNo" /></template>
     <template #cost="{ row }"><span v-if="!row.costs">无成本读取权限</span><span v-else-if="!row.costs.totals.length">未登记成本</span><span v-else>{{ row.costs.totals.map((c: NonNullable<TripOperationsRow['costs']>['totals'][number]) => `${c.currency} ${c.directCost.toFixed(2)}`).join(' / ') }}</span></template>
     <template #allocated="{ row }"><span v-if="!row.costs">—</span><span v-else-if="row.costs.allocationBlockReason">{{ row.costs.allocationBlockReason }}</span><span v-else>{{ row.costs.totals.map((c: NonNullable<TripOperationsRow['costs']>['totals'][number]) => `${c.currency} ${c.ownCost == null ? '—' : c.ownCost.toFixed(2)} / ${c.externalCost == null ? '—' : c.externalCost.toFixed(2)}`).join('；') || '—' }}</span></template>
-  </DataTable>
+  </DataTable></div>
   <TripOperationsRecordDialog v-model="recordOpen" :row="selected" :readonly="!access.can('platform:fleet:operations:edit')" @saved="load" />
 </ListPageLayout></AdminPage></template>
 <style scoped>
-.operations-overview { display: grid; gap: var(--admin-space-3); min-width: 0; padding: var(--admin-space-5); background: var(--admin-surface); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); }
+.operations-overview { display: grid; gap: var(--admin-space-3); min-width: 0; }
 .operations-heading, .operations-heading-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--admin-space-3) var(--admin-space-6); }
 .operations-heading h2 { margin: 0; font-size: var(--admin-font-title); }
-.operations-detail-body { display: grid; gap: var(--admin-space-3); border-top: 1px solid var(--cc-border); padding-top: var(--admin-space-3); }
+.operations-detail-body { display: grid; gap: var(--admin-space-3); border-top: 1px solid var(--workbench-border); padding-top: var(--admin-space-3); }
 .operations-summary { display: flex; flex-wrap: wrap; gap: var(--admin-space-2) var(--admin-space-6); font-variant-numeric: tabular-nums; }
-.operations-note { margin: 0; color: var(--cc-muted); font-size: var(--admin-font-caption); line-height: 1.6; }
+.operations-note { margin: 0; color: var(--workbench-muted); font-size: var(--admin-font-caption); line-height: 1.6; }
 .operations-placeholder { min-height: var(--admin-empty-height); display: grid; place-content: center; }
 </style>