优化

src/modules/ocean-bookings/pages/OceanBookingsView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { Plus } from '@lucide/vue'
@@ -69,11 +70,11 @@ watch([page, pageSize], () => void load()); onMounted(() => void loadCustomers()
 onActivated(() => void load())
 </script>
 <template>
-  <AdminPage as="div" class="ocean-bookings-page admin-density">
+  <AdminPage as="div" class="ocean-bookings-page admin-density admin-workbench">
     <ListPageLayout aria-label="订舱列表">
 
 
-      <section><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!error" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="ocean-bookings" aria-label="订舱列表" row-key="id" empty-text="暂无符合筛选条件的订舱">
+      <section><div class="workbench-table is-page-surface"><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!error" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="ocean-bookings" aria-label="订舱列表" row-key="id" empty-text="暂无符合筛选条件的订舱">
         <template #toolbar-start><h1>订舱列表</h1></template>
         <template #filters><QueryToolbar v-model="query" ariaLabel="订舱筛选" :fields="fields" @search="search" /></template>
         <template #notices><template v-if="error"><LoadErrorState title="订舱列表加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState></template></template>
@@ -86,7 +87,7 @@ onActivated(() => void load())
         <template #eta="{ row }">{{ formatDateTime(row.eta) }}</template>
         <template #status="{ row }"><StatusBadge :status="oceanBookingStatusLabel(row.status)" /></template>
         <template #updatedAt="{ row }">{{ formatDateTime(row.updatedAt) }}</template>
-      </DataTable></section>
+      </DataTable></div></section>
     </ListPageLayout>
     <OceanBookingPrintDialog v-if="printBooking" v-model="printOpen" :booking-id="printBooking.id" :booking-no="printBooking.bookingNo" :allowed="canPrint" />
   </AdminPage>