优化

src/modules/trucking/pages/TruckAppointmentsView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { Plus } from '@lucide/vue'
@@ -62,11 +63,11 @@ onMounted(() => { void load() })
 function openDetail(row: TruckAppointmentResource, edit = false) { router.push({ name: 'trucking-detail', params: { id: String(row.id) }, query: edit ? { edit: '1' } : undefined }) }
 </script>
 <template>
-  <AdminPage as="div" class="trucking-page admin-density">
+  <AdminPage as="div" class="trucking-page admin-density admin-workbench">
     <ListPageLayout aria-label="拖车预约列表">
 
 
-      <section :aria-busy="loading"><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="trucking-appointments" aria-label="拖车预约列表" empty-text="暂无符合筛选条件的拖车预约">
+      <section :aria-busy="loading"><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="rows" :columns="columns" :loading="loading" :total="total" preference-key="trucking-appointments" aria-label="拖车预约列表" empty-text="暂无符合筛选条件的拖车预约">
         <template #toolbar-start><h1>拖车列表</h1></template>
         <template #filters><QueryToolbar v-model="filters" ariaLabel="拖车预约查询" :fields="fields" preference-key="trucking-query" @search="search" /></template>
         <template #notices><template v-if="loadError"><LoadErrorState title="拖车预约列表暂时无法加载" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState></template></template>
@@ -78,7 +79,7 @@ function openDetail(row: TruckAppointmentResource, edit = false) { router.push({
       <template #store="{ row }">{{ row.storeName || '—' }}</template>
       <template #status="{ row }"><StatusBadge :status="statusLabel(row.status)" /></template>
       <template #actions="{ row }"><div class="table-actions density-actions row-actions admin-text-actions"><el-button class="density-action" size="small" type="primary" plain :aria-label="appointmentActionLabel('查看', row as TruckAppointmentResource)" @click="openDetail(row as TruckAppointmentResource)">详情</el-button><el-button class="density-action" v-if="access.can('platform:firstleg:truck-appointment:edit') && ['DRAFT', 'PENDING_DISPATCH', 'RESCHEDULED'].includes(row.status)" size="small" :aria-label="appointmentActionLabel('编辑', row as TruckAppointmentResource)" @click="openDetail(row as TruckAppointmentResource, true)">编辑</el-button></div></template>
-    </DataTable></section>
+    </DataTable></div></section>
     </ListPageLayout>
   </AdminPage>
 </template>