优化

src/modules/trucking/pages/TruckAppointmentsView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { Eye, Pencil, Plus } from '@lucide/vue'
+import { Plus } from '@lucide/vue'
 import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
@@ -62,7 +63,7 @@ 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">
+  <AdminPage as="div" class="trucking-page admin-density">
     <ListPageLayout aria-label="拖车预约列表">
       <template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="拖车预约查询" :fields="fields" preference-key="trucking-query" @search="search" /></template>
       <template v-if="loadError" #state><LoadErrorState title="拖车预约列表暂时无法加载" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState></template>
@@ -73,7 +74,7 @@ function openDetail(row: TruckAppointmentResource, edit = false) { router.push({
       <template #driver="{ row }">{{ row.driverName || '—' }}<small>{{ row.driverPhone || '—' }}</small></template>
       <template #store="{ row }">{{ row.storeName || '—' }}</template>
       <template #status="{ row }"><StatusBadge :status="statusLabel(row.status)" /></template>
-      <template #actions="{ row }"><div class="table-actions"><el-button size="small" type="primary" plain :aria-label="appointmentActionLabel('查看', row as TruckAppointmentResource)" @click="openDetail(row as TruckAppointmentResource)"><Eye :size="15" />详情</el-button><el-button 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)"><Pencil :size="15" />编辑</el-button></div></template>
+      <template #actions="{ row }"><div class="table-actions density-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>
     </ListPageLayout>
@@ -83,5 +84,5 @@ function openDetail(row: TruckAppointmentResource, edit = false) { router.push({
 .trucking-page { min-width: 0; }
 .table-panel { overflow:hidden; }
 small { display:block; color:var(--el-text-color-secondary); margin-top:3px; }
-.table-actions { display:flex; align-items:center; flex-wrap:nowrap; gap:6px; white-space:nowrap; }.table-actions :deep(.el-button) { flex:0 0 auto; margin-left:0; }
+.table-actions { flex-wrap:nowrap; white-space:nowrap; }.table-actions :deep(.el-button) { flex:0 0 auto; margin-left:0; }
 </style>