admin后台第一阶段目录优化

2026-05-15 14:12:38 +08:00
parent 34b71decf1
commit 11678a7f83
35 changed files with 41 additions and 46 deletions
@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
+import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
+import { fetchAdminMessageDeliveries } from '@/services/admin'
+import type { AdminMessageDeliveryListItem, AdminPagination } from '@/types/admin'
+import { formatAdminDateTime } from '@/utils/admin-time'
+import { adminMessageDeliveryStatusOptions } from '@/utils/admin-options'
+
+const loading = ref(true)
+const errorMessage = ref('')
+const items = ref<AdminMessageDeliveryListItem[]>([])
+
+const provider = ref('agiso')
+const platform = ref('xianyu')
+const status = ref('')
+const shopId = ref('')
+const platformOrderId = ref('')
+const taskNo = ref('')
+const dateFrom = ref('')
+const dateTo = ref('')
+
+const pagination = ref<AdminPagination>({
+  page: 1,
+  pageSize: 20,
+  total: 0,
+})
+
+const summary = computed(() => ({
+  successCount: items.value.filter((item) => item.status === 'success').length,
+  failedCount: items.value.filter((item) => item.status === 'failed').length,
+  pendingCount: items.value.filter((item) => item.status === 'pending').length,
+}))
+
+async function loadMessageDeliveries(page = pagination.value.page) {
+  loading.value = true
+  errorMessage.value = ''
+
+  try {
+    const response = await fetchAdminMessageDeliveries({
+      page,
+      pageSize: pagination.value.pageSize,
+      provider: provider.value.trim(),
+      platform: platform.value.trim(),
+      status: status.value.trim(),
+      shopId: shopId.value.trim(),
+      platformOrderId: platformOrderId.value.trim(),
+      taskNo: taskNo.value.trim(),
+      dateFrom: dateFrom.value.trim(),
+      dateTo: dateTo.value.trim(),
+    })
+    items.value = response.data.items
+    pagination.value = response.data.pagination
+  } catch (error) {
+    errorMessage.value = error instanceof Error ? error.message : '读取消息发送记录失败'
+  } finally {
+    loading.value = false
+  }
+}
+
+function resetFilters() {
+  provider.value = 'agiso'
+  platform.value = 'xianyu'
+  status.value = ''
+  shopId.value = ''
+  platformOrderId.value = ''
+  taskNo.value = ''
+  dateFrom.value = ''
+  dateTo.value = ''
+  void loadMessageDeliveries(1)
+}
+
+onMounted(loadMessageDeliveries)
+</script>
+
+<template>
+  <div class="deliveries-page list-page">
+    <AdminPageHeader title="消息发送记录" description="查看领取链接消息是否真正发出、平台返回了什么、失败原因是什么。">
+      <template #extra>
+        <span class="total-badge">共 {{ pagination.total }} 条记录</span>
+      </template>
+    </AdminPageHeader>
+
+    <!-- 筛选 -->
+    <el-card shadow="never" class="section-card">
+      <template #header>
+        <div class="card-header">
+          <span class="card-title">筛选消息</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="loadMessageDeliveries(1)" />
+        <el-input v-model="platform" class="filter-control" placeholder="业务平台，如 xianyu" clearable @keyup.enter="loadMessageDeliveries(1)" />
+        <el-select v-model="status" class="filter-control" placeholder="发送状态" clearable>
+          <el-option v-for="opt in adminMessageDeliveryStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+        </el-select>
+        <el-input v-model="shopId" class="filter-control" placeholder="店铺 ID（精确匹配）" clearable @keyup.enter="loadMessageDeliveries(1)" />
+        <el-input v-model="platformOrderId" class="filter-control" placeholder="平台订单号" clearable @keyup.enter="loadMessageDeliveries(1)" />
+        <el-input v-model="taskNo" class="filter-control" placeholder="任务编号" clearable @keyup.enter="loadMessageDeliveries(1)" />
+        <el-date-picker v-model="dateFrom" class="filter-control" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
+        <el-date-picker v-model="dateTo" class="filter-control" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
+        <div class="filter-buttons">
+          <el-button round @click="resetFilters">重置</el-button>
+          <el-button round type="primary" @click="loadMessageDeliveries(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.successCount }}</strong></span>
+      <span class="summary-metric" data-tone="danger">发送失败 <strong>{{ summary.failedCount }}</strong></span>
+      <span class="summary-metric" data-tone="warning">等待中 <strong>{{ summary.pendingCount }}</strong></span>
+    </div>
+
+    <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="消息发送记录加载中">
+      <template v-if="items.length === 0 && !loading">
+        <el-empty description="当前筛选下还没有消息发送记录。" :image-size="60" />
+      </template>
+
+      <template v-else>
+        <div class="orders-toolbar table-toolbar">
+          <strong>发送明细</strong>
+          <span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
+        </div>
+
+        <el-table :data="items" stripe size="small" class="orders-table data-table">
+          <el-table-column label="消息ID" width="100">
+            <template #default="{ row }">
+              <span class="order-no id-link">#{{ row.deliveryId }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="接收者" min-width="160">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <span class="cell-title">{{ row.recipientKey || row.shopName || row.shopId || '-' }}</span>
+                <span class="cell-subline">{{ row.shopName || row.shopId || '-' }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="消息类型" min-width="140">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <span class="cell-title">{{ row.channel || '-' }}</span>
+                <div class="cell-meta-row">
+                  <span class="compact-chip">{{ row.provider || '-' }}</span>
+                  <span class="compact-chip">{{ row.platform || '-' }}</span>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="100">
+            <template #default="{ row }">
+              <AdminStatusTag :status="row.status" />
+            </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 v-if="row.sentAt" class="cell-subline">发送 {{ formatAdminDateTime(row.sentAt) }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" min-width="140">
+            <template #default="{ row }">
+              <div class="action-stack">
+                <a v-if="row.claimUrl" class="detail-link" :href="row.claimUrl" target="_blank" rel="noreferrer">Claim 链接</a>
+                <RouterLink v-if="row.orderId" class="detail-link" :to="`/admin/orders/${row.orderId}`">订单 #{{ row.orderId }}</RouterLink>
+                <RouterLink v-if="row.taskId" class="detail-link" :to="`/admin/tasks/${row.taskId}`">任务 {{ row.taskNo || row.taskId }}</RouterLink>
+                <span v-if="!row.claimUrl && !row.orderId && !row.taskId" class="cell-subline">-</span>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination
+          v-if="pagination.total > 0"
+          v-model:current-page="pagination.page"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          layout="total, prev, pager, next"
+          style="margin-top: 16px; justify-content: center"
+          @current-change="loadMessageDeliveries"
+        />
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+@import '../../../styles/admin-list-pages.css';
+
+.filter-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+</style>