优化

src/views/FirstLegOrdersView.vue

@@ -524,23 +524,23 @@ async function searchOrders(model: QueryModel) {
 
 <template>
   <section class="first-leg-page">
-    <div v-if="!supportingDataErrors.some((message) => message.startsWith('企业资料'))" class="order-eligibility" :class="companyApproved ? 'is-approved' : 'is-pending'" role="status">
-      <component :is="companyApproved ? CheckCircle2 : AlertTriangle" :size="20" />
-      <div><strong>{{ companyApproved ? '企业资料已审核，可正常提交订单' : canCreateOrder ? '企业资料待审核，当前仅可保存订单草稿' : '企业资料待审核，当前订单为只读' }}</strong><span>{{ companyApproved ? '提交后订单将进入平台审核。' : canCreateOrder ? '平台审核通过后即可提交；您仍可创建、编辑和保存草稿。' : '您当前拥有只读权限，可以继续查看订单进展。' }}</span></div>
-      <el-button v-if="!companyApproved && auth.hasPermission('company:profile:view')" link type="primary" @click="router.push('/company/profile')">查看企业资料</el-button>
-    </div>
-    <div v-if="supportingDataErrors.length" class="supporting-data-error" role="alert">
-      <AlertTriangle :size="20" />
-      <div><strong>部分订单配套数据加载失败</strong><span v-for="message in supportingDataErrors" :key="message">{{ message }}</span></div>
-      <el-button :loading="supportingDataLoading || store.loading" @click="loadPageData">重新加载</el-button>
-    </div>
-    <QueryToolbar v-model="filters" :fields="queryFields" ariaLabel="头程订单查询" @search="searchOrders">
-      <template #actions>
-        <el-button v-if="auth.hasPermission('order:first-leg:create')" type="primary" :disabled="availableWarehouses.length === 0" @click="openCreate"><FilePlus2 :size="17" />创建订单</el-button>
-      </template>
-    </QueryToolbar>
+    <QueryToolbar v-model="filters" :fields="queryFields" ariaLabel="头程订单查询" @search="searchOrders" />
 
     <div class="client-card order-table-card">
+      <div class="order-table-toolbar">
+        <div><strong>订单列表</strong><span>共 {{ filteredOrders.length }} 条</span></div>
+        <el-button v-if="auth.hasPermission('order:first-leg:create')" type="primary" :disabled="availableWarehouses.length === 0" @click="openCreate"><FilePlus2 :size="17" />创建订单</el-button>
+      </div>
+      <div v-if="!supportingDataErrors.some((message) => message.startsWith('企业资料'))" class="order-eligibility" :class="companyApproved ? 'is-approved' : 'is-pending'" role="status">
+        <component :is="companyApproved ? CheckCircle2 : AlertTriangle" :size="20" />
+        <div><strong>{{ companyApproved ? '企业资料已审核，可正常提交订单' : canCreateOrder ? '企业资料待审核，当前仅可保存订单草稿' : '企业资料待审核，当前订单为只读' }}</strong><span>{{ companyApproved ? '提交后订单将进入平台审核。' : canCreateOrder ? '平台审核通过后即可提交；您仍可创建、编辑和保存草稿。' : '您当前拥有只读权限，可以继续查看订单进展。' }}</span></div>
+        <el-button v-if="!companyApproved && auth.hasPermission('company:profile:view')" link type="primary" @click="router.push('/company/profile')">查看企业资料</el-button>
+      </div>
+      <div v-if="supportingDataErrors.length" class="supporting-data-error" role="alert">
+        <AlertTriangle :size="20" />
+        <div><strong>部分订单配套数据加载失败</strong><span v-for="message in supportingDataErrors" :key="message">{{ message }}</span></div>
+        <el-button :loading="supportingDataLoading || store.loading" @click="loadPageData">重新加载</el-button>
+      </div>
       <div v-if="store.loadError" class="order-load-state" role="alert">
         <AlertTriangle :size="24" />
         <div><strong>订单数据加载失败</strong><span>{{ store.loadError }}</span></div>
@@ -725,6 +725,8 @@ async function searchOrders(model: QueryModel) {
 
 <style scoped>
 .first-leg-page { display: flex; flex-direction: column; gap: 14px; }
+:global(.client-main:has(> .first-leg-page) > .client-page-heading) { margin-bottom: 0; }
+:global(.client-main:has(> .first-leg-page) > .client-page-heading > div) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }
 .order-eligibility { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid; }
 .order-eligibility svg { flex: 0 0 20px; margin-top: 1px; }
 .order-eligibility div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
@@ -738,6 +740,11 @@ async function searchOrders(model: QueryModel) {
 .supporting-data-error span { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; line-height: 1.55; }
 .order-row-actions, .editor-actions { display: flex; justify-content: flex-end; gap: 8px; }
 .order-table-card { padding: 0; overflow: hidden; }
+.order-table-toolbar { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
+.order-table-toolbar > div { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
+.order-table-toolbar strong { color: var(--navy); font-size: 14px; }
+.order-table-toolbar span { color: var(--muted); font-size: 11px; }
+.order-table-card > .order-eligibility, .order-table-card > .supporting-data-error { border-width: 0 0 1px; }
 .order-load-state { display: grid; min-height: 220px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 28px; color: #9a5a09; }
 .order-load-state > div { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
 .order-load-state strong { color: var(--navy); font-size: 14px; }
@@ -828,6 +835,10 @@ async function searchOrders(model: QueryModel) {
   .mobile-order-card footer > div { display: flex; }
 }
 @media (max-width: 720px) {
+  :global(.client-main:has(> .first-leg-page) > .client-page-heading) { margin-bottom: 10px; }
+  .order-table-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
+  .order-table-toolbar > div { justify-content: space-between; }
+  .order-table-toolbar .el-button { width: 100%; min-height: 40px; }
   .order-eligibility { flex-wrap: wrap; }
   .order-eligibility .el-button { width: 100%; min-height: 44px; }
   .order-form-grid, .cargo-form-grid, .order-detail-grid, .party-editor-grid, .party-snapshot-fields { grid-template-columns: 1fr; }