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

优化了部分界面ui

Browse Source
This commit is contained in:
yml2213
2026-04-23 14:46:06 +08:00
parent f0b31121d7
commit 17ab393280
6 changed files with 1926 additions and 628 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/views/admin/AdminMessageDeliveriesView.vue
+407 -111
View File
@@ -95,44 +95,76 @@ onMounted(loadMessageDeliveries)
<template>
<section class="admin-panel">
<header class="panel-header">
<div>
<div class="panel-header-copy">
<h1>消息发送记录</h1>
<p>查看领取链接消息是否真正发出、平台返回了什么、失败原因是什么。</p>
</div>
<div class="panel-header-badge">共 {{ pagination.total }} 条记录</div>
</header>
<section class="filter-bar">
<input v-model="provider" class="text-input" placeholder="服务商，如 agiso" />
<input v-model="platform" class="text-input" placeholder="业务平台，如 xianyu" />
<select v-model="status" class="text-input select-input">
<option v-for="option in adminMessageDeliveryStatusOptions" :key="option.value" :value="option.value">
{{ option.label }}
</option>
</select>
<input v-model="shopId" class="text-input" placeholder="店铺 ID" />
</section>
<section class="filter-bar">
<input v-model="platformOrderId" class="text-input" placeholder="平台订单号" />
<input v-model="taskNo" class="text-input" placeholder="任务号" />
<input v-model="dateFrom" class="text-input" type="date" placeholder="开始日期" />
<input v-model="dateTo" class="text-input" type="date" placeholder="结束日期" />
<el-button round type="primary" @click="() => loadMessageDeliveries(1)">查询</el-button>
<el-button round @click="resetFilters">清空</el-button>
<section class="filters-card">
<div class="filters-grid">
<label class="filter-field">
<span>服务商</span>
<input v-model="provider" class="text-input" placeholder="如 agiso" />
</label>
<label class="filter-field">
<span>业务平台</span>
<input v-model="platform" class="text-input" placeholder="如 xianyu" />
</label>
<label class="filter-field">
<span>发送状态</span>
<select v-model="status" class="text-input select-input">
<option v-for="option in adminMessageDeliveryStatusOptions" :key="option.value" :value="option.value">
{{ option.label }}
</option>
</select>
</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 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>
<strong class="summary-value">{{ summary.successCount }}</strong>
<span class="summary-meta">消息已被平台受理或发送完成</span>
</article>
<article class="summary-card">
<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">
<article class="summary-card summary-card-warning">
<span class="summary-label">当前页等待</span>
<strong class="summary-value">{{ summary.pendingCount }}</strong>
<span class="summary-meta">等待发送或等待外部回调更新</span>
</article>
</section>
@@ -140,31 +172,33 @@ onMounted(loadMessageDeliveries)
<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">
<table class="data-table">
<thead>
<tr>
<th>ID</th>
<th>来源</th>
<th>订单 / 任务</th>
<th>发送状态</th>
<th>消息内容</th>
<th>Claim 链接</th>
<th>接口结果</th>
<th>时间</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.deliveryId">
<td>#{{ item.deliveryId }}</td>
<td>
<div class="cell-stack">
<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 v-else class="records-shell">
<div class="records-toolbar">
<div>
<strong>发送明细</strong>
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
</div>
</div>
<div class="record-list">
<article v-for="item in items" :key="item.deliveryId" class="record-card">
<div class="record-top">
<div class="record-identity">
<span class="record-id">#{{ item.deliveryId }}</span>
<div class="record-source-line">
<span class="source-pill">{{ item.provider || '-' }}</span>
<span class="source-separator">/</span>
<span class="source-pill">{{ item.platform || '-' }}</span>
<span class="source-chip">{{ item.shopName || item.shopId || '-' }}</span>
<span class="source-chip source-chip--muted">{{ item.channel || '-' }}</span>
</div>
</td>
<td>
</div>
<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-title">{{ item.platformOrderId || '-' }}</div>
<div class="meta-chip-row">
@@ -181,43 +215,40 @@ onMounted(loadMessageDeliveries)
<AdminStatusTag :status="item.taskStatus" />
</div>
</div>
</td>
<td>
<div class="cell-stack">
<div class="tag-row">
<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>
</section>
<section class="record-section record-section-message">
<span class="section-label">消息内容</span>
<div class="message-cell" :title="item.messageContent">
{{ item.messageContent || '-' }}
</div>
</td>
<td>
<a v-if="item.claimUrl" class="claim-link" :href="item.claimUrl" target="_blank" rel="noreferrer">
打开链接
<a v-if="item.claimUrl" class="claim-link claim-link-button" :href="item.claimUrl" target="_blank" rel="noreferrer">
打开 Claim 链接
</a>
<span v-else>-</span>
</td>
<td>
</section>
<section class="record-section">
<span class="section-label">接口结果</span>
<div class="cell-stack">
<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>
</td>
<td>
</section>
<section class="record-section">
<span class="section-label">时间</span>
<div class="cell-stack">
<div class="cell-title">创建 {{ formatAdminDateTime(item.createdAt) }}</div>
<div class="cell-subtle">发送 {{ formatAdminDateTime(item.sentAt) }}</div>
<div class="cell-subtle">更新 {{ formatAdminDateTime(item.updatedAt) }}</div>
</div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
</article>
</div>
<AdminPaginationBar
:page="pagination.page"
:page-size="pagination.pageSize"
@@ -232,61 +263,158 @@ onMounted(loadMessageDeliveries)
<style scoped>
.admin-panel {
display: grid;
gap: 14px;
min-width: 0;
}
.panel-header {
display: flex;
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;
}
.panel-header p {
margin: 8px 0 0;
margin: 6px 0 0;
font-size: 14px;
color: #64748b;
}
.filter-bar {
display: flex;
gap: 12px;
.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,
.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 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
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 {
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 {
color: #2559a7;
color: #51647d;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
}
.summary-value {
font-size: 30px;
font-size: 34px;
line-height: 1;
color: #1d3555;
}
.summary-meta {
color: #70829a;
font-size: 12px;
}
.error-copy {
color: #b42318;
margin: 0;
}
.empty-block {
@@ -295,55 +423,173 @@ onMounted(loadMessageDeliveries)
.text-input {
width: 100%;
min-height: 42px;
padding: 0 14px;
border-radius: 14px;
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;
}
.data-table {
width: 100%;
border-collapse: collapse;
.records-shell {
display: grid;
gap: 14px;
min-width: 0;
}
.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;
.records-toolbar strong {
display: block;
color: #1f324a;
font-size: 14px;
}
.data-table th {
.records-toolbar span {
display: block;
margin-top: 4px;
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 {
display: grid;
gap: 6px;
min-width: 0;
}
.cell-title {
color: #1d3555;
font-weight: 700;
word-break: break-word;
}
.cell-subtle {
color: #64748b;
font-size: 12px;
}
.cell-subtle-break {
word-break: break-all;
}
.message-cell {
max-width: 360px;
white-space: pre-wrap;
word-break: break-word;
line-height: 1.6;
color: #334155;
font-size: 13px;
min-height: 72px;
}
.claim-link,
@@ -352,6 +598,20 @@ onMounted(loadMessageDeliveries)
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,
.tag-row {
display: flex;
@@ -375,27 +635,63 @@ onMounted(loadMessageDeliveries)
.error-inline {
color: #b42318;
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) {
.summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.record-section-message {
grid-column: span 1;
}
}
@media (max-width: 980px) {
.filter-bar,
.panel-header {
flex-direction: column;
align-items: flex-start;
}
.filters-grid,
.summary-grid {
grid-template-columns: minmax(0, 1fr);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.table-card {
overflow-x: auto;
.filters-actions {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 720px) {
.panel-header h1 {
font-size: 28px;
}
.data-table {
min-width: 1200px;
.filters-grid,
.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>