优化

src/modules/overseas-warehouse/pages/CustomerVisitsView.vue

@@ -2,7 +2,7 @@
 import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import { onMounted, reactive, ref } from 'vue'
-import { FileUp } from '@lucide/vue'
+import { FileUp, ClipboardList, Clock, CircleCheck } from '@lucide/vue'
 import { ElMessage } from 'element-plus'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import AdminPage from '@/shared/components/AdminPage.vue'
@@ -158,14 +158,27 @@ onMounted(load)
 </script>
 
 <template>
-  <AdminPage class="admin-density admin-workbench">
+  <AdminPage spacing="compact" class="customer-visits-page admin-density admin-workbench">
+    <section class="visit-summary-grid" aria-label="回访统计">
+      <article class="workbench-metric workbench-tone is-compact" data-tone="blue">
+        <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><ClipboardList aria-hidden="true" /></span><h2 class="workbench-metric-label">可回访订单</h2></div>
+        <div class="workbench-metric-value"><strong>{{ summary.visitable.toLocaleString('zh-CN') }}</strong><span>单</span></div>
+      </article>
+      <article class="workbench-metric workbench-tone is-compact" data-tone="purple">
+        <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><Clock aria-hidden="true" /></span><h2 class="workbench-metric-label">待回访</h2></div>
+        <div class="workbench-metric-value"><strong>{{ summary.pending.toLocaleString('zh-CN') }}</strong><span>单</span></div>
+      </article>
+      <article class="workbench-metric workbench-tone is-compact" data-tone="green">
+        <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><CircleCheck aria-hidden="true" /></span><h2 class="workbench-metric-label">已完成回访</h2></div>
+        <div class="workbench-metric-value"><strong>{{ summary.completed.toLocaleString('zh-CN') }}</strong><span>单</span></div>
+      </article>
+    </section>
     <ListPageLayout aria-label="客户回访列表">
 
 
       <section><div class="workbench-table is-page-surface"><DataTable appearance="integrated" column-settings-mode="show" :results-visible="!error" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="overseas-customer-visits" row-key="id" empty-text="暂无可回访派送单" @update:page="load()" @update:page-size="page = 1; load()">
         <template #toolbar-start><h1>客户回访</h1></template>
         <template #filters>
-        <dl class="visit-summary density-detail-overview" aria-label="回访统计"><div><dt>可回访订单</dt><dd>{{ summary.visitable }}</dd></div><div><dt>待回访</dt><dd>{{ summary.pending }}</dd></div><div><dt>已完成回访</dt><dd>{{ summary.completed }}</dd></div></dl>
         <QueryToolbar v-model="filters" :fields="fields" :loading="loading" ariaLabel="客户回访筛选" preference-key="overseas-customer-visits-query" :search-on-reset="false" @search="search" @reset="reset" />
       </template>
         <template #notices><template v-if="error"><LoadErrorState title="客户回访列表加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState></template></template>
@@ -212,7 +225,8 @@ onMounted(load)
 </template>
 
 <style scoped>
-.visit-summary { flex-wrap: wrap; }
+.admin-workbench.customer-visits-page.admin-page.is-spacing-compact { gap: 0; }
+.visit-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--workbench-grid-gap); }
 .visit-order-summary.density-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--admin-space-5); }
 .inbound-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--admin-space-3); width: 100%; }
 .inbound-option { display: grid; min-width: 0; gap: var(--admin-space-2); padding: var(--admin-space-3); border: 1px solid var(--workbench-border); border-radius: var(--admin-radius); cursor: pointer; color: var(--workbench-muted); overflow-wrap: anywhere; }
@@ -222,5 +236,5 @@ onMounted(load)
 .attachment-list, .attachment-empty { width: 100%; margin-top: var(--admin-space-3); }
 .attachment-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--admin-space-3); padding: var(--admin-space-2) 0; border-bottom: 1px solid var(--workbench-border); overflow-wrap: anywhere; }
 .attachment-list small, .attachment-empty { color: var(--workbench-muted); font-size: var(--admin-font-caption); }
-@media (max-width: 720px) { .visit-summary { flex-wrap: wrap; } .visit-order-summary.density-fields, .inbound-options { grid-template-columns: 1fr; } .file-tip { display: block; margin: 8px 0 0; } }
+@media (max-width: 720px) { .visit-summary-grid { grid-template-columns: 1fr; } .visit-order-summary.density-fields, .inbound-options { grid-template-columns: 1fr; } .file-tip { display: block; margin: 8px 0 0; } }
 </style>

src/modules/overseas-warehouse/pages/ExceptionOrdersView.vue

@@ -110,7 +110,8 @@ onMounted(load)
     </el-form>
   </AppDialog>
   <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="detailOpen" title="异常订单详情" width="min(760px, calc(100vw - 28px))" :show-confirm="false" cancel-text="关闭">
-    <ExceptionProcessingPanel v-if="detailRow" :customer-id="detailRow.customerId" :exception-no="detailRow.exceptionNo" :active="detailOpen" @changed="load()" />
+    <ExceptionProcessingPanel v-if="detailRow" :customer-id="detailRow.customerId" :exception-no="detailRow.exceptionNo" :active="detailOpen" actions-target="#exception-detail-actions" @changed="load()" />
+    <template #footer="{ close }"><div class="density-actions density-actions--footer"><el-button @click="close">关闭</el-button><div id="exception-detail-actions"></div></div></template>
   </AppDialog>
 </template>