ui优化
This commit is contained in:
yml2213
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
|
||||
import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
|
||||
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
|
||||
import { fetchAdminAuditLogs } from '@/services/admin'
|
||||
import type { AdminAuditLogItem, AdminPagination } from '@/types/admin'
|
||||
@@ -25,7 +25,7 @@ const pagination = ref<AdminPagination>({
|
||||
total: 0,
|
||||
})
|
||||
|
||||
async function loadAuditLogs(page = pagination.value.page) {
|
||||
async function loadAuditLogs(page = 1) {
|
||||
if (!hasAdminRole('admin')) {
|
||||
loading.value = false
|
||||
return
|
||||
@@ -53,6 +53,10 @@ async function loadAuditLogs(page = pagination.value.page) {
|
||||
}
|
||||
}
|
||||
|
||||
function handlePageChange() {
|
||||
loadAuditLogs(pagination.value.page)
|
||||
}
|
||||
|
||||
function formatPayload(payload: Record<string, unknown>) {
|
||||
const text = stringifyDisplayJson(payload, 0)
|
||||
return text.length > 120 ? `${text.slice(0, 120)}...` : text
|
||||
@@ -68,165 +72,133 @@ onMounted(loadAuditLogs)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="admin-panel">
|
||||
<header class="panel-header">
|
||||
<div>
|
||||
<h1>操作审计</h1>
|
||||
<p>集中查看高风险后台动作，便于排查谁在什么时间改了什么。</p>
|
||||
</div>
|
||||
<span class="meta-copy">{{ totalLabel }}</span>
|
||||
</header>
|
||||
<div class="audit-page">
|
||||
<AdminPageHeader title="操作审计" description="集中查看高风险后台动作，便于排查谁在什么时间改了什么。">
|
||||
<template #extra>
|
||||
<span class="total-label">{{ totalLabel }}</span>
|
||||
</template>
|
||||
</AdminPageHeader>
|
||||
|
||||
<div v-if="!hasAdminRole('admin')" class="empty-block">仅管理员可以访问操作审计。</div>
|
||||
<!-- 权限检查 -->
|
||||
<el-result
|
||||
v-if="!hasAdminRole('admin')"
|
||||
icon="warning"
|
||||
title="仅管理员可以访问操作审计"
|
||||
/>
|
||||
|
||||
<template v-else>
|
||||
<section class="filter-bar">
|
||||
<input v-model="actorUsername" class="text-input" placeholder="操作账号" />
|
||||
<select v-model="action" class="text-input select-input">
|
||||
<option v-for="option in adminAuditActionOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
<select v-model="targetType" class="text-input select-input">
|
||||
<option v-for="option in adminAuditTargetTypeOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</section>
|
||||
<!-- 筛选栏 -->
|
||||
<el-card shadow="never" class="filter-card">
|
||||
<div class="filter-row">
|
||||
<el-input
|
||||
v-model="actorUsername"
|
||||
placeholder="操作账号"
|
||||
clearable
|
||||
style="width: 160px"
|
||||
@keyup.enter="handlePageChange"
|
||||
/>
|
||||
<el-select v-model="action" placeholder="动作" clearable style="width: 160px">
|
||||
<el-option v-for="opt in adminAuditActionOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
<el-select v-model="targetType" placeholder="目标类型" clearable style="width: 160px">
|
||||
<el-option v-for="opt in adminAuditTargetTypeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
<el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" style="width: 160px" />
|
||||
<el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" style="width: 160px" />
|
||||
<el-button type="primary" @click="handlePageChange">查询</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<section class="filter-bar">
|
||||
<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="() => loadAuditLogs()">查询</el-button>
|
||||
</section>
|
||||
<!-- 错误提示 -->
|
||||
<el-alert
|
||||
v-if="errorMessage"
|
||||
:title="errorMessage"
|
||||
type="error"
|
||||
show-icon
|
||||
:closable="false"
|
||||
style="margin-top: 16px"
|
||||
/>
|
||||
|
||||
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
|
||||
<div v-if="loading" class="empty-block">审计日志加载中</div>
|
||||
<!-- 表格 -->
|
||||
<el-card shadow="never" class="table-card" style="margin-top: 16px">
|
||||
<el-table
|
||||
:data="items"
|
||||
stripe
|
||||
size="small"
|
||||
v-loading="loading"
|
||||
element-loading-text="审计日志加载中"
|
||||
>
|
||||
<el-table-column label="时间" width="180">
|
||||
<template #default="{ row }">{{ formatAdminDateTime(row.createdAt) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="actorUsername" label="操作人" width="120" />
|
||||
<el-table-column label="角色" width="100">
|
||||
<template #default="{ row }"><AdminStatusTag :status="row.actorRole" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="动作" width="140">
|
||||
<template #default="{ row }">
|
||||
<strong>{{ formatAuditAction(row.action) }}</strong>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="目标" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<strong>{{ resolveTargetLabel(row.targetType, row.targetId) }}</strong>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="摘要" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<span class="payload-text">{{ formatPayload(row.payload) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty :image-size="60" description="暂无审计记录" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<div v-else class="table-card">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>时间</th>
|
||||
<th>操作人</th>
|
||||
<th>角色</th>
|
||||
<th>动作</th>
|
||||
<th>目标</th>
|
||||
<th>摘要</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in items" :key="item.logId">
|
||||
<td>{{ formatAdminDateTime(item.createdAt) }}</td>
|
||||
<td>{{ item.actorUsername }}</td>
|
||||
<td><AdminStatusTag :status="item.actorRole" /></td>
|
||||
<td>
|
||||
<strong>{{ formatAuditAction(item.action) }}</strong>
|
||||
</td>
|
||||
<td>
|
||||
<strong>{{ resolveTargetLabel(item.targetType, item.targetId) }}</strong>
|
||||
</td>
|
||||
<td class="payload-cell">{{ formatPayload(item.payload) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<AdminPaginationBar
|
||||
:page="pagination.page"
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
v-if="pagination.total > 0"
|
||||
v-model:current-page="pagination.page"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:loading="loading"
|
||||
@change="loadAuditLogs"
|
||||
layout="total, prev, pager, next"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-panel {
|
||||
.audit-page {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
.total-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.panel-header h1 {
|
||||
margin: 0;
|
||||
color: #1d3555;
|
||||
}
|
||||
|
||||
.panel-header p {
|
||||
margin: 8px 0 0;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.meta-copy {
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.filter-bar,
|
||||
.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);
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.error-copy {
|
||||
color: #b42318;
|
||||
.table-card {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.payload-cell {
|
||||
max-width: 420px;
|
||||
word-break: break-all;
|
||||
.payload-text {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
word-break: break-all;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
|
||||
import { fetchAdminDashboardSummary } from '@/services/admin'
|
||||
import type { AdminDashboardSummary } from '@/types/admin'
|
||||
|
||||
@@ -30,84 +31,57 @@ const cards = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="admin-panel">
|
||||
<header class="panel-header">
|
||||
<div>
|
||||
<h1>系统概览</h1>
|
||||
<p>快速查看订单和交付链路的运行状态。</p>
|
||||
</div>
|
||||
</header>
|
||||
<div class="dashboard-page">
|
||||
<AdminPageHeader title="系统概览" description="快速查看订单和交付链路的运行状态。" />
|
||||
|
||||
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
|
||||
<el-alert
|
||||
v-if="errorMessage"
|
||||
:title="errorMessage"
|
||||
type="error"
|
||||
show-icon
|
||||
:closable="false"
|
||||
style="margin-top: 16px"
|
||||
/>
|
||||
|
||||
<el-skeleton v-if="loading" :rows="12" animated style="margin-top: 16px" />
|
||||
|
||||
<div v-if="loading" class="empty-block">概览加载中</div>
|
||||
<div v-else class="summary-grid">
|
||||
<article v-for="card in cards" :key="card.key" class="summary-card">
|
||||
<span>{{ card.label }}</span>
|
||||
<strong>{{ summary?.[card.key] ?? 0 }}</strong>
|
||||
</article>
|
||||
<el-card v-for="card in cards" :key="card.key" shadow="never" class="stat-card">
|
||||
<span class="stat-label">{{ card.label }}</span>
|
||||
<strong class="stat-value">{{ summary?.[card.key] ?? 0 }}</strong>
|
||||
</el-card>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-panel {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.panel-header h1 {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
color: #1d3555;
|
||||
}
|
||||
|
||||
.panel-header p {
|
||||
margin: 8px 0 0;
|
||||
color: #64748b;
|
||||
}
|
||||
.dashboard-page { display: grid; gap: 0; }
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
gap: var(--space-4);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
padding: 18px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border: 1px solid rgba(86, 108, 138, 0.1);
|
||||
box-shadow: 0 18px 44px rgba(30, 49, 78, 0.08);
|
||||
.stat-card {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.summary-card span {
|
||||
.stat-label {
|
||||
display: block;
|
||||
color: #6a7a91;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.summary-card strong {
|
||||
.stat-value {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 28px;
|
||||
color: #1f324a;
|
||||
font-size: var(--text-3xl);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.empty-block,
|
||||
.error-copy {
|
||||
padding: 16px 18px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
}
|
||||
|
||||
.error-copy {
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.summary-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.summary-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -919,13 +919,13 @@ onMounted(loadConfigs)
|
||||
.panel-header h1,
|
||||
.section-title-row h3 {
|
||||
margin: 0;
|
||||
color: #1d3555;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.panel-header p,
|
||||
.section-title-row p {
|
||||
margin: 6px 0 0;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
@@ -957,7 +957,7 @@ onMounted(loadConfigs)
|
||||
border-radius: 999px;
|
||||
background: rgba(37, 89, 167, 0.08);
|
||||
border: 1px solid rgba(37, 89, 167, 0.12);
|
||||
color: #2559a7;
|
||||
color: var(--color-primary-dark);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
@@ -999,7 +999,7 @@ onMounted(loadConfigs)
|
||||
padding: 8px 12px;
|
||||
border-radius: 14px;
|
||||
background: rgba(15, 23, 42, 0.05);
|
||||
color: #1d3555;
|
||||
color: var(--text-primary);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@@ -1019,13 +1019,13 @@ onMounted(loadConfigs)
|
||||
}
|
||||
|
||||
.overview-stat span {
|
||||
color: #64748b;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.overview-stat strong {
|
||||
color: #1d3555;
|
||||
color: var(--text-primary);
|
||||
font-size: 22px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
@@ -1043,7 +1043,7 @@ onMounted(loadConfigs)
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 23, 42, 0.04);
|
||||
color: #475467;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -1084,7 +1084,7 @@ onMounted(loadConfigs)
|
||||
|
||||
.toolbar-hint {
|
||||
margin: 10px 0 0;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -1103,7 +1103,7 @@ onMounted(loadConfigs)
|
||||
}
|
||||
|
||||
.lookup-summary-item strong {
|
||||
color: #1d3555;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.binding-card {
|
||||
@@ -1137,11 +1137,11 @@ onMounted(loadConfigs)
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
color: #1d3555;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.binding-subtle {
|
||||
color: #64748b;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -1164,7 +1164,7 @@ onMounted(loadConfigs)
|
||||
.collapse-button {
|
||||
border: 1px solid rgba(86, 108, 138, 0.18);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
color: #1d3555;
|
||||
color: var(--text-primary);
|
||||
border-radius: 999px;
|
||||
padding: 7px 12px;
|
||||
font: inherit;
|
||||
@@ -1174,7 +1174,7 @@ onMounted(loadConfigs)
|
||||
.binding-collapsed-preview {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -1190,7 +1190,7 @@ onMounted(loadConfigs)
|
||||
border-radius: 14px;
|
||||
background: #fff4f2;
|
||||
border: 1px solid rgba(244, 63, 94, 0.18);
|
||||
color: #b42318;
|
||||
color: var(--color-danger);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -1200,13 +1200,13 @@ onMounted(loadConfigs)
|
||||
}
|
||||
|
||||
.field-block span {
|
||||
color: #475467;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.field-help {
|
||||
color: #64748b;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -1236,13 +1236,13 @@ onMounted(loadConfigs)
|
||||
}
|
||||
|
||||
.text-input--readonly {
|
||||
color: #475467;
|
||||
color: var(--text-secondary);
|
||||
background: rgba(148, 163, 184, 0.08);
|
||||
}
|
||||
|
||||
.binding-inline-error {
|
||||
margin: 10px 0 0;
|
||||
color: #b42318;
|
||||
color: var(--color-danger);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -1259,7 +1259,7 @@ onMounted(loadConfigs)
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
color: #475467;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.data-table {
|
||||
@@ -1273,12 +1273,12 @@ onMounted(loadConfigs)
|
||||
padding: 12px 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgba(86, 108, 138, 0.08);
|
||||
color: #334155;
|
||||
color: var(--text-primary);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
color: #64748b;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -1288,17 +1288,17 @@ onMounted(loadConfigs)
|
||||
}
|
||||
|
||||
.cell-subtle {
|
||||
color: #64748b;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.empty-block,
|
||||
.empty-inline {
|
||||
color: #64748b;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.error-copy {
|
||||
color: #b42318;
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1085,18 +1085,18 @@ onMounted(loadConfigs)
|
||||
|
||||
<style scoped>
|
||||
.admin-panel {
|
||||
--panel-ink: #1f2a37;
|
||||
--panel-muted: #667085;
|
||||
--panel-border: rgba(31, 42, 55, 0.12);
|
||||
--panel-ink: var(--text-primary);
|
||||
--panel-muted: var(--text-secondary);
|
||||
--panel-border: var(--border-default);
|
||||
--panel-soft: #f6f8fb;
|
||||
--panel-line: #dce3ec;
|
||||
--accent: #0f6b5f;
|
||||
--accent-strong: #0b5d53;
|
||||
--warn: #b54708;
|
||||
--danger: #b42318;
|
||||
--accent: var(--color-primary);
|
||||
--accent-strong: var(--color-primary-dark);
|
||||
--warn: var(--color-warning);
|
||||
--danger: var(--color-danger);
|
||||
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.hero-card,
|
||||
@@ -1737,15 +1737,6 @@ onMounted(loadConfigs)
|
||||
}
|
||||
}
|
||||
|
||||
.admin-panel {
|
||||
--accent: #0f5dd8;
|
||||
--accent-strong: #175cd3;
|
||||
--panel-ink: #1d3555;
|
||||
--panel-muted: #64748b;
|
||||
--panel-border: rgba(86, 108, 138, 0.1);
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.panel-header,
|
||||
.section-title-row {
|
||||
|
||||
@@ -1,49 +1,74 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import {
|
||||
Box,
|
||||
Monitor,
|
||||
Connection,
|
||||
DataAnalysis,
|
||||
Document,
|
||||
List,
|
||||
Message,
|
||||
Service,
|
||||
Setting,
|
||||
Tickets,
|
||||
User,
|
||||
} from '@element-plus/icons-vue'
|
||||
|
||||
import { showSuccess } from '@/lib/feedback'
|
||||
import { logoutAdmin } from '@/services/admin'
|
||||
import { clearAdminSession, getAdminRole, getAdminTokenExpiresAt, getAdminUsername } from '@/utils/admin-auth'
|
||||
import { formatAdminDateTime } from '@/utils/admin-time'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const currentRole = computed(() => getAdminRole())
|
||||
const isAdmin = computed(() => currentRole.value === 'admin')
|
||||
const isOperator = computed(() => currentRole.value === 'operator')
|
||||
|
||||
const roleLabel = computed(() => {
|
||||
if (currentRole.value === 'admin') {
|
||||
return '管理员'
|
||||
}
|
||||
|
||||
if (currentRole.value === 'support') {
|
||||
return '客服'
|
||||
}
|
||||
|
||||
if (currentRole.value === 'admin') return '管理员'
|
||||
if (currentRole.value === 'support') return '客服'
|
||||
return '普通运营'
|
||||
})
|
||||
|
||||
const navItems = computed(() => {
|
||||
const baseItems = [
|
||||
{ to: '/admin/dashboard', label: '概览' },
|
||||
{ to: '/admin/orders', label: '订单' },
|
||||
{ to: '/admin/tasks', label: '任务' },
|
||||
{ to: '/admin/manual-redeem', label: '人工兑换' },
|
||||
{ to: '/admin/message-deliveries', label: '消息发送' },
|
||||
const items: { to: string; label: string; icon: typeof DataAnalysis }[] = [
|
||||
{ to: '/admin/dashboard', label: '概览', icon: DataAnalysis },
|
||||
]
|
||||
|
||||
if (isAdmin.value) {
|
||||
items.push({ to: '/admin/users', label: '用户', icon: User })
|
||||
}
|
||||
|
||||
items.push(
|
||||
{ to: '/admin/orders', label: '订单', icon: Document },
|
||||
{ to: '/admin/tasks', label: '任务', icon: List },
|
||||
)
|
||||
|
||||
if (isAdmin.value || isOperator.value) {
|
||||
baseItems.splice(3, 0, { to: '/admin/inventory', label: '库存' })
|
||||
baseItems.push({ to: '/admin/webhook-events', label: 'Webhook' })
|
||||
items.push({ to: '/admin/inventory', label: '库存', icon: Box })
|
||||
}
|
||||
|
||||
items.push(
|
||||
{ to: '/admin/manual-redeem', label: '人工兑换', icon: Service },
|
||||
{ to: '/admin/message-deliveries', label: '消息发送', icon: Message },
|
||||
)
|
||||
|
||||
if (isAdmin.value || isOperator.value) {
|
||||
items.push({ to: '/admin/webhook-events', label: 'Webhook', icon: Connection })
|
||||
}
|
||||
|
||||
if (isAdmin.value) {
|
||||
baseItems.splice(1, 0, { to: '/admin/users', label: '用户' })
|
||||
baseItems.push({ to: '/admin/platform-shops', label: '平台配置' })
|
||||
baseItems.push({ to: '/admin/platform-fulfillment', label: '履约配置' })
|
||||
baseItems.push({ to: '/admin/audit-logs', label: '审计' })
|
||||
items.push(
|
||||
{ to: '/admin/platform-shops', label: '平台配置', icon: Setting },
|
||||
{ to: '/admin/platform-fulfillment', label: '履约配置', icon: Tickets },
|
||||
{ to: '/admin/audit-logs', label: '审计', icon: Monitor },
|
||||
)
|
||||
}
|
||||
|
||||
return baseItems
|
||||
return items
|
||||
})
|
||||
|
||||
async function submitLogout() {
|
||||
@@ -60,32 +85,30 @@ async function submitLogout() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="admin-page">
|
||||
<div class="admin-page">
|
||||
<aside class="admin-sidebar">
|
||||
<div class="admin-brand">
|
||||
<div class="sidebar-brand">
|
||||
<strong>运营后台</strong>
|
||||
<p>订单与交付管理</p>
|
||||
</div>
|
||||
|
||||
<div class="admin-meta">
|
||||
<span>当前账号</span>
|
||||
<strong>{{ getAdminUsername() || '未读取' }}</strong>
|
||||
<span>当前角色</span>
|
||||
<strong>{{ roleLabel }}</strong>
|
||||
<span>登录有效期</span>
|
||||
<strong>{{ formatAdminDateTime(getAdminTokenExpiresAt()) }}</strong>
|
||||
<div class="sidebar-user">
|
||||
<div class="user-name">{{ getAdminUsername() || '未读取' }}</div>
|
||||
<div class="user-role">{{ roleLabel }}</div>
|
||||
<div class="user-expiry">有效期至 {{ formatAdminDateTime(getAdminTokenExpiresAt()) }}</div>
|
||||
</div>
|
||||
|
||||
<nav class="admin-nav">
|
||||
<RouterLink
|
||||
v-for="item in navItems"
|
||||
:key="item.to"
|
||||
class="admin-nav-link"
|
||||
:to="item.to"
|
||||
>
|
||||
{{ item.label }}
|
||||
</RouterLink>
|
||||
</nav>
|
||||
<el-menu
|
||||
:default-active="route.path"
|
||||
router
|
||||
class="sidebar-menu"
|
||||
:ellipsis="false"
|
||||
>
|
||||
<el-menu-item v-for="item in navItems" :key="item.to" :index="item.to">
|
||||
<el-icon><component :is="item.icon" /></el-icon>
|
||||
<span>{{ item.label }}</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<el-button round class="logout-btn" @click="submitLogout">退出登录</el-button>
|
||||
</aside>
|
||||
@@ -93,95 +116,103 @@ async function submitLogout() {
|
||||
<section class="admin-content">
|
||||
<RouterView />
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-page {
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: 240px minmax(0, 1fr);
|
||||
grid-template-columns: 260px minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(73, 136, 255, 0.1), transparent 30%),
|
||||
linear-gradient(180deg, #f3f7fc 0%, #edf3fb 100%);
|
||||
linear-gradient(180deg, var(--bg-page) 0%, #edf3fb 100%);
|
||||
}
|
||||
|
||||
.admin-sidebar {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px 18px;
|
||||
padding: var(--space-6) 0;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid rgba(86, 108, 138, 0.12);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border-right: 1px solid var(--border-default);
|
||||
background: var(--bg-sidebar);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.admin-brand strong {
|
||||
.sidebar-brand {
|
||||
padding: 0 var(--space-5);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.sidebar-brand strong {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
color: #203551;
|
||||
font-size: var(--text-xl);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.admin-brand p {
|
||||
margin: 8px 0 0;
|
||||
color: #6c7c92;
|
||||
.sidebar-brand p {
|
||||
margin: var(--space-2) 0 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.admin-nav {
|
||||
margin-top: 28px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.admin-meta {
|
||||
margin-top: 18px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
.sidebar-user {
|
||||
margin: 0 var(--space-4) var(--space-4);
|
||||
padding: var(--space-3);
|
||||
border-radius: var(--radius-md);
|
||||
background: #f5f8fc;
|
||||
color: #5f7289;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.admin-meta strong {
|
||||
color: #1f3c5c;
|
||||
word-break: break-all;
|
||||
.user-name {
|
||||
color: var(--text-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.admin-nav-link {
|
||||
display: block;
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
text-decoration: none;
|
||||
color: #304866;
|
||||
background: #f5f8fc;
|
||||
border: 1px solid transparent;
|
||||
.user-role {
|
||||
color: var(--text-secondary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.admin-nav-link.router-link-active {
|
||||
color: #114899;
|
||||
border-color: rgba(17, 72, 153, 0.14);
|
||||
background: rgba(17, 72, 153, 0.08);
|
||||
.user-expiry {
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
border-right: none;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-menu :deep(.el-menu-item) {
|
||||
margin: 2px var(--space-2);
|
||||
border-radius: var(--radius-md);
|
||||
min-height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.sidebar-menu :deep(.el-menu-item.is-active) {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-primary-light);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
margin: var(--space-3) var(--space-4) 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
min-width: 0;
|
||||
height: 100vh;
|
||||
padding: 24px;
|
||||
padding: var(--space-6);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
margin-top: auto;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
@media (max-width: 900px) {
|
||||
.admin-page {
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
@@ -193,16 +224,15 @@ async function submitLogout() {
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid rgba(86, 108, 138, 0.12);
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
padding-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.sidebar-menu { overflow: visible; }
|
||||
|
||||
.admin-content {
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
|
||||
import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
|
||||
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
|
||||
import { fetchAdminMessageDeliveries } from '@/services/admin'
|
||||
import type { AdminMessageDeliveryListItem, AdminPagination } from '@/types/admin'
|
||||
@@ -72,20 +72,11 @@ function resetFilters() {
|
||||
}
|
||||
|
||||
function formatResponse(item: AdminMessageDeliveryListItem) {
|
||||
if (item.responseStatus <= 0 && !item.errorMessage) {
|
||||
return '-'
|
||||
}
|
||||
|
||||
if (item.responseStatus <= 0 && !item.errorMessage) return '-'
|
||||
const parts = []
|
||||
if (item.responseStatus > 0) {
|
||||
parts.push(`HTTP ${item.responseStatus}`)
|
||||
}
|
||||
|
||||
if (item.responseStatus > 0) parts.push(`HTTP ${item.responseStatus}`)
|
||||
const msg = String(item.response?.Error_Msg || item.response?.msg || item.response?.message || item.response?.error || '').trim()
|
||||
if (msg) {
|
||||
parts.push(msg)
|
||||
}
|
||||
|
||||
if (msg) parts.push(msg)
|
||||
return parts.join(' · ') || item.errorMessage || '-'
|
||||
}
|
||||
|
||||
@@ -93,394 +84,227 @@ onMounted(loadMessageDeliveries)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="admin-panel">
|
||||
<header class="panel-header">
|
||||
<div class="panel-header-copy">
|
||||
<h1>消息发送记录</h1>
|
||||
<p>查看领取链接消息是否真正发出、平台返回了什么、失败原因是什么。</p>
|
||||
</div>
|
||||
<div class="panel-header-badge">共 {{ pagination.total }} 条记录</div>
|
||||
</header>
|
||||
<div class="deliveries-page">
|
||||
<AdminPageHeader title="消息发送记录" description="查看领取链接消息是否真正发出、平台返回了什么、失败原因是什么。">
|
||||
<template #extra>
|
||||
<span class="total-badge">共 {{ pagination.total }} 条记录</span>
|
||||
</template>
|
||||
</AdminPageHeader>
|
||||
|
||||
<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>
|
||||
<!-- 筛选 -->
|
||||
<el-card shadow="never" class="filter-card">
|
||||
<div class="filter-grid">
|
||||
<el-input v-model="provider" placeholder="服务商，如 agiso" clearable @keyup.enter="loadMessageDeliveries(1)" />
|
||||
<el-input v-model="platform" placeholder="业务平台，如 xianyu" clearable @keyup.enter="loadMessageDeliveries(1)" />
|
||||
<el-select v-model="status" placeholder="发送状态" clearable>
|
||||
<el-option v-for="opt in adminMessageDeliveryStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
<el-input v-model="shopId" placeholder="店铺 ID（精确匹配）" clearable @keyup.enter="loadMessageDeliveries(1)" />
|
||||
<el-input v-model="platformOrderId" placeholder="平台订单号" clearable @keyup.enter="loadMessageDeliveries(1)" />
|
||||
<el-input v-model="taskNo" placeholder="任务编号" clearable @keyup.enter="loadMessageDeliveries(1)" />
|
||||
<el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
|
||||
<el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
|
||||
</div>
|
||||
<div class="filters-actions">
|
||||
<span class="filters-hint">消息体、Claim 链接、接口回执和失败原因都已经拆分展示，查问题会更直观。</span>
|
||||
<div class="filters-button-row">
|
||||
<div class="filter-actions">
|
||||
<span class="filter-hint">消息体、Claim 链接、接口回执和失败原因都已经拆分展示，查问题会更直观。</span>
|
||||
<div class="filter-buttons">
|
||||
<el-button round @click="resetFilters">重置</el-button>
|
||||
<el-button round type="primary" @click="() => loadMessageDeliveries(1)">查询</el-button>
|
||||
<el-button round type="primary" @click="loadMessageDeliveries(1)">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</el-card>
|
||||
|
||||
<section v-if="!loading && items.length > 0" class="summary-grid">
|
||||
<article class="summary-card summary-card-success">
|
||||
<!-- 摘要 -->
|
||||
<div v-if="!loading && items.length > 0" class="summary-grid">
|
||||
<el-card shadow="never" class="summary-card summary-card--success">
|
||||
<span class="summary-label">当前页成功</span>
|
||||
<strong class="summary-value">{{ summary.successCount }}</strong>
|
||||
<span class="summary-meta">消息已被平台受理或发送完成</span>
|
||||
</article>
|
||||
<article class="summary-card summary-card-danger">
|
||||
</el-card>
|
||||
<el-card shadow="never" class="summary-card summary-card--danger">
|
||||
<span class="summary-label">当前页失败</span>
|
||||
<strong class="summary-value">{{ summary.failedCount }}</strong>
|
||||
<span class="summary-meta">优先查看失败原因和接口返回</span>
|
||||
</article>
|
||||
<article class="summary-card summary-card-warning">
|
||||
</el-card>
|
||||
<el-card shadow="never" 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>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
|
||||
<div v-if="loading" class="empty-block">消息发送记录加载中</div>
|
||||
<div v-else-if="items.length === 0" class="empty-block">当前筛选下还没有消息发送记录。</div>
|
||||
<el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
|
||||
|
||||
<div v-else class="records-shell">
|
||||
<div class="records-toolbar">
|
||||
<div>
|
||||
<!-- 列表 -->
|
||||
<el-card shadow="never" class="table-card" v-loading="loading" element-loading-text="消息发送记录加载中">
|
||||
<template v-if="items.length === 0 && !loading">
|
||||
<el-empty description="当前筛选下还没有消息发送记录。" :image-size="60" />
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="records-toolbar">
|
||||
<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 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>
|
||||
</div>
|
||||
<AdminStatusTag :status="item.status" />
|
||||
</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">
|
||||
<span v-if="item.orderId" class="meta-chip">
|
||||
订单
|
||||
<RouterLink class="inline-link" :to="`/admin/orders/${item.orderId}`">{{ item.orderId }}</RouterLink>
|
||||
</span>
|
||||
<span v-if="item.taskId" class="meta-chip">
|
||||
任务
|
||||
<RouterLink class="inline-link" :to="`/admin/tasks/${item.taskId}`">{{ item.taskNo || item.taskId }}</RouterLink>
|
||||
</span>
|
||||
<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">
|
||||
<span v-if="item.orderId" class="meta-chip">
|
||||
订单
|
||||
<RouterLink class="inline-link" :to="`/admin/orders/${item.orderId}`">{{ item.orderId }}</RouterLink>
|
||||
</span>
|
||||
<span v-if="item.taskId" class="meta-chip">
|
||||
任务
|
||||
<RouterLink class="inline-link" :to="`/admin/tasks/${item.taskId}`">{{ item.taskNo || item.taskId }}</RouterLink>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="item.taskStatus" class="tag-row">
|
||||
<AdminStatusTag :status="item.taskStatus" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.taskStatus" class="tag-row">
|
||||
<AdminStatusTag :status="item.taskStatus" />
|
||||
</section>
|
||||
|
||||
<section class="record-section record-section-message">
|
||||
<span class="section-label">消息内容</span>
|
||||
<div class="message-cell" :title="item.messageContent">{{ item.messageContent || '-' }}</div>
|
||||
<a v-if="item.claimUrl" class="claim-link" :href="item.claimUrl" target="_blank" rel="noreferrer">打开 Claim 链接</a>
|
||||
</section>
|
||||
|
||||
<section class="record-section">
|
||||
<span class="section-label">接口结果</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">{{ formatResponse(item) }}</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>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="record-section record-section-message">
|
||||
<span class="section-label">消息内容</span>
|
||||
<div class="message-cell" :title="item.messageContent">
|
||||
{{ item.messageContent || '-' }}
|
||||
</div>
|
||||
<a v-if="item.claimUrl" class="claim-link claim-link-button" :href="item.claimUrl" target="_blank" rel="noreferrer">
|
||||
打开 Claim 链接
|
||||
</a>
|
||||
</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>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<section class="record-section">
|
||||
<span class="section-label">接口结果</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">{{ formatResponse(item) }}</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>
|
||||
</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>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<AdminPaginationBar
|
||||
:page="pagination.page"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:loading="loading"
|
||||
@change="loadMessageDeliveries"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<el-pagination
|
||||
v-if="pagination.total > 0"
|
||||
v-model:current-page="pagination.page"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
layout="total, prev, pager, next"
|
||||
style="margin-top: 16px; justify-content: center"
|
||||
@current-change="loadMessageDeliveries"
|
||||
/>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-panel {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
.deliveries-page { display: grid; gap: 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: 6px 0 0;
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.panel-header-badge {
|
||||
flex: 0 0 auto;
|
||||
.total-badge {
|
||||
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;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
.filter-card { margin-top: var(--space-4); }
|
||||
|
||||
.filters-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.filters-grid {
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.filter-field {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.filter-field span {
|
||||
color: #5d6f87;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.filters-actions {
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.filters-hint {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.filters-button-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.filter-hint { color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
.filter-buttons { display: flex; gap: 10px; flex-shrink: 0; }
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.summary-card { position: relative; overflow: hidden; }
|
||||
.summary-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: auto -26px -26px auto;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
opacity: 0.14;
|
||||
}
|
||||
.summary-card--success::after { background: var(--color-success); }
|
||||
.summary-card--danger::after { background: var(--color-danger); }
|
||||
.summary-card--warning::after { background: var(--color-warning); }
|
||||
|
||||
.summary-card-success::after {
|
||||
background: #12b76a;
|
||||
}
|
||||
.summary-label { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; }
|
||||
.summary-value { font-size: var(--text-3xl); line-height: 1; color: var(--text-primary); }
|
||||
.summary-meta { color: var(--text-muted); font-size: var(--text-xs); }
|
||||
|
||||
.summary-card-danger::after {
|
||||
background: #f04438;
|
||||
}
|
||||
.table-card { margin-top: var(--space-4); overflow: visible; }
|
||||
|
||||
.summary-card-warning::after {
|
||||
background: #f79009;
|
||||
}
|
||||
.records-toolbar { margin-bottom: var(--space-3); }
|
||||
.records-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
|
||||
.records-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
|
||||
.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 {
|
||||
color: #b42318;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.empty-block {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.records-shell {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.records-toolbar strong {
|
||||
display: block;
|
||||
color: #1f324a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.records-toolbar span {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.record-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
.record-list { display: grid; gap: var(--space-3); }
|
||||
|
||||
.record-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
|
||||
border: 1px solid rgba(86, 108, 138, 0.12);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.record-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.record-identity {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
.record-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
|
||||
.record-identity { display: grid; gap: var(--space-2); min-width: 0; }
|
||||
|
||||
.record-id {
|
||||
display: inline-flex;
|
||||
@@ -488,210 +312,105 @@ onMounted(loadMessageDeliveries)
|
||||
width: fit-content;
|
||||
min-height: 24px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
background: #eef4ff;
|
||||
color: #2456a2;
|
||||
font-size: 12px;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary-dark);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.record-source-line {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.record-source-line { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
|
||||
|
||||
.source-pill,
|
||||
.source-chip {
|
||||
.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;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--text-xs);
|
||||
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;
|
||||
}
|
||||
.source-pill { background: #f1f6ff; color: var(--color-primary-dark); }
|
||||
.source-chip { background: #f4f7fb; color: var(--text-secondary); }
|
||||
.source-chip--muted { color: var(--text-muted); }
|
||||
.source-separator { color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; }
|
||||
|
||||
.record-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.record-section {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
padding: var(--space-3);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
border: 1px solid rgba(86, 108, 138, 0.08);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
.record-section-message { grid-column: span 2; }
|
||||
|
||||
.record-section-message {
|
||||
grid-column: span 2;
|
||||
}
|
||||
.section-label { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
|
||||
|
||||
.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;
|
||||
}
|
||||
.cell-stack { display: grid; gap: 6px; min-width: 0; }
|
||||
.cell-title { color: var(--text-primary); font-weight: 700; word-break: break-word; }
|
||||
.cell-subtle { color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
.cell-subtle-break { word-break: break-all; }
|
||||
|
||||
.message-cell {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
line-height: 1.6;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
font-size: var(--text-sm);
|
||||
min-height: 72px;
|
||||
}
|
||||
|
||||
.claim-link,
|
||||
.inline-link {
|
||||
color: #175cd3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.claim-link-button {
|
||||
.claim-link, .inline-link { color: var(--color-primary-dark); text-decoration: none; }
|
||||
.claim-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
min-height: 34px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
background: #eff6ff;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-primary-light);
|
||||
border: 1px solid rgba(23, 92, 211, 0.16);
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.meta-chip-row,
|
||||
.tag-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.meta-chip-row, .tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
|
||||
.meta-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
background: #f5f8fc;
|
||||
color: #304866;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.error-inline {
|
||||
color: #b42318;
|
||||
line-height: 1.6;
|
||||
font-size: 12px;
|
||||
.error-inline { color: var(--color-danger); line-height: 1.6; font-size: var(--text-xs); }
|
||||
|
||||
@media (max-width: 1200px) { .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|
||||
@media (max-width: 900px) {
|
||||
.filter-grid,
|
||||
.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.record-section-message { grid-column: span 1; }
|
||||
.filter-actions { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
|
||||
@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) {
|
||||
.panel-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.filters-grid,
|
||||
.summary-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,
|
||||
.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;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.filter-grid,
|
||||
.summary-grid { grid-template-columns: 1fr; }
|
||||
.filter-buttons { width: 100%; }
|
||||
.filter-buttons :deep(.el-button) { flex: 1 1 auto; }
|
||||
.record-top { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
|
||||
import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
|
||||
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
|
||||
import { fetchAdminOrders } from '@/services/admin'
|
||||
import type { AdminOrderListItem, AdminPagination } from '@/types/admin'
|
||||
@@ -77,10 +77,7 @@ function resolveItemSummary(item: AdminOrderListItem) {
|
||||
}
|
||||
|
||||
function resolveBindingTone(completedCount: number, totalCount: number) {
|
||||
if (completedCount <= 0) {
|
||||
return 'warning'
|
||||
}
|
||||
|
||||
if (completedCount <= 0) return 'warning'
|
||||
return completedCount === totalCount ? 'success' : 'primary'
|
||||
}
|
||||
|
||||
@@ -92,285 +89,193 @@ onMounted(loadOrders)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="admin-panel">
|
||||
<header class="panel-header">
|
||||
<div class="panel-header-copy">
|
||||
<h1>订单列表</h1>
|
||||
<p>查看平台订单、支付状态、商品摘要和对应任务推进情况。</p>
|
||||
</div>
|
||||
<div class="panel-header-badge">共 {{ pagination.total }} 条订单</div>
|
||||
</header>
|
||||
<div class="orders-page">
|
||||
<AdminPageHeader title="订单列表" description="查看平台订单、支付状态、商品摘要和对应任务推进情况。">
|
||||
<template #extra>
|
||||
<span class="total-badge">共 {{ pagination.total }} 条订单</span>
|
||||
</template>
|
||||
</AdminPageHeader>
|
||||
|
||||
<section class="filters-card">
|
||||
<div class="filters-grid">
|
||||
<label class="filter-field">
|
||||
<span>平台订单号</span>
|
||||
<input v-model="platformOrderId" class="text-input" placeholder="支持模糊匹配" />
|
||||
</label>
|
||||
<label class="filter-field">
|
||||
<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>
|
||||
<!-- 筛选 -->
|
||||
<el-card shadow="never" class="filter-card">
|
||||
<div class="filter-grid">
|
||||
<el-input v-model="platformOrderId" placeholder="平台订单号（模糊匹配）" clearable @keyup.enter="loadOrders(1)" />
|
||||
<el-select v-model="payStatus" placeholder="支付状态" clearable>
|
||||
<el-option v-for="opt in adminPayStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
<el-input v-model="skuCode" placeholder="SKU，如 dnf-cdk-a" clearable @keyup.enter="loadOrders(1)" />
|
||||
<el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
|
||||
<el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
|
||||
</div>
|
||||
<div class="filters-actions">
|
||||
<span class="filters-hint">订单信息、支付状态、绑定完成度和金额时间已拆成独立信息块，更方便排查。</span>
|
||||
<div class="filters-button-row">
|
||||
<div class="filter-actions">
|
||||
<span class="filter-hint">订单信息、支付状态、绑定完成度和金额时间已拆成独立信息块，更方便排查。</span>
|
||||
<div class="filter-buttons">
|
||||
<el-button round @click="resetFilters">重置</el-button>
|
||||
<el-button round type="primary" @click="() => loadOrders(1)">查询</el-button>
|
||||
<el-button round type="primary" @click="loadOrders(1)">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</el-card>
|
||||
|
||||
<section v-if="!loading && items.length > 0" class="summary-grid">
|
||||
<article class="summary-card summary-card-success">
|
||||
<!-- 摘要 -->
|
||||
<div v-if="!loading && items.length > 0" class="summary-grid">
|
||||
<el-card shadow="never" class="summary-card summary-card--success">
|
||||
<span class="summary-label">当前页已支付</span>
|
||||
<strong class="summary-value">{{ summary.paidCount }}</strong>
|
||||
<span class="summary-meta">已完成付款，可继续跟进交付</span>
|
||||
</article>
|
||||
<article class="summary-card summary-card-danger">
|
||||
</el-card>
|
||||
<el-card shadow="never" 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">
|
||||
</el-card>
|
||||
<el-card shadow="never" 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>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
|
||||
<div v-if="loading" class="empty-block">订单列表加载中</div>
|
||||
<div v-else-if="items.length === 0" class="empty-block">当前筛选条件下暂无订单</div>
|
||||
<el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
|
||||
|
||||
<div v-else class="orders-shell">
|
||||
<div class="orders-toolbar">
|
||||
<div>
|
||||
<!-- 列表 -->
|
||||
<el-card shadow="never" class="table-card" v-loading="loading" element-loading-text="订单列表加载中">
|
||||
<template v-if="items.length === 0 && !loading">
|
||||
<el-empty description="当前筛选条件下暂无订单" :image-size="60" />
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="orders-toolbar">
|
||||
<strong>订单明细</strong>
|
||||
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-list">
|
||||
<article v-for="item in items" :key="item.orderId" class="order-card">
|
||||
<div class="order-card-top">
|
||||
<div class="order-identity">
|
||||
<RouterLink :to="`/admin/orders/${item.orderId}`" class="cell-link order-no" :title="item.platformOrderId">
|
||||
{{ item.platformOrderId }}
|
||||
</RouterLink>
|
||||
<div class="order-meta-row">
|
||||
<span class="compact-chip">{{ item.platform || '-' }}</span>
|
||||
<span class="compact-chip">{{ resolveShopLabel(item) }}</span>
|
||||
<span class="compact-chip compact-chip--muted">买家 {{ resolveBuyerLabel(item) }}</span>
|
||||
<div class="order-list">
|
||||
<article v-for="item in items" :key="item.orderId" class="order-card">
|
||||
<div class="order-card-top">
|
||||
<div class="order-identity">
|
||||
<RouterLink :to="`/admin/orders/${item.orderId}`" class="order-no" :title="item.platformOrderId">
|
||||
{{ item.platformOrderId }}
|
||||
</RouterLink>
|
||||
<div class="order-meta-row">
|
||||
<span class="compact-chip">{{ item.platform || '-' }}</span>
|
||||
<span class="compact-chip">{{ resolveShopLabel(item) }}</span>
|
||||
<span class="compact-chip compact-chip--muted">买家 {{ resolveBuyerLabel(item) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<AdminStatusTag :status="item.payStatus" />
|
||||
</div>
|
||||
<AdminStatusTag :status="item.payStatus" />
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section class="order-section">
|
||||
<span class="section-label">商品摘要</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>
|
||||
</section>
|
||||
<section class="order-section">
|
||||
<span class="section-label">商品摘要</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>
|
||||
</section>
|
||||
|
||||
<section class="order-section">
|
||||
<span class="section-label">订单进度</span>
|
||||
<div class="status-stack">
|
||||
<AdminStatusTag :status="item.payStatus" />
|
||||
<AdminStatusTag :status="item.orderStatus" />
|
||||
<AdminStatusTag :status="item.systemBindingStatus" />
|
||||
<AdminStatusTag :status="item.userBindingStatus" />
|
||||
</div>
|
||||
</section>
|
||||
<section class="order-section">
|
||||
<span class="section-label">订单进度</span>
|
||||
<div class="status-stack">
|
||||
<AdminStatusTag :status="item.payStatus" />
|
||||
<AdminStatusTag :status="item.orderStatus" />
|
||||
<AdminStatusTag :status="item.systemBindingStatus" />
|
||||
<AdminStatusTag :status="item.userBindingStatus" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="order-section">
|
||||
<span class="section-label">金额 / 时间</span>
|
||||
<div class="info-cell">
|
||||
<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>
|
||||
</section>
|
||||
<section class="order-section">
|
||||
<span class="section-label">金额 / 时间</span>
|
||||
<div class="info-cell">
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section class="order-section">
|
||||
<span class="section-label">任务进度</span>
|
||||
<div class="task-progress-inline">
|
||||
<span class="progress-chip" :data-tone="resolveBindingTone(item.completedBindingTaskCount, item.taskCount)">
|
||||
完整绑定 {{ item.completedBindingTaskCount }}/{{ item.taskCount }}
|
||||
</span>
|
||||
<span class="progress-chip" :data-tone="resolveBindingTone(item.systemBoundTaskCount, item.taskCount)">
|
||||
系统绑定 {{ item.systemBoundTaskCount }}/{{ item.taskCount }}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<section class="order-section">
|
||||
<span class="section-label">任务进度</span>
|
||||
<div class="task-progress-inline">
|
||||
<span class="progress-chip" :data-tone="resolveBindingTone(item.completedBindingTaskCount, item.taskCount)">
|
||||
完整绑定 {{ item.completedBindingTaskCount }}/{{ item.taskCount }}
|
||||
</span>
|
||||
<span class="progress-chip" :data-tone="resolveBindingTone(item.systemBoundTaskCount, item.taskCount)">
|
||||
系统绑定 {{ item.systemBoundTaskCount }}/{{ item.taskCount }}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<AdminPaginationBar
|
||||
:page="pagination.page"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:loading="loading"
|
||||
@change="loadOrders"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<el-pagination
|
||||
v-if="pagination.total > 0"
|
||||
v-model:current-page="pagination.page"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
layout="total, prev, pager, next"
|
||||
style="margin-top: 16px; justify-content: center"
|
||||
@current-change="loadOrders"
|
||||
/>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-panel {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
.orders-page { display: grid; gap: 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: 6px 0 0;
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.panel-header-badge {
|
||||
flex: 0 0 auto;
|
||||
.total-badge {
|
||||
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;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
.filter-card { margin-top: var(--space-4); }
|
||||
|
||||
.filters-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.filters-grid {
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.filter-field {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.filter-field span {
|
||||
color: #5d6f87;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.filters-actions {
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.filter-hint { color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
.filter-buttons { display: flex; gap: 10px; flex-shrink: 0; }
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -381,121 +286,70 @@ onMounted(loadOrders)
|
||||
inset: auto -26px -26px auto;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
opacity: 0.14;
|
||||
}
|
||||
|
||||
.summary-card-success::after {
|
||||
background: #12b76a;
|
||||
}
|
||||
|
||||
.summary-card-danger::after {
|
||||
background: #f04438;
|
||||
}
|
||||
|
||||
.summary-card-primary::after {
|
||||
background: #2563eb;
|
||||
}
|
||||
.summary-card--success::after { background: var(--color-success); }
|
||||
.summary-card--danger::after { background: var(--color-danger); }
|
||||
.summary-card--primary::after { background: var(--color-primary); }
|
||||
|
||||
.summary-label {
|
||||
color: #51647d;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
font-size: 34px;
|
||||
font-size: var(--text-3xl);
|
||||
line-height: 1;
|
||||
color: #1d3555;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.summary-meta {
|
||||
color: #70829a;
|
||||
font-size: 12px;
|
||||
}
|
||||
.summary-meta { color: var(--text-muted); font-size: var(--text-xs); }
|
||||
|
||||
.error-copy {
|
||||
margin: 0;
|
||||
color: #b42318;
|
||||
}
|
||||
.table-card { margin-top: var(--space-4); overflow: visible; }
|
||||
|
||||
.empty-block {
|
||||
color: #64748b;
|
||||
}
|
||||
.orders-toolbar { margin-bottom: var(--space-3); }
|
||||
.orders-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
|
||||
.orders-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
|
||||
.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-list { display: grid; gap: var(--space-3); }
|
||||
|
||||
.order-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
|
||||
border: 1px solid rgba(86, 108, 138, 0.12);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.order-card-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.order-identity {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cell-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cell-link:hover {
|
||||
color: #175cd3;
|
||||
}
|
||||
.order-identity { min-width: 0; display: grid; gap: var(--space-2); }
|
||||
|
||||
.order-no {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
font-size: 20px;
|
||||
font-size: var(--text-xl);
|
||||
line-height: 1.1;
|
||||
font-weight: 800;
|
||||
color: #132238;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
.order-no:hover { color: var(--color-primary-dark); }
|
||||
|
||||
.order-meta-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.order-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
||||
|
||||
.compact-chip {
|
||||
display: inline-flex;
|
||||
@@ -503,169 +357,78 @@ onMounted(loadOrders)
|
||||
min-height: 28px;
|
||||
max-width: 100%;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
background: #f4f7fb;
|
||||
border: 1px solid rgba(86, 108, 138, 0.1);
|
||||
color: #44556c;
|
||||
font-size: 12px;
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.compact-chip--muted {
|
||||
color: #6b7c93;
|
||||
}
|
||||
.compact-chip--muted { color: var(--text-muted); }
|
||||
|
||||
.order-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.order-section {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
padding: var(--space-3);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
border: 1px solid rgba(86, 108, 138, 0.08);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
color: #71839b;
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.info-cell {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
.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: var(--text-primary); font-weight: 700; }
|
||||
.info-subline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; font-size: var(--text-xs); }
|
||||
.amount-text { white-space: nowrap; }
|
||||
|
||||
.info-title {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #101828;
|
||||
font-weight: 700;
|
||||
}
|
||||
.status-stack { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
|
||||
|
||||
.info-subline {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #475467;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.amount-text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-stack {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.task-progress-inline {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.task-progress-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
|
||||
|
||||
.progress-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-chip[data-tone='success'] {
|
||||
color: #0f766e;
|
||||
background: #ecfdf3;
|
||||
border-color: #a6f4c5;
|
||||
.progress-chip[data-tone='success'] { color: #0f766e; background: var(--color-success-light); border-color: #a6f4c5; }
|
||||
.progress-chip[data-tone='primary'] { color: var(--color-primary-dark); background: var(--color-primary-light); border-color: #b2ddff; }
|
||||
.progress-chip[data-tone='warning'] { color: #b54708; background: var(--color-warning-light); border-color: #fedf89; }
|
||||
|
||||
@media (max-width: 1200px) { .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|
||||
@media (max-width: 900px) {
|
||||
.filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.filter-actions { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
|
||||
.progress-chip[data-tone='primary'] {
|
||||
color: #175cd3;
|
||||
background: #eff8ff;
|
||||
border-color: #b2ddff;
|
||||
}
|
||||
|
||||
.progress-chip[data-tone='warning'] {
|
||||
color: #b54708;
|
||||
background: #fffaeb;
|
||||
border-color: #fedf89;
|
||||
}
|
||||
|
||||
@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));
|
||||
}
|
||||
}
|
||||
|
||||
@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,
|
||||
.summary-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.filters-button-row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filters-button-row :deep(.el-button) {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.order-card-top {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.order-no {
|
||||
font-size: 18px;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.filter-grid,
|
||||
.summary-grid { grid-template-columns: 1fr; }
|
||||
.filter-buttons { width: 100%; }
|
||||
.filter-buttons :deep(.el-button) { flex: 1 1 auto; }
|
||||
.order-card-top { flex-direction: column; align-items: flex-start; }
|
||||
.order-no { font-size: 18px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
|
||||
import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
|
||||
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
|
||||
import { showConfirm, showError, showSuccess } from '@/lib/feedback'
|
||||
import {
|
||||
@@ -65,11 +65,7 @@ async function loadTasks(page = pagination.value.page) {
|
||||
|
||||
function formatBindingRoles(item: AdminTaskListItem) {
|
||||
const roles = item.bindingSummary.roleKeys
|
||||
|
||||
if (!Array.isArray(roles) || roles.length === 0) {
|
||||
return '无绑定角色'
|
||||
}
|
||||
|
||||
if (!Array.isArray(roles) || roles.length === 0) return '无绑定角色'
|
||||
return roles.join(' / ')
|
||||
}
|
||||
|
||||
@@ -78,9 +74,7 @@ function formatBindingCountSummary(item: AdminTaskListItem) {
|
||||
return `共 ${summary.totalBindingCount} 条 · 预占 ${summary.reservedBindingCount} · 已消费 ${summary.consumedBindingCount} · 已释放 ${summary.releasedBindingCount}`
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void loadTasks()
|
||||
})
|
||||
onMounted(() => { void loadTasks() })
|
||||
|
||||
async function runAction(
|
||||
taskId: number,
|
||||
@@ -89,29 +83,18 @@ async function runAction(
|
||||
confirmText: string,
|
||||
) {
|
||||
try {
|
||||
await showConfirm(confirmText, '确认操作', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '继续执行',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
await showConfirm(confirmText, '确认操作', { type: 'warning', confirmButtonText: '继续执行', cancelButtonText: '取消' })
|
||||
} catch { return }
|
||||
|
||||
actionLoadingId.value = taskId
|
||||
|
||||
try {
|
||||
const response = await action()
|
||||
if (response.data.claimUrl) {
|
||||
lastClaimUrl.value = response.data.claimUrl
|
||||
}
|
||||
if (response.data.claimUrl) lastClaimUrl.value = response.data.claimUrl
|
||||
showSuccess(successMessage)
|
||||
await loadTasks()
|
||||
} catch (error) {
|
||||
showError(error instanceof Error ? error.message : '操作失败')
|
||||
} finally {
|
||||
actionLoadingId.value = null
|
||||
}
|
||||
} finally { actionLoadingId.value = null }
|
||||
}
|
||||
|
||||
function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListItem) {
|
||||
@@ -119,33 +102,15 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
|
||||
void runAction(item.taskId, () => retryAdminTask(item.taskId), '任务已重试', `确认重试任务 ${item.taskNo} 吗？`)
|
||||
return
|
||||
}
|
||||
|
||||
if (actionKey === 'regenerate_claim_link') {
|
||||
void runAction(
|
||||
item.taskId,
|
||||
() => regenerateAdminTaskClaimLink(item.taskId),
|
||||
'领取链接已重新生成',
|
||||
`确认重新生成任务 ${item.taskNo} 的领取链接吗？旧链接会失效。`,
|
||||
)
|
||||
void runAction(item.taskId, () => regenerateAdminTaskClaimLink(item.taskId), '领取链接已重新生成', `确认重新生成任务 ${item.taskNo} 的领取链接吗？旧链接会失效。`)
|
||||
return
|
||||
}
|
||||
|
||||
if (actionKey === 'manual_review') {
|
||||
void runAction(
|
||||
item.taskId,
|
||||
() => markAdminTaskManualReview(item.taskId),
|
||||
'任务已转人工处理',
|
||||
`确认将任务 ${item.taskNo} 转为人工处理吗？`,
|
||||
)
|
||||
void runAction(item.taskId, () => markAdminTaskManualReview(item.taskId), '任务已转人工处理', `确认将任务 ${item.taskNo} 转为人工处理吗？`)
|
||||
return
|
||||
}
|
||||
|
||||
void runAction(
|
||||
item.taskId,
|
||||
() => closeAdminTask(item.taskId),
|
||||
'任务已关闭',
|
||||
`确认关闭任务 ${item.taskNo} 吗？关闭后不会自动继续推进。`,
|
||||
)
|
||||
void runAction(item.taskId, () => closeAdminTask(item.taskId), '任务已关闭', `确认关闭任务 ${item.taskNo} 吗？关闭后不会自动继续推进。`)
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
@@ -161,394 +126,250 @@ function resetFilters() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="admin-panel">
|
||||
<header class="panel-header">
|
||||
<div class="panel-header-copy">
|
||||
<h1>交付任务</h1>
|
||||
<p>更紧凑地查看任务状态、角色绑定、库存凭据和异常信息。</p>
|
||||
</div>
|
||||
<div class="panel-header-badge">共 {{ pagination.total }} 条任务</div>
|
||||
</header>
|
||||
<div class="tasks-page">
|
||||
<AdminPageHeader title="交付任务" description="更紧凑地查看任务状态、角色绑定、库存凭据和异常信息。">
|
||||
<template #extra>
|
||||
<span class="total-badge">共 {{ pagination.total }} 条任务</span>
|
||||
</template>
|
||||
</AdminPageHeader>
|
||||
|
||||
<section class="filters-card">
|
||||
<div class="filters-grid">
|
||||
<label class="filter-field">
|
||||
<span>状态</span>
|
||||
<select v-model="status" class="text-input select-input">
|
||||
<option v-for="option in adminTaskStatusOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</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="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>
|
||||
<!-- 筛选 -->
|
||||
<el-card shadow="never" class="filter-card">
|
||||
<div class="filter-grid">
|
||||
<el-select v-model="status" placeholder="状态" clearable>
|
||||
<el-option v-for="opt in adminTaskStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
<el-input v-model="taskNo" placeholder="任务号（模糊匹配）" clearable @keyup.enter="loadTasks(1)" />
|
||||
<el-input v-model="platformOrderId" placeholder="平台订单号" clearable @keyup.enter="loadTasks(1)" />
|
||||
<el-input v-model="roleId" placeholder="角色唯一标识" clearable @keyup.enter="loadTasks(1)" />
|
||||
<el-input v-model="skuCode" placeholder="商品 SKU" clearable @keyup.enter="loadTasks(1)" />
|
||||
<el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
|
||||
<el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
|
||||
</div>
|
||||
<div class="filters-actions">
|
||||
<span class="filters-hint">桌面端已改为自适应卡片列表，不再出现横向滚动。</span>
|
||||
<div class="filters-button-row">
|
||||
<div class="filter-actions">
|
||||
<span class="filter-hint">桌面端已改为自适应卡片列表，不再出现横向滚动。</span>
|
||||
<div class="filter-buttons">
|
||||
<el-button round @click="resetFilters">重置</el-button>
|
||||
<el-button round type="primary" @click="() => loadTasks(1)">查询</el-button>
|
||||
<el-button round type="primary" @click="loadTasks(1)">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</el-card>
|
||||
|
||||
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
|
||||
<p v-if="lastClaimUrl" class="info-copy">最近生成的领取链接：{{ lastClaimUrl }}</p>
|
||||
<div v-if="loading" class="empty-block">任务列表加载中</div>
|
||||
<el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
|
||||
<el-alert v-if="lastClaimUrl" :title="`最近生成的领取链接：${lastClaimUrl}`" type="info" show-icon :closable="false" style="margin-top: 16px" />
|
||||
|
||||
<div v-else-if="items.length === 0" class="empty-block">当前筛选条件下暂无任务</div>
|
||||
<!-- 列表 -->
|
||||
<el-card shadow="never" class="table-card" v-loading="loading" element-loading-text="任务列表加载中">
|
||||
<template v-if="items.length === 0 && !loading">
|
||||
<el-empty description="当前筛选条件下暂无任务" :image-size="60" />
|
||||
</template>
|
||||
|
||||
<div v-else class="tasks-shell">
|
||||
<div class="tasks-toolbar">
|
||||
<div>
|
||||
<template v-else>
|
||||
<div class="tasks-toolbar">
|
||||
<strong>任务列表</strong>
|
||||
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="task-list">
|
||||
<article v-for="item in items" :key="item.taskId" class="task-card">
|
||||
<div class="task-card-top">
|
||||
<div class="task-identity">
|
||||
<RouterLink :to="`/admin/tasks/${item.taskId}`" class="cell-link task-no" :title="item.taskNo">
|
||||
{{ item.taskNo }}
|
||||
</RouterLink>
|
||||
<div class="task-meta-row">
|
||||
<span class="compact-chip" :title="item.platformOrderId">订单 {{ item.platformOrderId }}</span>
|
||||
<span class="compact-chip compact-chip--muted">重试 {{ item.retryCount }} 次</span>
|
||||
<div class="task-list">
|
||||
<article v-for="item in items" :key="item.taskId" class="task-card">
|
||||
<div class="task-card-top">
|
||||
<div class="task-identity">
|
||||
<RouterLink :to="`/admin/tasks/${item.taskId}`" class="task-no" :title="item.taskNo">
|
||||
{{ item.taskNo }}
|
||||
</RouterLink>
|
||||
<div class="task-meta-row">
|
||||
<span class="compact-chip" :title="item.platformOrderId">订单 {{ item.platformOrderId }}</span>
|
||||
<span class="compact-chip compact-chip--muted">重试 {{ item.retryCount }} 次</span>
|
||||
</div>
|
||||
</div>
|
||||
<AdminStatusTag :status="item.status" />
|
||||
</div>
|
||||
<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-row">
|
||||
<span class="progress-label">任务</span>
|
||||
<AdminStatusTag :status="item.status" />
|
||||
<div class="task-grid">
|
||||
<section class="task-section">
|
||||
<span class="section-label">任务进度</span>
|
||||
<div class="progress-cell">
|
||||
<div class="progress-row">
|
||||
<span class="progress-label">任务</span>
|
||||
<AdminStatusTag :status="item.status" />
|
||||
</div>
|
||||
<div class="progress-row">
|
||||
<span class="progress-label">系统</span>
|
||||
<AdminStatusTag :status="item.systemBindingStatus" />
|
||||
</div>
|
||||
<div class="progress-row">
|
||||
<span class="progress-label">完整</span>
|
||||
<AdminStatusTag :status="item.userBindingStatus" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-row">
|
||||
<span class="progress-label">系统</span>
|
||||
<AdminStatusTag :status="item.systemBindingStatus" />
|
||||
</section>
|
||||
|
||||
<section class="task-section">
|
||||
<span class="section-label">商品 / 凭据</span>
|
||||
<div class="goods-cell">
|
||||
<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" :title="item.inventoryDisplayMasked || '-'">凭据 {{ item.inventoryDisplayMasked || '-' }}</span>
|
||||
<span class="goods-subline" :title="formatBindingRoles(item)">绑定 {{ formatBindingRoles(item) }}</span>
|
||||
<span class="goods-subline goods-subline-strong" :title="formatBindingCountSummary(item)">{{ formatBindingCountSummary(item) }}</span>
|
||||
</div>
|
||||
<div class="progress-row">
|
||||
<span class="progress-label">完整</span>
|
||||
<AdminStatusTag :status="item.userBindingStatus" />
|
||||
</section>
|
||||
|
||||
<section class="task-section">
|
||||
<span class="section-label">角色绑定</span>
|
||||
<div class="role-cell">
|
||||
<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">登录 {{ item.loginType || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="task-section">
|
||||
<span class="section-label">商品 / 凭据</span>
|
||||
<div class="goods-cell">
|
||||
<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" :title="item.inventoryDisplayMasked || '-'">
|
||||
凭据 {{ item.inventoryDisplayMasked || '-' }}
|
||||
</span>
|
||||
<span class="goods-subline" :title="formatBindingRoles(item)">
|
||||
绑定 {{ formatBindingRoles(item) }}
|
||||
</span>
|
||||
<span class="goods-subline goods-subline-strong" :title="formatBindingCountSummary(item)">
|
||||
{{ formatBindingCountSummary(item) }}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="task-section">
|
||||
<span class="section-label">角色绑定</span>
|
||||
<div class="role-cell">
|
||||
<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">登录 {{ item.loginType || '-' }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="task-section">
|
||||
<span class="section-label">时间</span>
|
||||
<div class="time-cell">
|
||||
<span class="time-line">创建 {{ formatAdminDateTime(item.createdAt) }}</span>
|
||||
<span class="time-line">更新 {{ formatAdminDateTime(item.updatedAt) }}</span>
|
||||
<span v-if="item.claimedAt" class="time-line">领取 {{ formatAdminDateTime(item.claimedAt) }}</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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="task-section">
|
||||
<span class="section-label">异常 / 操作</span>
|
||||
<div class="task-end">
|
||||
<span class="cell-error" :title="item.lastError || '-'">{{ item.lastError || '当前无异常' }}</span>
|
||||
<div class="action-cell">
|
||||
<el-button
|
||||
v-if="canManageTaskLifecycle"
|
||||
:disabled="item.executorKey === 'manual_dispatch' || !['retry_pending', 'manual_review', 'waiting_inventory'].includes(item.status)"
|
||||
:loading="actionLoadingId === item.taskId"
|
||||
class="primary-action"
|
||||
plain
|
||||
type="danger"
|
||||
@click="runAction(item.taskId, () => retryAdminTask(item.taskId), '任务已重试', `确认重试任务 ${item.taskNo} 吗？`)"
|
||||
>
|
||||
重试
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="canManageTaskLifecycle && item.executorKey !== 'manual_dispatch'"
|
||||
class="secondary-action"
|
||||
@click="handleActionCommand('regenerate_claim_link', item)"
|
||||
>
|
||||
重发链接
|
||||
</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>
|
||||
<section class="task-section">
|
||||
<span class="section-label">时间</span>
|
||||
<div class="time-cell">
|
||||
<span class="time-line">创建 {{ formatAdminDateTime(item.createdAt) }}</span>
|
||||
<span class="time-line">更新 {{ formatAdminDateTime(item.updatedAt) }}</span>
|
||||
<span v-if="item.claimedAt" class="time-line">领取 {{ formatAdminDateTime(item.claimedAt) }}</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<AdminPaginationBar
|
||||
:page="pagination.page"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:loading="loading"
|
||||
@change="loadTasks"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="task-section">
|
||||
<span class="section-label">异常 / 操作</span>
|
||||
<div class="task-end">
|
||||
<span class="cell-error" :title="item.lastError || '-'">{{ item.lastError || '当前无异常' }}</span>
|
||||
<div class="action-cell">
|
||||
<el-button
|
||||
v-if="canManageTaskLifecycle"
|
||||
:disabled="item.executorKey === 'manual_dispatch' || !['retry_pending', 'manual_review', 'waiting_inventory'].includes(item.status)"
|
||||
:loading="actionLoadingId === item.taskId"
|
||||
type="danger"
|
||||
plain
|
||||
size="small"
|
||||
@click="runAction(item.taskId, () => retryAdminTask(item.taskId), '任务已重试', `确认重试任务 ${item.taskNo} 吗？`)"
|
||||
>
|
||||
重试
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="canManageTaskLifecycle && item.executorKey !== 'manual_dispatch'"
|
||||
size="small"
|
||||
@click="handleActionCommand('regenerate_claim_link', item)"
|
||||
>
|
||||
重发链接
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="canManageTaskLifecycle"
|
||||
size="small"
|
||||
@click="handleActionCommand('manual_review', item)"
|
||||
>
|
||||
转人工
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="canCloseTasks && !['redeemed', 'closed'].includes(item.status)"
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="handleActionCommand('close', item)"
|
||||
>
|
||||
关闭任务
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<el-pagination
|
||||
v-if="pagination.total > 0"
|
||||
v-model:current-page="pagination.page"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
layout="total, prev, pager, next"
|
||||
style="margin-top: 16px; justify-content: center"
|
||||
@current-change="loadTasks"
|
||||
/>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-panel {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
.tasks-page { display: grid; gap: 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: 6px 0 0;
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.panel-header-badge {
|
||||
flex: 0 0 auto;
|
||||
.total-badge {
|
||||
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;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
.filter-card { margin-top: var(--space-4); }
|
||||
|
||||
.filters-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.filters-grid {
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.filter-field {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.filter-field span {
|
||||
color: #5d6f87;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.filters-actions {
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.filters-hint {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
.filter-hint { color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
.filter-buttons { display: flex; gap: 10px; flex-shrink: 0; }
|
||||
|
||||
.filters-button-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.table-card { margin-top: var(--space-4); overflow: visible; }
|
||||
|
||||
.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;
|
||||
}
|
||||
.tasks-toolbar { margin-bottom: var(--space-3); }
|
||||
.tasks-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
|
||||
.tasks-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
|
||||
.select-input {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.error-copy {
|
||||
margin: 0;
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
.info-copy {
|
||||
margin: 0;
|
||||
color: #175cd3;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.tasks-shell {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tasks-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.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-list { display: grid; gap: var(--space-3); }
|
||||
|
||||
.task-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
|
||||
border: 1px solid rgba(86, 108, 138, 0.12);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.task-card-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.task-identity {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
.task-identity { min-width: 0; display: grid; gap: var(--space-2); }
|
||||
|
||||
.task-no {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
font-size: 20px;
|
||||
font-size: var(--text-xl);
|
||||
line-height: 1.1;
|
||||
font-weight: 800;
|
||||
color: #132238;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
.task-no:hover { color: var(--color-primary-dark); }
|
||||
|
||||
.task-meta-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.task-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
||||
|
||||
.compact-chip {
|
||||
display: inline-flex;
|
||||
@@ -556,55 +377,43 @@ function resetFilters() {
|
||||
min-height: 28px;
|
||||
max-width: 100%;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
background: #f4f7fb;
|
||||
border: 1px solid rgba(86, 108, 138, 0.1);
|
||||
color: #44556c;
|
||||
font-size: 12px;
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.compact-chip--muted {
|
||||
color: #6b7c93;
|
||||
}
|
||||
.compact-chip--muted { color: var(--text-muted); }
|
||||
|
||||
.task-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-section {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
padding: var(--space-3);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
border: 1px solid rgba(86, 108, 138, 0.08);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
color: #71839b;
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.progress-cell {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.progress-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.progress-cell { display: grid; gap: var(--space-2); }
|
||||
.progress-row { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
|
||||
.progress-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -612,224 +421,41 @@ function resetFilters() {
|
||||
min-width: 34px;
|
||||
min-height: 22px;
|
||||
padding: 0 7px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
background: #f7f9fc;
|
||||
border: 1px solid rgba(86, 108, 138, 0.12);
|
||||
color: #64748b;
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.cell-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
.goods-cell, .role-cell, .time-cell { display: grid; gap: 5px; min-width: 0; }
|
||||
.time-line { min-width: 0; color: #475467; font-size: var(--text-xs); line-height: 1.5; }
|
||||
.goods-title, .role-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 700; }
|
||||
.goods-subline, .role-subline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; font-size: var(--text-xs); }
|
||||
.goods-subline-strong { color: var(--text-primary); font-weight: 600; }
|
||||
|
||||
.cell-error { display: block; min-width: 0; line-height: 1.55; color: #475467; word-break: break-word; font-size: var(--text-xs); }
|
||||
|
||||
.task-end { display: grid; gap: var(--space-3); min-width: 0; }
|
||||
.action-cell { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.task-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
.cell-link:hover {
|
||||
color: #175cd3;
|
||||
@media (max-width: 900px) {
|
||||
.task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.filter-actions { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
|
||||
.meta-cell,
|
||||
.goods-cell,
|
||||
.role-cell,
|
||||
.time-cell {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.time-line {
|
||||
min-width: 0;
|
||||
color: #475467;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.meta-title,
|
||||
.goods-title,
|
||||
.role-title {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #101828;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.meta-subline,
|
||||
.goods-subline,
|
||||
.role-subline {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #475467;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.meta-muted {
|
||||
color: #98a2b3;
|
||||
}
|
||||
|
||||
.goods-subline-strong {
|
||||
color: #1d3555;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cell-error {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
line-height: 1.55;
|
||||
color: #475467;
|
||||
word-break: break-word;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.task-end {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.action-cell {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.primary-action,
|
||||
.secondary-action {
|
||||
min-width: 82px;
|
||||
min-height: 30px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.primary-action {
|
||||
background: #fff5f4;
|
||||
border-color: #fda29b;
|
||||
color: #d92d20;
|
||||
}
|
||||
|
||||
.primary-action:hover,
|
||||
.primary-action:focus {
|
||||
background: #fee4e2;
|
||||
border-color: #f97066;
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
.secondary-action {
|
||||
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;
|
||||
}
|
||||
|
||||
.secondary-action-danger {
|
||||
border-color: rgba(217, 45, 32, 0.22);
|
||||
color: #c43225;
|
||||
background: #fff7f6;
|
||||
}
|
||||
|
||||
.secondary-action-danger:hover,
|
||||
.secondary-action-danger:focus {
|
||||
border-color: rgba(217, 45, 32, 0.34);
|
||||
color: #a62c21;
|
||||
background: #feeceb;
|
||||
}
|
||||
|
||||
.action-cell :deep(.el-button > span) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.task-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.task-grid {
|
||||
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;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.task-grid,
|
||||
.filter-grid { grid-template-columns: 1fr; }
|
||||
.filter-buttons { width: 100%; }
|
||||
.filter-buttons :deep(.el-button) { flex: 1 1 auto; }
|
||||
.task-card-top { flex-direction: column; align-items: flex-start; }
|
||||
.task-no { font-size: 18px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
|
||||
import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
|
||||
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
|
||||
import { isFeedbackDismissed, showConfirm, showError, showPrompt, showSuccess } from '@/lib/feedback'
|
||||
import {
|
||||
@@ -28,464 +28,171 @@ const createUsername = ref('')
|
||||
const createPassword = ref('')
|
||||
const createRole = ref<AdminRole>('operator')
|
||||
const items = ref<AdminUserListItem[]>([])
|
||||
const pagination = ref<AdminPagination>({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
})
|
||||
const pagination = ref<AdminPagination>({ page: 1, pageSize: 20, total: 0 })
|
||||
|
||||
function isCurrentUser(userId: number) {
|
||||
return getAdminUserId() === userId
|
||||
}
|
||||
function isCurrentUser(userId: number) { return getAdminUserId() === userId }
|
||||
|
||||
function formatRoleLabel(role: AdminRole) {
|
||||
if (role === 'admin') {
|
||||
return '管理员'
|
||||
}
|
||||
|
||||
if (role === 'support') {
|
||||
return '客服'
|
||||
}
|
||||
|
||||
if (role === 'admin') return '管理员'
|
||||
if (role === 'support') return '客服'
|
||||
return '普通运营'
|
||||
}
|
||||
|
||||
function formatInventoryGroups(item: AdminUserListItem) {
|
||||
if (item.role !== 'support') {
|
||||
return ['不限库存组']
|
||||
}
|
||||
|
||||
if (item.inventoryGroupCodes.length === 0) {
|
||||
return ['未绑定']
|
||||
}
|
||||
|
||||
if (item.role !== 'support') return ['不限库存组']
|
||||
if (item.inventoryGroupCodes.length === 0) return ['未绑定']
|
||||
return item.inventoryGroupCodes
|
||||
}
|
||||
|
||||
async function loadUsers(page = pagination.value.page) {
|
||||
if (!hasAdminRole('admin')) {
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
if (!hasAdminRole('admin')) { loading.value = false; return }
|
||||
loading.value = true; errorMessage.value = ''
|
||||
try {
|
||||
const response = await fetchAdminUsers({
|
||||
page,
|
||||
pageSize: pagination.value.pageSize,
|
||||
username: username.value.trim(),
|
||||
role: role.value.trim(),
|
||||
status: status.value.trim(),
|
||||
})
|
||||
items.value = response.data.items
|
||||
pagination.value = response.data.pagination
|
||||
const response = await fetchAdminUsers({ page, pageSize: pagination.value.pageSize, username: username.value.trim(), role: role.value.trim(), status: status.value.trim() })
|
||||
items.value = response.data.items; pagination.value = response.data.pagination
|
||||
} catch (error) {
|
||||
errorMessage.value = error instanceof Error ? error.message : '读取后台用户失败'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
async function submitCreate() {
|
||||
if (!createUsername.value.trim() || !createPassword.value.trim()) {
|
||||
showError('请填写账号和密码')
|
||||
return
|
||||
}
|
||||
|
||||
if (!createUsername.value.trim() || !createPassword.value.trim()) { showError('请填写账号和密码'); return }
|
||||
creating.value = true
|
||||
|
||||
try {
|
||||
await createAdminUser({
|
||||
username: createUsername.value.trim(),
|
||||
password: createPassword.value.trim(),
|
||||
role: createRole.value,
|
||||
status: 'active',
|
||||
})
|
||||
showSuccess('后台用户已创建')
|
||||
createUsername.value = ''
|
||||
createPassword.value = ''
|
||||
createRole.value = 'operator'
|
||||
await createAdminUser({ username: createUsername.value.trim(), password: createPassword.value.trim(), role: createRole.value, status: 'active' })
|
||||
showSuccess('后台用户已创建'); createUsername.value = ''; createPassword.value = ''; createRole.value = 'operator'
|
||||
await loadUsers(1)
|
||||
} catch (error) {
|
||||
showError(error instanceof Error ? error.message : '创建后台用户失败')
|
||||
} finally {
|
||||
creating.value = false
|
||||
}
|
||||
} catch (error) { showError(error instanceof Error ? error.message : '创建后台用户失败') }
|
||||
finally { creating.value = false }
|
||||
}
|
||||
|
||||
async function updateRole(item: AdminUserListItem, nextRole: AdminRole) {
|
||||
if (item.role === nextRole) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await showConfirm(`确认将 ${item.username} 调整为${formatRoleLabel(nextRole)}吗？`, '确认操作', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '继续执行',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
|
||||
if (item.role === nextRole) return
|
||||
try { await showConfirm(`确认将 ${item.username} 调整为${formatRoleLabel(nextRole)}吗？`, '确认操作', { type: 'warning', confirmButtonText: '继续执行', cancelButtonText: '取消' }) } catch { return }
|
||||
actionLoadingId.value = item.userId
|
||||
|
||||
try {
|
||||
await updateAdminUserRole(item.userId, { role: nextRole })
|
||||
showSuccess('用户角色已更新')
|
||||
await loadUsers()
|
||||
} catch (error) {
|
||||
showError(error instanceof Error ? error.message : '更新用户角色失败')
|
||||
} finally {
|
||||
actionLoadingId.value = null
|
||||
}
|
||||
try { await updateAdminUserRole(item.userId, { role: nextRole }); showSuccess('用户角色已更新'); await loadUsers() }
|
||||
catch (error) { showError(error instanceof Error ? error.message : '更新用户角色失败') }
|
||||
finally { actionLoadingId.value = null }
|
||||
}
|
||||
|
||||
async function toggleStatus(item: AdminUserListItem) {
|
||||
const nextStatus = item.status === 'active' ? 'disabled' : 'active'
|
||||
|
||||
try {
|
||||
await showConfirm(`确认将 ${item.username}${nextStatus === 'active' ? '启用' : '停用'}吗？`, '确认操作', {
|
||||
type: nextStatus === 'active' ? 'info' : 'warning',
|
||||
confirmButtonText: '继续执行',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
|
||||
try { await showConfirm(`确认将 ${item.username}${nextStatus === 'active' ? '启用' : '停用'}吗？`, '确认操作', { type: nextStatus === 'active' ? 'info' : 'warning', confirmButtonText: '继续执行', cancelButtonText: '取消' }) } catch { return }
|
||||
actionLoadingId.value = item.userId
|
||||
|
||||
try {
|
||||
await updateAdminUserStatus(item.userId, { status: nextStatus })
|
||||
showSuccess('用户状态已更新')
|
||||
await loadUsers()
|
||||
} catch (error) {
|
||||
showError(error instanceof Error ? error.message : '更新用户状态失败')
|
||||
} finally {
|
||||
actionLoadingId.value = null
|
||||
}
|
||||
try { await updateAdminUserStatus(item.userId, { status: nextStatus }); showSuccess('用户状态已更新'); await loadUsers() }
|
||||
catch (error) { showError(error instanceof Error ? error.message : '更新用户状态失败') }
|
||||
finally { actionLoadingId.value = null }
|
||||
}
|
||||
|
||||
async function promptResetPassword(item: AdminUserListItem) {
|
||||
try {
|
||||
const result = await showPrompt(`请输入 ${item.username} 的新密码`, '重置密码', {
|
||||
inputType: 'password',
|
||||
inputPlaceholder: '至少 8 位',
|
||||
confirmButtonText: '提交',
|
||||
cancelButtonText: '取消',
|
||||
inputValidator: (value) => value.trim().length >= 8 || '密码至少 8 位',
|
||||
})
|
||||
|
||||
const result = await showPrompt(`请输入 ${item.username} 的新密码`, '重置密码', { inputType: 'password', inputPlaceholder: '至少 8 位', confirmButtonText: '提交', cancelButtonText: '取消', inputValidator: (value) => value.trim().length >= 8 || '密码至少 8 位' })
|
||||
actionLoadingId.value = item.userId
|
||||
await resetAdminUserPassword(item.userId, { password: result.value.trim() })
|
||||
showSuccess('用户密码已重置')
|
||||
await loadUsers()
|
||||
} catch (error) {
|
||||
if (isFeedbackDismissed(error)) {
|
||||
return
|
||||
}
|
||||
showError(error instanceof Error ? error.message : '重置密码失败')
|
||||
} finally {
|
||||
actionLoadingId.value = null
|
||||
}
|
||||
await resetAdminUserPassword(item.userId, { password: result.value.trim() }); showSuccess('用户密码已重置'); await loadUsers()
|
||||
} catch (error) { if (isFeedbackDismissed(error)) return; showError(error instanceof Error ? error.message : '重置密码失败') }
|
||||
finally { actionLoadingId.value = null }
|
||||
}
|
||||
|
||||
async function promptUpdateInventoryGroups(item: AdminUserListItem) {
|
||||
if (item.role !== 'support') {
|
||||
showError('仅客服账号需要绑定库存组')
|
||||
return
|
||||
}
|
||||
|
||||
if (item.role !== 'support') { showError('仅客服账号需要绑定库存组'); return }
|
||||
try {
|
||||
const result = await showPrompt(
|
||||
`请输入 ${item.username} 可用的库存组，多个组用英文逗号分隔`,
|
||||
'配置库存组',
|
||||
{
|
||||
inputType: 'text',
|
||||
inputValue: item.inventoryGroupCodes.join(','),
|
||||
inputPlaceholder: '例如 A组,B组,售后组',
|
||||
confirmButtonText: '保存',
|
||||
cancelButtonText: '取消',
|
||||
},
|
||||
)
|
||||
|
||||
const inventoryGroupCodes = String(result.value || '')
|
||||
.split(',')
|
||||
.map((value) => value.trim())
|
||||
.filter(Boolean)
|
||||
|
||||
const result = await showPrompt(`请输入 ${item.username} 可用的库存组，多个组用英文逗号分隔`, '配置库存组', { inputType: 'text', inputValue: item.inventoryGroupCodes.join(','), inputPlaceholder: '例如 A组,B组,售后组', confirmButtonText: '保存', cancelButtonText: '取消' })
|
||||
const inventoryGroupCodes = String(result.value || '').split(',').map((v) => v.trim()).filter(Boolean)
|
||||
actionLoadingId.value = item.userId
|
||||
await updateAdminUserInventoryGroups(item.userId, {
|
||||
inventoryGroupCodes,
|
||||
})
|
||||
showSuccess('用户库存组已更新')
|
||||
await loadUsers()
|
||||
} catch (error) {
|
||||
if (isFeedbackDismissed(error)) {
|
||||
return
|
||||
}
|
||||
showError(error instanceof Error ? error.message : '更新库存组失败')
|
||||
} finally {
|
||||
actionLoadingId.value = null
|
||||
}
|
||||
await updateAdminUserInventoryGroups(item.userId, { inventoryGroupCodes }); showSuccess('用户库存组已更新'); await loadUsers()
|
||||
} catch (error) { if (isFeedbackDismissed(error)) return; showError(error instanceof Error ? error.message : '更新库存组失败') }
|
||||
finally { actionLoadingId.value = null }
|
||||
}
|
||||
|
||||
onMounted(loadUsers)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="admin-panel">
|
||||
<header class="panel-header">
|
||||
<div>
|
||||
<h1>后台用户</h1>
|
||||
<p>管理员可维护后台账号、角色和启停状态，避免继续使用单一口令。</p>
|
||||
</div>
|
||||
</header>
|
||||
<div class="users-page">
|
||||
<AdminPageHeader title="后台用户" description="管理员可维护后台账号、角色和启停状态，避免继续使用单一口令。" />
|
||||
|
||||
<div v-if="!hasAdminRole('admin')" class="empty-block">仅管理员可以访问用户管理。</div>
|
||||
<el-result v-if="!hasAdminRole('admin')" icon="warning" title="仅管理员可以访问用户管理。" />
|
||||
|
||||
<template v-else>
|
||||
<section class="form-card">
|
||||
<div class="form-row">
|
||||
<input v-model="username" class="text-input" placeholder="账号筛选" />
|
||||
<select v-model="role" class="text-input select-input">
|
||||
<option v-for="option in adminUserRoleOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
<select v-model="status" class="text-input select-input">
|
||||
<option v-for="option in adminUserStatusOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
<el-button round @click="() => loadUsers()">查询列表</el-button>
|
||||
<!-- 筛选 + 创建 -->
|
||||
<el-card shadow="never" class="filter-card" style="margin-top: 16px">
|
||||
<div class="filter-row">
|
||||
<el-input v-model="username" placeholder="账号筛选" clearable style="width: 140px" @keyup.enter="loadUsers(1)" />
|
||||
<el-select v-model="role" placeholder="角色" clearable style="width: 120px">
|
||||
<el-option v-for="opt in adminUserRoleOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
<el-select v-model="status" placeholder="状态" clearable style="width: 120px">
|
||||
<el-option v-for="opt in adminUserStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
<el-button @click="loadUsers(1)">查询列表</el-button>
|
||||
</div>
|
||||
|
||||
<div class="form-row form-row-top">
|
||||
<input v-model="createUsername" class="text-input" placeholder="新账号" />
|
||||
<input v-model="createPassword" class="text-input" type="password" placeholder="新密码，至少 8 位" />
|
||||
<select v-model="createRole" class="text-input select-input">
|
||||
<option value="operator">普通运营</option>
|
||||
<option value="support">客服</option>
|
||||
<option value="admin">管理员</option>
|
||||
</select>
|
||||
<el-button :loading="creating" round type="primary" @click="submitCreate">新增用户</el-button>
|
||||
<el-divider />
|
||||
<div class="filter-row">
|
||||
<el-input v-model="createUsername" placeholder="新账号" style="width: 140px" />
|
||||
<el-input v-model="createPassword" type="password" show-password placeholder="新密码，至少 8 位" style="width: 180px" />
|
||||
<el-select v-model="createRole" style="width: 120px">
|
||||
<el-option value="operator" label="普通运营" />
|
||||
<el-option value="support" label="客服" />
|
||||
<el-option value="admin" label="管理员" />
|
||||
</el-select>
|
||||
<el-button :loading="creating" type="primary" @click="submitCreate">新增用户</el-button>
|
||||
</div>
|
||||
</section>
|
||||
</el-card>
|
||||
|
||||
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
|
||||
<div v-if="loading" class="empty-block">用户列表加载中</div>
|
||||
<el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
|
||||
|
||||
<div v-else class="table-card">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>账号</th>
|
||||
<th>角色</th>
|
||||
<th>库存组</th>
|
||||
<th>状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>更新时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in items" :key="item.userId">
|
||||
<td>{{ item.userId }}</td>
|
||||
<td>{{ item.username }}</td>
|
||||
<td>{{ formatRoleLabel(item.role) }}</td>
|
||||
<td>
|
||||
<div class="group-chip-row">
|
||||
<span
|
||||
v-for="groupCode in formatInventoryGroups(item)"
|
||||
:key="`${item.userId}-${groupCode}`"
|
||||
:class="['group-chip', { 'group-chip--muted': groupCode === '未绑定' || groupCode === '不限库存组' }]"
|
||||
>
|
||||
{{ groupCode }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><AdminStatusTag :status="item.status" /></td>
|
||||
<td>{{ formatAdminDateTime(item.createdAt) }}</td>
|
||||
<td>{{ formatAdminDateTime(item.updatedAt) }}</td>
|
||||
<td>
|
||||
<div class="action-stack">
|
||||
<el-button
|
||||
:loading="actionLoadingId === item.userId"
|
||||
link
|
||||
:disabled="isCurrentUser(item.userId)"
|
||||
@click="updateRole(item, 'admin')"
|
||||
>
|
||||
设为管理员
|
||||
</el-button>
|
||||
<el-button
|
||||
:loading="actionLoadingId === item.userId"
|
||||
link
|
||||
:disabled="isCurrentUser(item.userId)"
|
||||
@click="updateRole(item, 'operator')"
|
||||
>
|
||||
设为运营
|
||||
</el-button>
|
||||
<el-button
|
||||
:loading="actionLoadingId === item.userId"
|
||||
link
|
||||
:disabled="isCurrentUser(item.userId)"
|
||||
@click="updateRole(item, 'support')"
|
||||
>
|
||||
设为客服
|
||||
</el-button>
|
||||
<el-button
|
||||
:loading="actionLoadingId === item.userId"
|
||||
link
|
||||
:disabled="isCurrentUser(item.userId)"
|
||||
@click="toggleStatus(item)"
|
||||
>
|
||||
{{ item.status === 'active' ? '停用' : '启用' }}
|
||||
</el-button>
|
||||
<el-button
|
||||
:loading="actionLoadingId === item.userId"
|
||||
link
|
||||
:disabled="item.role !== 'support'"
|
||||
@click="promptUpdateInventoryGroups(item)"
|
||||
>
|
||||
配库存组
|
||||
</el-button>
|
||||
<el-button
|
||||
:loading="actionLoadingId === item.userId"
|
||||
link
|
||||
type="primary"
|
||||
@click="promptResetPassword(item)"
|
||||
>
|
||||
重置密码
|
||||
</el-button>
|
||||
<span v-if="isCurrentUser(item.userId)" class="self-copy">当前登录账号</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<AdminPaginationBar
|
||||
:page="pagination.page"
|
||||
<el-card shadow="never" style="margin-top: 16px">
|
||||
<el-table :data="items" stripe size="small" v-loading="loading" element-loading-text="用户列表加载中">
|
||||
<el-table-column prop="userId" label="ID" width="70" align="center" />
|
||||
<el-table-column prop="username" label="账号" width="140" />
|
||||
<el-table-column label="角色" width="100">
|
||||
<template #default="{ row }">{{ formatRoleLabel(row.role) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存组" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="(code, i) in formatInventoryGroups(row)" :key="i" size="small" :type="(code === '未绑定' || code === '不限库存组') ? 'info' : undefined" style="margin-right: 4px; margin-bottom: 2px">{{ code }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="90">
|
||||
<template #default="{ row }"><AdminStatusTag :status="row.status" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" width="180">
|
||||
<template #default="{ row }">{{ formatAdminDateTime(row.createdAt) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" width="180">
|
||||
<template #default="{ row }">{{ formatAdminDateTime(row.updatedAt) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="300">
|
||||
<template #default="{ row }">
|
||||
<div class="action-stack">
|
||||
<el-button :loading="actionLoadingId === row.userId" size="small" :disabled="isCurrentUser(row.userId)" @click="updateRole(row, 'admin')">设为管理员</el-button>
|
||||
<el-button :loading="actionLoadingId === row.userId" size="small" :disabled="isCurrentUser(row.userId)" @click="updateRole(row, 'operator')">设为运营</el-button>
|
||||
<el-button :loading="actionLoadingId === row.userId" size="small" :disabled="isCurrentUser(row.userId)" @click="updateRole(row, 'support')">设为客服</el-button>
|
||||
<el-button :loading="actionLoadingId === row.userId" size="small" :disabled="isCurrentUser(row.userId)" @click="toggleStatus(row)">{{ row.status === 'active' ? '停用' : '启用' }}</el-button>
|
||||
<el-button :loading="actionLoadingId === row.userId" size="small" :disabled="row.role !== 'support'" @click="promptUpdateInventoryGroups(row)">配库存组</el-button>
|
||||
<el-button :loading="actionLoadingId === row.userId" size="small" type="primary" @click="promptResetPassword(row)">重置密码</el-button>
|
||||
<el-tag v-if="isCurrentUser(row.userId)" size="small" type="info">当前登录账号</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty><el-empty :image-size="60" description="暂无用户" /></template>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
v-if="pagination.total > 0"
|
||||
v-model:current-page="pagination.page"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:loading="loading"
|
||||
@change="loadUsers"
|
||||
layout="total, prev, pager, next"
|
||||
style="margin-top: 16px; justify-content: center"
|
||||
@current-change="loadUsers"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-panel {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.panel-header h1 {
|
||||
margin: 0;
|
||||
color: #1d3555;
|
||||
}
|
||||
|
||||
.panel-header p {
|
||||
margin: 8px 0 0;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.form-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);
|
||||
}
|
||||
|
||||
.error-copy {
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-row-top {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.action-stack {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.group-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.group-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(37, 89, 167, 0.08);
|
||||
border: 1px solid rgba(37, 89, 167, 0.12);
|
||||
color: #2559a7;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.group-chip--muted {
|
||||
background: rgba(148, 163, 184, 0.12);
|
||||
border-color: rgba(148, 163, 184, 0.18);
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.self-copy {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.users-page { display: grid; gap: 0; }
|
||||
.filter-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
|
||||
.action-stack { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
|
||||
import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
|
||||
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
|
||||
import { showConfirm, showError, showSuccess } from '@/lib/feedback'
|
||||
import { fetchAdminWebhookEvents, replayAdminWebhookEvent } from '@/services/admin'
|
||||
@@ -65,30 +65,17 @@ async function loadEvents(page = pagination.value.page) {
|
||||
|
||||
async function submitReplay(item: AdminWebhookEventListItem) {
|
||||
try {
|
||||
await showConfirm(
|
||||
`确认重放 webhook #${item.eventId} 吗？`,
|
||||
'确认重放',
|
||||
{
|
||||
type: 'warning',
|
||||
confirmButtonText: '继续重放',
|
||||
cancelButtonText: '取消',
|
||||
},
|
||||
)
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
await showConfirm(`确认重放 webhook #${item.eventId} 吗？`, '确认重放', { type: 'warning', confirmButtonText: '继续重放', cancelButtonText: '取消' })
|
||||
} catch { return }
|
||||
|
||||
actionLoadingId.value = item.eventId
|
||||
|
||||
try {
|
||||
await replayAdminWebhookEvent(item.eventId)
|
||||
showSuccess('Webhook 已重放')
|
||||
await loadEvents()
|
||||
} catch (error) {
|
||||
showError(error instanceof Error ? error.message : '重放 webhook 失败')
|
||||
} finally {
|
||||
actionLoadingId.value = null
|
||||
}
|
||||
} finally { actionLoadingId.value = null }
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
@@ -105,11 +92,7 @@ function resetFilters() {
|
||||
|
||||
function formatRequestTimestamp(value: string) {
|
||||
const normalized = String(value || '').trim()
|
||||
|
||||
if (!/^\d{10,13}$/.test(normalized)) {
|
||||
return normalized || '-'
|
||||
}
|
||||
|
||||
if (!/^\d{10,13}$/.test(normalized)) return normalized || '-'
|
||||
const epochMs = normalized.length === 13 ? Number(normalized) : Number(normalized) * 1000
|
||||
return formatAdminDateTime(new Date(epochMs).toISOString())
|
||||
}
|
||||
@@ -126,463 +109,278 @@ onMounted(loadEvents)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="admin-panel">
|
||||
<header class="panel-header">
|
||||
<div class="panel-header-copy">
|
||||
<h1>Webhook 日志</h1>
|
||||
<p>查看平台推送处理情况、验签结果、请求来源和错误信息。</p>
|
||||
</div>
|
||||
<div class="panel-header-badge">共 {{ pagination.total }} 条事件</div>
|
||||
</header>
|
||||
<div class="webhooks-page">
|
||||
<AdminPageHeader title="Webhook 日志" description="查看平台推送处理情况、验签结果、请求来源和错误信息。">
|
||||
<template #extra>
|
||||
<span class="total-badge">共 {{ pagination.total }} 条事件</span>
|
||||
</template>
|
||||
</AdminPageHeader>
|
||||
|
||||
<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 / taobao" />
|
||||
</label>
|
||||
<label class="filter-field">
|
||||
<span>处理结果</span>
|
||||
<select v-model="processed" class="text-input select-input">
|
||||
<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>
|
||||
<!-- 筛选 -->
|
||||
<el-card shadow="never" class="filter-card">
|
||||
<div class="filter-grid">
|
||||
<el-input v-model="provider" placeholder="服务商，如 agiso" clearable @keyup.enter="loadEvents(1)" />
|
||||
<el-input v-model="platform" placeholder="业务平台，如 xianyu / taobao" clearable @keyup.enter="loadEvents(1)" />
|
||||
<el-select v-model="processed" placeholder="处理结果" clearable>
|
||||
<el-option v-for="opt in adminWebhookProcessedOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
<el-select v-model="visibility" placeholder="可见级别" clearable>
|
||||
<el-option v-for="opt in adminWebhookVisibilityOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
<el-input v-model="platformOrderId" placeholder="平台订单号" clearable @keyup.enter="loadEvents(1)" />
|
||||
<el-input v-model="relatedOrderId" placeholder="后台订单 ID" clearable @keyup.enter="loadEvents(1)" />
|
||||
<el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
|
||||
<el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
|
||||
</div>
|
||||
<div class="filters-actions">
|
||||
<span class="filters-hint">Webhook 事件已拆成来源、摘要、订单、验签、请求来源几个信息块，排查会更直观。</span>
|
||||
<div class="filters-button-row">
|
||||
<div class="filter-actions">
|
||||
<span class="filter-hint">Webhook 事件已拆成来源、摘要、订单、验签、请求来源几个信息块，排查会更直观。</span>
|
||||
<div class="filter-buttons">
|
||||
<el-button round @click="resetFilters">重置</el-button>
|
||||
<el-button round type="primary" @click="() => loadEvents(1)">查询</el-button>
|
||||
<el-button round type="primary" @click="loadEvents(1)">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</el-card>
|
||||
|
||||
<section v-if="!loading && items.length > 0" class="summary-grid">
|
||||
<article class="summary-card summary-card-success">
|
||||
<!-- 摘要 -->
|
||||
<div v-if="!loading && items.length > 0" class="summary-grid">
|
||||
<el-card shadow="never" class="summary-card summary-card--success">
|
||||
<span class="summary-label">当前页处理成功</span>
|
||||
<strong class="summary-value">{{ summary.processedCount }}</strong>
|
||||
<span class="summary-meta">已通过处理链路，通常无需人工介入</span>
|
||||
</article>
|
||||
<article class="summary-card summary-card-danger">
|
||||
</el-card>
|
||||
<el-card shadow="never" class="summary-card summary-card--danger">
|
||||
<span class="summary-label">当前页异常 / 失败</span>
|
||||
<strong class="summary-value">{{ summary.failedCount }}</strong>
|
||||
<span class="summary-meta">优先查看验签、处理错误和请求来源</span>
|
||||
</article>
|
||||
<article class="summary-card summary-card-primary">
|
||||
</el-card>
|
||||
<el-card shadow="never" class="summary-card summary-card--primary">
|
||||
<span class="summary-label">当前页重要事件</span>
|
||||
<strong class="summary-value">{{ summary.importantCount }}</strong>
|
||||
<span class="summary-meta">仅重要模式下更适合日常排查</span>
|
||||
</article>
|
||||
</section>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
|
||||
<div v-if="loading" class="empty-block">Webhook 列表加载中</div>
|
||||
<div v-else-if="items.length === 0" class="empty-block">当前筛选条件下暂无 Webhook 事件</div>
|
||||
<el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
|
||||
|
||||
<div v-else class="events-shell">
|
||||
<div class="events-toolbar">
|
||||
<div>
|
||||
<!-- 列表 -->
|
||||
<el-card shadow="never" class="table-card" v-loading="loading" element-loading-text="Webhook 列表加载中">
|
||||
<template v-if="items.length === 0 && !loading">
|
||||
<el-empty description="当前筛选条件下暂无 Webhook 事件" :image-size="60" />
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="events-toolbar">
|
||||
<strong>Webhook 列表</strong>
|
||||
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="event-list">
|
||||
<article v-for="item in items" :key="item.eventId" class="event-card">
|
||||
<div class="event-card-top">
|
||||
<div class="event-identity">
|
||||
<RouterLink :to="`/admin/webhook-events/${item.eventId}`" class="cell-link event-no">
|
||||
#{{ item.eventId }} · {{ formatAdminWebhookEventType(item.eventType) }}
|
||||
</RouterLink>
|
||||
<div class="event-meta-row">
|
||||
<span class="compact-chip">{{ item.provider || '-' }}</span>
|
||||
<span class="compact-chip">{{ item.platform || '-' }}</span>
|
||||
<span v-if="item.shopName || item.shopId" class="compact-chip compact-chip--muted">
|
||||
{{ item.shopName || item.shopId }}
|
||||
</span>
|
||||
<div class="event-list">
|
||||
<article v-for="item in items" :key="item.eventId" class="event-card">
|
||||
<div class="event-card-top">
|
||||
<div class="event-identity">
|
||||
<RouterLink :to="`/admin/webhook-events/${item.eventId}`" class="event-no">
|
||||
#{{ item.eventId }} · {{ formatAdminWebhookEventType(item.eventType) }}
|
||||
</RouterLink>
|
||||
<div class="event-meta-row">
|
||||
<span class="compact-chip">{{ item.provider || '-' }}</span>
|
||||
<span class="compact-chip">{{ item.platform || '-' }}</span>
|
||||
<span v-if="item.shopName || item.shopId" class="compact-chip compact-chip--muted">{{ item.shopName || item.shopId }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-top-actions">
|
||||
<span class="compact-chip compact-chip--muted">{{ formatVisibilityLabel(item.visibilityLevel) }}</span>
|
||||
<el-button v-if="canReplay" :loading="actionLoadingId === item.eventId" size="small" @click="submitReplay(item)">重放</el-button>
|
||||
</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 class="event-grid">
|
||||
<section class="event-section">
|
||||
<span class="section-label">来源</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">{{ item.provider }} / {{ item.platform }}</div>
|
||||
<div v-if="item.platformRaw && item.platformRaw !== item.platform" class="cell-subtle">原始平台 {{ item.platformRaw }}</div>
|
||||
<div class="meta-chip-row">
|
||||
<span class="meta-chip">店铺 {{ item.shopName || item.shopId || '-' }}</span>
|
||||
<span v-if="item.shopId" class="meta-chip">ID {{ item.shopId }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="event-section">
|
||||
<span class="section-label">事件摘要</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">{{ formatAdminWebhookEventType(item.eventType) }}</div>
|
||||
<div v-if="item.messageText" class="cell-subtle">{{ item.messageText }}</div>
|
||||
<div class="meta-chip-row">
|
||||
<span v-if="item.aopic" class="meta-chip">aopic {{ item.aopic }}</span>
|
||||
<span v-if="item.itemCount" class="meta-chip">商品 {{ item.itemCount }}</span>
|
||||
</div>
|
||||
<div class="mono-inline event-key" :title="item.eventKey">Key: {{ item.eventKey }}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="event-section">
|
||||
<span class="section-label">订单与店铺</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">平台单 {{ item.platformOrderId || '-' }}</div>
|
||||
<div class="cell-subtle">买家 {{ item.buyerName || item.buyerId || '-' }}</div>
|
||||
<div class="cell-subtle">金额 {{ formatAmount(item) }}</div>
|
||||
<div class="meta-chip-row">
|
||||
<span class="meta-chip">
|
||||
关联订单
|
||||
<template v-if="item.relatedOrderId">
|
||||
<RouterLink class="inline-link" :to="`/admin/orders/${item.relatedOrderId}`">{{ item.relatedOrderId }}</RouterLink>
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</span>
|
||||
<span class="meta-chip">任务 {{ item.taskCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="event-section">
|
||||
<span class="section-label">验签与处理</span>
|
||||
<div class="cell-stack">
|
||||
<div class="tag-row">
|
||||
<AdminStatusTag :status="item.signatureValid ? 'success' : 'failed'" />
|
||||
<AdminStatusTag :status="item.processed ? 'success' : 'failed'" />
|
||||
</div>
|
||||
<div class="cell-subtle" :title="item.requestSign || '-'">签名 {{ item.requestSign || '-' }}</div>
|
||||
<div v-if="item.processError" class="error-inline">{{ item.processError }}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="event-section">
|
||||
<span class="section-label">请求来源</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">{{ item.sourceHost || '-' }}</div>
|
||||
<div class="cell-subtle">IP {{ item.sourceIp || '-' }}</div>
|
||||
<div class="cell-subtle line-clamp-2">UA {{ item.userAgent || '-' }}</div>
|
||||
<div class="cell-subtle">请求时间 {{ formatRequestTimestamp(item.requestTimestamp) }}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="event-section">
|
||||
<span class="section-label">时间</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">{{ formatAdminDateTime(item.createdAt) }}</div>
|
||||
<div class="cell-subtle">事件 ID #{{ item.eventId }}</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="event-grid">
|
||||
<section class="event-section">
|
||||
<span class="section-label">来源</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">{{ item.provider }} / {{ item.platform }}</div>
|
||||
<div v-if="item.platformRaw && item.platformRaw !== item.platform" class="cell-subtle">
|
||||
原始平台 {{ item.platformRaw }}
|
||||
</div>
|
||||
<div class="meta-chip-row">
|
||||
<span class="meta-chip">店铺 {{ item.shopName || item.shopId || '-' }}</span>
|
||||
<span v-if="item.shopId" class="meta-chip">ID {{ item.shopId }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="event-section">
|
||||
<span class="section-label">事件摘要</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">{{ formatAdminWebhookEventType(item.eventType) }}</div>
|
||||
<div v-if="item.messageText" class="cell-subtle">{{ item.messageText }}</div>
|
||||
<div class="meta-chip-row">
|
||||
<span v-if="item.aopic" class="meta-chip">aopic {{ item.aopic }}</span>
|
||||
<span v-if="item.itemCount" class="meta-chip">商品 {{ item.itemCount }}</span>
|
||||
</div>
|
||||
<div class="mono-inline event-key" :title="item.eventKey">Key: {{ item.eventKey }}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="event-section">
|
||||
<span class="section-label">订单与店铺</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">平台单 {{ item.platformOrderId || '-' }}</div>
|
||||
<div class="cell-subtle">买家 {{ item.buyerName || item.buyerId || '-' }}</div>
|
||||
<div class="cell-subtle">金额 {{ formatAmount(item) }}</div>
|
||||
<div class="meta-chip-row">
|
||||
<span class="meta-chip">
|
||||
关联订单
|
||||
<template v-if="item.relatedOrderId">
|
||||
<RouterLink class="inline-link" :to="`/admin/orders/${item.relatedOrderId}`">{{ item.relatedOrderId }}</RouterLink>
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</span>
|
||||
<span class="meta-chip">任务 {{ item.taskCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="event-section">
|
||||
<span class="section-label">验签与处理</span>
|
||||
<div class="cell-stack">
|
||||
<div class="tag-row">
|
||||
<AdminStatusTag :status="item.signatureValid ? 'success' : 'failed'" />
|
||||
<AdminStatusTag :status="item.processed ? 'success' : 'failed'" />
|
||||
</div>
|
||||
<div class="cell-subtle" :title="item.requestSign || '-'">签名 {{ item.requestSign || '-' }}</div>
|
||||
<div v-if="item.processError" class="error-inline">{{ item.processError }}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="event-section">
|
||||
<span class="section-label">请求来源</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">{{ item.sourceHost || '-' }}</div>
|
||||
<div class="cell-subtle">IP {{ item.sourceIp || '-' }}</div>
|
||||
<div class="cell-subtle line-clamp-2">UA {{ item.userAgent || '-' }}</div>
|
||||
<div class="cell-subtle">请求时间 {{ formatRequestTimestamp(item.requestTimestamp) }}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="event-section">
|
||||
<span class="section-label">时间</span>
|
||||
<div class="cell-stack">
|
||||
<div class="cell-title">{{ formatAdminDateTime(item.createdAt) }}</div>
|
||||
<div class="cell-subtle">事件 ID #{{ item.eventId }}</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<AdminPaginationBar
|
||||
:page="pagination.page"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:loading="loading"
|
||||
@change="loadEvents"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<el-pagination
|
||||
v-if="pagination.total > 0"
|
||||
v-model:current-page="pagination.page"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
layout="total, prev, pager, next"
|
||||
style="margin-top: 16px; justify-content: center"
|
||||
@current-change="loadEvents"
|
||||
/>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-panel {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
.webhooks-page { display: grid; gap: 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: 6px 0 0;
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.panel-header-badge {
|
||||
flex: 0 0 auto;
|
||||
.total-badge {
|
||||
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;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
.filter-card { margin-top: var(--space-4); }
|
||||
|
||||
.filters-card {
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.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 {
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.filter-hint { color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
.filter-buttons { display: flex; gap: 10px; flex-shrink: 0; }
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.summary-card { position: relative; overflow: hidden; }
|
||||
.summary-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: auto -26px -26px auto;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
opacity: 0.14;
|
||||
}
|
||||
.summary-card--success::after { background: var(--color-success); }
|
||||
.summary-card--danger::after { background: var(--color-danger); }
|
||||
.summary-card--primary::after { background: var(--color-primary); }
|
||||
|
||||
.summary-card-success::after {
|
||||
background: #12b76a;
|
||||
}
|
||||
.summary-label { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; }
|
||||
.summary-value { font-size: var(--text-3xl); line-height: 1; color: var(--text-primary); }
|
||||
.summary-meta { color: var(--text-muted); font-size: var(--text-xs); }
|
||||
|
||||
.summary-card-danger::after {
|
||||
background: #f04438;
|
||||
}
|
||||
.table-card { margin-top: var(--space-4); overflow: visible; }
|
||||
|
||||
.summary-card-primary::after {
|
||||
background: #2563eb;
|
||||
}
|
||||
.events-toolbar { margin-bottom: var(--space-3); }
|
||||
.events-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
|
||||
.events-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
|
||||
|
||||
.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-list { display: grid; gap: var(--space-3); }
|
||||
|
||||
.event-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
|
||||
border: 1px solid rgba(86, 108, 138, 0.12);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.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-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
|
||||
.event-identity { min-width: 0; display: grid; gap: var(--space-2); }
|
||||
|
||||
.event-no {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
font-size: 20px;
|
||||
font-size: var(--text-xl);
|
||||
line-height: 1.1;
|
||||
font-weight: 800;
|
||||
color: #132238;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
.event-no:hover { color: var(--color-primary-dark); }
|
||||
|
||||
.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;
|
||||
}
|
||||
.event-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
||||
.event-top-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
|
||||
|
||||
.compact-chip {
|
||||
display: inline-flex;
|
||||
@@ -590,36 +388,14 @@ onMounted(loadEvents)
|
||||
min-height: 28px;
|
||||
max-width: 100%;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
background: #f4f7fb;
|
||||
border: 1px solid rgba(86, 108, 138, 0.1);
|
||||
color: #44556c;
|
||||
font-size: 12px;
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
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;
|
||||
}
|
||||
.compact-chip--muted { color: var(--text-muted); }
|
||||
|
||||
.event-grid {
|
||||
display: grid;
|
||||
@@ -635,174 +411,55 @@ onMounted(loadEvents)
|
||||
padding: 10px 11px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
border: 1px solid rgba(86, 108, 138, 0.08);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
color: #71839b;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.section-label { color: var(--text-muted); 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: #0f172a;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.cell-subtle {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.meta-chip-row,
|
||||
.tag-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
.cell-stack { display: grid; gap: 6px; min-width: 0; }
|
||||
.cell-title { color: var(--text-primary); font-weight: 700; line-height: 1.4; word-break: break-word; }
|
||||
.cell-subtle { color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.5; word-break: break-word; }
|
||||
|
||||
.meta-chip-row, .tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
|
||||
.meta-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-height: 24px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-full);
|
||||
color: #475467;
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(148, 163, 184, 0.24);
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.inline-link {
|
||||
color: #175cd3;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
.inline-link { color: var(--color-primary-dark); font-weight: 700; text-decoration: none; }
|
||||
|
||||
.mono-inline { color: #344054; font-size: var(--text-xs); line-height: 1.6; font-family: var(--font-mono); overflow-wrap: anywhere; }
|
||||
.event-key { color: var(--text-muted); font-size: 10px; line-height: 1.4; }
|
||||
|
||||
.error-inline { display: block; color: var(--color-danger); font-size: var(--text-xs); line-height: 1.5; }
|
||||
|
||||
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.event-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
.cell-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
@media (max-width: 900px) {
|
||||
.filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.filter-actions { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
|
||||
.cell-link:hover {
|
||||
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 {
|
||||
display: block;
|
||||
color: #b42318;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
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,
|
||||
@media (max-width: 640px) {
|
||||
.filter-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;
|
||||
}
|
||||
.event-grid { grid-template-columns: 1fr; }
|
||||
.filter-buttons { width: 100%; }
|
||||
.filter-buttons :deep(.el-button) { flex: 1 1 auto; }
|
||||
.event-card-top { flex-direction: column; align-items: flex-start; }
|
||||
.event-no { font-size: 18px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user