优化

src/modules/ocean-bookings/pages/OceanBookingsView.test.ts

@@ -22,3 +22,16 @@ describe('OceanBookingsView prototype field matrix', () => {
     expect(source).not.toContain('打印')
   })
 })
+
+describe('OceanBookingsView visual action contract', () => {
+  const source = readFileSync(resolve(process.cwd(), 'src/modules/ocean-bookings/pages/OceanBookingsView.vue'), 'utf8')
+
+  it('uses bordered business buttons and stacks them on narrow screens', () => {
+    expect(source).toContain('size="small" type="primary" plain')
+    expect(source).toContain('size="small" @click="open(row.id)"')
+    expect(source).not.toContain('link type="primary" @click="open(row.id)')
+    expect(source).toContain('@media(max-width:420px)')
+    expect(source).toContain('.table-actions')
+    expect(source).toContain(':total="total" stripe preference-key="ocean-bookings"')
+  })
+})

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

@@ -54,9 +54,9 @@ watch([page, pageSize], () => void load()); onMounted(load)
       <template #toolbar><QueryToolbar v-model="query" class="surface-panel" ariaLabel="订舱筛选" :fields="fields" @search="search" /></template>
       <template v-if="error" #state><LoadErrorState title="订舱列表加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState></template>
       <section v-if="!error" class="surface-panel table-panel">
-      <DataTable 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="暂无符合筛选条件的订舱">
+      <DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" stripe preference-key="ocean-bookings" aria-label="订舱列表" row-key="id" empty-text="暂无符合筛选条件的订舱">
         <template #toolbar-actions><el-button v-if="access.can('platform:firstleg:ocean-booking:create')" type="primary" @click="open()"><Plus :size="16" />新增订舱</el-button></template>
-        <template #actions="{ row }"><el-button v-if="access.can('platform:firstleg:ocean-booking:view')" link type="primary" @click="open(row.id)"><Eye :size="15" />查看</el-button><el-button v-if="access.can('platform:firstleg:ocean-booking:edit')" link @click="open(row.id)"><Pencil :size="15" />编辑</el-button></template>
+        <template #actions="{ row }"><div class="table-actions"><el-button v-if="access.can('platform:firstleg:ocean-booking:view')" size="small" type="primary" plain @click="open(row.id)"><Eye :size="15" />查看</el-button><el-button v-if="access.can('platform:firstleg:ocean-booking:edit')" size="small" @click="open(row.id)"><Pencil :size="15" />编辑</el-button></div></template>
         <template #vessel="{ row }">{{ row.vesselName || '—' }}<span v-if="row.voyageNo"> / {{ row.voyageNo }}</span></template>
         <template #etd="{ row }">{{ formatDateTime(row.etd) }}</template>
         <template #eta="{ row }">{{ formatDateTime(row.eta) }}</template>
@@ -67,4 +67,4 @@ watch([page, pageSize], () => void load()); onMounted(load)
     </ListPageLayout>
   </AdminPage>
 </template>
-<style scoped>.ocean-bookings-page{min-width:0}</style>
+<style scoped>.ocean-bookings-page{min-width:0}.table-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.table-actions :deep(.el-button){margin-left:0}@media(max-width:420px){.table-actions{flex-direction:column;align-items:stretch}.table-actions :deep(.el-button){width:100%;min-height:40px}}</style>