优化了部分界面ui
This commit is contained in:
yml2213
Vendored
+7
@@ -13,13 +13,20 @@ declare module 'vue' {
|
|||||||
export interface GlobalComponents {
|
export interface GlobalComponents {
|
||||||
AdminPaginationBar: typeof import('./components/admin/AdminPaginationBar.vue')['default']
|
AdminPaginationBar: typeof import('./components/admin/AdminPaginationBar.vue')['default']
|
||||||
AdminStatusTag: typeof import('./components/admin/AdminStatusTag.vue')['default']
|
AdminStatusTag: typeof import('./components/admin/AdminStatusTag.vue')['default']
|
||||||
|
ElAlert: typeof import('element-plus/es')['ElAlert']
|
||||||
ElButton: typeof import('element-plus/es')['ElButton']
|
ElButton: typeof import('element-plus/es')['ElButton']
|
||||||
|
ElCard: typeof import('element-plus/es')['ElCard']
|
||||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||||
|
ElEmpty: typeof import('element-plus/es')['ElEmpty']
|
||||||
ElForm: typeof import('element-plus/es')['ElForm']
|
ElForm: typeof import('element-plus/es')['ElForm']
|
||||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||||
ElInput: typeof import('element-plus/es')['ElInput']
|
ElInput: typeof import('element-plus/es')['ElInput']
|
||||||
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
|
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
|
||||||
|
ElOption: typeof import('element-plus/es')['ElOption']
|
||||||
|
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||||
|
ElSpace: typeof import('element-plus/es')['ElSpace']
|
||||||
|
ElTag: typeof import('element-plus/es')['ElTag']
|
||||||
RouterLink: typeof import('vue-router')['RouterLink']
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
RouterView: typeof import('vue-router')['RouterView']
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
TencentAuthCard: typeof import('./components/tencent/TencentAuthCard.vue')['default']
|
TencentAuthCard: typeof import('./components/tencent/TencentAuthCard.vue')['default']
|
||||||
|
|||||||
@@ -95,12 +95,16 @@ function resolveLabel(status: string) {
|
|||||||
.status-tag {
|
.status-tag {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 28px;
|
min-height: 24px;
|
||||||
padding: 0 10px;
|
max-width: 100%;
|
||||||
|
padding: 4px 9px;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
font-size: 12px;
|
font-size: 11px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
|
line-height: 1.35;
|
||||||
|
white-space: normal;
|
||||||
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-tag[data-tone='success'] {
|
.status-tag[data-tone='success'] {
|
||||||
|
|||||||
@@ -95,44 +95,76 @@ onMounted(loadMessageDeliveries)
|
|||||||
<template>
|
<template>
|
||||||
<section class="admin-panel">
|
<section class="admin-panel">
|
||||||
<header class="panel-header">
|
<header class="panel-header">
|
||||||
<div>
|
<div class="panel-header-copy">
|
||||||
<h1>消息发送记录</h1>
|
<h1>消息发送记录</h1>
|
||||||
<p>查看领取链接消息是否真正发出、平台返回了什么、失败原因是什么。</p>
|
<p>查看领取链接消息是否真正发出、平台返回了什么、失败原因是什么。</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="panel-header-badge">共 {{ pagination.total }} 条记录</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section class="filter-bar">
|
<section class="filters-card">
|
||||||
<input v-model="provider" class="text-input" placeholder="服务商，如 agiso" />
|
<div class="filters-grid">
|
||||||
<input v-model="platform" class="text-input" placeholder="业务平台，如 xianyu" />
|
<label class="filter-field">
|
||||||
<select v-model="status" class="text-input select-input">
|
<span>服务商</span>
|
||||||
<option v-for="option in adminMessageDeliveryStatusOptions" :key="option.value" :value="option.value">
|
<input v-model="provider" class="text-input" placeholder="如 agiso" />
|
||||||
{{ option.label }}
|
</label>
|
||||||
</option>
|
<label class="filter-field">
|
||||||
</select>
|
<span>业务平台</span>
|
||||||
<input v-model="shopId" class="text-input" placeholder="店铺 ID" />
|
<input v-model="platform" class="text-input" placeholder="如 xianyu" />
|
||||||
</section>
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
<section class="filter-bar">
|
<span>发送状态</span>
|
||||||
<input v-model="platformOrderId" class="text-input" placeholder="平台订单号" />
|
<select v-model="status" class="text-input select-input">
|
||||||
<input v-model="taskNo" class="text-input" placeholder="任务号" />
|
<option v-for="option in adminMessageDeliveryStatusOptions" :key="option.value" :value="option.value">
|
||||||
<input v-model="dateFrom" class="text-input" type="date" placeholder="开始日期" />
|
{{ option.label }}
|
||||||
<input v-model="dateTo" class="text-input" type="date" placeholder="结束日期" />
|
</option>
|
||||||
<el-button round type="primary" @click="() => loadMessageDeliveries(1)">查询</el-button>
|
</select>
|
||||||
<el-button round @click="resetFilters">清空</el-button>
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
|
<span>店铺 ID</span>
|
||||||
|
<input v-model="shopId" class="text-input" placeholder="支持精确匹配" />
|
||||||
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
|
<span>平台订单号</span>
|
||||||
|
<input v-model="platformOrderId" class="text-input" placeholder="平台订单号" />
|
||||||
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
|
<span>任务号</span>
|
||||||
|
<input v-model="taskNo" class="text-input" placeholder="任务编号" />
|
||||||
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
|
<span>开始日期</span>
|
||||||
|
<input v-model="dateFrom" class="text-input" type="date" />
|
||||||
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
|
<span>结束日期</span>
|
||||||
|
<input v-model="dateTo" class="text-input" type="date" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="filters-actions">
|
||||||
|
<span class="filters-hint">消息体、Claim 链接、接口回执和失败原因都已经拆分展示，查问题会更直观。</span>
|
||||||
|
<div class="filters-button-row">
|
||||||
|
<el-button round @click="resetFilters">重置</el-button>
|
||||||
|
<el-button round type="primary" @click="() => loadMessageDeliveries(1)">查询</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section v-if="!loading && items.length > 0" class="summary-grid">
|
<section v-if="!loading && items.length > 0" class="summary-grid">
|
||||||
<article class="summary-card">
|
<article class="summary-card summary-card-success">
|
||||||
<span class="summary-label">当前页成功</span>
|
<span class="summary-label">当前页成功</span>
|
||||||
<strong class="summary-value">{{ summary.successCount }}</strong>
|
<strong class="summary-value">{{ summary.successCount }}</strong>
|
||||||
|
<span class="summary-meta">消息已被平台受理或发送完成</span>
|
||||||
</article>
|
</article>
|
||||||
<article class="summary-card">
|
<article class="summary-card summary-card-danger">
|
||||||
<span class="summary-label">当前页失败</span>
|
<span class="summary-label">当前页失败</span>
|
||||||
<strong class="summary-value">{{ summary.failedCount }}</strong>
|
<strong class="summary-value">{{ summary.failedCount }}</strong>
|
||||||
|
<span class="summary-meta">优先查看失败原因和接口返回</span>
|
||||||
</article>
|
</article>
|
||||||
<article class="summary-card">
|
<article class="summary-card summary-card-warning">
|
||||||
<span class="summary-label">当前页等待</span>
|
<span class="summary-label">当前页等待</span>
|
||||||
<strong class="summary-value">{{ summary.pendingCount }}</strong>
|
<strong class="summary-value">{{ summary.pendingCount }}</strong>
|
||||||
|
<span class="summary-meta">等待发送或等待外部回调更新</span>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -140,31 +172,33 @@ onMounted(loadMessageDeliveries)
|
|||||||
<div v-if="loading" class="empty-block">消息发送记录加载中</div>
|
<div v-if="loading" class="empty-block">消息发送记录加载中</div>
|
||||||
<div v-else-if="items.length === 0" class="empty-block">当前筛选下还没有消息发送记录。</div>
|
<div v-else-if="items.length === 0" class="empty-block">当前筛选下还没有消息发送记录。</div>
|
||||||
|
|
||||||
<div v-else class="table-card">
|
<div v-else class="records-shell">
|
||||||
<table class="data-table">
|
<div class="records-toolbar">
|
||||||
<thead>
|
<div>
|
||||||
<tr>
|
<strong>发送明细</strong>
|
||||||
<th>ID</th>
|
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
|
||||||
<th>来源</th>
|
</div>
|
||||||
<th>订单 / 任务</th>
|
</div>
|
||||||
<th>发送状态</th>
|
|
||||||
<th>消息内容</th>
|
<div class="record-list">
|
||||||
<th>Claim 链接</th>
|
<article v-for="item in items" :key="item.deliveryId" class="record-card">
|
||||||
<th>接口结果</th>
|
<div class="record-top">
|
||||||
<th>时间</th>
|
<div class="record-identity">
|
||||||
</tr>
|
<span class="record-id">#{{ item.deliveryId }}</span>
|
||||||
</thead>
|
<div class="record-source-line">
|
||||||
<tbody>
|
<span class="source-pill">{{ item.provider || '-' }}</span>
|
||||||
<tr v-for="item in items" :key="item.deliveryId">
|
<span class="source-separator">/</span>
|
||||||
<td>#{{ item.deliveryId }}</td>
|
<span class="source-pill">{{ item.platform || '-' }}</span>
|
||||||
<td>
|
<span class="source-chip">{{ item.shopName || item.shopId || '-' }}</span>
|
||||||
<div class="cell-stack">
|
<span class="source-chip source-chip--muted">{{ item.channel || '-' }}</span>
|
||||||
<div class="cell-title">{{ item.provider || '-' }} / {{ item.platform || '-' }}</div>
|
|
||||||
<div class="cell-subtle">{{ item.shopName || item.shopId || '-' }}</div>
|
|
||||||
<div class="cell-subtle">{{ item.channel || '-' }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</div>
|
||||||
<td>
|
<AdminStatusTag :status="item.status" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="record-grid">
|
||||||
|
<section class="record-section">
|
||||||
|
<span class="section-label">订单 / 任务</span>
|
||||||
<div class="cell-stack">
|
<div class="cell-stack">
|
||||||
<div class="cell-title">{{ item.platformOrderId || '-' }}</div>
|
<div class="cell-title">{{ item.platformOrderId || '-' }}</div>
|
||||||
<div class="meta-chip-row">
|
<div class="meta-chip-row">
|
||||||
@@ -181,43 +215,40 @@ onMounted(loadMessageDeliveries)
|
|||||||
<AdminStatusTag :status="item.taskStatus" />
|
<AdminStatusTag :status="item.taskStatus" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
<td>
|
|
||||||
<div class="cell-stack">
|
<section class="record-section record-section-message">
|
||||||
<div class="tag-row">
|
<span class="section-label">消息内容</span>
|
||||||
<AdminStatusTag :status="item.status" />
|
|
||||||
</div>
|
|
||||||
<div class="cell-subtle">HTTP {{ item.responseStatus || 0 }}</div>
|
|
||||||
<div v-if="item.errorMessage" class="error-inline">{{ item.errorMessage }}</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div class="message-cell" :title="item.messageContent">
|
<div class="message-cell" :title="item.messageContent">
|
||||||
{{ item.messageContent || '-' }}
|
{{ item.messageContent || '-' }}
|
||||||
</div>
|
</div>
|
||||||
</td>
|
<a v-if="item.claimUrl" class="claim-link claim-link-button" :href="item.claimUrl" target="_blank" rel="noreferrer">
|
||||||
<td>
|
打开 Claim 链接
|
||||||
<a v-if="item.claimUrl" class="claim-link" :href="item.claimUrl" target="_blank" rel="noreferrer">
|
|
||||||
打开链接
|
|
||||||
</a>
|
</a>
|
||||||
<span v-else>-</span>
|
</section>
|
||||||
</td>
|
|
||||||
<td>
|
<section class="record-section">
|
||||||
|
<span class="section-label">接口结果</span>
|
||||||
<div class="cell-stack">
|
<div class="cell-stack">
|
||||||
<div class="cell-title">{{ formatResponse(item) }}</div>
|
<div class="cell-title">{{ formatResponse(item) }}</div>
|
||||||
<div v-if="item.requestUrl" class="cell-subtle">{{ item.requestUrl }}</div>
|
<div class="cell-subtle">HTTP {{ item.responseStatus || 0 }}</div>
|
||||||
|
<div v-if="item.requestUrl" class="cell-subtle cell-subtle-break">{{ item.requestUrl }}</div>
|
||||||
|
<div v-if="item.errorMessage" class="error-inline">{{ item.errorMessage }}</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
<td>
|
|
||||||
|
<section class="record-section">
|
||||||
|
<span class="section-label">时间</span>
|
||||||
<div class="cell-stack">
|
<div class="cell-stack">
|
||||||
<div class="cell-title">创建 {{ formatAdminDateTime(item.createdAt) }}</div>
|
<div class="cell-title">创建 {{ formatAdminDateTime(item.createdAt) }}</div>
|
||||||
<div class="cell-subtle">发送 {{ formatAdminDateTime(item.sentAt) }}</div>
|
<div class="cell-subtle">发送 {{ formatAdminDateTime(item.sentAt) }}</div>
|
||||||
<div class="cell-subtle">更新 {{ formatAdminDateTime(item.updatedAt) }}</div>
|
<div class="cell-subtle">更新 {{ formatAdminDateTime(item.updatedAt) }}</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
</tr>
|
</div>
|
||||||
</tbody>
|
</article>
|
||||||
</table>
|
</div>
|
||||||
|
|
||||||
<AdminPaginationBar
|
<AdminPaginationBar
|
||||||
:page="pagination.page"
|
:page="pagination.page"
|
||||||
:page-size="pagination.pageSize"
|
:page-size="pagination.pageSize"
|
||||||
@@ -232,61 +263,158 @@ onMounted(loadMessageDeliveries)
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.admin-panel {
|
.admin-panel {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: space-between;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.panel-header-copy {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.panel-header h1 {
|
.panel-header h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
font-size: 34px;
|
||||||
|
line-height: 1.05;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
color: #1d3555;
|
color: #1d3555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-header p {
|
.panel-header p {
|
||||||
margin: 8px 0 0;
|
margin: 6px 0 0;
|
||||||
|
font-size: 14px;
|
||||||
color: #64748b;
|
color: #64748b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-bar {
|
.panel-header-badge {
|
||||||
display: flex;
|
flex: 0 0 auto;
|
||||||
gap: 12px;
|
min-height: 34px;
|
||||||
|
padding: 0 14px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.82);
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.12);
|
||||||
|
color: #38506e;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.filters-card,
|
||||||
|
.summary-card,
|
||||||
|
.records-shell,
|
||||||
|
.empty-block,
|
||||||
|
.error-copy {
|
||||||
|
padding: 16px 18px;
|
||||||
|
border-radius: 18px;
|
||||||
|
background: rgba(255, 255, 255, 0.94);
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.1);
|
||||||
|
box-shadow: 0 14px 36px rgba(30, 49, 78, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-field {
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-field span {
|
||||||
|
color: #5d6f87;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-hint {
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-button-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.summary-grid {
|
.summary-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-card,
|
|
||||||
.table-card,
|
|
||||||
.empty-block,
|
|
||||||
.error-copy {
|
|
||||||
padding: 18px;
|
|
||||||
border-radius: 20px;
|
|
||||||
background: rgba(255, 255, 255, 0.94);
|
|
||||||
border: 1px solid rgba(86, 108, 138, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-card {
|
.summary-card {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 8px;
|
gap: 6px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: auto -26px -26px auto;
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
border-radius: 999px;
|
||||||
|
opacity: 0.14;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card-success::after {
|
||||||
|
background: #12b76a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card-danger::after {
|
||||||
|
background: #f04438;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card-warning::after {
|
||||||
|
background: #f79009;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-label {
|
.summary-label {
|
||||||
color: #2559a7;
|
color: #51647d;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-value {
|
.summary-value {
|
||||||
font-size: 30px;
|
font-size: 34px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
color: #1d3555;
|
color: #1d3555;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.summary-meta {
|
||||||
|
color: #70829a;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.error-copy {
|
.error-copy {
|
||||||
color: #b42318;
|
color: #b42318;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-block {
|
.empty-block {
|
||||||
@@ -295,55 +423,173 @@ onMounted(loadMessageDeliveries)
|
|||||||
|
|
||||||
.text-input {
|
.text-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 42px;
|
min-height: 38px;
|
||||||
padding: 0 14px;
|
padding: 0 12px;
|
||||||
border-radius: 14px;
|
border-radius: 12px;
|
||||||
border: 1px solid rgba(86, 108, 138, 0.18);
|
border: 1px solid rgba(86, 108, 138, 0.18);
|
||||||
background: rgba(255, 255, 255, 0.94);
|
background: rgba(255, 255, 255, 0.94);
|
||||||
|
color: #24364e;
|
||||||
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-input {
|
.select-input {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-table {
|
.records-shell {
|
||||||
width: 100%;
|
display: grid;
|
||||||
border-collapse: collapse;
|
gap: 14px;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-table th,
|
.records-toolbar strong {
|
||||||
.data-table td {
|
display: block;
|
||||||
padding: 12px 10px;
|
color: #1f324a;
|
||||||
text-align: left;
|
font-size: 14px;
|
||||||
border-bottom: 1px solid rgba(86, 108, 138, 0.08);
|
|
||||||
color: #334155;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-table th {
|
.records-toolbar span {
|
||||||
|
display: block;
|
||||||
|
margin-top: 4px;
|
||||||
color: #64748b;
|
color: #64748b;
|
||||||
font-size: 13px;
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
padding: 14px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-identity {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-id {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
width: fit-content;
|
||||||
|
min-height: 24px;
|
||||||
|
padding: 0 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #eef4ff;
|
||||||
|
color: #2456a2;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-source-line {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source-pill,
|
||||||
|
.source-chip {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 28px;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 0 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source-pill {
|
||||||
|
background: #f1f6ff;
|
||||||
|
color: #2456a2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source-chip {
|
||||||
|
background: #f4f7fb;
|
||||||
|
color: #44556c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source-chip--muted {
|
||||||
|
color: #6b7c93;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source-separator {
|
||||||
|
color: #8b9cb2;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-section {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
min-width: 0;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 14px;
|
||||||
|
background: rgba(255, 255, 255, 0.78);
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-section-message {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-label {
|
||||||
|
color: #71839b;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell-stack {
|
.cell-stack {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell-title {
|
.cell-title {
|
||||||
color: #1d3555;
|
color: #1d3555;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell-subtle {
|
.cell-subtle {
|
||||||
color: #64748b;
|
color: #64748b;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell-subtle-break {
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-cell {
|
.message-cell {
|
||||||
max-width: 360px;
|
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
color: #334155;
|
||||||
|
font-size: 13px;
|
||||||
|
min-height: 72px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.claim-link,
|
.claim-link,
|
||||||
@@ -352,6 +598,20 @@ onMounted(loadMessageDeliveries)
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.claim-link-button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: fit-content;
|
||||||
|
min-height: 34px;
|
||||||
|
padding: 0 14px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #eff6ff;
|
||||||
|
border: 1px solid rgba(23, 92, 211, 0.16);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
.meta-chip-row,
|
.meta-chip-row,
|
||||||
.tag-row {
|
.tag-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -375,27 +635,63 @@ onMounted(loadMessageDeliveries)
|
|||||||
.error-inline {
|
.error-inline {
|
||||||
color: #b42318;
|
color: #b42318;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
.filters-grid {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1180px) {
|
@media (max-width: 1180px) {
|
||||||
.summary-grid {
|
.summary-grid {
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.record-section-message {
|
||||||
|
grid-column: span 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 980px) {
|
@media (max-width: 980px) {
|
||||||
.filter-bar,
|
.panel-header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-grid,
|
||||||
.summary-grid {
|
.summary-grid {
|
||||||
grid-template-columns: minmax(0, 1fr);
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
display: grid;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-card {
|
.filters-actions {
|
||||||
overflow-x: auto;
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.panel-header h1 {
|
||||||
|
font-size: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-table {
|
.filters-grid,
|
||||||
min-width: 1200px;
|
.summary-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-button-row {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-button-row :deep(.el-button) {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-top {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref } from 'vue'
|
import { computed, onMounted, ref } from 'vue'
|
||||||
|
|
||||||
import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
|
import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
|
||||||
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
|
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
|
||||||
@@ -22,6 +22,12 @@ const pagination = ref<AdminPagination>({
|
|||||||
total: 0,
|
total: 0,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const summary = computed(() => ({
|
||||||
|
paidCount: items.value.filter((item) => item.payStatus === 'paid').length,
|
||||||
|
refundedCount: items.value.filter((item) => item.payStatus === 'refunded').length,
|
||||||
|
bindingReadyCount: items.value.filter((item) => item.completedBindingTaskCount > 0).length,
|
||||||
|
}))
|
||||||
|
|
||||||
async function loadOrders(page = pagination.value.page) {
|
async function loadOrders(page = pagination.value.page) {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
errorMessage.value = ''
|
errorMessage.value = ''
|
||||||
@@ -45,7 +51,14 @@ async function loadOrders(page = pagination.value.page) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(loadOrders)
|
function resetFilters() {
|
||||||
|
platformOrderId.value = ''
|
||||||
|
payStatus.value = ''
|
||||||
|
skuCode.value = ''
|
||||||
|
dateFrom.value = ''
|
||||||
|
dateTo.value = ''
|
||||||
|
void loadOrders(1)
|
||||||
|
}
|
||||||
|
|
||||||
function resolveBuyerLabel(item: AdminOrderListItem) {
|
function resolveBuyerLabel(item: AdminOrderListItem) {
|
||||||
return item.buyerName || item.buyerId || '未识别'
|
return item.buyerName || item.buyerId || '未识别'
|
||||||
@@ -62,103 +75,168 @@ function resolveShopLabel(item: AdminOrderListItem) {
|
|||||||
function resolveItemSummary(item: AdminOrderListItem) {
|
function resolveItemSummary(item: AdminOrderListItem) {
|
||||||
return item.itemSummary || '未识别商品'
|
return item.itemSummary || '未识别商品'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function resolveBindingTone(completedCount: number, totalCount: number) {
|
||||||
|
if (completedCount <= 0) {
|
||||||
|
return 'warning'
|
||||||
|
}
|
||||||
|
|
||||||
|
return completedCount === totalCount ? 'success' : 'primary'
|
||||||
|
}
|
||||||
|
|
||||||
|
function resolveBindingSummary(item: AdminOrderListItem) {
|
||||||
|
return `共 ${item.totalBindingCount} 条 · 预占 ${item.reservedBindingCount} · 已消耗 ${item.consumedBindingCount} · 已释放 ${item.releasedBindingCount}`
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(loadOrders)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="admin-panel">
|
<section class="admin-panel">
|
||||||
<header class="panel-header">
|
<header class="panel-header">
|
||||||
<div>
|
<div class="panel-header-copy">
|
||||||
<h1>订单列表</h1>
|
<h1>订单列表</h1>
|
||||||
<p>查看平台订单、支付状态和对应任务数量。</p>
|
<p>查看平台订单、支付状态、商品摘要和对应任务推进情况。</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="panel-header-badge">共 {{ pagination.total }} 条订单</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section class="filter-bar">
|
<section class="filters-card">
|
||||||
<input v-model="platformOrderId" class="text-input" placeholder="筛选订单号" />
|
<div class="filters-grid">
|
||||||
<select v-model="payStatus" class="text-input select-input">
|
<label class="filter-field">
|
||||||
<option v-for="option in adminPayStatusOptions" :key="option.value" :value="option.value">
|
<span>平台订单号</span>
|
||||||
{{ option.label }}
|
<input v-model="platformOrderId" class="text-input" placeholder="支持模糊匹配" />
|
||||||
</option>
|
</label>
|
||||||
</select>
|
<label class="filter-field">
|
||||||
<input v-model="skuCode" class="text-input" placeholder="SKU，如 dnf-cdk-a" />
|
<span>支付状态</span>
|
||||||
|
<select v-model="payStatus" class="text-input select-input">
|
||||||
|
<option v-for="option in adminPayStatusOptions" :key="option.value" :value="option.value">
|
||||||
|
{{ option.label }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
|
<span>SKU</span>
|
||||||
|
<input v-model="skuCode" class="text-input" placeholder="如 dnf-cdk-a" />
|
||||||
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
|
<span>开始日期</span>
|
||||||
|
<input v-model="dateFrom" class="text-input" type="date" />
|
||||||
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
|
<span>结束日期</span>
|
||||||
|
<input v-model="dateTo" class="text-input" type="date" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="filters-actions">
|
||||||
|
<span class="filters-hint">订单信息、支付状态、绑定完成度和金额时间已拆成独立信息块，更方便排查。</span>
|
||||||
|
<div class="filters-button-row">
|
||||||
|
<el-button round @click="resetFilters">重置</el-button>
|
||||||
|
<el-button round type="primary" @click="() => loadOrders(1)">查询</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="filter-bar">
|
<section v-if="!loading && items.length > 0" class="summary-grid">
|
||||||
<input v-model="dateFrom" class="text-input" type="date" placeholder="开始日期" />
|
<article class="summary-card summary-card-success">
|
||||||
<input v-model="dateTo" class="text-input" type="date" placeholder="结束日期" />
|
<span class="summary-label">当前页已支付</span>
|
||||||
<el-button round type="primary" @click="() => loadOrders()">查询</el-button>
|
<strong class="summary-value">{{ summary.paidCount }}</strong>
|
||||||
|
<span class="summary-meta">已完成付款，可继续跟进交付</span>
|
||||||
|
</article>
|
||||||
|
<article class="summary-card summary-card-danger">
|
||||||
|
<span class="summary-label">当前页已退款</span>
|
||||||
|
<strong class="summary-value">{{ summary.refundedCount }}</strong>
|
||||||
|
<span class="summary-meta">需要重点确认订单状态和任务收口</span>
|
||||||
|
</article>
|
||||||
|
<article class="summary-card summary-card-primary">
|
||||||
|
<span class="summary-label">当前页有完整绑定</span>
|
||||||
|
<strong class="summary-value">{{ summary.bindingReadyCount }}</strong>
|
||||||
|
<span class="summary-meta">至少有 1 个任务已完成完整绑定</span>
|
||||||
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
|
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
|
||||||
<div v-if="loading" class="empty-block">订单列表加载中</div>
|
<div v-if="loading" class="empty-block">订单列表加载中</div>
|
||||||
|
<div v-else-if="items.length === 0" class="empty-block">当前筛选条件下暂无订单</div>
|
||||||
|
|
||||||
<div v-else class="table-card">
|
<div v-else class="orders-shell">
|
||||||
<table class="data-table">
|
<div class="orders-toolbar">
|
||||||
<thead>
|
<div>
|
||||||
<tr>
|
<strong>订单明细</strong>
|
||||||
<th>订单信息</th>
|
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
|
||||||
<th>平台 / 店铺</th>
|
</div>
|
||||||
<th>商品摘要</th>
|
</div>
|
||||||
<th>订单进度</th>
|
|
||||||
<th>金额 / 时间</th>
|
<div class="order-list">
|
||||||
<th>任务进度</th>
|
<article v-for="item in items" :key="item.orderId" class="order-card">
|
||||||
</tr>
|
<div class="order-card-top">
|
||||||
</thead>
|
<div class="order-identity">
|
||||||
<tbody>
|
<RouterLink :to="`/admin/orders/${item.orderId}`" class="cell-link order-no" :title="item.platformOrderId">
|
||||||
<tr v-for="item in items" :key="item.orderId">
|
{{ item.platformOrderId }}
|
||||||
<td>
|
</RouterLink>
|
||||||
<div class="cell-stack">
|
<div class="order-meta-row">
|
||||||
<RouterLink :to="`/admin/orders/${item.orderId}`" class="primary-link">{{ item.platformOrderId }}</RouterLink>
|
<span class="compact-chip">{{ item.platform || '-' }}</span>
|
||||||
<span class="cell-main">{{ resolveBuyerLabel(item) }}</span>
|
<span class="compact-chip">{{ resolveShopLabel(item) }}</span>
|
||||||
<span class="cell-sub">联系方式：{{ resolveContactLabel(item) }}</span>
|
<span class="compact-chip compact-chip--muted">买家 {{ resolveBuyerLabel(item) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</div>
|
||||||
<td>
|
<AdminStatusTag :status="item.payStatus" />
|
||||||
<div class="cell-stack">
|
</div>
|
||||||
<span class="cell-main">{{ item.platform }}</span>
|
|
||||||
<span class="cell-sub">{{ resolveShopLabel(item) }}</span>
|
<div class="order-grid">
|
||||||
|
<section class="order-section">
|
||||||
|
<span class="section-label">订单信息</span>
|
||||||
|
<div class="info-cell">
|
||||||
|
<span class="info-title">{{ resolveBuyerLabel(item) }}</span>
|
||||||
|
<span class="info-subline">联系方式 {{ resolveContactLabel(item) }}</span>
|
||||||
|
<span class="info-subline">店铺 {{ resolveShopLabel(item) }}</span>
|
||||||
|
<span class="info-subline">更新时间 {{ formatAdminDateTime(item.updatedAt) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
<td>
|
|
||||||
<div class="cell-stack">
|
<section class="order-section">
|
||||||
<span class="cell-main">{{ resolveItemSummary(item) }}</span>
|
<span class="section-label">商品摘要</span>
|
||||||
<span class="cell-sub">{{ item.itemCount }} 项，合计 {{ item.totalQuantity }} 件</span>
|
<div class="info-cell">
|
||||||
|
<span class="info-title" :title="resolveItemSummary(item)">{{ resolveItemSummary(item) }}</span>
|
||||||
|
<span class="info-subline">{{ item.itemCount }} 项，合计 {{ item.totalQuantity }} 件</span>
|
||||||
|
<span class="info-subline" :title="resolveBindingSummary(item)">{{ resolveBindingSummary(item) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
<td>
|
|
||||||
|
<section class="order-section">
|
||||||
|
<span class="section-label">订单进度</span>
|
||||||
<div class="status-stack">
|
<div class="status-stack">
|
||||||
<AdminStatusTag :status="item.payStatus" />
|
<AdminStatusTag :status="item.payStatus" />
|
||||||
<AdminStatusTag :status="item.orderStatus" />
|
<AdminStatusTag :status="item.orderStatus" />
|
||||||
<AdminStatusTag :status="item.systemBindingStatus" />
|
<AdminStatusTag :status="item.systemBindingStatus" />
|
||||||
<AdminStatusTag :status="item.userBindingStatus" />
|
<AdminStatusTag :status="item.userBindingStatus" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
<td>
|
|
||||||
<div class="cell-stack">
|
<section class="order-section">
|
||||||
<span class="cell-main amount-text">{{ item.totalAmount }} {{ item.currency }}</span>
|
<span class="section-label">金额 / 时间</span>
|
||||||
<span class="cell-sub">支付：{{ formatAdminDateTime(item.paidAt) }}</span>
|
<div class="info-cell">
|
||||||
<span class="cell-sub">创建：{{ formatAdminDateTime(item.createdAt) }}</span>
|
<span class="info-title amount-text">{{ item.totalAmount }} {{ item.currency }}</span>
|
||||||
|
<span class="info-subline">支付 {{ formatAdminDateTime(item.paidAt) }}</span>
|
||||||
|
<span class="info-subline">创建 {{ formatAdminDateTime(item.createdAt) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
<td>
|
|
||||||
<div class="progress-stack">
|
<section class="order-section">
|
||||||
<span
|
<span class="section-label">任务进度</span>
|
||||||
class="progress-chip"
|
<div class="task-progress-inline">
|
||||||
:data-tone="item.completedBindingTaskCount > 0 ? (item.completedBindingTaskCount === item.taskCount ? 'success' : 'primary') : 'warning'"
|
<span class="progress-chip" :data-tone="resolveBindingTone(item.completedBindingTaskCount, item.taskCount)">
|
||||||
>
|
|
||||||
完整绑定 {{ item.completedBindingTaskCount }}/{{ item.taskCount }}
|
完整绑定 {{ item.completedBindingTaskCount }}/{{ item.taskCount }}
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span class="progress-chip" :data-tone="resolveBindingTone(item.systemBoundTaskCount, item.taskCount)">
|
||||||
class="progress-chip"
|
|
||||||
:data-tone="item.systemBoundTaskCount > 0 ? (item.systemBoundTaskCount === item.taskCount ? 'success' : 'primary') : 'warning'"
|
|
||||||
>
|
|
||||||
系统绑定 {{ item.systemBoundTaskCount }}/{{ item.taskCount }}
|
系统绑定 {{ item.systemBoundTaskCount }}/{{ item.taskCount }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
</tr>
|
</div>
|
||||||
</tbody>
|
</article>
|
||||||
</table>
|
</div>
|
||||||
|
|
||||||
<AdminPaginationBar
|
<AdminPaginationBar
|
||||||
:page="pagination.page"
|
:page="pagination.page"
|
||||||
:page-size="pagination.pageSize"
|
:page-size="pagination.pageSize"
|
||||||
@@ -171,40 +249,340 @@ function resolveItemSummary(item: AdminOrderListItem) {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.status-stack {
|
.admin-panel {
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 6px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell-stack {
|
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 4px;
|
gap: 14px;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary-link,
|
.panel-header {
|
||||||
.cell-main {
|
display: flex;
|
||||||
font-weight: 600;
|
align-items: flex-end;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header-copy {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 34px;
|
||||||
|
line-height: 1.05;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
color: #1d3555;
|
color: #1d3555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell-sub {
|
.panel-header p {
|
||||||
|
margin: 6px 0 0;
|
||||||
|
font-size: 14px;
|
||||||
color: #64748b;
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header-badge {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
min-height: 34px;
|
||||||
|
padding: 0 14px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.82);
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.12);
|
||||||
|
color: #38506e;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-card,
|
||||||
|
.summary-card,
|
||||||
|
.orders-shell,
|
||||||
|
.empty-block,
|
||||||
|
.error-copy {
|
||||||
|
padding: 16px 18px;
|
||||||
|
border-radius: 18px;
|
||||||
|
background: rgba(255, 255, 255, 0.94);
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.1);
|
||||||
|
box-shadow: 0 14px 36px rgba(30, 49, 78, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-field {
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-field span {
|
||||||
|
color: #5d6f87;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-hint {
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-button-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-input {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 38px;
|
||||||
|
padding: 0 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.18);
|
||||||
|
background: rgba(255, 255, 255, 0.94);
|
||||||
|
color: #24364e;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select-input {
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: auto -26px -26px auto;
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
border-radius: 999px;
|
||||||
|
opacity: 0.14;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card-success::after {
|
||||||
|
background: #12b76a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card-danger::after {
|
||||||
|
background: #f04438;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card-primary::after {
|
||||||
|
background: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-label {
|
||||||
|
color: #51647d;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-value {
|
||||||
|
font-size: 34px;
|
||||||
|
line-height: 1;
|
||||||
|
color: #1d3555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-meta {
|
||||||
|
color: #70829a;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-copy {
|
||||||
|
margin: 0;
|
||||||
|
color: #b42318;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-block {
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orders-shell {
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orders-toolbar strong {
|
||||||
|
display: block;
|
||||||
|
color: #1f324a;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orders-toolbar span {
|
||||||
|
display: block;
|
||||||
|
margin-top: 4px;
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
padding: 14px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-card-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-identity {
|
||||||
|
min-width: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell-link {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell-link:hover {
|
||||||
|
color: #175cd3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-no {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 100%;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.1;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #132238;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-meta-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-chip {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 28px;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 0 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #f4f7fb;
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.1);
|
||||||
|
color: #44556c;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-chip--muted {
|
||||||
|
color: #6b7c93;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-section {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
min-width: 0;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 14px;
|
||||||
|
background: rgba(255, 255, 255, 0.78);
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-label {
|
||||||
|
color: #71839b;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-cell {
|
||||||
|
display: grid;
|
||||||
|
gap: 5px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-title {
|
||||||
|
display: block;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #101828;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-subline {
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #475467;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.amount-text {
|
.amount-text {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-stack {
|
.status-stack {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 6px;
|
gap: 8px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.task-progress-inline {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.progress-chip {
|
.progress-chip {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -235,75 +613,59 @@ function resolveItemSummary(item: AdminOrderListItem) {
|
|||||||
border-color: #fedf89;
|
border-color: #fedf89;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-table td {
|
@media (max-width: 1400px) {
|
||||||
vertical-align: top;
|
.filters-grid {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
|
||||||
<style scoped>
|
@media (max-width: 1180px) {
|
||||||
.admin-panel {
|
.summary-grid {
|
||||||
display: grid;
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
gap: 16px;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-header h1 {
|
@media (max-width: 980px) {
|
||||||
margin: 0;
|
.panel-header {
|
||||||
color: #1d3555;
|
flex-direction: column;
|
||||||
}
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
.panel-header p {
|
.filters-grid {
|
||||||
margin: 8px 0 0;
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
color: #64748b;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.filter-bar {
|
.filters-actions {
|
||||||
display: flex;
|
flex-direction: column;
|
||||||
gap: 12px;
|
align-items: flex-start;
|
||||||
align-items: center;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-input {
|
@media (max-width: 720px) {
|
||||||
width: min(360px, 100%);
|
.panel-header h1 {
|
||||||
min-height: 42px;
|
font-size: 28px;
|
||||||
padding: 0 14px;
|
}
|
||||||
border-radius: 14px;
|
|
||||||
border: 1px solid rgba(86, 108, 138, 0.18);
|
|
||||||
background: rgba(255, 255, 255, 0.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-input {
|
.filters-grid,
|
||||||
appearance: none;
|
.summary-grid {
|
||||||
}
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
.table-card,
|
.filters-button-row {
|
||||||
.empty-block,
|
width: 100%;
|
||||||
.error-copy {
|
}
|
||||||
padding: 18px;
|
|
||||||
border-radius: 20px;
|
|
||||||
background: rgba(255, 255, 255, 0.94);
|
|
||||||
border: 1px solid rgba(86, 108, 138, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-copy {
|
.filters-button-row :deep(.el-button) {
|
||||||
color: #b42318;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-table th,
|
.order-card-top {
|
||||||
.data-table td {
|
flex-direction: column;
|
||||||
padding: 12px 10px;
|
align-items: flex-start;
|
||||||
text-align: left;
|
}
|
||||||
border-bottom: 1px solid rgba(86, 108, 138, 0.08);
|
|
||||||
color: #334155;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-table th {
|
.order-no {
|
||||||
color: #64748b;
|
font-size: 18px;
|
||||||
font-size: 13px;
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
|
|
||||||
import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
|
import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
|
||||||
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
|
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
|
||||||
@@ -28,7 +28,6 @@ const dateFrom = ref('')
|
|||||||
const dateTo = ref('')
|
const dateTo = ref('')
|
||||||
const items = ref<AdminTaskListItem[]>([])
|
const items = ref<AdminTaskListItem[]>([])
|
||||||
const lastClaimUrl = ref('')
|
const lastClaimUrl = ref('')
|
||||||
const openedActionTaskId = ref<number | null>(null)
|
|
||||||
const pagination = ref<AdminPagination>({
|
const pagination = ref<AdminPagination>({
|
||||||
page: 1,
|
page: 1,
|
||||||
pageSize: 20,
|
pageSize: 20,
|
||||||
@@ -79,25 +78,8 @@ function formatBindingCountSummary(item: AdminTaskListItem) {
|
|||||||
return `共 ${summary.totalBindingCount} 条 · 预占 ${summary.reservedBindingCount} · 已消费 ${summary.consumedBindingCount} · 已释放 ${summary.releasedBindingCount}`
|
return `共 ${summary.totalBindingCount} 条 · 预占 ${summary.reservedBindingCount} · 已消费 ${summary.consumedBindingCount} · 已释放 ${summary.releasedBindingCount}`
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeActionMenu() {
|
|
||||||
openedActionTaskId.value = null
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleActionMenu(taskId: number) {
|
|
||||||
openedActionTaskId.value = openedActionTaskId.value === taskId ? null : taskId
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDocumentClick() {
|
|
||||||
closeActionMenu()
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
void loadTasks()
|
void loadTasks()
|
||||||
document.addEventListener('click', handleDocumentClick)
|
|
||||||
})
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
document.removeEventListener('click', handleDocumentClick)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
async function runAction(
|
async function runAction(
|
||||||
@@ -124,7 +106,6 @@ async function runAction(
|
|||||||
lastClaimUrl.value = response.data.claimUrl
|
lastClaimUrl.value = response.data.claimUrl
|
||||||
}
|
}
|
||||||
showSuccess(successMessage)
|
showSuccess(successMessage)
|
||||||
closeActionMenu()
|
|
||||||
await loadTasks()
|
await loadTasks()
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
showError(error instanceof Error ? error.message : '操作失败')
|
showError(error instanceof Error ? error.message : '操作失败')
|
||||||
@@ -166,73 +147,105 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
|
|||||||
`确认关闭任务 ${item.taskNo} 吗？关闭后不会自动继续推进。`,
|
`确认关闭任务 ${item.taskNo} 吗？关闭后不会自动继续推进。`,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function resetFilters() {
|
||||||
|
status.value = ''
|
||||||
|
taskNo.value = ''
|
||||||
|
platformOrderId.value = ''
|
||||||
|
roleId.value = ''
|
||||||
|
skuCode.value = ''
|
||||||
|
dateFrom.value = ''
|
||||||
|
dateTo.value = ''
|
||||||
|
void loadTasks(1)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="admin-panel">
|
<section class="admin-panel">
|
||||||
<header class="panel-header">
|
<header class="panel-header">
|
||||||
<div>
|
<div class="panel-header-copy">
|
||||||
<h1>交付任务</h1>
|
<h1>交付任务</h1>
|
||||||
<p>查看交付状态、角色识别、库存凭据分配和错误信息。</p>
|
<p>更紧凑地查看任务状态、角色绑定、库存凭据和异常信息。</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="panel-header-badge">共 {{ pagination.total }} 条任务</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section class="filter-bar">
|
<section class="filters-card">
|
||||||
<select v-model="status" class="text-input select-input">
|
<div class="filters-grid">
|
||||||
<option v-for="option in adminTaskStatusOptions" :key="option.value" :value="option.value">
|
<label class="filter-field">
|
||||||
{{ option.label }}
|
<span>状态</span>
|
||||||
</option>
|
<select v-model="status" class="text-input select-input">
|
||||||
</select>
|
<option v-for="option in adminTaskStatusOptions" :key="option.value" :value="option.value">
|
||||||
<input v-model="taskNo" class="text-input" placeholder="任务号" />
|
{{ option.label }}
|
||||||
<input v-model="platformOrderId" class="text-input" placeholder="订单号" />
|
</option>
|
||||||
<input v-model="roleId" class="text-input" placeholder="角色 ID" />
|
</select>
|
||||||
</section>
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
<section class="filter-bar">
|
<span>任务号</span>
|
||||||
<input v-model="skuCode" class="text-input" placeholder="SKU" />
|
<input v-model="taskNo" class="text-input" placeholder="支持模糊匹配" />
|
||||||
<input v-model="dateFrom" class="text-input" type="date" placeholder="开始日期" />
|
</label>
|
||||||
<input v-model="dateTo" class="text-input" type="date" placeholder="结束日期" />
|
<label class="filter-field">
|
||||||
<el-button round type="primary" @click="() => loadTasks(1)">查询</el-button>
|
<span>订单号</span>
|
||||||
|
<input v-model="platformOrderId" class="text-input" placeholder="平台订单号" />
|
||||||
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
|
<span>角色 ID</span>
|
||||||
|
<input v-model="roleId" class="text-input" placeholder="角色唯一标识" />
|
||||||
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
|
<span>SKU</span>
|
||||||
|
<input v-model="skuCode" class="text-input" placeholder="商品 SKU" />
|
||||||
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
|
<span>开始日期</span>
|
||||||
|
<input v-model="dateFrom" class="text-input" type="date" />
|
||||||
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
|
<span>结束日期</span>
|
||||||
|
<input v-model="dateTo" class="text-input" type="date" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="filters-actions">
|
||||||
|
<span class="filters-hint">桌面端已改为自适应卡片列表，不再出现横向滚动。</span>
|
||||||
|
<div class="filters-button-row">
|
||||||
|
<el-button round @click="resetFilters">重置</el-button>
|
||||||
|
<el-button round type="primary" @click="() => loadTasks(1)">查询</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
|
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
|
||||||
<p v-if="lastClaimUrl" class="info-copy">最近生成的领取链接：{{ lastClaimUrl }}</p>
|
<p v-if="lastClaimUrl" class="info-copy">最近生成的领取链接：{{ lastClaimUrl }}</p>
|
||||||
<div v-if="loading" class="empty-block">任务列表加载中</div>
|
<div v-if="loading" class="empty-block">任务列表加载中</div>
|
||||||
|
|
||||||
<div v-else class="table-card">
|
<div v-else-if="items.length === 0" class="empty-block">当前筛选条件下暂无任务</div>
|
||||||
<table class="data-table">
|
|
||||||
<colgroup>
|
<div v-else class="tasks-shell">
|
||||||
<col class="col-meta" />
|
<div class="tasks-toolbar">
|
||||||
<col class="col-progress" />
|
<div>
|
||||||
<col class="col-goods" />
|
<strong>任务列表</strong>
|
||||||
<col class="col-role" />
|
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
|
||||||
<col class="col-time" />
|
</div>
|
||||||
<col class="col-error" />
|
</div>
|
||||||
<col class="col-actions" />
|
|
||||||
</colgroup>
|
<div class="task-list">
|
||||||
<thead>
|
<article v-for="item in items" :key="item.taskId" class="task-card">
|
||||||
<tr>
|
<div class="task-card-top">
|
||||||
<th>任务信息</th>
|
<div class="task-identity">
|
||||||
<th>任务进度</th>
|
<RouterLink :to="`/admin/tasks/${item.taskId}`" class="cell-link task-no" :title="item.taskNo">
|
||||||
<th>商品 / 凭据</th>
|
{{ item.taskNo }}
|
||||||
<th>角色绑定</th>
|
</RouterLink>
|
||||||
<th>时间</th>
|
<div class="task-meta-row">
|
||||||
<th>错误</th>
|
<span class="compact-chip" :title="item.platformOrderId">订单 {{ item.platformOrderId }}</span>
|
||||||
<th>操作</th>
|
<span class="compact-chip compact-chip--muted">重试 {{ item.retryCount }} 次</span>
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="item in items" :key="item.taskId">
|
|
||||||
<td>
|
|
||||||
<div class="meta-cell">
|
|
||||||
<RouterLink :to="`/admin/tasks/${item.taskId}`" class="cell-link meta-title" :title="item.taskNo">
|
|
||||||
{{ item.taskNo }}
|
|
||||||
</RouterLink>
|
|
||||||
<span class="meta-subline" :title="item.platformOrderId">订单 {{ item.platformOrderId }}</span>
|
|
||||||
<span class="meta-subline meta-muted">重试 {{ item.retryCount }} 次</span>
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</div>
|
||||||
<td>
|
<AdminStatusTag :status="item.status" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="task-grid">
|
||||||
|
<section class="task-section">
|
||||||
|
<span class="section-label">任务进度</span>
|
||||||
<div class="progress-cell">
|
<div class="progress-cell">
|
||||||
<div class="progress-row">
|
<div class="progress-row">
|
||||||
<span class="progress-label">任务</span>
|
<span class="progress-label">任务</span>
|
||||||
@@ -247,8 +260,10 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
|
|||||||
<AdminStatusTag :status="item.userBindingStatus" />
|
<AdminStatusTag :status="item.userBindingStatus" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
<td>
|
|
||||||
|
<section class="task-section">
|
||||||
|
<span class="section-label">商品 / 凭据</span>
|
||||||
<div class="goods-cell">
|
<div class="goods-cell">
|
||||||
<span class="goods-title" :title="item.skuName || item.skuCode">{{ item.skuName || item.skuCode }}</span>
|
<span class="goods-title" :title="item.skuName || item.skuCode">{{ item.skuName || item.skuCode }}</span>
|
||||||
<span class="goods-subline">SKU {{ item.skuCode || '-' }}</span>
|
<span class="goods-subline">SKU {{ item.skuCode || '-' }}</span>
|
||||||
@@ -262,15 +277,19 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
|
|||||||
{{ formatBindingCountSummary(item) }}
|
{{ formatBindingCountSummary(item) }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
<td>
|
|
||||||
|
<section class="task-section">
|
||||||
|
<span class="section-label">角色绑定</span>
|
||||||
<div class="role-cell">
|
<div class="role-cell">
|
||||||
<span class="role-title" :title="item.roleName || item.roleId || '-'">{{ item.roleName || '-' }}</span>
|
<span class="role-title" :title="item.roleName || item.roleId || '-'">{{ item.roleName || '-' }}</span>
|
||||||
<span class="role-subline" :title="item.roleId || '-'">角色ID {{ item.roleId || '-' }}</span>
|
<span class="role-subline" :title="item.roleId || '-'">角色ID {{ item.roleId || '-' }}</span>
|
||||||
<span class="role-subline">登录 {{ item.loginType || '-' }}</span>
|
<span class="role-subline">登录 {{ item.loginType || '-' }}</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
<td>
|
|
||||||
|
<section class="task-section">
|
||||||
|
<span class="section-label">时间</span>
|
||||||
<div class="time-cell">
|
<div class="time-cell">
|
||||||
<span class="time-line">创建 {{ formatAdminDateTime(item.createdAt) }}</span>
|
<span class="time-line">创建 {{ formatAdminDateTime(item.createdAt) }}</span>
|
||||||
<span class="time-line">更新 {{ formatAdminDateTime(item.updatedAt) }}</span>
|
<span class="time-line">更新 {{ formatAdminDateTime(item.updatedAt) }}</span>
|
||||||
@@ -278,64 +297,52 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
|
|||||||
<span v-if="item.roleConfirmedAt" class="time-line">确认 {{ formatAdminDateTime(item.roleConfirmedAt) }}</span>
|
<span v-if="item.roleConfirmedAt" class="time-line">确认 {{ formatAdminDateTime(item.roleConfirmedAt) }}</span>
|
||||||
<span v-if="item.redeemedAt" class="time-line">兑换 {{ formatAdminDateTime(item.redeemedAt) }}</span>
|
<span v-if="item.redeemedAt" class="time-line">兑换 {{ formatAdminDateTime(item.redeemedAt) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
<td>
|
|
||||||
<span class="cell-error" :title="item.lastError || '-'">{{ item.lastError || '-' }}</span>
|
<section class="task-section">
|
||||||
</td>
|
<span class="section-label">异常 / 操作</span>
|
||||||
<td>
|
<div class="task-end">
|
||||||
<div class="action-cell">
|
<span class="cell-error" :title="item.lastError || '-'">{{ item.lastError || '当前无异常' }}</span>
|
||||||
<el-button
|
<div class="action-cell">
|
||||||
v-if="canManageTaskLifecycle"
|
<el-button
|
||||||
:disabled="item.executorKey === 'manual_dispatch' || !['retry_pending', 'manual_review', 'waiting_inventory'].includes(item.status)"
|
v-if="canManageTaskLifecycle"
|
||||||
:loading="actionLoadingId === item.taskId"
|
:disabled="item.executorKey === 'manual_dispatch' || !['retry_pending', 'manual_review', 'waiting_inventory'].includes(item.status)"
|
||||||
class="primary-action"
|
:loading="actionLoadingId === item.taskId"
|
||||||
plain
|
class="primary-action"
|
||||||
type="danger"
|
plain
|
||||||
@click="runAction(item.taskId, () => retryAdminTask(item.taskId), '任务已重试', `确认重试任务 ${item.taskNo} 吗？`)"
|
type="danger"
|
||||||
>
|
@click="runAction(item.taskId, () => retryAdminTask(item.taskId), '任务已重试', `确认重试任务 ${item.taskNo} 吗？`)"
|
||||||
重试
|
>
|
||||||
</el-button>
|
重试
|
||||||
<div
|
</el-button>
|
||||||
v-if="canCloseTasks"
|
<el-button
|
||||||
class="more-action-wrap"
|
v-if="canManageTaskLifecycle && item.executorKey !== 'manual_dispatch'"
|
||||||
@click.stop
|
class="secondary-action"
|
||||||
>
|
@click="handleActionCommand('regenerate_claim_link', item)"
|
||||||
<el-button class="secondary-action" @click.stop="toggleActionMenu(item.taskId)">
|
>
|
||||||
更多
|
重发链接
|
||||||
<span class="dropdown-icon">{{ openedActionTaskId === item.taskId ? '▴' : '▾' }}</span>
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="canManageTaskLifecycle"
|
||||||
|
class="secondary-action"
|
||||||
|
@click="handleActionCommand('manual_review', item)"
|
||||||
|
>
|
||||||
|
转人工
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="canCloseTasks && !['redeemed', 'closed'].includes(item.status)"
|
||||||
|
class="secondary-action secondary-action-danger"
|
||||||
|
@click="handleActionCommand('close', item)"
|
||||||
|
>
|
||||||
|
关闭任务
|
||||||
</el-button>
|
</el-button>
|
||||||
<div v-if="openedActionTaskId === item.taskId" class="more-action-menu">
|
|
||||||
<button
|
|
||||||
v-if="canManageTaskLifecycle && item.executorKey !== 'manual_dispatch'"
|
|
||||||
class="menu-action-button"
|
|
||||||
type="button"
|
|
||||||
@click="handleActionCommand('regenerate_claim_link', item)"
|
|
||||||
>
|
|
||||||
重发链接
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="canManageTaskLifecycle"
|
|
||||||
class="menu-action-button"
|
|
||||||
type="button"
|
|
||||||
@click="handleActionCommand('manual_review', item)"
|
|
||||||
>
|
|
||||||
转人工
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="!['redeemed', 'closed'].includes(item.status)"
|
|
||||||
class="menu-action-button menu-action-button-danger"
|
|
||||||
type="button"
|
|
||||||
@click="handleActionCommand('close', item)"
|
|
||||||
>
|
|
||||||
关闭任务
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
</tr>
|
</div>
|
||||||
</tbody>
|
</article>
|
||||||
</table>
|
</div>
|
||||||
|
|
||||||
<AdminPaginationBar
|
<AdminPaginationBar
|
||||||
:page="pagination.page"
|
:page="pagination.page"
|
||||||
:page-size="pagination.pageSize"
|
:page-size="pagination.pageSize"
|
||||||
@@ -350,77 +357,250 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.admin-panel {
|
.admin-panel {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: space-between;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.panel-header-copy {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.panel-header h1 {
|
.panel-header h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
font-size: 34px;
|
||||||
|
line-height: 1.05;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
color: #1d3555;
|
color: #1d3555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-header p {
|
.panel-header p {
|
||||||
margin: 8px 0 0;
|
margin: 6px 0 0;
|
||||||
|
font-size: 14px;
|
||||||
color: #64748b;
|
color: #64748b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-bar {
|
.panel-header-badge {
|
||||||
display: flex;
|
flex: 0 0 auto;
|
||||||
gap: 12px;
|
min-height: 34px;
|
||||||
|
padding: 0 14px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.82);
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.12);
|
||||||
|
color: #38506e;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.filters-card,
|
||||||
|
.tasks-shell,
|
||||||
|
.empty-block,
|
||||||
|
.error-copy,
|
||||||
|
.info-copy {
|
||||||
|
padding: 16px 18px;
|
||||||
|
border-radius: 18px;
|
||||||
|
background: rgba(255, 255, 255, 0.94);
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.1);
|
||||||
|
box-shadow: 0 14px 36px rgba(30, 49, 78, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-field {
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-field span {
|
||||||
|
color: #5d6f87;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-hint {
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-button-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.text-input {
|
.text-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 42px;
|
min-height: 38px;
|
||||||
padding: 0 14px;
|
padding: 0 12px;
|
||||||
border-radius: 14px;
|
border-radius: 12px;
|
||||||
border: 1px solid rgba(86, 108, 138, 0.18);
|
border: 1px solid rgba(86, 108, 138, 0.18);
|
||||||
background: rgba(255, 255, 255, 0.94);
|
background: rgba(255, 255, 255, 0.94);
|
||||||
|
color: #24364e;
|
||||||
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-input {
|
.select-input {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-card,
|
|
||||||
.empty-block,
|
|
||||||
.error-copy {
|
|
||||||
padding: 18px;
|
|
||||||
border-radius: 20px;
|
|
||||||
background: rgba(255, 255, 255, 0.94);
|
|
||||||
border: 1px solid rgba(86, 108, 138, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-copy {
|
.error-copy {
|
||||||
|
margin: 0;
|
||||||
color: #b42318;
|
color: #b42318;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-copy {
|
.info-copy {
|
||||||
|
margin: 0;
|
||||||
color: #175cd3;
|
color: #175cd3;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-table {
|
.tasks-shell {
|
||||||
width: 100%;
|
display: grid;
|
||||||
border-collapse: collapse;
|
gap: 14px;
|
||||||
table-layout: fixed;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-meta { width: 220px; }
|
.tasks-toolbar {
|
||||||
.col-progress { width: 300px; }
|
display: flex;
|
||||||
.col-goods { width: 220px; }
|
align-items: center;
|
||||||
.col-role { width: 180px; }
|
justify-content: space-between;
|
||||||
.col-time { width: 200px; }
|
gap: 12px;
|
||||||
.col-error { width: 160px; }
|
}
|
||||||
.col-actions { width: 130px; }
|
|
||||||
|
.tasks-toolbar strong {
|
||||||
|
display: block;
|
||||||
|
color: #1f324a;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tasks-toolbar span {
|
||||||
|
display: block;
|
||||||
|
margin-top: 4px;
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
padding: 14px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-card-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-identity {
|
||||||
|
min-width: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-no {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 100%;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.1;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #132238;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-meta-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-chip {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 28px;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 0 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #f4f7fb;
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.1);
|
||||||
|
color: #44556c;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-chip--muted {
|
||||||
|
color: #6b7c93;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-section {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
min-width: 0;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 14px;
|
||||||
|
background: rgba(255, 255, 255, 0.78);
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-label {
|
||||||
|
color: #71839b;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
.progress-cell {
|
.progress-cell {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 6px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-row {
|
.progress-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
@@ -429,9 +609,9 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
|
|||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width: 36px;
|
min-width: 34px;
|
||||||
min-height: 22px;
|
min-height: 22px;
|
||||||
padding: 0 8px;
|
padding: 0 7px;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
background: #f7f9fc;
|
background: #f7f9fc;
|
||||||
border: 1px solid rgba(86, 108, 138, 0.12);
|
border: 1px solid rgba(86, 108, 138, 0.12);
|
||||||
@@ -455,7 +635,7 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
|
|||||||
.role-cell,
|
.role-cell,
|
||||||
.time-cell {
|
.time-cell {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 6px;
|
gap: 5px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -463,7 +643,7 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
color: #475467;
|
color: #475467;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 1.6;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta-title,
|
.meta-title,
|
||||||
@@ -499,33 +679,35 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cell-error {
|
.cell-error {
|
||||||
display: -webkit-box;
|
display: block;
|
||||||
overflow: hidden;
|
min-width: 0;
|
||||||
-webkit-line-clamp: 2;
|
line-height: 1.55;
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #475467;
|
color: #475467;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-table td {
|
.task-end {
|
||||||
vertical-align: top;
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-cell {
|
.action-cell {
|
||||||
display: grid;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
justify-items: start;
|
align-items: flex-start;
|
||||||
align-content: start;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary-action,
|
.primary-action,
|
||||||
.secondary-action {
|
.secondary-action {
|
||||||
min-width: 88px;
|
min-width: 82px;
|
||||||
min-height: 32px;
|
min-height: 30px;
|
||||||
padding: 0 14px;
|
padding: 0 12px;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary-action {
|
.primary-action {
|
||||||
@@ -554,84 +736,100 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
|
|||||||
background: #f8fbff;
|
background: #f8fbff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.more-action-wrap {
|
.secondary-action-danger {
|
||||||
position: relative;
|
border-color: rgba(217, 45, 32, 0.22);
|
||||||
|
color: #c43225;
|
||||||
|
background: #fff7f6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.more-action-menu {
|
.secondary-action-danger:hover,
|
||||||
display: grid;
|
.secondary-action-danger:focus {
|
||||||
gap: 6px;
|
border-color: rgba(217, 45, 32, 0.34);
|
||||||
margin-top: 8px;
|
color: #a62c21;
|
||||||
padding: 8px;
|
background: #feeceb;
|
||||||
min-width: 108px;
|
|
||||||
border-radius: 14px;
|
|
||||||
background: rgba(255, 255, 255, 0.98);
|
|
||||||
border: 1px solid rgba(86, 108, 138, 0.12);
|
|
||||||
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-action-button {
|
|
||||||
min-height: 30px;
|
|
||||||
padding: 0 10px;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: #f8fafc;
|
|
||||||
color: #344054;
|
|
||||||
font: inherit;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: left;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-action-button:hover {
|
|
||||||
background: #eff6ff;
|
|
||||||
color: #175cd3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-action-button-danger {
|
|
||||||
background: #fff5f4;
|
|
||||||
color: #d92d20;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-action-button-danger:hover {
|
|
||||||
background: #fee4e2;
|
|
||||||
color: #b42318;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-icon {
|
|
||||||
margin-left: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-table th,
|
|
||||||
.data-table td {
|
|
||||||
padding: 12px 10px;
|
|
||||||
text-align: left;
|
|
||||||
border-bottom: 1px solid rgba(86, 108, 138, 0.08);
|
|
||||||
color: #334155;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-table th {
|
|
||||||
color: #64748b;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-cell :deep(.el-button > span) {
|
.action-cell :deep(.el-button > span) {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1500px) {
|
@media (max-width: 1400px) {
|
||||||
.col-progress { width: 280px; }
|
.task-grid {
|
||||||
.col-goods { width: 200px; }
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
.col-role { width: 160px; }
|
}
|
||||||
.col-time { width: 180px; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1320px) {
|
@media (max-width: 1180px) {
|
||||||
.data-table {
|
.task-grid {
|
||||||
table-layout: auto;
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 980px) {
|
||||||
|
.task-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.task-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
.filters-grid {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 980px) {
|
||||||
|
.panel-header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-actions {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.panel-header h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-button-row,
|
||||||
|
.task-card-top,
|
||||||
|
.action-cell {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-button-row {
|
||||||
|
justify-content: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-button-row :deep(.el-button),
|
||||||
|
.action-cell :deep(.el-button) {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-card-top {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-no {
|
||||||
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref } from 'vue'
|
import { computed, onMounted, ref } from 'vue'
|
||||||
|
|
||||||
import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
|
import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
|
||||||
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
|
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
|
||||||
@@ -29,6 +29,14 @@ const pagination = ref<AdminPagination>({
|
|||||||
total: 0,
|
total: 0,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const canReplay = hasAdminRole('admin')
|
||||||
|
|
||||||
|
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 loadEvents(page = pagination.value.page) {
|
async function loadEvents(page = pagination.value.page) {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
errorMessage.value = ''
|
errorMessage.value = ''
|
||||||
@@ -83,6 +91,18 @@ async function submitReplay(item: AdminWebhookEventListItem) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function resetFilters() {
|
||||||
|
provider.value = ''
|
||||||
|
platform.value = ''
|
||||||
|
platformOrderId.value = ''
|
||||||
|
processed.value = ''
|
||||||
|
visibility.value = 'important'
|
||||||
|
relatedOrderId.value = ''
|
||||||
|
dateFrom.value = ''
|
||||||
|
dateTo.value = ''
|
||||||
|
void loadEvents(1)
|
||||||
|
}
|
||||||
|
|
||||||
function formatRequestTimestamp(value: string) {
|
function formatRequestTimestamp(value: string) {
|
||||||
const normalized = String(value || '').trim()
|
const normalized = String(value || '').trim()
|
||||||
|
|
||||||
@@ -98,76 +118,150 @@ function formatAmount(item: AdminWebhookEventListItem) {
|
|||||||
return item.totalAmount ? `${item.totalAmount} ${item.currency}` : '-'
|
return item.totalAmount ? `${item.totalAmount} ${item.currency}` : '-'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function formatVisibilityLabel(value: string) {
|
||||||
|
return value === 'ignored' ? '已忽略' : '重要'
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(loadEvents)
|
onMounted(loadEvents)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="admin-panel">
|
<section class="admin-panel">
|
||||||
<header class="panel-header">
|
<header class="panel-header">
|
||||||
<div>
|
<div class="panel-header-copy">
|
||||||
<h1>Webhook 日志</h1>
|
<h1>Webhook 日志</h1>
|
||||||
<p>查看平台推送处理情况和错误信息。</p>
|
<p>查看平台推送处理情况、验签结果、请求来源和错误信息。</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="panel-header-badge">共 {{ pagination.total }} 条事件</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section class="filter-bar">
|
<section class="filters-card">
|
||||||
<input v-model="provider" class="text-input" placeholder="服务商，如 agiso" />
|
<div class="filters-grid">
|
||||||
<input v-model="platform" class="text-input" placeholder="业务平台，如 xianyu / taobao" />
|
<label class="filter-field">
|
||||||
<select v-model="processed" class="text-input select-input">
|
<span>服务商</span>
|
||||||
<option v-for="option in adminWebhookProcessedOptions" :key="option.value" :value="option.value">
|
<input v-model="provider" class="text-input" placeholder="如 agiso" />
|
||||||
{{ option.label }}
|
</label>
|
||||||
</option>
|
<label class="filter-field">
|
||||||
</select>
|
<span>业务平台</span>
|
||||||
<select v-model="visibility" class="text-input select-input">
|
<input v-model="platform" class="text-input" placeholder="如 xianyu / taobao" />
|
||||||
<option v-for="option in adminWebhookVisibilityOptions" :key="option.value" :value="option.value">
|
</label>
|
||||||
{{ option.label }}
|
<label class="filter-field">
|
||||||
</option>
|
<span>处理结果</span>
|
||||||
</select>
|
<select v-model="processed" class="text-input select-input">
|
||||||
<input v-model="platformOrderId" class="text-input" placeholder="平台订单号" />
|
<option v-for="option in adminWebhookProcessedOptions" :key="option.value" :value="option.value">
|
||||||
|
{{ option.label }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
|
<span>可见级别</span>
|
||||||
|
<select v-model="visibility" class="text-input select-input">
|
||||||
|
<option v-for="option in adminWebhookVisibilityOptions" :key="option.value" :value="option.value">
|
||||||
|
{{ option.label }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
|
<span>平台订单号</span>
|
||||||
|
<input v-model="platformOrderId" class="text-input" placeholder="平台订单号" />
|
||||||
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
|
<span>关联订单 ID</span>
|
||||||
|
<input v-model="relatedOrderId" class="text-input" placeholder="后台订单 ID" />
|
||||||
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
|
<span>开始日期</span>
|
||||||
|
<input v-model="dateFrom" class="text-input" type="date" />
|
||||||
|
</label>
|
||||||
|
<label class="filter-field">
|
||||||
|
<span>结束日期</span>
|
||||||
|
<input v-model="dateTo" class="text-input" type="date" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="filters-actions">
|
||||||
|
<span class="filters-hint">Webhook 事件已拆成来源、摘要、订单、验签、请求来源几个信息块，排查会更直观。</span>
|
||||||
|
<div class="filters-button-row">
|
||||||
|
<el-button round @click="resetFilters">重置</el-button>
|
||||||
|
<el-button round type="primary" @click="() => loadEvents(1)">查询</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="filter-bar">
|
<section v-if="!loading && items.length > 0" class="summary-grid">
|
||||||
<input v-model="relatedOrderId" class="text-input" placeholder="关联订单 ID" />
|
<article class="summary-card summary-card-success">
|
||||||
<input v-model="dateFrom" class="text-input" type="date" placeholder="开始日期" />
|
<span class="summary-label">当前页处理成功</span>
|
||||||
<input v-model="dateTo" class="text-input" type="date" placeholder="结束日期" />
|
<strong class="summary-value">{{ summary.processedCount }}</strong>
|
||||||
<el-button round type="primary" @click="() => loadEvents()">查询</el-button>
|
<span class="summary-meta">已通过处理链路，通常无需人工介入</span>
|
||||||
|
</article>
|
||||||
|
<article class="summary-card summary-card-danger">
|
||||||
|
<span class="summary-label">当前页异常 / 失败</span>
|
||||||
|
<strong class="summary-value">{{ summary.failedCount }}</strong>
|
||||||
|
<span class="summary-meta">优先查看验签、处理错误和请求来源</span>
|
||||||
|
</article>
|
||||||
|
<article class="summary-card summary-card-primary">
|
||||||
|
<span class="summary-label">当前页重要事件</span>
|
||||||
|
<strong class="summary-value">{{ summary.importantCount }}</strong>
|
||||||
|
<span class="summary-meta">仅重要模式下更适合日常排查</span>
|
||||||
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
|
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
|
||||||
<div v-if="loading" class="empty-block">Webhook 列表加载中</div>
|
<div v-if="loading" class="empty-block">Webhook 列表加载中</div>
|
||||||
|
<div v-else-if="items.length === 0" class="empty-block">当前筛选条件下暂无 Webhook 事件</div>
|
||||||
|
|
||||||
<div v-else class="table-card">
|
<div v-else class="events-shell">
|
||||||
<table class="data-table">
|
<div class="events-toolbar">
|
||||||
<thead>
|
<div>
|
||||||
<tr>
|
<strong>Webhook 列表</strong>
|
||||||
<th>ID</th>
|
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
|
||||||
<th>来源</th>
|
</div>
|
||||||
<th>事件摘要</th>
|
</div>
|
||||||
<th>订单与店铺</th>
|
|
||||||
<th>验签与处理</th>
|
<div class="event-list">
|
||||||
<th>请求来源</th>
|
<article v-for="item in items" :key="item.eventId" class="event-card">
|
||||||
<th>时间</th>
|
<div class="event-card-top">
|
||||||
<th>操作</th>
|
<div class="event-identity">
|
||||||
</tr>
|
<RouterLink :to="`/admin/webhook-events/${item.eventId}`" class="cell-link event-no">
|
||||||
</thead>
|
#{{ item.eventId }} · {{ formatAdminWebhookEventType(item.eventType) }}
|
||||||
<tbody>
|
</RouterLink>
|
||||||
<tr v-for="item in items" :key="item.eventId">
|
<div class="event-meta-row">
|
||||||
<td>
|
<span class="compact-chip">{{ item.provider || '-' }}</span>
|
||||||
<RouterLink :to="`/admin/webhook-events/${item.eventId}`">{{ item.eventId }}</RouterLink>
|
<span class="compact-chip">{{ item.platform || '-' }}</span>
|
||||||
</td>
|
<span v-if="item.shopName || item.shopId" class="compact-chip compact-chip--muted">
|
||||||
<td>
|
{{ 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"
|
||||||
|
class="secondary-action"
|
||||||
|
@click="submitReplay(item)"
|
||||||
|
>
|
||||||
|
重放
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event-grid">
|
||||||
|
<section class="event-section">
|
||||||
|
<span class="section-label">来源</span>
|
||||||
<div class="cell-stack">
|
<div class="cell-stack">
|
||||||
<div class="cell-title">{{ item.provider }} / {{ item.platform }}</div>
|
<div class="cell-title">{{ item.provider }} / {{ item.platform }}</div>
|
||||||
<div v-if="item.platformRaw && item.platformRaw !== item.platform" class="cell-subtle">
|
<div v-if="item.platformRaw && item.platformRaw !== item.platform" class="cell-subtle">
|
||||||
原始平台：{{ item.platformRaw }}
|
原始平台 {{ item.platformRaw }}
|
||||||
</div>
|
</div>
|
||||||
<div class="meta-chip-row">
|
<div class="meta-chip-row">
|
||||||
<span class="meta-chip">店铺 {{ item.shopName || item.shopId || '-' }}</span>
|
<span class="meta-chip">店铺 {{ item.shopName || item.shopId || '-' }}</span>
|
||||||
<span v-if="item.shopId" class="meta-chip">ID {{ item.shopId }}</span>
|
<span v-if="item.shopId" class="meta-chip">ID {{ item.shopId }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
<td>
|
|
||||||
|
<section class="event-section">
|
||||||
|
<span class="section-label">事件摘要</span>
|
||||||
<div class="cell-stack">
|
<div class="cell-stack">
|
||||||
<div class="cell-title">{{ formatAdminWebhookEventType(item.eventType) }}</div>
|
<div class="cell-title">{{ formatAdminWebhookEventType(item.eventType) }}</div>
|
||||||
<div v-if="item.messageText" class="cell-subtle">{{ item.messageText }}</div>
|
<div v-if="item.messageText" class="cell-subtle">{{ item.messageText }}</div>
|
||||||
@@ -175,14 +269,16 @@ onMounted(loadEvents)
|
|||||||
<span v-if="item.aopic" class="meta-chip">aopic {{ item.aopic }}</span>
|
<span v-if="item.aopic" class="meta-chip">aopic {{ item.aopic }}</span>
|
||||||
<span v-if="item.itemCount" class="meta-chip">商品 {{ item.itemCount }}</span>
|
<span v-if="item.itemCount" class="meta-chip">商品 {{ item.itemCount }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="mono-inline">Key: {{ item.eventKey }}</div>
|
<div class="mono-inline event-key" :title="item.eventKey">Key: {{ item.eventKey }}</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
<td>
|
|
||||||
|
<section class="event-section">
|
||||||
|
<span class="section-label">订单与店铺</span>
|
||||||
<div class="cell-stack">
|
<div class="cell-stack">
|
||||||
<div class="cell-title">平台单：{{ item.platformOrderId || '-' }}</div>
|
<div class="cell-title">平台单 {{ item.platformOrderId || '-' }}</div>
|
||||||
<div class="cell-subtle">买家：{{ item.buyerName || item.buyerId || '-' }}</div>
|
<div class="cell-subtle">买家 {{ item.buyerName || item.buyerId || '-' }}</div>
|
||||||
<div class="cell-subtle">金额：{{ formatAmount(item) }}</div>
|
<div class="cell-subtle">金额 {{ formatAmount(item) }}</div>
|
||||||
<div class="meta-chip-row">
|
<div class="meta-chip-row">
|
||||||
<span class="meta-chip">
|
<span class="meta-chip">
|
||||||
关联订单
|
关联订单
|
||||||
@@ -194,45 +290,41 @@ onMounted(loadEvents)
|
|||||||
<span class="meta-chip">任务 {{ item.taskCount }}</span>
|
<span class="meta-chip">任务 {{ item.taskCount }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
<td>
|
|
||||||
|
<section class="event-section">
|
||||||
|
<span class="section-label">验签与处理</span>
|
||||||
<div class="cell-stack">
|
<div class="cell-stack">
|
||||||
<div class="tag-row">
|
<div class="tag-row">
|
||||||
<AdminStatusTag :status="item.signatureValid ? 'success' : 'failed'" />
|
<AdminStatusTag :status="item.signatureValid ? 'success' : 'failed'" />
|
||||||
<AdminStatusTag :status="item.processed ? 'success' : 'failed'" />
|
<AdminStatusTag :status="item.processed ? 'success' : 'failed'" />
|
||||||
</div>
|
</div>
|
||||||
<div class="cell-subtle">签名：{{ item.requestSign || '-' }}</div>
|
<div class="cell-subtle" :title="item.requestSign || '-'">签名 {{ item.requestSign || '-' }}</div>
|
||||||
<div v-if="item.processError" class="error-inline">{{ item.processError }}</div>
|
<div v-if="item.processError" class="error-inline">{{ item.processError }}</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
<td>
|
|
||||||
|
<section class="event-section">
|
||||||
|
<span class="section-label">请求来源</span>
|
||||||
<div class="cell-stack">
|
<div class="cell-stack">
|
||||||
<div class="cell-title">{{ item.sourceHost || '-' }}</div>
|
<div class="cell-title">{{ item.sourceHost || '-' }}</div>
|
||||||
<div class="cell-subtle">IP：{{ item.sourceIp || '-' }}</div>
|
<div class="cell-subtle">IP {{ item.sourceIp || '-' }}</div>
|
||||||
<div class="cell-subtle line-clamp-2">UA：{{ item.userAgent || '-' }}</div>
|
<div class="cell-subtle line-clamp-2">UA {{ item.userAgent || '-' }}</div>
|
||||||
<div class="cell-subtle">请求时间：{{ formatRequestTimestamp(item.requestTimestamp) }}</div>
|
<div class="cell-subtle">请求时间 {{ formatRequestTimestamp(item.requestTimestamp) }}</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
<td>
|
|
||||||
|
<section class="event-section">
|
||||||
|
<span class="section-label">时间</span>
|
||||||
<div class="cell-stack">
|
<div class="cell-stack">
|
||||||
<div class="cell-title">{{ formatAdminDateTime(item.createdAt) }}</div>
|
<div class="cell-title">{{ formatAdminDateTime(item.createdAt) }}</div>
|
||||||
<div class="cell-subtle">事件 ID #{{ item.eventId }}</div>
|
<div class="cell-subtle">事件 ID #{{ item.eventId }}</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</section>
|
||||||
<td>
|
</div>
|
||||||
<el-button
|
</article>
|
||||||
v-if="hasAdminRole('admin')"
|
</div>
|
||||||
:loading="actionLoadingId === item.eventId"
|
|
||||||
link
|
|
||||||
type="primary"
|
|
||||||
@click="submitReplay(item)"
|
|
||||||
>
|
|
||||||
重放
|
|
||||||
</el-button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<AdminPaginationBar
|
<AdminPaginationBar
|
||||||
:page="pagination.page"
|
:page="pagination.page"
|
||||||
:page-size="pagination.pageSize"
|
:page-size="pagination.pageSize"
|
||||||
@@ -247,40 +339,331 @@ onMounted(loadEvents)
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.admin-panel {
|
.admin-panel {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: space-between;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.panel-header-copy {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.panel-header h1 {
|
.panel-header h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
font-size: 34px;
|
||||||
|
line-height: 1.05;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
color: #1d3555;
|
color: #1d3555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-header p {
|
.panel-header p {
|
||||||
margin: 8px 0 0;
|
margin: 6px 0 0;
|
||||||
|
font-size: 14px;
|
||||||
color: #64748b;
|
color: #64748b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-bar {
|
.panel-header-badge {
|
||||||
display: flex;
|
flex: 0 0 auto;
|
||||||
gap: 12px;
|
min-height: 34px;
|
||||||
|
padding: 0 14px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.82);
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.12);
|
||||||
|
color: #38506e;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.filters-card,
|
||||||
|
.summary-card,
|
||||||
|
.events-shell,
|
||||||
|
.empty-block,
|
||||||
|
.error-copy {
|
||||||
|
padding: 16px 18px;
|
||||||
|
border-radius: 18px;
|
||||||
|
background: rgba(255, 255, 255, 0.94);
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.1);
|
||||||
|
box-shadow: 0 14px 36px rgba(30, 49, 78, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-field {
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-field span {
|
||||||
|
color: #5d6f87;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-hint {
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-button-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-input {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 38px;
|
||||||
|
padding: 0 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.18);
|
||||||
|
background: rgba(255, 255, 255, 0.94);
|
||||||
|
color: #24364e;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-input {
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: auto -26px -26px auto;
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
border-radius: 999px;
|
||||||
|
opacity: 0.14;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card-success::after {
|
||||||
|
background: #12b76a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card-danger::after {
|
||||||
|
background: #f04438;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card-primary::after {
|
||||||
|
background: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-label {
|
||||||
|
color: #51647d;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-value {
|
||||||
|
font-size: 34px;
|
||||||
|
line-height: 1;
|
||||||
|
color: #1d3555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-meta {
|
||||||
|
color: #70829a;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-copy {
|
||||||
|
margin: 0;
|
||||||
|
color: #b42318;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-block {
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-shell {
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-toolbar strong {
|
||||||
|
display: block;
|
||||||
|
color: #1f324a;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-toolbar span {
|
||||||
|
display: block;
|
||||||
|
margin-top: 4px;
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
padding: 14px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-identity {
|
||||||
|
min-width: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-no {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 100%;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.1;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #132238;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-meta-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-top-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-chip {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 28px;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 0 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #f4f7fb;
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.1);
|
||||||
|
color: #44556c;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-chip--muted {
|
||||||
|
color: #6b7c93;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-action {
|
||||||
|
min-width: 82px;
|
||||||
|
min-height: 30px;
|
||||||
|
padding: 0 12px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 12px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-color: rgba(86, 108, 138, 0.18);
|
||||||
|
color: #344054;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-action:hover,
|
||||||
|
.secondary-action:focus {
|
||||||
|
border-color: rgba(23, 92, 211, 0.28);
|
||||||
|
color: #175cd3;
|
||||||
|
background: #f8fbff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-section {
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
min-width: 0;
|
||||||
|
padding: 10px 11px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.78);
|
||||||
|
border: 1px solid rgba(86, 108, 138, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-label {
|
||||||
|
color: #71839b;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
.cell-stack {
|
.cell-stack {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell-title {
|
.cell-title {
|
||||||
color: #0f172a;
|
color: #0f172a;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell-subtle {
|
.cell-subtle {
|
||||||
color: #64748b;
|
color: #64748b;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta-chip-row,
|
.meta-chip-row,
|
||||||
@@ -307,19 +690,30 @@ onMounted(loadEvents)
|
|||||||
.inline-link {
|
.inline-link {
|
||||||
color: #175cd3;
|
color: #175cd3;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-card,
|
.cell-link {
|
||||||
.empty-block,
|
color: inherit;
|
||||||
.error-copy {
|
text-decoration: none;
|
||||||
padding: 18px;
|
|
||||||
border-radius: 20px;
|
|
||||||
background: rgba(255, 255, 255, 0.94);
|
|
||||||
border: 1px solid rgba(86, 108, 138, 0.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-copy {
|
.cell-link:hover {
|
||||||
color: #b42318;
|
color: #175cd3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mono-inline {
|
||||||
|
color: #344054;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-key {
|
||||||
|
color: #71839b;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-inline {
|
.error-inline {
|
||||||
@@ -329,49 +723,86 @@ onMounted(loadEvents)
|
|||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-input {
|
|
||||||
width: 100%;
|
|
||||||
min-height: 42px;
|
|
||||||
padding: 0 14px;
|
|
||||||
border-radius: 14px;
|
|
||||||
border: 1px solid rgba(86, 108, 138, 0.18);
|
|
||||||
background: rgba(255, 255, 255, 0.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-input {
|
|
||||||
appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-table th,
|
|
||||||
.data-table td {
|
|
||||||
padding: 12px 10px;
|
|
||||||
text-align: left;
|
|
||||||
border-bottom: 1px solid rgba(86, 108, 138, 0.08);
|
|
||||||
color: #334155;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-table th {
|
|
||||||
color: #64748b;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mono-inline {
|
|
||||||
color: #475467;
|
|
||||||
font-size: 12px;
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line-clamp-2 {
|
.line-clamp-2 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.event-top-actions :deep(.el-button > span) {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
.filters-grid {
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1180px) {
|
||||||
|
.summary-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-grid {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 980px) {
|
||||||
|
.panel-header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-actions {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.panel-header h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-grid,
|
||||||
|
.summary-grid,
|
||||||
|
.event-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-button-row,
|
||||||
|
.event-card-top,
|
||||||
|
.event-top-actions {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-button-row {
|
||||||
|
justify-content: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-button-row :deep(.el-button),
|
||||||
|
.event-top-actions :deep(.el-button) {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card-top {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-no {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user