优化

src/modules/loading-lists/components/LoadingListsView.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
-import { RefreshCw } from '@lucide/vue'
+import { Eye } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { listAllPlatformWarehouses } from '@/modules/warehouses'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
+import AdminPage from '@/shared/components/AdminPage.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import AppDialog from '@/shared/components/AppDialog.vue'
 import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
+import ListPageLayout from '@/shared/components/ListPageLayout.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
 import StatusBadge from '@/shared/components/StatusBadge.vue'
@@ -243,7 +245,10 @@ onMounted(() => void loadWarehouses())
 </script>
 
 <template>
+  <AdminPage>
   <div class="business-page loading-lists-page">
+    <ListPageLayout :ariaLabel="title">
+      <template #toolbar>
     <QueryToolbar
       v-model="query"
       :ariaLabel="`${title}筛选`"
@@ -253,17 +258,16 @@ onMounted(() => void loadWarehouses())
       :search-on-reset="false"
       @search="search"
       @reset="reset"
-    >
-      <template #actions>
-        <el-button :disabled="!hasWarehouse || loading" title="刷新" aria-label="刷新当前清单" @click="load"><RefreshCw :size="16" />刷新</el-button>
+    />
       </template>
-    </QueryToolbar>
 
-    <LoadErrorState v-if="!canList" :title="`无权查看${title}`" message="当前账号缺少该清单的列表权限。" :show-retry="false" />
-    <LoadErrorState v-else-if="error" :title="`${title}加载失败`" :message="error.message" :loading="loading" @retry="load">
-      <template #details><ApiErrorMeta :details="error" /></template>
-    </LoadErrorState>
-    <section v-else class="surface-panel table-panel">
+      <template v-if="!canList || error" #state>
+        <LoadErrorState v-if="!canList" :title="`无权查看${title}`" message="当前账号缺少该清单的列表权限。" :show-retry="false" />
+        <LoadErrorState v-else-if="error" :title="`${title}加载失败`" :message="error.message" :loading="loading" @retry="load">
+          <template #details><ApiErrorMeta :details="error" /></template>
+        </LoadErrorState>
+      </template>
+    <section v-if="canList && !error" class="surface-panel table-panel">
       <DataTable
         v-model:page="page"
         v-model:page-size="pageSize"
@@ -276,8 +280,7 @@ onMounted(() => void loadWarehouses())
         :empty-text="hasWarehouse ? `暂无符合筛选条件的${title}` : '请先选择仓库后查询'"
         :aria-label="title"
       >
-        <template #toolbar-start><div class="table-heading"><h2>{{ title }}</h2><span>{{ hasWarehouse ? `共 ${total} 条` : '仓库为必选条件' }}</span></div></template>
-        <template #actions="{ row }"><el-button v-if="canView" link type="primary" @click="openDetail(row)">查看</el-button></template>
+        <template #actions="{ row }"><el-button v-if="canView" link type="primary" @click="openDetail(row)"><Eye :size="15" />查看</el-button></template>
         <template #customers="{ row }">{{ (row as PreloadSummary).customers.map((item) => item.customerName || item.accountId).join('、') || '—' }}</template>
         <template #vesselVoyage="{ row }">{{ (row as PreloadSummary).vesselName || '—' }} / {{ (row as PreloadSummary).voyageNo || '—' }}</template>
         <template #status="{ row }"><StatusBadge :status="row.status" /><span class="status-label">{{ row.status === 'LOADING' ? '装柜中' : row.status === 'COMPLETED' ? '装柜完成' : row.status }}</span></template>
@@ -287,6 +290,7 @@ onMounted(() => void loadWarehouses())
         <template #createdAt="{ row }">{{ formatDateTime(row.createdAt) }}</template>
       </DataTable>
     </section>
+    </ListPageLayout>
 
     <LoadingListDetailDrawer
       v-model="detailOpen"
@@ -318,14 +322,13 @@ onMounted(() => void loadWarehouses())
       </LoadErrorState>
     </AppDialog>
   </div>
+  </AdminPage>
 </template>
 
 <style scoped>
 .loading-lists-page { display: grid; min-width: 0; gap: 16px; }
 .table-panel { min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); background: #fff; }
-.table-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
-.table-heading h2 { margin: 0; font-size: 16px; }
-.table-heading span, .status-label { color: var(--cc-muted); font-size: 12px; }
+.status-label { color: var(--cc-muted); font-size: 12px; }
 .status-label { margin-left: 6px; }
 .transport-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 16px; }
 .transport-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }