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

优化了部分界面ui

Browse Source
This commit is contained in:
yml2213
2026-04-23 14:46:06 +08:00
parent f0b31121d7
commit 17ab393280
6 changed files with 1926 additions and 628 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/views/admin/AdminTasksView.vue
+444 -246
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { onMounted, ref } from 'vue'
import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
@@ -28,7 +28,6 @@ const dateFrom = ref('')
const dateTo = ref('')
const items = ref<AdminTaskListItem[]>([])
const lastClaimUrl = ref('')
const openedActionTaskId = ref<number | null>(null)
const pagination = ref<AdminPagination>({
page: 1,
pageSize: 20,
@@ -79,25 +78,8 @@ function formatBindingCountSummary(item: AdminTaskListItem) {
return `共 ${summary.totalBindingCount} 条 · 预占 ${summary.reservedBindingCount} · 已消费 ${summary.consumedBindingCount} · 已释放 ${summary.releasedBindingCount}`
}
function closeActionMenu() {
openedActionTaskId.value = null
}
function toggleActionMenu(taskId: number) {
openedActionTaskId.value = openedActionTaskId.value === taskId ? null : taskId
}
function handleDocumentClick() {
closeActionMenu()
}
onMounted(() => {
void loadTasks()
document.addEventListener('click', handleDocumentClick)
})
onBeforeUnmount(() => {
document.removeEventListener('click', handleDocumentClick)
})
async function runAction(
@@ -124,7 +106,6 @@ async function runAction(
lastClaimUrl.value = response.data.claimUrl
}
showSuccess(successMessage)
closeActionMenu()
await loadTasks()
} catch (error) {
showError(error instanceof Error ? error.message : '操作失败')
@@ -166,73 +147,105 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
`确认关闭任务 ${item.taskNo} 吗？关闭后不会自动继续推进。`,
)
}
function resetFilters() {
status.value = ''
taskNo.value = ''
platformOrderId.value = ''
roleId.value = ''
skuCode.value = ''
dateFrom.value = ''
dateTo.value = ''
void loadTasks(1)
}
</script>
<template>
<section class="admin-panel">
<header class="panel-header">
<div>
<div class="panel-header-copy">
<h1>交付任务</h1>
<p>查看交付状态、角色识别、库存凭据分配和错误信息。</p>
<p>更紧凑地查看任务状态、角色绑定、库存凭据和异常信息。</p>
</div>
<div class="panel-header-badge">共 {{ pagination.total }} 条任务</div>
</header>
<section class="filter-bar">
<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>
<input v-model="taskNo" class="text-input" placeholder="任务号" />
<input v-model="platformOrderId" class="text-input" placeholder="订单号" />
<input v-model="roleId" class="text-input" placeholder="角色 ID" />
</section>
<section class="filter-bar">
<input v-model="skuCode" class="text-input" placeholder="SKU" />
<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="() => loadTasks(1)">查询</el-button>
<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>
</div>
<div class="filters-actions">
<span class="filters-hint">桌面端已改为自适应卡片列表，不再出现横向滚动。</span>
<div class="filters-button-row">
<el-button round @click="resetFilters">重置</el-button>
<el-button round type="primary" @click="() => loadTasks(1)">查询</el-button>
</div>
</div>
</section>
<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>
<div v-else class="table-card">
<table class="data-table">
<colgroup>
<col class="col-meta" />
<col class="col-progress" />
<col class="col-goods" />
<col class="col-role" />
<col class="col-time" />
<col class="col-error" />
<col class="col-actions" />
</colgroup>
<thead>
<tr>
<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.taskId">
<td>
<div class="meta-cell">
<RouterLink :to="`/admin/tasks/${item.taskId}`" class="cell-link meta-title" :title="item.taskNo">
{{ item.taskNo }}
</RouterLink>
<span class="meta-subline" :title="item.platformOrderId">订单 {{ item.platformOrderId }}</span>
<span class="meta-subline meta-muted">重试 {{ item.retryCount }} 次</span>
<div v-else-if="items.length === 0" class="empty-block">当前筛选条件下暂无任务</div>
<div v-else class="tasks-shell">
<div class="tasks-toolbar">
<div>
<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>
</td>
<td>
</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>
@@ -247,8 +260,10 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
<AdminStatusTag :status="item.userBindingStatus" />
</div>
</div>
</td>
<td>
</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>
@@ -262,15 +277,19 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
{{ formatBindingCountSummary(item) }}
</span>
</div>
</td>
<td>
</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>
</td>
<td>
</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>
@@ -278,64 +297,52 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
<span v-if="item.roleConfirmedAt" class="time-line">确认 {{ formatAdminDateTime(item.roleConfirmedAt) }}</span>
<span v-if="item.redeemedAt" class="time-line">兑换 {{ formatAdminDateTime(item.redeemedAt) }}</span>
</div>
</td>
<td>
<span class="cell-error" :title="item.lastError || '-'">{{ item.lastError || '-' }}</span>
</td>
<td>
<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>
<div
v-if="canCloseTasks"
class="more-action-wrap"
@click.stop
>
<el-button class="secondary-action" @click.stop="toggleActionMenu(item.taskId)">
更多
<span class="dropdown-icon">{{ openedActionTaskId === item.taskId ? '▴' : '▾' }}</span>
</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>
<div v-if="openedActionTaskId === item.taskId" class="more-action-menu">
<button
v-if="canManageTaskLifecycle && item.executorKey !== 'manual_dispatch'"
class="menu-action-button"
type="button"
@click="handleActionCommand('regenerate_claim_link', item)"
>
重发链接
</button>
<button
v-if="canManageTaskLifecycle"
class="menu-action-button"
type="button"
@click="handleActionCommand('manual_review', item)"
>
转人工
</button>
<button
v-if="!['redeemed', 'closed'].includes(item.status)"
class="menu-action-button menu-action-button-danger"
type="button"
@click="handleActionCommand('close', item)"
>
关闭任务
</button>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
</article>
</div>
<AdminPaginationBar
:page="pagination.page"
:page-size="pagination.pageSize"
@@ -350,77 +357,250 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
<style scoped>
.admin-panel {
display: grid;
gap: 14px;
min-width: 0;
}
.panel-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
}
.panel-header-copy {
min-width: 0;
}
.panel-header h1 {
margin: 0;
font-size: 34px;
line-height: 1.05;
letter-spacing: -0.04em;
color: #1d3555;
}
.panel-header p {
margin: 8px 0 0;
margin: 6px 0 0;
font-size: 14px;
color: #64748b;
}
.filter-bar {
display: flex;
gap: 12px;
.panel-header-badge {
flex: 0 0 auto;
min-height: 34px;
padding: 0 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(86, 108, 138, 0.12);
color: #38506e;
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
}
.filters-card,
.tasks-shell,
.empty-block,
.error-copy,
.info-copy {
padding: 16px 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(86, 108, 138, 0.1);
box-shadow: 0 14px 36px rgba(30, 49, 78, 0.06);
}
.filters-card {
display: grid;
gap: 14px;
}
.filters-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.filter-field {
display: grid;
gap: 6px;
min-width: 0;
}
.filter-field span {
color: #5d6f87;
font-size: 12px;
font-weight: 600;
}
.filters-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.filters-hint {
color: #64748b;
font-size: 12px;
}
.filters-button-row {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.text-input {
width: 100%;
min-height: 42px;
padding: 0 14px;
border-radius: 14px;
min-height: 38px;
padding: 0 12px;
border-radius: 12px;
border: 1px solid rgba(86, 108, 138, 0.18);
background: rgba(255, 255, 255, 0.94);
color: #24364e;
font-size: 13px;
}
.select-input {
appearance: none;
}
.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 {
margin: 0;
color: #b42318;
}
.info-copy {
margin: 0;
color: #175cd3;
word-break: break-all;
}
.data-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
.tasks-shell {
display: grid;
gap: 14px;
min-width: 0;
}
.col-meta { width: 220px; }
.col-progress { width: 300px; }
.col-goods { width: 220px; }
.col-role { width: 180px; }
.col-time { width: 200px; }
.col-error { width: 160px; }
.col-actions { width: 130px; }
.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-card {
display: grid;
gap: 14px;
padding: 14px;
border-radius: 16px;
background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
border: 1px solid rgba(86, 108, 138, 0.12);
}
.task-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.task-identity {
min-width: 0;
display: grid;
gap: 8px;
}
.task-no {
display: inline-block;
max-width: 100%;
font-size: 20px;
line-height: 1.1;
font-weight: 800;
color: #132238;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-meta-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.compact-chip {
display: inline-flex;
align-items: center;
min-height: 28px;
max-width: 100%;
padding: 0 10px;
border-radius: 999px;
background: #f4f7fb;
border: 1px solid rgba(86, 108, 138, 0.1);
color: #44556c;
font-size: 12px;
font-weight: 600;
}
.compact-chip--muted {
color: #6b7c93;
}
.task-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
min-width: 0;
}
.task-section {
display: grid;
gap: 8px;
min-width: 0;
padding: 12px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(86, 108, 138, 0.08);
}
.section-label {
color: #71839b;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.progress-cell {
display: grid;
gap: 6px;
gap: 8px;
}
.progress-row {
display: flex;
align-items: center;
align-items: flex-start;
gap: 8px;
min-width: 0;
}
@@ -429,9 +609,9 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
min-width: 34px;
min-height: 22px;
padding: 0 8px;
padding: 0 7px;
border-radius: 999px;
background: #f7f9fc;
border: 1px solid rgba(86, 108, 138, 0.12);
@@ -455,7 +635,7 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
.role-cell,
.time-cell {
display: grid;
gap: 6px;
gap: 5px;
min-width: 0;
}
@@ -463,7 +643,7 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
min-width: 0;
color: #475467;
font-size: 12px;
line-height: 1.6;
line-height: 1.5;
}
.meta-title,
@@ -499,33 +679,35 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
}
.cell-error {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.6;
display: block;
min-width: 0;
line-height: 1.55;
color: #475467;
word-break: break-word;
font-size: 12px;
}
.data-table td {
vertical-align: top;
.task-end {
display: grid;
gap: 12px;
min-width: 0;
}
.action-cell {
display: grid;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-items: start;
align-content: start;
align-items: flex-start;
}
.primary-action,
.secondary-action {
min-width: 88px;
min-height: 32px;
padding: 0 14px;
min-width: 82px;
min-height: 30px;
padding: 0 12px;
border-radius: 999px;
font-weight: 600;
font-size: 12px;
}
.primary-action {
@@ -554,84 +736,100 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
background: #f8fbff;
}
.more-action-wrap {
position: relative;
.secondary-action-danger {
border-color: rgba(217, 45, 32, 0.22);
color: #c43225;
background: #fff7f6;
}
.more-action-menu {
display: grid;
gap: 6px;
margin-top: 8px;
padding: 8px;
min-width: 108px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(86, 108, 138, 0.12);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}
.menu-action-button {
min-height: 30px;
padding: 0 10px;
border: 0;
border-radius: 10px;
background: #f8fafc;
color: #344054;
font: inherit;
font-size: 12px;
font-weight: 600;
text-align: left;
cursor: pointer;
}
.menu-action-button:hover {
background: #eff6ff;
color: #175cd3;
}
.menu-action-button-danger {
background: #fff5f4;
color: #d92d20;
}
.menu-action-button-danger:hover {
background: #fee4e2;
color: #b42318;
}
.dropdown-icon {
margin-left: 4px;
font-size: 12px;
}
.data-table th,
.data-table td {
padding: 12px 10px;
text-align: left;
border-bottom: 1px solid rgba(86, 108, 138, 0.08);
color: #334155;
vertical-align: top;
}
.data-table th {
color: #64748b;
font-size: 13px;
.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: 1500px) {
.col-progress { width: 280px; }
.col-goods { width: 200px; }
.col-role { width: 160px; }
.col-time { width: 180px; }
@media (max-width: 1400px) {
.task-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 1320px) {
.data-table {
table-layout: auto;
@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;
}
}
</style>