feat(admin): add phase3 service center pages

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

@@ -6,6 +6,7 @@ import { ArrowLeft, Plus, Save, Trash2 } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { getApiErrorDetails } from '@/shared/api/http'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
+import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import StatusBadge from '@/shared/components/StatusBadge.vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import AppDialog from '@/shared/components/AppDialog.vue'
@@ -199,9 +200,9 @@ onMounted(load)
         </div>
       </template>
 
-      <LoadErrorState v-if="error" title="订舱详情加载失败" :message="error.message" :loading="loading" @retry="load" />
+      <LoadErrorState v-if="error" title="订舱详情加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
       <template v-else>
-      <el-alert v-if="actionError" type="error" :closable="false" show-icon>{{ actionError.message }}</el-alert>
+      <el-alert v-if="actionError" type="error" :closable="false" show-icon><ApiErrorMeta :details="actionError" /></el-alert>
       <section class="surface-panel">
         <div class="section-title">
           <div><h2>订舱信息</h2><p v-if="detail && !editable">当前状态仅可查看，草稿状态才允许编辑。</p></div>

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

@@ -6,6 +6,7 @@ import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/compone
 import DataTable from '@/shared/components/DataTable.vue'
 import StatusBadge from '@/shared/components/StatusBadge.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
+import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import ListPageLayout from '@/shared/components/ListPageLayout.vue'
 import { getApiErrorDetails } from '@/shared/api/http'
@@ -47,7 +48,7 @@ watch([page, pageSize], () => void load()); onMounted(load)
   <AdminPage as="div" class="ocean-bookings-page">
     <ListPageLayout aria-label="订舱列表">
       <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>
+      <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="暂无符合筛选条件的订舱">
         <template #toolbar-actions><el-button v-if="access.can('platform:firstleg:ocean-booking:create')" type="primary" @click="open()"><Plus :size="16" />新增订舱</el-button></template>