优化

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

@@ -3,7 +3,7 @@ import '@/styles/adminDensity.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ContainerSimulationCreate } from '@/modules/container-loading'
-import { Eye } from '@lucide/vue'
+
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
@@ -182,9 +182,25 @@ onMounted(() => {
 
 <template>
   <AdminPage>
-  <div class="business-page loading-lists-page" :class="{ 'admin-density': isPreload }">
+  <div class="business-page loading-lists-page admin-density">
     <ListPageLayout :ariaLabel="title">
-      <template #toolbar>
+
+
+
+    <section><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="canList && !error"
+        v-model:page="page"
+        v-model:page-size="pageSize"
+        :data="rows"
+        :columns="columns"
+        :loading="loading"
+        :total="total"
+        :preference-key="`loading-lists-${mode}`"
+        row-key="planId"
+        :empty-text="`暂无符合筛选条件的${title}`"
+        :aria-label="title"
+      >
+        <template #toolbar-start><h1>{{ title }}</h1></template>
+        <template #filters>
     <QueryToolbar
       v-model="query"
       :ariaLabel="`${title}筛选`"
@@ -194,35 +210,20 @@ onMounted(() => {
       @search="search"
     />
       </template>
-
-      <template v-if="!canList || error" #state>
+        <template #notices><template v-if="!canList || error">
         <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"
-        :data="rows"
-        :columns="columns"
-        :loading="loading"
-        stripe
-        :total="total"
-        :preference-key="`loading-lists-${mode}`"
-        row-key="planId"
-        :empty-text="`暂无符合筛选条件的${title}`"
-        :aria-label="title"
-      >
+      </template></template>
+
+
         <template #toolbar-actions>
           <ContainerSimulationCreate :dense="isPreload" v-if="canCreate" success-message="模拟柜及预装清单已创建" @created="onSimulationCreated" />
         </template>
-        <template #actions="{ row }">
-          <div class="row-actions" :class="{ 'density-actions': isPreload }">
-            <el-button v-if="canView" :class="{ 'density-action': isPreload }" size="small" :type="isPreload ? undefined : 'primary'" :plain="!isPreload" @click="openDetail(row)"><Eye v-if="!isPreload" :size="15" />查看</el-button>
-          </div>
-        </template>
+        <template #actions="{ row }"><div class="row-actions density-actions admin-text-actions" :class="{ 'density-actions': isPreload }">
+            <el-button v-if="canView" :class="{ 'density-action': isPreload }" size="small" :type="isPreload ? undefined : 'primary'" :plain="!isPreload" @click="openDetail(row)">查看</el-button>
+          </div></template>
         <template #customers="{ row }"><LineClampText :content="(row as PreloadSummary).customers.map((item) => item.customerName || '客户信息缺失').join('、')" /></template>
         <template #vesselVoyage="{ row }">{{ (row as PreloadSummary).vesselName || '—' }} / {{ (row as PreloadSummary).voyageNo || '—' }}</template>
         <template #status="{ row }"><StatusBadge :status="loadingListStatusLabel(row.status)" /></template>
@@ -230,8 +231,7 @@ onMounted(() => {
         <template #netWeight="{ row }">{{ formatNumber((row as ConfirmedSummary).totalNetWeightKg) }}</template>
         <template #volume="{ row }">{{ formatNumber(row.totalVolumeCbm) }}</template>
         <template #createdAt="{ row }">{{ formatDateTime(row.createdAt) }}</template>
-      </DataTable>
-    </section>
+      </DataTable></section>
     </ListPageLayout>
 
   </div>