feat(frontend): implement P1 admin list improvements

apps/frontend/src/components.d.ts

@@ -16,7 +16,6 @@ declare module 'vue' {
     AdminStatusTag: typeof import('./components/admin/AdminStatusTag.vue')['default']
     ElAlert: typeof import('element-plus/es')['ElAlert']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -26,7 +25,6 @@ declare module 'vue' {
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@@ -39,7 +37,6 @@ declare module 'vue' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
-    ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
@@ -47,7 +44,6 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElStatistic: typeof import('element-plus/es')['ElStatistic']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']

apps/frontend/src/composables/useAdminListPage.ts

@@ -0,0 +1,62 @@
+import { ref } from 'vue'
+
+import type { ApiEnvelope } from '@/lib/http'
+import type { AdminPagination } from '@/types/admin'
+
+export interface AdminListPageData<TItem> {
+  items: TItem[]
+  pagination: AdminPagination
+}
+
+export interface UseAdminListPageOptions<TItem> {
+  defaultErrorMessage: string
+  pageSize?: number
+  fetchPage: (page: number, pageSize: number) => Promise<ApiEnvelope<AdminListPageData<TItem>>>
+}
+
+export function useAdminListPage<TItem>(options: UseAdminListPageOptions<TItem>) {
+  const loading = ref(true)
+  const errorMessage = ref('')
+  const items = ref<TItem[]>([])
+  const pagination = ref<AdminPagination>({
+    page: 1,
+    pageSize: options.pageSize ?? 20,
+    total: 0,
+  })
+  let latestRequestId = 0
+
+  async function loadPage(page = pagination.value.page) {
+    const requestId = ++latestRequestId
+    loading.value = true
+    errorMessage.value = ''
+
+    try {
+      const response = await options.fetchPage(page, pagination.value.pageSize)
+
+      if (requestId !== latestRequestId) {
+        return
+      }
+
+      items.value = response.data.items
+      pagination.value = response.data.pagination
+    } catch (error) {
+      if (requestId !== latestRequestId) {
+        return
+      }
+
+      errorMessage.value = error instanceof Error ? error.message : options.defaultErrorMessage
+    } finally {
+      if (requestId === latestRequestId) {
+        loading.value = false
+      }
+    }
+  }
+
+  return {
+    loading,
+    errorMessage,
+    items,
+    pagination,
+    loadPage,
+  }
+}

apps/frontend/src/views/admin/orders/AdminOrdersView.vue

@@ -1,110 +1,166 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
-import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
+import { useAdminListPage } from "@/composables/useAdminListPage";
-import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
+import AdminPageHeader from "@/components/admin/AdminPageHeader.vue";
-import { fetchAdminOrders } from '@/services/admin'
+import AdminStatusTag from "@/components/admin/AdminStatusTag.vue";
-import type { AdminOrderListItem, AdminPagination } from '@/types/admin'
+import { fetchAdminOrders } from "@/services/admin";
-import { adminPayStatusOptions } from '@/utils/admin-options'
+import type { AdminOrderListItem } from "@/types/admin";
-import { formatAdminDateTime } from '@/utils/admin-time'
+import { adminPayStatusOptions } from "@/utils/admin-options";
+import { formatAdminDateTime } from "@/utils/admin-time";
 
-const loading = ref(true)
+const route = useRoute();
-const errorMessage = ref('')
+const router = useRouter();
-const platformOrderId = ref('')
-const payStatus = ref('')
-const skuCode = ref('')
-const dateRange = ref<string[]>([])
-const items = ref<AdminOrderListItem[]>([])
-const pagination = ref<AdminPagination>({
-  page: 1,
-  pageSize: 20,
-  total: 0,
-})
 
-const summary = computed(() => ({
+const platformOrderId = ref(readQueryString("platformOrderId"));
-  paidCount: items.value.filter((item) => item.payStatus === 'paid').length,
+const payStatus = ref(readQueryString("payStatus"));
-  refundedCount: items.value.filter((item) => item.payStatus === 'refunded').length,
+const skuCode = ref(readQueryString("skuCode"));
-  bindingReadyCount: items.value.filter((item) => item.completedBindingTaskCount > 0).length,
+const dateRange = ref<string[]>(
-  issueCount: items.value.filter((item) => hasOrderIssue(item)).length,
+  [readQueryString("dateFrom"), readQueryString("dateTo")].filter(Boolean)
-}))
+);
 
-async function loadOrders(page = pagination.value.page) {
+const {
-  loading.value = true
+  loading,
-  errorMessage.value = ''
+  errorMessage,
-
+  items,
-  try {
+  pagination,
-    const response = await fetchAdminOrders({
+  loadPage: loadOrders,
+} = useAdminListPage<AdminOrderListItem>({
+  defaultErrorMessage: "读取订单列表失败",
+  fetchPage: (page, pageSize) =>
+    fetchAdminOrders({
       page,
-      pageSize: pagination.value.pageSize,
+      pageSize,
       platformOrderId: platformOrderId.value.trim(),
       payStatus: payStatus.value.trim(),
       skuCode: skuCode.value.trim(),
-      dateFrom: dateRange.value[0] || '',
+      dateFrom: dateRange.value[0] || "",
-      dateTo: dateRange.value[1] || '',
+      dateTo: dateRange.value[1] || "",
-    })
+    }),
-    items.value = response.data.items
+});
-    pagination.value = response.data.pagination
+
-  } catch (error) {
+const summary = computed(() => ({
-    errorMessage.value = error instanceof Error ? error.message : '读取订单列表失败'
+  paidCount: items.value.filter((item) => item.payStatus === "paid").length,
-  } finally {
+  refundedCount: items.value.filter((item) => item.payStatus === "refunded")
-    loading.value = false
+    .length,
+  bindingReadyCount: items.value.filter(
+    (item) => item.completedBindingTaskCount > 0
+  ).length,
+  issueCount: items.value.filter((item) => hasOrderIssue(item)).length,
+}));
+
+function resetFilters() {
+  platformOrderId.value = "";
+  payStatus.value = "";
+  skuCode.value = "";
+  dateRange.value = [];
+  void applyFilters(1);
+}
+
+async function applyFilters(page = 1) {
+  await syncRouteQuery(page);
+  await loadOrders(page);
+}
+
+function readQueryString(key: string) {
+  const value = route.query[key];
+  const rawValue = Array.isArray(value) ? value[0] : value;
+  return typeof rawValue === "string" ? rawValue.trim() : "";
+}
+
+function readQueryPage() {
+  const page = Number(readQueryString("page"));
+  return Number.isInteger(page) && page > 0 ? page : 1;
+}
+
+function syncRouteQuery(page: number) {
+  const query: Record<string, string> = {};
+  addQueryValue(query, "platformOrderId", platformOrderId.value);
+  addQueryValue(query, "payStatus", payStatus.value);
+  addQueryValue(query, "skuCode", skuCode.value);
+  addQueryValue(query, "dateFrom", dateRange.value[0] || "");
+  addQueryValue(query, "dateTo", dateRange.value[1] || "");
+
+  if (page > 1) {
+    query.page = String(page);
+  }
+
+  return router.replace({ query });
+}
+
+function addQueryValue(
+  query: Record<string, string>,
+  key: string,
+  value: string
+) {
+  const trimmed = value.trim();
+  if (trimmed) {
+    query[key] = trimmed;
   }
 }
 
-function resetFilters() {
-  platformOrderId.value = ''
-  payStatus.value = ''
-  skuCode.value = ''
-  dateRange.value = []
-  void loadOrders(1)
-}
-
 function resolveBuyerLabel(item: AdminOrderListItem) {
-  return item.buyerName || item.buyerId || '未识别'
+  return item.buyerName || item.buyerId || "未识别";
 }
 
 function resolveShopLabel(item: AdminOrderListItem) {
-  return item.shopName || item.shopId || '未识别店铺'
+  return item.shopName || item.shopId || "未识别店铺";
 }
 
 function resolveItemSummary(item: AdminOrderListItem) {
-  return item.itemSummary || '未识别商品'
+  return item.itemSummary || "未识别商品";
 }
 
 function resolveBindingTone(completedCount: number, totalCount: number) {
-  if (completedCount <= 0) return 'warning'
+  if (completedCount <= 0) return "warning";
-  return completedCount === totalCount ? 'success' : 'primary'
+  return completedCount === totalCount ? "success" : "primary";
 }
 
 function resolveBindingSummary(item: AdminOrderListItem) {
-  return `共 ${item.totalBindingCount} 条 · 预占 ${item.reservedBindingCount} · 已消耗 ${item.consumedBindingCount} · 已释放 ${item.releasedBindingCount}`
+  return `共 ${item.totalBindingCount} 条 · 预占 ${item.reservedBindingCount} · 已消耗 ${item.consumedBindingCount} · 已释放 ${item.releasedBindingCount}`;
 }
 
 function hasOrderIssue(item: AdminOrderListItem) {
-  return ['refunded', 'failed', 'unpaid'].includes(item.payStatus)
+  return (
-    || item.systemBindingStatus === 'binding_exception'
+    ["refunded", "failed", "unpaid"].includes(item.payStatus) ||
-    || item.userBindingStatus === 'binding_exception'
+    item.systemBindingStatus === "binding_exception" ||
+    item.userBindingStatus === "binding_exception"
+  );
 }
 
 function resolveFollowUpText(item: AdminOrderListItem) {
-  if (item.userBindingStatus === 'binding_exception' || item.systemBindingStatus === 'binding_exception') return '绑定异常'
+  if (
-  if (item.completedBindingTaskCount <= 0) return '等待完整绑定'
+    item.userBindingStatus === "binding_exception" ||
-  if (item.systemBoundTaskCount < item.taskCount) return '系统绑定未完成'
+    item.systemBindingStatus === "binding_exception"
-  return '链路正常'
+  )
+    return "绑定异常";
+  if (item.completedBindingTaskCount <= 0) return "等待完整绑定";
+  if (item.systemBoundTaskCount < item.taskCount) return "系统绑定未完成";
+  return "链路正常";
 }
 
 function resolveFollowUpTone(item: AdminOrderListItem) {
-  if (hasOrderIssue(item)) return 'danger'
+  if (hasOrderIssue(item)) return "danger";
-  if (item.completedBindingTaskCount <= 0 || item.systemBoundTaskCount < item.taskCount) return 'warning'
+  if (
-  return 'success'
+    item.completedBindingTaskCount <= 0 ||
+    item.systemBoundTaskCount < item.taskCount
+  )
+    return "warning";
+  return "success";
 }
 
-onMounted(loadOrders)
+onMounted(() => {
+  void applyFilters(readQueryPage());
+});
 </script>
 
 <template>
   <div class="orders-page list-page">
-    <AdminPageHeader title="订单列表" description="查看平台订单、支付状态、商品摘要和对应任务推进情况。">
+    <AdminPageHeader
+      title="订单列表"
+      description="查看平台订单、支付状态、商品摘要和对应任务推进情况。"
+    >
       <template #extra>
         <span class="total-badge">共 {{ pagination.total }} 条订单</span>
       </template>
@@ -114,15 +170,39 @@ onMounted(loadOrders)
       <template #header>
         <div class="card-header">
           <span class="card-title">查询订单</span>
-          <span class="card-desc">按平台订单号、支付状态、SKU 和日期范围筛选。</span>
+          <span class="card-desc"
+            >按平台订单号、支付状态、SKU 和日期范围筛选。</span
+          >
         </div>
       </template>
       <div class="filter-grid">
-        <el-input v-model="platformOrderId" class="filter-control" placeholder="平台订单号（模糊匹配）" clearable @keyup.enter="loadOrders(1)" />
+        <el-input
-        <el-select v-model="payStatus" class="filter-control" placeholder="支付状态" clearable>
+          v-model="platformOrderId"
-          <el-option v-for="opt in adminPayStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+          class="filter-control"
+          placeholder="平台订单号（模糊匹配）"
+          clearable
+          @keyup.enter="applyFilters(1)"
+        />
+        <el-select
+          v-model="payStatus"
+          class="filter-control"
+          placeholder="支付状态"
+          clearable
+        >
+          <el-option
+            v-for="opt in adminPayStatusOptions"
+            :key="opt.value"
+            :label="opt.label"
+            :value="opt.value"
+          />
         </el-select>
-        <el-input v-model="skuCode" class="filter-control" placeholder="SKU，如 dnf-cdk-a" clearable @keyup.enter="loadOrders(1)" />
+        <el-input
+          v-model="skuCode"
+          class="filter-control"
+          placeholder="SKU，如 dnf-cdk-a"
+          clearable
+          @keyup.enter="applyFilters(1)"
+        />
         <el-date-picker
           v-model="dateRange"
           class="filter-control"
@@ -134,22 +214,46 @@ onMounted(loadOrders)
         />
         <div class="filter-buttons">
           <el-button round @click="resetFilters">重置</el-button>
-          <el-button round type="primary" @click="loadOrders(1)">查询</el-button>
+          <el-button round type="primary" @click="applyFilters(1)"
+            >查询</el-button
+          >
         </div>
       </div>
     </el-card>
 
     <div v-if="!loading && items.length > 0" class="summary-strip">
       <span class="summary-title">当前页</span>
-      <span class="summary-metric" data-tone="success">已支付 <strong>{{ summary.paidCount }}</strong></span>
+      <span class="summary-metric" data-tone="success"
-      <span class="summary-metric" data-tone="danger">已退款 <strong>{{ summary.refundedCount }}</strong></span>
+        >已支付 <strong>{{ summary.paidCount }}</strong></span
-      <span class="summary-metric" data-tone="primary">完整绑定 <strong>{{ summary.bindingReadyCount }}</strong></span>
+      >
-      <span class="summary-metric" :data-tone="summary.issueCount > 0 ? 'warning' : 'muted'">需关注 <strong>{{ summary.issueCount }}</strong></span>
+      <span class="summary-metric" data-tone="danger"
+        >已退款 <strong>{{ summary.refundedCount }}</strong></span
+      >
+      <span class="summary-metric" data-tone="primary"
+        >完整绑定 <strong>{{ summary.bindingReadyCount }}</strong></span
+      >
+      <span
+        class="summary-metric"
+        :data-tone="summary.issueCount > 0 ? 'warning' : 'muted'"
+        >需关注 <strong>{{ summary.issueCount }}</strong></span
+      >
     </div>
 
-    <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
+    <el-alert
+      v-if="errorMessage"
+      :title="errorMessage"
+      type="error"
+      show-icon
+      :closable="false"
+      style="margin-top: 16px"
+    />
 
-    <el-card shadow="never" class="section-card" v-loading="loading" element-loading-text="订单列表加载中">
+    <el-card
+      shadow="never"
+      class="section-card"
+      v-loading="loading"
+      element-loading-text="订单列表加载中"
+    >
       <template v-if="items.length === 0 && !loading">
         <el-empty description="当前筛选条件下暂无订单" :image-size="60" />
       </template>
@@ -157,20 +261,33 @@ onMounted(loadOrders)
       <template v-else>
         <div class="orders-toolbar table-toolbar">
           <strong>订单明细</strong>
-          <span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
+          <span
+            >第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span
+          >
         </div>
 
-        <el-table :data="items" stripe size="small" class="orders-table data-table">
+        <el-table
+          :data="items"
+          stripe
+          size="small"
+          class="orders-table data-table"
+        >
           <el-table-column label="订单信息" min-width="220">
             <template #default="{ row }">
               <div class="cell-stack">
-                <RouterLink :to="`/admin/orders/${row.orderId}`" class="order-no id-link" :title="row.platformOrderId">
+                <RouterLink
+                  :to="`/admin/orders/${row.orderId}`"
+                  class="order-no id-link"
+                  :title="row.platformOrderId"
+                >
                   {{ row.platformOrderId }}
                 </RouterLink>
                 <div class="cell-meta-row">
-                  <span class="compact-chip">{{ row.platform || '-' }}</span>
+                  <span class="compact-chip">{{ row.platform || "-" }}</span>
                   <span class="compact-chip">{{ resolveShopLabel(row) }}</span>
-                  <span class="compact-chip compact-chip--muted">买家 {{ resolveBuyerLabel(row) }}</span>
+                  <span class="compact-chip compact-chip--muted"
+                    >买家 {{ resolveBuyerLabel(row) }}</span
+                  >
                 </div>
               </div>
             </template>
@@ -178,9 +295,17 @@ onMounted(loadOrders)
           <el-table-column label="商品摘要" min-width="180">
             <template #default="{ row }">
               <div class="cell-stack">
-                <span class="cell-title" :title="resolveItemSummary(row)">{{ resolveItemSummary(row) }}</span>
+                <span class="cell-title" :title="resolveItemSummary(row)">{{
-                <span class="cell-subline">{{ row.itemCount }} 项，合计 {{ row.totalQuantity }} 件</span>
+                  resolveItemSummary(row)
-                <span class="cell-subline" :title="resolveBindingSummary(row)">{{ resolveBindingSummary(row) }}</span>
+                }}</span>
+                <span class="cell-subline"
+                  >{{ row.itemCount }} 项，合计 {{ row.totalQuantity }} 件</span
+                >
+                <span
+                  class="cell-subline"
+                  :title="resolveBindingSummary(row)"
+                  >{{ resolveBindingSummary(row) }}</span
+                >
               </div>
             </template>
           </el-table-column>
@@ -198,15 +323,41 @@ onMounted(loadOrders)
             <template #default="{ row }">
               <div class="cell-stack">
                 <div class="status-stack">
-                  <AdminStatusTag :status="row.systemBindingStatus" :show-raw="false" />
+                  <AdminStatusTag
-                  <AdminStatusTag :status="row.userBindingStatus" :show-raw="false" />
+                    :status="row.systemBindingStatus"
+                    :show-raw="false"
+                  />
+                  <AdminStatusTag
+                    :status="row.userBindingStatus"
+                    :show-raw="false"
+                  />
                 </div>
-                <span class="follow-up-chip" :data-tone="resolveFollowUpTone(row)">{{ resolveFollowUpText(row) }}</span>
+                <span
+                  class="follow-up-chip"
+                  :data-tone="resolveFollowUpTone(row)"
+                  >{{ resolveFollowUpText(row) }}</span
+                >
                 <div class="progress-row-stack">
-                  <span class="progress-chip" :data-tone="resolveBindingTone(row.completedBindingTaskCount, row.taskCount)">
+                  <span
+                    class="progress-chip"
+                    :data-tone="
+                      resolveBindingTone(
+                        row.completedBindingTaskCount,
+                        row.taskCount
+                      )
+                    "
+                  >
                     完整 {{ row.completedBindingTaskCount }}/{{ row.taskCount }}
                   </span>
-                  <span class="progress-chip" :data-tone="resolveBindingTone(row.systemBoundTaskCount, row.taskCount)">
+                  <span
+                    class="progress-chip"
+                    :data-tone="
+                      resolveBindingTone(
+                        row.systemBoundTaskCount,
+                        row.taskCount
+                      )
+                    "
+                  >
                     系统 {{ row.systemBoundTaskCount }}/{{ row.taskCount }}
                   </span>
                 </div>
@@ -216,15 +367,25 @@ onMounted(loadOrders)
           <el-table-column label="金额 / 时间" min-width="180">
             <template #default="{ row }">
               <div class="cell-stack">
-                <span class="cell-title amount-text">{{ row.totalAmount }} {{ row.currency }}</span>
+                <span class="cell-title amount-text"
-                <span class="cell-subline">支付 {{ formatAdminDateTime(row.paidAt) }}</span>
+                  >{{ row.totalAmount }} {{ row.currency }}</span
-                <span class="cell-subline">更新 {{ formatAdminDateTime(row.updatedAt) }}</span>
+                >
+                <span class="cell-subline"
+                  >支付 {{ formatAdminDateTime(row.paidAt) }}</span
+                >
+                <span class="cell-subline"
+                  >更新 {{ formatAdminDateTime(row.updatedAt) }}</span
+                >
               </div>
             </template>
           </el-table-column>
           <el-table-column label="操作" width="80" align="center">
             <template #default="{ row }">
-              <RouterLink :to="`/admin/orders/${row.orderId}`" class="detail-link">详情</RouterLink>
+              <RouterLink
+                :to="`/admin/orders/${row.orderId}`"
+                class="detail-link"
+                >详情</RouterLink
+              >
             </template>
           </el-table-column>
         </el-table>
@@ -236,7 +397,7 @@ onMounted(loadOrders)
           :total="pagination.total"
           layout="total, prev, pager, next"
           style="margin-top: 16px; justify-content: center"
-          @current-change="loadOrders"
+          @current-change="applyFilters"
         />
       </template>
     </el-card>
@@ -244,13 +405,17 @@ onMounted(loadOrders)
 </template>
 
 <style scoped>
-@import '../../../styles/admin-list-pages.css';
+@import "../../../styles/admin-list-pages.css";
 
 .filter-grid {
-  grid-template-columns: minmax(200px, 1fr) minmax(130px, 0.6fr) minmax(180px, 0.9fr) minmax(320px, 1.4fr) minmax(150px, 0.55fr);
+  grid-template-columns:
+    minmax(200px, 1fr) minmax(130px, 0.6fr) minmax(180px, 0.9fr)
+    minmax(320px, 1.4fr) minmax(150px, 0.55fr);
 }
 
-.amount-text { white-space: nowrap; }
+.amount-text {
+  white-space: nowrap;
+}
 
 .progress-row-stack {
   display: flex;
@@ -271,14 +436,40 @@ onMounted(loadOrders)
   border: 1px solid transparent;
   white-space: nowrap;
 }
-.progress-chip[data-tone='success'] { color: #0f766e; background: var(--color-success-light); border-color: #a6f4c5; }
+.progress-chip[data-tone="success"] {
-.progress-chip[data-tone='primary'] { color: var(--color-primary-dark); background: var(--color-primary-light); border-color: #b2ddff; }
+  color: #0f766e;
-.progress-chip[data-tone='warning'] { color: #b54708; background: var(--color-warning-light); border-color: #fedf89; }
+  background: var(--color-success-light);
-.follow-up-chip[data-tone='success'] { color: #0f766e; background: var(--color-success-light); border-color: #a6f4c5; }
+  border-color: #a6f4c5;
-.follow-up-chip[data-tone='warning'] { color: #b54708; background: var(--color-warning-light); border-color: #fedf89; }
+}
-.follow-up-chip[data-tone='danger'] { color: var(--color-danger-dark); background: var(--color-danger-light); border-color: #fecaca; }
+.progress-chip[data-tone="primary"] {
+  color: var(--color-primary-dark);
+  background: var(--color-primary-light);
+  border-color: #b2ddff;
+}
+.progress-chip[data-tone="warning"] {
+  color: #b54708;
+  background: var(--color-warning-light);
+  border-color: #fedf89;
+}
+.follow-up-chip[data-tone="success"] {
+  color: #0f766e;
+  background: var(--color-success-light);
+  border-color: #a6f4c5;
+}
+.follow-up-chip[data-tone="warning"] {
+  color: #b54708;
+  background: var(--color-warning-light);
+  border-color: #fedf89;
+}
+.follow-up-chip[data-tone="danger"] {
+  color: var(--color-danger-dark);
+  background: var(--color-danger-light);
+  border-color: #fecaca;
+}
 
 @media (max-width: 1200px) {
-  .filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .filter-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 }
 </style>

apps/frontend/src/views/admin/webhook-events/AdminWebhookEventsView.vue

@@ -1,118 +1,166 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
-import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
+import { useAdminListPage } from "@/composables/useAdminListPage";
-import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
+import AdminPageHeader from "@/components/admin/AdminPageHeader.vue";
-import { showConfirm, showError, showSuccess } from '@/lib/feedback'
+import AdminStatusTag from "@/components/admin/AdminStatusTag.vue";
-import { fetchAdminWebhookEvents, replayAdminWebhookEvent } from '@/services/admin'
+import { showConfirm, showError, showSuccess } from "@/lib/feedback";
-import type { AdminPagination, AdminWebhookEventListItem } from '@/types/admin'
+import {
-import { hasAdminRole } from '@/utils/admin-auth'
+  fetchAdminWebhookEvents,
-import { formatAdminDateTime } from '@/utils/admin-time'
+  replayAdminWebhookEvent,
-import { formatAdminWebhookEventType } from '@/utils/admin-webhook'
+} from "@/services/admin";
-import { adminWebhookProcessedOptions, adminWebhookVisibilityOptions } from '@/utils/admin-options'
+import type { AdminWebhookEventListItem } from "@/types/admin";
+import { hasAdminRole } from "@/utils/admin-auth";
+import { formatAdminDateTime } from "@/utils/admin-time";
+import { formatAdminWebhookEventType } from "@/utils/admin-webhook";
+import {
+  adminWebhookProcessedOptions,
+  adminWebhookVisibilityOptions,
+} from "@/utils/admin-options";
 
-const loading = ref(true)
+const route = useRoute();
-const actionLoadingId = ref<number | null>(null)
+const router = useRouter();
-const errorMessage = ref('')
-const items = ref<AdminWebhookEventListItem[]>([])
-const provider = ref('')
-const platform = ref('')
-const platformOrderId = ref('')
-const processed = ref('')
-const visibility = ref('important')
-const relatedOrderId = ref('')
-const dateFrom = ref('')
-const dateTo = ref('')
-const pagination = ref<AdminPagination>({
-  page: 1,
-  pageSize: 20,
-  total: 0,
-})
 
-const canReplay = hasAdminRole('admin')
+const actionLoadingId = ref<number | null>(null);
-let latestRequestId = 0
+const provider = ref(readQueryString("provider"));
+const platform = ref(readQueryString("platform"));
+const platformOrderId = ref(readQueryString("platformOrderId"));
+const processed = ref(readQueryString("processed"));
+const visibility = ref(readQueryString("visibility") || "important");
+const relatedOrderId = ref(readQueryString("relatedOrderId"));
+const dateRange = ref<string[]>(
+  [readQueryString("dateFrom"), readQueryString("dateTo")].filter(Boolean)
+);
+const canReplay = hasAdminRole("admin");
 
-const summary = computed(() => ({
+const {
-  processedCount: items.value.filter((item) => item.processed).length,
+  loading,
-  failedCount: items.value.filter((item) => !item.processed || Boolean(item.processError)).length,
+  errorMessage,
-  importantCount: items.value.filter((item) => item.visibilityLevel === 'important').length,
+  items,
-}))
+  pagination,
-
+  loadPage: loadEvents,
-async function loadEvents(page = pagination.value.page) {
+} = useAdminListPage<AdminWebhookEventListItem>({
-  const requestId = ++latestRequestId
+  defaultErrorMessage: "读取 webhook 列表失败",
-  loading.value = true
+  fetchPage: (page, pageSize) =>
-  errorMessage.value = ''
+    fetchAdminWebhookEvents({
-
-  try {
-    const response = await fetchAdminWebhookEvents({
       page,
-      pageSize: pagination.value.pageSize,
+      pageSize,
       provider: provider.value.trim(),
       platform: platform.value.trim(),
       platformOrderId: platformOrderId.value.trim(),
       processed: processed.value.trim(),
       visibility: visibility.value.trim(),
       relatedOrderId: relatedOrderId.value.trim(),
-      dateFrom: dateFrom.value.trim(),
+      dateFrom: dateRange.value[0] || "",
-      dateTo: dateTo.value.trim(),
+      dateTo: dateRange.value[1] || "",
-    })
+    }),
+});
 
-    if (requestId !== latestRequestId) {
+const summary = computed(() => ({
-      return
+  processedCount: items.value.filter((item) => item.processed).length,
-    }
+  failedCount: items.value.filter(
-
+    (item) => !item.processed || Boolean(item.processError)
-    items.value = response.data.items
+  ).length,
-    pagination.value = response.data.pagination
+  importantCount: items.value.filter(
-  } catch (error) {
+    (item) => item.visibilityLevel === "important"
-    if (requestId !== latestRequestId) {
+  ).length,
-      return
+}));
-    }
-
-    errorMessage.value = error instanceof Error ? error.message : '读取 webhook 列表失败'
-  } finally {
-    if (requestId === latestRequestId) {
-      loading.value = false
-    }
-  }
-}
 
 async function submitReplay(item: AdminWebhookEventListItem) {
   try {
-    await showConfirm(`确认重放 webhook #${item.eventId} 吗？`, '确认重放', { type: 'warning', confirmButtonText: '继续重放', cancelButtonText: '取消' })
+    await showConfirm(`确认重放 webhook #${item.eventId} 吗？`, "确认重放", {
-  } catch { return }
+      type: "warning",
+      confirmButtonText: "继续重放",
+      cancelButtonText: "取消",
+    });
+  } catch {
+    return;
+  }
 
-  actionLoadingId.value = item.eventId
+  actionLoadingId.value = item.eventId;
   try {
-    await replayAdminWebhookEvent(item.eventId)
+    await replayAdminWebhookEvent(item.eventId);
-    showSuccess('Webhook 已重放')
+    showSuccess("Webhook 已重放");
-    await loadEvents()
+    await loadEvents();
   } catch (error) {
-    showError(error instanceof Error ? error.message : '重放 webhook 失败')
+    showError(error instanceof Error ? error.message : "重放 webhook 失败");
-  } finally { actionLoadingId.value = null }
+  } finally {
+    actionLoadingId.value = null;
+  }
 }
 
 function resetFilters() {
-  provider.value = ''
+  provider.value = "";
-  platform.value = ''
+  platform.value = "";
-  platformOrderId.value = ''
+  platformOrderId.value = "";
-  processed.value = ''
+  processed.value = "";
-  visibility.value = 'important'
+  visibility.value = "important";
-  relatedOrderId.value = ''
+  relatedOrderId.value = "";
-  dateFrom.value = ''
+  dateRange.value = [];
-  dateTo.value = ''
+  void applyFilters(1);
-  void loadEvents(1)
+}
+
+async function applyFilters(page = 1) {
+  await syncRouteQuery(page);
+  await loadEvents(page);
+}
+
+function readQueryString(key: string) {
+  const value = route.query[key];
+  const rawValue = Array.isArray(value) ? value[0] : value;
+  return typeof rawValue === "string" ? rawValue.trim() : "";
+}
+
+function readQueryPage() {
+  const page = Number(readQueryString("page"));
+  return Number.isInteger(page) && page > 0 ? page : 1;
+}
+
+function syncRouteQuery(page: number) {
+  const query: Record<string, string> = {};
+  addQueryValue(query, "provider", provider.value);
+  addQueryValue(query, "platform", platform.value);
+  addQueryValue(query, "platformOrderId", platformOrderId.value);
+  addQueryValue(query, "processed", processed.value);
+  addQueryValue(query, "visibility", visibility.value);
+  addQueryValue(query, "relatedOrderId", relatedOrderId.value);
+  addQueryValue(query, "dateFrom", dateRange.value[0] || "");
+  addQueryValue(query, "dateTo", dateRange.value[1] || "");
+
+  if (page > 1) {
+    query.page = String(page);
+  }
+
+  return router.replace({ query });
+}
+
+function addQueryValue(
+  query: Record<string, string>,
+  key: string,
+  value: string
+) {
+  const trimmed = value.trim();
+  if (trimmed) {
+    query[key] = trimmed;
+  }
 }
 
 function formatVisibilityLabel(value: string) {
-  return value === 'ignored' ? '已忽略' : '重要'
+  return value === "ignored" ? "已忽略" : "重要";
 }
 
-onMounted(loadEvents)
+onMounted(() => {
+  void applyFilters(readQueryPage());
+});
 </script>
 
 <template>
   <div class="webhooks-page list-page">
-    <AdminPageHeader title="Webhook 日志" description="查看平台推送处理情况、验签结果、请求来源和错误信息。">
+    <AdminPageHeader
+      title="Webhook 日志"
+      description="查看平台推送处理情况、验签结果、请求来源和错误信息。"
+    >
       <template #extra>
         <span class="total-badge">共 {{ pagination.total }} 条事件</span>
       </template>
@@ -123,25 +171,80 @@ onMounted(loadEvents)
       <template #header>
         <div class="card-header">
           <span class="card-title">筛选 Webhook</span>
-          <span class="card-desc">按服务商、平台、处理状态、可见级别等条件筛选。</span>
+          <span class="card-desc"
+            >按服务商、平台、处理状态、可见级别等条件筛选。</span
+          >
         </div>
       </template>
       <div class="filter-grid">
-        <el-input v-model="provider" class="filter-control" placeholder="服务商，如 agiso" clearable @keyup.enter="loadEvents(1)" />
+        <el-input
-        <el-input v-model="platform" class="filter-control" placeholder="业务平台，如 xianyu / taobao" clearable @keyup.enter="loadEvents(1)" />
+          v-model="provider"
-        <el-select v-model="processed" class="filter-control" placeholder="处理结果" clearable>
+          class="filter-control"
-          <el-option v-for="opt in adminWebhookProcessedOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+          placeholder="服务商，如 agiso"
+          clearable
+          @keyup.enter="applyFilters(1)"
+        />
+        <el-input
+          v-model="platform"
+          class="filter-control"
+          placeholder="业务平台，如 xianyu / taobao"
+          clearable
+          @keyup.enter="applyFilters(1)"
+        />
+        <el-select
+          v-model="processed"
+          class="filter-control"
+          placeholder="处理结果"
+          clearable
+        >
+          <el-option
+            v-for="opt in adminWebhookProcessedOptions"
+            :key="opt.value"
+            :label="opt.label"
+            :value="opt.value"
+          />
         </el-select>
-        <el-select v-model="visibility" class="filter-control" placeholder="可见级别" clearable>
+        <el-select
-          <el-option v-for="opt in adminWebhookVisibilityOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+          v-model="visibility"
+          class="filter-control"
+          placeholder="可见级别"
+          clearable
+        >
+          <el-option
+            v-for="opt in adminWebhookVisibilityOptions"
+            :key="opt.value"
+            :label="opt.label"
+            :value="opt.value"
+          />
         </el-select>
-        <el-input v-model="platformOrderId" class="filter-control" placeholder="平台订单号" clearable @keyup.enter="loadEvents(1)" />
+        <el-input
-        <el-input v-model="relatedOrderId" class="filter-control" placeholder="后台订单 ID" clearable @keyup.enter="loadEvents(1)" />
+          v-model="platformOrderId"
-        <el-date-picker v-model="dateFrom" class="filter-control" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
+          class="filter-control"
-        <el-date-picker v-model="dateTo" class="filter-control" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
+          placeholder="平台订单号"
+          clearable
+          @keyup.enter="applyFilters(1)"
+        />
+        <el-input
+          v-model="relatedOrderId"
+          class="filter-control"
+          placeholder="后台订单 ID"
+          clearable
+          @keyup.enter="applyFilters(1)"
+        />
+        <el-date-picker
+          v-model="dateRange"
+          class="filter-control"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          range-separator="至"
+          value-format="YYYY-MM-DD"
+        />
         <div class="filter-buttons">
           <el-button round @click="resetFilters">重置</el-button>
-          <el-button round type="primary" @click="loadEvents(1)">查询</el-button>
+          <el-button round type="primary" @click="applyFilters(1)"
+            >查询</el-button
+          >
         </div>
       </div>
     </el-card>
@@ -149,29 +252,60 @@ onMounted(loadEvents)
     <!-- 摘要 -->
     <div v-if="!loading && items.length > 0" class="summary-strip">
       <span class="summary-title">当前页</span>
-      <span class="summary-metric" data-tone="success">处理成功 <strong>{{ summary.processedCount }}</strong></span>
+      <span class="summary-metric" data-tone="success"
-      <span class="summary-metric" data-tone="danger">异常/失败 <strong>{{ summary.failedCount }}</strong></span>
+        >处理成功 <strong>{{ summary.processedCount }}</strong></span
-      <span class="summary-metric" data-tone="primary">重要事件 <strong>{{ summary.importantCount }}</strong></span>
+      >
+      <span class="summary-metric" data-tone="danger"
+        >异常/失败 <strong>{{ summary.failedCount }}</strong></span
+      >
+      <span class="summary-metric" data-tone="primary"
+        >重要事件 <strong>{{ summary.importantCount }}</strong></span
+      >
     </div>
 
-    <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
+    <el-alert
+      v-if="errorMessage"
+      :title="errorMessage"
+      type="error"
+      show-icon
+      :closable="false"
+      style="margin-top: 16px"
+    />
 
     <!-- 列表 -->
-    <el-card shadow="never" class="section-card" v-loading="loading" element-loading-text="Webhook 列表加载中">
+    <el-card
+      shadow="never"
+      class="section-card"
+      v-loading="loading"
+      element-loading-text="Webhook 列表加载中"
+    >
       <template v-if="items.length === 0 && !loading">
-        <el-empty description="当前筛选条件下暂无 Webhook 事件" :image-size="60" />
+        <el-empty
+          description="当前筛选条件下暂无 Webhook 事件"
+          :image-size="60"
+        />
       </template>
 
       <template v-else>
         <div class="orders-toolbar table-toolbar">
           <strong>Webhook 列表</strong>
-          <span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
+          <span
+            >第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span
+          >
         </div>
 
-        <el-table :data="items" stripe size="small" class="orders-table data-table">
+        <el-table
+          :data="items"
+          stripe
+          size="small"
+          class="orders-table data-table"
+        >
           <el-table-column label="事件ID" width="100">
             <template #default="{ row }">
-              <RouterLink :to="`/admin/webhook-events/${row.eventId}`" class="order-no id-link">
+              <RouterLink
+                :to="`/admin/webhook-events/${row.eventId}`"
+                class="order-no id-link"
+              >
                 #{{ row.eventId }}
               </RouterLink>
             </template>
@@ -179,23 +313,37 @@ onMounted(loadEvents)
           <el-table-column label="事件类型" min-width="200">
             <template #default="{ row }">
               <div class="cell-stack">
-                <span class="cell-title">{{ formatAdminWebhookEventType(row.eventType) }}</span>
+                <span class="cell-title">{{
+                  formatAdminWebhookEventType(row.eventType)
+                }}</span>
                 <div class="cell-meta-row">
-                  <span class="compact-chip">{{ row.provider || '-' }}</span>
+                  <span class="compact-chip">{{ row.provider || "-" }}</span>
-                  <span class="compact-chip">{{ row.platform || '-' }}</span>
+                  <span class="compact-chip">{{ row.platform || "-" }}</span>
-                  <span class="compact-chip compact-chip--muted">{{ row.shopName || row.shopId || '-' }}</span>
+                  <span class="compact-chip compact-chip--muted">{{
+                    row.shopName || row.shopId || "-"
+                  }}</span>
                 </div>
-                <span v-if="row.aopic" class="cell-subline">aopic {{ row.aopic }}</span>
+                <span v-if="row.aopic" class="cell-subline"
+                  >aopic {{ row.aopic }}</span
+                >
               </div>
             </template>
           </el-table-column>
           <el-table-column label="平台订单号" min-width="180">
             <template #default="{ row }">
               <div class="cell-stack">
-                <span class="cell-title">{{ row.platformOrderId || '-' }}</span>
+                <span class="cell-title">{{ row.platformOrderId || "-" }}</span>
-                <span v-if="row.totalAmount" class="cell-subline">{{ row.totalAmount }} {{ row.currency }}</span>
+                <span v-if="row.totalAmount" class="cell-subline"
-                <span v-if="row.buyerName || row.buyerId" class="cell-subline">买家 {{ row.buyerName || row.buyerId }}</span>
+                  >{{ row.totalAmount }} {{ row.currency }}</span
-                <RouterLink v-if="row.relatedOrderId" class="inline-link" :to="`/admin/orders/${row.relatedOrderId}`">
+                >
+                <span v-if="row.buyerName || row.buyerId" class="cell-subline"
+                  >买家 {{ row.buyerName || row.buyerId }}</span
+                >
+                <RouterLink
+                  v-if="row.relatedOrderId"
+                  class="inline-link"
+                  :to="`/admin/orders/${row.relatedOrderId}`"
+                >
                   关联订单 #{{ row.relatedOrderId }}
                 </RouterLink>
               </div>
@@ -205,18 +353,28 @@ onMounted(loadEvents)
             <template #default="{ row }">
               <div class="cell-stack">
                 <div class="status-stack">
-                  <AdminStatusTag :status="row.processed ? 'success' : 'failed'" />
+                  <AdminStatusTag
-                  <AdminStatusTag :status="row.signatureValid ? 'success' : 'failed'" />
+                    :status="row.processed ? 'success' : 'failed'"
+                  />
+                  <AdminStatusTag
+                    :status="row.signatureValid ? 'success' : 'failed'"
+                  />
                 </div>
-                <span class="cell-subline">{{ formatVisibilityLabel(row.visibilityLevel) }}</span>
+                <span class="cell-subline">{{
-                <span v-if="row.processError" class="error-inline">{{ row.processError }}</span>
+                  formatVisibilityLabel(row.visibilityLevel)
+                }}</span>
+                <span v-if="row.processError" class="error-inline">{{
+                  row.processError
+                }}</span>
               </div>
             </template>
           </el-table-column>
           <el-table-column label="创建时间" min-width="160">
             <template #default="{ row }">
               <div class="cell-stack">
-                <span class="cell-title">{{ formatAdminDateTime(row.createdAt) }}</span>
+                <span class="cell-title">{{
+                  formatAdminDateTime(row.createdAt)
+                }}</span>
                 <span class="cell-subline">#{{ row.eventId }}</span>
               </div>
             </template>
@@ -224,8 +382,18 @@ onMounted(loadEvents)
           <el-table-column label="操作" width="130" align="center">
             <template #default="{ row }">
               <div class="action-stack">
-                <RouterLink :to="`/admin/webhook-events/${row.eventId}`" class="detail-link">详情</RouterLink>
+                <RouterLink
-                <el-button v-if="canReplay" :loading="actionLoadingId === row.eventId" size="small" @click="submitReplay(row)">重放</el-button>
+                  :to="`/admin/webhook-events/${row.eventId}`"
+                  class="detail-link"
+                  >详情</RouterLink
+                >
+                <el-button
+                  v-if="canReplay"
+                  :loading="actionLoadingId === row.eventId"
+                  size="small"
+                  @click="submitReplay(row)"
+                  >重放</el-button
+                >
               </div>
             </template>
           </el-table-column>
@@ -238,7 +406,7 @@ onMounted(loadEvents)
           :total="pagination.total"
           layout="total, prev, pager, next"
           style="margin-top: 16px; justify-content: center"
-          @current-change="loadEvents"
+          @current-change="applyFilters"
         />
       </template>
     </el-card>
@@ -246,16 +414,30 @@ onMounted(loadEvents)
 </template>
 
 <style scoped>
-@import '../../../styles/admin-list-pages.css';
+@import "../../../styles/admin-list-pages.css";
 
 .filter-grid {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-.error-inline { display: block; color: var(--color-danger); font-size: var(--text-xs); }
+.error-inline {
+  display: block;
+  color: var(--color-danger);
+  font-size: var(--text-xs);
+}
 
-.inline-link { color: var(--color-primary-dark); font-size: var(--text-xs); font-weight: 700; text-decoration: none; }
+.inline-link {
-.inline-link:hover { text-decoration: underline; }
+  color: var(--color-primary-dark);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  text-decoration: none;
+}
+.inline-link:hover {
+  text-decoration: underline;
+}
 
-.action-stack { flex-direction: column; align-items: center; }
+.action-stack {
+  flex-direction: column;
+  align-items: center;
+}
 </style>