优化

src/modules/unified-orders/pages/UnifiedOrdersView.vue

@@ -19,9 +19,12 @@ import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
 import { listAllPlatformWarehouses, type PlatformWarehouseSummaryResource } 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 DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
+import ListPageLayout from '@/shared/components/ListPageLayout.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import LineClampText from '@/shared/components/LineClampText.vue'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
@@ -760,8 +763,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <section class="unified-orders-page">
+  <AdminPage>
+  <section class="business-page unified-orders-page">
     <template v-if="orderId">
+      <DetailPageLayout ariaLabel="统一订单详情">
       <header class="order-detail-header">
         <div class="order-detail-heading">
           <el-button link class="back-button" @click="closeDetail"><ArrowLeft :size="16" />返回列表</el-button>
@@ -972,9 +977,11 @@ onMounted(() => {
           </section>
         </template>
       </div>
+      </DetailPageLayout>
     </template>
 
     <template v-else>
+    <ListPageLayout ariaLabel="统一订单列表">
     <div class="orders-query-panel">
       <div class="status-tabs" role="tablist" aria-label="订单主状态">
         <button
@@ -991,7 +998,7 @@ onMounted(() => {
         >{{ tab.label }}</button>
       </div>
 
-      <QueryToolbar id="unified-orders-advanced-filters" v-model="filters" ariaLabel="订单列表筛选" :fields="queryFields" :available-fields="allQueryFields" preference-key="unified-orders-query-v2" :search-on-reset="false" @search="search" @reset="reset">
+      <QueryToolbar id="unified-orders-advanced-filters" v-model="filters" class="orders-query-toolbar" ariaLabel="订单列表筛选" :fields="queryFields" :available-fields="allQueryFields" preference-key="unified-orders-query-v2" :search-on-reset="false" @search="search" @reset="reset">
         <template #actions>
           <el-button :aria-expanded="showAdvancedFilters" aria-controls="unified-orders-advanced-filters" @click="showAdvancedFilters = !showAdvancedFilters">
             <SlidersHorizontal :size="16" />{{ showAdvancedFilters ? '收起筛选' : '高级筛选' }}
@@ -1040,7 +1047,7 @@ onMounted(() => {
         <template #updatedAt="{ row }">{{ formatDate((row as UnifiedOrderResource).updatedAt) }}</template>
       </DataTable>
     </div>
-
+    </ListPageLayout>
     </template>
 
     <AppDialog v-model="noteOpen" title="添加内部备注" confirm-text="保存备注" :confirm-loading="noteSaving" @confirm="saveNote">
@@ -1052,10 +1059,11 @@ onMounted(() => {
     </AppDialog>
 
   </section>
+  </AdminPage>
 </template>
 
 <style scoped>
-.unified-orders-page { min-width: 0; }
+.unified-orders-page { min-width: 0; gap: 16px; }
 .page-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
 .page-intro h1 { margin: 0; color: var(--cc-text); font-size: 22px; line-height: 1.35; }
 .page-intro p { margin: 5px 0 0; color: var(--cc-muted); font-size: 13px; line-height: 1.6; }
@@ -1068,9 +1076,9 @@ onMounted(() => {
 .status-tab:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: -2px; }
 .status-tab.is-active { color: var(--cc-primary); font-weight: 600; }
 .status-tab.is-active::after { background: var(--cc-primary); }
-.orders-query-panel :deep(.query-toolbar) { border: 0; }
+.orders-query-toolbar { border: 0; }
 .orders-load-error { margin-top: 12px; }
-.table-card { margin-top: 16px; overflow: hidden; border: 1px solid var(--cc-border); border-radius: 8px; background: #fff; }
+.table-card { overflow: hidden; border: 1px solid var(--cc-border); border-radius: 8px; background: #fff; }
 .row-actions { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
 .row-actions :deep(.el-button) { margin-left: 0; }
 .primary-cell { display: grid; min-width: 0; gap: 4px; }