优化

2026-08-10 16:24:54 +08:00
parent e119b48662
commit 820432a381
52 changed files with 1015 additions and 705 deletions
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
-import { ArrowLeft, Box, ChevronDown, ChevronUp, CircleCheck, Eye, History, ListChecks, MoreHorizontal, PackageOpen, RefreshCw, Ruler, SlidersHorizontal, StickyNote, WalletCards } from '@lucide/vue'
+import { ArrowLeft, Box, ChevronDown, ChevronUp, CircleCheck, Eye, History, ListChecks, MoreHorizontal, PackageOpen, Ruler, SlidersHorizontal, StickyNote, WalletCards } from '@lucide/vue'
 import { useRoute, useRouter } from 'vue-router'
 import {
  getPlatformUnifiedOrder,
@@ -998,22 +998,21 @@ onMounted(() => {
        >{{ tab.label }}</button>
      </div>

-      <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 ? '收起筛选' : '高级筛选' }}
-            <ChevronUp v-if="showAdvancedFilters" :size="15" /><ChevronDown v-else :size="15" />
-          </el-button>
-        </template>
-      </QueryToolbar>
+      <div class="filter-mode-actions">
+        <el-button :aria-expanded="showAdvancedFilters" aria-controls="unified-orders-advanced-filters" @click="showAdvancedFilters = !showAdvancedFilters">
+          <SlidersHorizontal :size="16" />{{ showAdvancedFilters ? '收起筛选' : '高级筛选' }}
+          <ChevronUp v-if="showAdvancedFilters" :size="15" /><ChevronDown v-else :size="15" />
+        </el-button>
+      </div>
+
+      <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" />
    </div>
    <LoadErrorState v-if="loadError" class="orders-load-error" title="订单列表暂时无法加载" :message="loadError.message" :loading="loading" @retry="loadOrders">
      <template #details><ApiErrorMeta :details="loadError" /></template>
    </LoadErrorState>

-    <div v-else id="unified-orders-results" class="table-card" role="tabpanel">
+    <div v-else id="unified-orders-results" class="surface-panel table-panel table-card" role="tabpanel">
      <DataTable v-model:page="page" v-model:page-size="pageSize" :data="records" :columns="columns" preference-key="unified-orders-table" :loading="loading" :total="total" :page-sizes="[20, 50, 100]" row-key="orderId" empty-text="暂无符合条件的订单" aria-label="统一订单列表" @selection-change="handleSelectionChange">
-        <template #toolbar-start><div><h2>统一订单列表</h2><p>共 {{ total }} 条订单</p></div></template>
        <template #toolbar-actions>
          <el-button type="primary" plain :disabled="selectedOrders.length === 0" title="批量审核接口待接入" @click="openBulkReviewPlaceholder"><ListChecks :size="16" />批量审核<span v-if="selectedOrders.length">（{{ selectedOrders.length }}）</span></el-button>
        </template>
@@ -1021,7 +1020,7 @@ onMounted(() => {
          <div class="row-actions">
            <el-button link type="primary" @click="openDetail(row as UnifiedOrderResource)"><Eye :size="15" />详情</el-button>
            <el-dropdown trigger="click" @command="runMoreAction($event, row as UnifiedOrderResource)">
-              <el-button link type="primary" aria-label="更多订单操作"><MoreHorizontal :size="17" />更多</el-button>
+              <el-button link type="primary" aria-label="更多订单操作" title="更多操作"><MoreHorizontal :size="17" /></el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-if="can('platform:order:note')" command="note"><StickyNote :size="15" />添加备注</el-dropdown-item>
@@ -1045,6 +1044,7 @@ onMounted(() => {
        <template #cargo="{ row }"><span>{{ (row as UnifiedOrderResource).totalPackageCount ?? '—' }} 箱</span><span v-if="(row as UnifiedOrderResource).measurement?.actualGrossWeightKg !== null && (row as UnifiedOrderResource).measurement?.actualGrossWeightKg !== undefined"> · {{ formatNumber((row as UnifiedOrderResource).measurement?.actualGrossWeightKg) }} kg</span><span v-if="(row as UnifiedOrderResource).measurement?.actualVolumeCbm !== null && (row as UnifiedOrderResource).measurement?.actualVolumeCbm !== undefined"> · {{ formatNumber((row as UnifiedOrderResource).measurement?.actualVolumeCbm, 3) }} m³</span></template>
        <template #expectedShipDate="{ row }">{{ formatDate((row as UnifiedOrderResource).expectedShipDate) }}</template>
        <template #updatedAt="{ row }">{{ formatDate((row as UnifiedOrderResource).updatedAt) }}</template>
+        <template #pagination-left="{ total: tableTotal }"><span>共 {{ tableTotal }} 条</span></template>
      </DataTable>
    </div>
    </ListPageLayout>
@@ -1070,6 +1070,7 @@ onMounted(() => {
 .page-intro :deep(.el-button) { flex: 0 0 auto; }
 .orders-query-panel { overflow: hidden; border: 1px solid var(--cc-border); border-radius: 8px; background: #fff; }
 .status-tabs { display: flex; max-width: 100%; overflow-x: auto; margin-bottom: 0; border-bottom: 1px solid var(--cc-border); scrollbar-width: thin; }
+.filter-mode-actions { display: flex; justify-content: flex-end; padding: 12px 16px 0; }
 .status-tab { position: relative; flex: 0 0 auto; min-height: 44px; padding: 0 18px; border: 0; background: transparent; color: var(--cc-muted); font: inherit; font-size: 14px; cursor: pointer; }
 .status-tab::after { position: absolute; right: 12px; bottom: 0; left: 12px; height: 3px; background: transparent; content: ''; }
 .status-tab:hover { color: var(--cc-primary); background: #f6f9fd; }
@@ -1077,8 +1078,8 @@ onMounted(() => {
 .status-tab.is-active { color: var(--cc-primary); font-weight: 600; }
 .status-tab.is-active::after { background: var(--cc-primary); }
 .orders-query-toolbar { border: 0; }
-.orders-load-error { margin-top: 12px; }
-.table-card { overflow: hidden; border: 1px solid var(--cc-border); border-radius: 8px; background: #fff; }
+.orders-load-error { margin-top: 0; }
+.table-card { overflow: hidden; }
 .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; }