416 lines
13 KiB
Vue
416 lines
13 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onMounted, ref } from "vue";
|
||
import { useRoute, useRouter } from "vue-router";
|
||
|
||
import { useAdminListPage } from "@/composables/useAdminListPage";
|
||
import { useAdminListQuerySync } from "@/composables/useAdminListQuerySync";
|
||
import AdminPageHeader from "@/components/admin/AdminPageHeader.vue";
|
||
import AdminStatusTag from "@/components/admin/AdminStatusTag.vue";
|
||
import { showConfirm, showError, showSuccess } from "@/lib/feedback";
|
||
import {
|
||
fetchAdminWebhookEvents,
|
||
replayAdminWebhookEvent,
|
||
} from "@/services/admin";
|
||
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 route = useRoute();
|
||
const router = useRouter();
|
||
const { readQueryString, readQueryPage, syncRouteQuery } =
|
||
useAdminListQuerySync(route, router);
|
||
|
||
const actionLoadingId = ref<number | null>(null);
|
||
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 {
|
||
loading,
|
||
errorMessage,
|
||
items,
|
||
pagination,
|
||
loadPage: loadEvents,
|
||
} = useAdminListPage<AdminWebhookEventListItem>({
|
||
defaultErrorMessage: "读取 webhook 列表失败",
|
||
fetchPage: (page, pageSize) =>
|
||
fetchAdminWebhookEvents({
|
||
page,
|
||
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: dateRange.value[0] || "",
|
||
dateTo: dateRange.value[1] || "",
|
||
}),
|
||
});
|
||
|
||
const summary = computed(() => ({
|
||
processedCount: items.value.filter((item) => item.processed).length,
|
||
failedCount: items.value.filter(
|
||
(item) => !item.processed || Boolean(item.processError)
|
||
).length,
|
||
importantCount: items.value.filter(
|
||
(item) => item.visibilityLevel === "important"
|
||
).length,
|
||
}));
|
||
|
||
async function submitReplay(item: AdminWebhookEventListItem) {
|
||
try {
|
||
await showConfirm(`确认重放 webhook #${item.eventId} 吗？`, "确认重放", {
|
||
type: "warning",
|
||
confirmButtonText: "继续重放",
|
||
cancelButtonText: "取消",
|
||
});
|
||
} catch {
|
||
return;
|
||
}
|
||
|
||
actionLoadingId.value = item.eventId;
|
||
try {
|
||
await replayAdminWebhookEvent(item.eventId);
|
||
showSuccess("Webhook 已重放");
|
||
await loadEvents();
|
||
} catch (error) {
|
||
showError(error instanceof Error ? error.message : "重放 webhook 失败");
|
||
} finally {
|
||
actionLoadingId.value = null;
|
||
}
|
||
}
|
||
|
||
function resetFilters() {
|
||
provider.value = "";
|
||
platform.value = "";
|
||
platformOrderId.value = "";
|
||
processed.value = "";
|
||
visibility.value = "important";
|
||
relatedOrderId.value = "";
|
||
dateRange.value = [];
|
||
void applyFilters(1);
|
||
}
|
||
|
||
async function applyFilters(page = 1) {
|
||
await syncRouteQuery(page, {
|
||
provider: provider.value,
|
||
platform: platform.value,
|
||
platformOrderId: platformOrderId.value,
|
||
processed: processed.value,
|
||
visibility: visibility.value,
|
||
relatedOrderId: relatedOrderId.value,
|
||
dateFrom: dateRange.value[0] || "",
|
||
dateTo: dateRange.value[1] || "",
|
||
});
|
||
await loadEvents(page);
|
||
}
|
||
|
||
function formatVisibilityLabel(value: string) {
|
||
return value === "ignored" ? "已忽略" : "重要";
|
||
}
|
||
|
||
onMounted(() => {
|
||
void applyFilters(readQueryPage());
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="webhooks-page list-page">
|
||
<AdminPageHeader
|
||
title="Webhook 日志"
|
||
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">筛选 Webhook</span>
|
||
<span class="card-desc"
|
||
>按服务商、平台、处理状态、可见级别等条件筛选。</span
|
||
>
|
||
</div>
|
||
</template>
|
||
<div class="filter-grid">
|
||
<el-input
|
||
v-model="provider"
|
||
class="filter-control"
|
||
placeholder="服务商，如 91kaquan"
|
||
clearable
|
||
@keyup.enter="applyFilters(1)"
|
||
/>
|
||
<el-input
|
||
v-model="platform"
|
||
class="filter-control"
|
||
placeholder="业务平台，如 kuaishou"
|
||
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-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="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="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.processedCount }}</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"
|
||
class="mt-4"
|
||
/>
|
||
|
||
<!-- 列表 -->
|
||
<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"
|
||
/>
|
||
</template>
|
||
|
||
<template v-else>
|
||
<div class="orders-toolbar table-toolbar">
|
||
<strong>Webhook 列表</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 }">
|
||
<RouterLink
|
||
:to="`/admin/webhook-events/${row.eventId}`"
|
||
class="order-no id-link"
|
||
>
|
||
#{{ row.eventId }}
|
||
</RouterLink>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="事件类型" min-width="200">
|
||
<template #default="{ row }">
|
||
<div class="cell-stack">
|
||
<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.platform || "-" }}</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
|
||
>
|
||
</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 v-if="row.totalAmount" class="cell-subline"
|
||
>{{ row.totalAmount }} {{ row.currency }}</span
|
||
>
|
||
<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>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="状态" min-width="150">
|
||
<template #default="{ row }">
|
||
<div class="cell-stack">
|
||
<div class="status-stack">
|
||
<AdminStatusTag
|
||
:status="row.processed ? 'success' : 'failed'"
|
||
/>
|
||
<AdminStatusTag
|
||
:status="row.signatureValid ? 'success' : 'failed'"
|
||
/>
|
||
</div>
|
||
<span class="cell-subline">{{
|
||
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-subline">#{{ row.eventId }}</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<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
|
||
>
|
||
<el-button
|
||
v-if="canReplay"
|
||
:loading="actionLoadingId === row.eventId"
|
||
size="small"
|
||
@click="submitReplay(row)"
|
||
>重放</el-button
|
||
>
|
||
</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"
|
||
class="pagination-center"
|
||
@current-change="applyFilters"
|
||
/>
|
||
</template>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
@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);
|
||
}
|
||
|
||
.inline-link {
|
||
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;
|
||
}
|
||
</style>
|