dachui/order_site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

再次优化css等

Browse Source
This commit is contained in:
yml2213
2026-05-15 03:59:45 +08:00
parent 2f6380ad4d
commit c6eb0d60b1
8 changed files with 1063 additions and 807 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/views/admin/AdminWebhookEventsView.vue
+167 -240
View File
@@ -90,17 +90,6 @@ function resetFilters() {
void loadEvents(1)
}
function formatRequestTimestamp(value: string) {
const normalized = String(value || '').trim()
if (!/^\d{10,13}$/.test(normalized)) return normalized || '-'
const epochMs = normalized.length === 13 ? Number(normalized) : Number(normalized) * 1000
return formatAdminDateTime(new Date(epochMs).toISOString())
}
function formatAmount(item: AdminWebhookEventListItem) {
return item.totalAmount ? `${item.totalAmount} ${item.currency}` : '-'
}
function formatVisibilityLabel(value: string) {
return value === 'ignored' ? '已忽略' : '重要'
}
@@ -117,23 +106,26 @@ onMounted(loadEvents)
</AdminPageHeader>
<!-- 筛选 -->
<el-card shadow="never" class="filter-card">
<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" placeholder="服务商，如 agiso" clearable @keyup.enter="loadEvents(1)" />
<el-input v-model="platform" placeholder="业务平台，如 xianyu / taobao" clearable @keyup.enter="loadEvents(1)" />
<el-select v-model="processed" placeholder="处理结果" clearable>
<el-input v-model="provider" class="filter-control" placeholder="服务商，如 agiso" clearable @keyup.enter="loadEvents(1)" />
<el-input v-model="platform" class="filter-control" placeholder="业务平台，如 xianyu / taobao" clearable @keyup.enter="loadEvents(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" placeholder="可见级别" clearable>
<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" placeholder="平台订单号" clearable @keyup.enter="loadEvents(1)" />
<el-input v-model="relatedOrderId" placeholder="后台订单 ID" clearable @keyup.enter="loadEvents(1)" />
<el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
<el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
</div>
<div class="filter-actions">
<span class="filter-hint">Webhook 事件已拆成来源、摘要、订单、验签、请求来源几个信息块，排查会更直观。</span>
<el-input v-model="platformOrderId" class="filter-control" placeholder="平台订单号" clearable @keyup.enter="loadEvents(1)" />
<el-input v-model="relatedOrderId" class="filter-control" placeholder="后台订单 ID" clearable @keyup.enter="loadEvents(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="loadEvents(1)">查询</el-button>
@@ -142,134 +134,89 @@ onMounted(loadEvents)
</el-card>
<!-- 摘要 -->
<div v-if="!loading && items.length > 0" class="summary-grid">
<el-card shadow="never" class="summary-card summary-card--success">
<span class="summary-label">当前页处理成功</span>
<strong class="summary-value">{{ summary.processedCount }}</strong>
<span class="summary-meta">已通过处理链路，通常无需人工介入</span>
</el-card>
<el-card shadow="never" class="summary-card summary-card--danger">
<span class="summary-label">当前页异常 / 失败</span>
<strong class="summary-value">{{ summary.failedCount }}</strong>
<span class="summary-meta">优先查看验签、处理错误和请求来源</span>
</el-card>
<el-card shadow="never" class="summary-card summary-card--primary">
<span class="summary-label">当前页重要事件</span>
<strong class="summary-value">{{ summary.importantCount }}</strong>
<span class="summary-meta">仅重要模式下更适合日常排查</span>
</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" style="margin-top: 16px" />
<!-- 列表 -->
<el-card shadow="never" class="table-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" />
</template>
<template v-else>
<div class="events-toolbar">
<div class="orders-toolbar">
<strong>Webhook 列表</strong>
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
</div>
<div class="event-list">
<article v-for="item in items" :key="item.eventId" class="event-card">
<div class="event-card-top">
<div class="event-identity">
<RouterLink :to="`/admin/webhook-events/${item.eventId}`" class="event-no">
#{{ item.eventId }} · {{ formatAdminWebhookEventType(item.eventType) }}
<el-table :data="items" stripe size="small" class="orders-table">
<el-table-column label="事件ID" width="100">
<template #default="{ row }">
<RouterLink :to="`/admin/webhook-events/${row.eventId}`" class="order-no">
#{{ 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 class="event-meta-row">
<span class="compact-chip">{{ item.provider || '-' }}</span>
<span class="compact-chip">{{ item.platform || '-' }}</span>
<span v-if="item.shopName || item.shopId" class="compact-chip compact-chip--muted">{{ item.shopName || item.shopId }}</span>
</div>
</div>
<div class="event-top-actions">
<span class="compact-chip compact-chip--muted">{{ formatVisibilityLabel(item.visibilityLevel) }}</span>
<el-button v-if="canReplay" :loading="actionLoadingId === item.eventId" size="small" @click="submitReplay(item)">重放</el-button>
</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>
</div>
<div class="event-grid">
<section class="event-section">
<span class="section-label">来源</span>
<div class="cell-stack">
<div class="cell-title">{{ item.provider }} / {{ item.platform }}</div>
<div v-if="item.platformRaw && item.platformRaw !== item.platform" class="cell-subtle">原始平台 {{ item.platformRaw }}</div>
<div class="meta-chip-row">
<span class="meta-chip">店铺 {{ item.shopName || item.shopId || '-' }}</span>
<span v-if="item.shopId" class="meta-chip">ID {{ item.shopId }}</span>
</div>
</div>
</section>
<section class="event-section">
<span class="section-label">事件摘要</span>
<div class="cell-stack">
<div class="cell-title">{{ formatAdminWebhookEventType(item.eventType) }}</div>
<div v-if="item.messageText" class="cell-subtle">{{ item.messageText }}</div>
<div class="meta-chip-row">
<span v-if="item.aopic" class="meta-chip">aopic {{ item.aopic }}</span>
<span v-if="item.itemCount" class="meta-chip">商品 {{ item.itemCount }}</span>
</div>
<div class="mono-inline event-key" :title="item.eventKey">Key: {{ item.eventKey }}</div>
</div>
</section>
<section class="event-section">
<span class="section-label">订单与店铺</span>
<div class="cell-stack">
<div class="cell-title">平台单 {{ item.platformOrderId || '-' }}</div>
<div class="cell-subtle">买家 {{ item.buyerName || item.buyerId || '-' }}</div>
<div class="cell-subtle">金额 {{ formatAmount(item) }}</div>
<div class="meta-chip-row">
<span class="meta-chip">
关联订单
<template v-if="item.relatedOrderId">
<RouterLink class="inline-link" :to="`/admin/orders/${item.relatedOrderId}`">{{ item.relatedOrderId }}</RouterLink>
</template>
<template v-else>-</template>
</span>
<span class="meta-chip">任务 {{ item.taskCount }}</span>
</div>
</div>
</section>
<section class="event-section">
<span class="section-label">验签与处理</span>
<div class="cell-stack">
<div class="tag-row">
<AdminStatusTag :status="item.signatureValid ? 'success' : 'failed'" />
<AdminStatusTag :status="item.processed ? 'success' : 'failed'" />
</div>
<div class="cell-subtle" :title="item.requestSign || '-'">签名 {{ item.requestSign || '-' }}</div>
<div v-if="item.processError" class="error-inline">{{ item.processError }}</div>
</div>
</section>
<section class="event-section">
<span class="section-label">请求来源</span>
<div class="cell-stack">
<div class="cell-title">{{ item.sourceHost || '-' }}</div>
<div class="cell-subtle">IP {{ item.sourceIp || '-' }}</div>
<div class="cell-subtle line-clamp-2">UA {{ item.userAgent || '-' }}</div>
<div class="cell-subtle">请求时间 {{ formatRequestTimestamp(item.requestTimestamp) }}</div>
</div>
</section>
<section class="event-section">
<span class="section-label">时间</span>
<div class="cell-stack">
<div class="cell-title">{{ formatAdminDateTime(item.createdAt) }}</div>
<div class="cell-subtle">事件 ID #{{ item.eventId }}</div>
</div>
</section>
</div>
</article>
</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"
@@ -289,87 +236,92 @@ onMounted(loadEvents)
.webhooks-page { display: grid; gap: 0; }
.total-badge {
min-height: 34px;
padding: 0 14px;
border-radius: var(--radius-full);
background: var(--bg-surface);
border: 1px solid var(--border-default);
color: var(--text-secondary);
font-size: var(--text-xs);
font-weight: 700;
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0 12px;
border: 1px solid rgba(37, 89, 167, 0.14);
border-radius: var(--radius-full);
background: rgba(37, 89, 167, 0.08);
color: #2559a7;
font-size: var(--text-xs);
font-weight: 700;
}
.filter-card { margin-top: var(--space-4); }
.section-card { margin-top: var(--space-4); }
.card-header { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-end; }
.card-title { color: var(--text-primary); font-size: var(--text-lg); font-weight: 600; }
.card-desc { color: var(--text-secondary); font-size: var(--text-sm); }
.filter-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-3);
align-items: center;
}
.filter-actions {
.filter-control { width: 100%; min-width: 0; }
.filter-buttons { display: flex; gap: 10px; min-width: 156px; justify-content: flex-end; }
.summary-strip {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-top: var(--space-3);
}
.filter-hint { color: var(--text-secondary); font-size: var(--text-xs); }
.filter-buttons { display: flex; gap: 10px; flex-shrink: 0; }
.summary-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
gap: var(--space-2);
min-height: 38px;
padding: 0;
margin-top: var(--space-4);
flex-wrap: wrap;
}
.summary-card { position: relative; overflow: hidden; }
.summary-card::after {
content: '';
position: absolute;
inset: auto -26px -26px auto;
width: 96px;
height: 96px;
.summary-title { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; margin-right: 2px; }
.summary-metric {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 28px;
padding: 0 10px;
border-radius: var(--radius-full);
opacity: 0.14;
border: 1px solid transparent;
color: var(--text-secondary);
background: #f8fafc;
font-size: var(--text-xs);
font-weight: 700;
}
.summary-card--success::after { background: var(--color-success); }
.summary-card--danger::after { background: var(--color-danger); }
.summary-card--primary::after { background: var(--color-primary); }
.summary-metric strong { color: var(--text-primary); font-size: var(--text-base); line-height: 1; }
.summary-metric[data-tone='success'] { color: var(--color-success-dark); background: var(--color-success-light); border-color: #bbf7d0; }
.summary-metric[data-tone='danger'] { color: var(--color-danger-dark); background: var(--color-danger-light); border-color: #fecaca; }
.summary-metric[data-tone='primary'] { color: var(--color-primary-dark); background: var(--color-primary-light); border-color: #bfdbfe; }
.summary-label { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; }
.summary-value { font-size: var(--text-3xl); line-height: 1; color: var(--text-primary); }
.summary-meta { color: var(--text-muted); font-size: var(--text-xs); }
.orders-toolbar { margin-bottom: var(--space-3); }
.orders-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
.orders-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
.table-card { margin-top: var(--space-4); overflow: visible; }
.events-toolbar { margin-bottom: var(--space-3); }
.events-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
.events-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
.event-list { display: grid; gap: var(--space-3); }
.event-card {
display: grid;
gap: 14px;
padding: 14px;
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
.orders-table {
width: 100%;
overflow: hidden;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
--el-table-bg-color: transparent;
--el-table-tr-bg-color: transparent;
--el-table-header-bg-color: rgba(239, 246, 255, 0.72);
--el-table-row-hover-bg-color: rgba(239, 246, 255, 0.72);
--el-table-border-color: rgba(86, 108, 138, 0.1);
}
.orders-table :deep(.el-table__inner-wrapper::before) { display: none; }
.orders-table :deep(th.el-table__cell) {
height: 42px;
background: var(--el-table-header-bg-color);
color: var(--text-secondary);
font-weight: 700;
}
.event-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.event-identity { min-width: 0; display: grid; gap: var(--space-2); }
.cell-stack { display: grid; gap: 5px; }
.event-no {
.order-no {
display: inline-block;
max-width: 100%;
font-size: var(--text-xl);
line-height: 1.1;
font-size: var(--text-base);
font-weight: 800;
color: var(--text-primary);
overflow: hidden;
@@ -377,17 +329,16 @@ onMounted(loadEvents)
white-space: nowrap;
text-decoration: none;
}
.event-no:hover { color: var(--color-primary-dark); }
.order-no:hover { color: var(--color-primary-dark); }
.event-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.event-top-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.cell-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.compact-chip {
display: inline-flex;
align-items: center;
min-height: 28px;
max-width: 100%;
padding: 0 10px;
min-height: 24px;
max-width: 240px;
padding: 0 9px;
border-radius: var(--radius-full);
background: #f4f7fb;
border: 1px solid var(--border-default);
@@ -397,69 +348,45 @@ onMounted(loadEvents)
}
.compact-chip--muted { color: var(--text-muted); }
.event-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
min-width: 0;
}
.cell-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 700; }
.cell-subline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; font-size: var(--text-xs); }
.event-section {
display: grid;
gap: 6px;
min-width: 0;
padding: 10px 11px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.78);
border: 1px solid var(--border-default);
}
.status-stack { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.status-stack :deep(.el-tag) { max-width: 100%; }
.section-label { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.error-inline { display: block; color: var(--color-danger); font-size: var(--text-xs); }
.cell-stack { display: grid; gap: 6px; min-width: 0; }
.cell-title { color: var(--text-primary); font-weight: 700; line-height: 1.4; word-break: break-word; }
.cell-subtle { color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.5; word-break: break-word; }
.inline-link { color: var(--color-primary-dark); font-size: var(--text-xs); font-weight: 700; text-decoration: none; }
.inline-link:hover { text-decoration: underline; }
.meta-chip-row, .tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.meta-chip {
.action-stack { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.detail-link {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 24px;
padding: 0 8px;
min-height: 28px;
padding: 0 10px;
border-radius: var(--radius-full);
color: #475467;
background: #f8fafc;
border: 1px solid rgba(148, 163, 184, 0.24);
border: 1px solid var(--border-default);
color: var(--color-primary-dark);
background: var(--color-primary-light);
font-size: var(--text-xs);
font-weight: 700;
text-decoration: none;
}
.inline-link { color: var(--color-primary-dark); font-weight: 700; text-decoration: none; }
.mono-inline { color: #344054; font-size: var(--text-xs); line-height: 1.6; font-family: var(--font-mono); overflow-wrap: anywhere; }
.event-key { color: var(--text-muted); font-size: 10px; line-height: 1.4; }
.error-inline { display: block; color: var(--color-danger); font-size: var(--text-xs); line-height: 1.5; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.detail-link:hover { border-color: var(--border-hover); background: #dbeafe; }
@media (max-width: 1200px) {
.filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.event-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filter-actions { flex-direction: column; align-items: flex-start; }
.filter-buttons { justify-content: flex-start; }
}
@media (max-width: 640px) {
.filter-grid,
.summary-grid,
.event-grid { grid-template-columns: 1fr; }
.filter-grid { grid-template-columns: 1fr; }
.filter-buttons { width: 100%; }
.filter-buttons :deep(.el-button) { flex: 1 1 auto; }
.event-card-top { flex-direction: column; align-items: flex-start; }
.event-no { font-size: 18px; }
.order-no { font-size: var(--text-base); }
}
</style>