yml/order_site
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

交付任务-ui优化ok

Browse Source
This commit is contained in:
yml2213
2026-05-14 23:11:19 +08:00
parent e841c5f048
commit be21304ef9
5 changed files with 83 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/views/admin/AdminOrderDetailView.vue
+3 -1
View File
@@ -386,12 +386,14 @@ function formatTaskAutoDeliveryReason(task: AdminOrderDetail['tasks'][number]) {
.payload-box pre {
margin: var(--space-3) 0 0;
padding: 14px;
overflow: auto;
overflow-y: auto;
border-radius: var(--radius-md);
background: #0f172a;
color: #dbeafe;
font-size: var(--text-xs);
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
@media (max-width: 1200px) {
apps/frontend/src/views/admin/AdminTasksView.vue
+75 -35
View File
@@ -133,8 +133,7 @@ function resetFilters() {
</template>
</AdminPageHeader>
<!-- 筛选 -->
<el-card shadow="never" class="filter-card">
<section class="filter-panel">
<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" />
@@ -145,21 +144,17 @@ function resetFilters() {
<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="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>
</div>
</div>
</el-card>
</section>
<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" />
<!-- 列表 -->
<el-card shadow="never" class="table-card" v-loading="loading" element-loading-text="任务列表加载中">
<section class="tasks-section" v-loading="loading" element-loading-text="任务列表加载中">
<template v-if="items.length === 0 && !loading">
<el-empty description="当前筛选条件下暂无任务" :image-size="60" />
</template>
@@ -235,7 +230,7 @@ function resetFilters() {
</div>
</section>
<section class="task-section">
<section class="task-section task-section--actions">
<span class="section-label">异常 / 操作</span>
<div class="task-end">
<span class="cell-error" :title="item.lastError || '-'">{{ item.lastError || '当前无异常' }}</span>
@@ -290,7 +285,7 @@ function resetFilters() {
@current-change="loadTasks"
/>
</template>
</el-card>
</section>
</div>
</template>
@@ -310,26 +305,25 @@ function resetFilters() {
align-items: center;
}
.filter-card { margin-top: var(--space-4); }
.filter-panel { margin-top: var(--space-4); }
.filter-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-columns: minmax(150px, 0.75fr) minmax(220px, 1fr) minmax(220px, 1fr) minmax(210px, 0.95fr);
gap: var(--space-3);
}
.filter-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-top: var(--space-3);
}
.filter-hint { color: var(--text-secondary); font-size: var(--text-xs); }
.filter-buttons { display: flex; gap: 10px; flex-shrink: 0; }
.filter-grid :deep(.el-date-editor) { width: 100%; }
.table-card { margin-top: var(--space-4); overflow: visible; }
.filter-buttons {
display: flex;
gap: 10px;
justify-content: flex-end;
min-width: 156px;
}
.tasks-section { margin-top: var(--space-4); overflow: visible; }
.tasks-toolbar { margin-bottom: var(--space-3); }
.tasks-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
@@ -341,9 +335,16 @@ function resetFilters() {
display: grid;
gap: 14px;
padding: 14px;
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
border-radius: var(--radius-md);
background: rgba(247, 250, 255, 0.42);
border: 1px solid var(--border-default);
transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.task-card:hover {
border-color: var(--border-hover);
background: rgba(247, 250, 255, 0.68);
box-shadow: 0 1px 4px rgba(30, 49, 78, 0.04);
}
.task-card-top {
@@ -389,19 +390,24 @@ function resetFilters() {
.task-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.15fr);
gap: var(--space-3);
min-width: 0;
}
.task-section {
display: grid;
gap: var(--space-2);
gap: 6px;
min-width: 0;
padding: var(--space-3);
border-radius: 14px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid var(--border-default);
padding-top: 10px;
border-top: 1px solid rgba(86, 108, 138, 0.1);
}
.task-section--actions {
grid-column: 1 / -1;
grid-template-columns: 112px minmax(0, 1fr);
align-items: center;
gap: var(--space-3);
}
.section-label {
@@ -412,8 +418,18 @@ function resetFilters() {
text-transform: uppercase;
}
.progress-cell { display: grid; gap: var(--space-2); }
.progress-row { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.progress-cell { display: grid; gap: var(--space-2); min-width: 0; }
.progress-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.progress-row :deep(.el-tag) {
min-width: 0;
max-width: calc(100% - 42px);
}
.progress-row :deep(.el-tag__content) {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.progress-label {
display: inline-flex;
align-items: center;
@@ -438,17 +454,41 @@ function resetFilters() {
.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; }
.task-end {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-3);
align-items: center;
min-width: 0;
}
.action-cell {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
justify-content: flex-end;
max-width: 360px;
}
.action-cell :deep(.el-button) {
flex: 0 0 auto;
margin-left: 0;
}
@media (max-width: 1200px) {
.task-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.task-section--actions {
grid-template-columns: 1fr;
align-items: start;
}
.task-end { grid-template-columns: 1fr; }
.action-cell { justify-content: flex-start; max-width: none; }
.filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.filter-buttons { justify-content: flex-start; }
}
@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; }
.filter-buttons { justify-content: flex-start; }
}
@media (max-width: 640px) {
.task-grid,
apps/frontend/src/views/admin/AdminWebhookEventDetailView.vue
+3 -1
View File
@@ -337,9 +337,11 @@ onMounted(loadDetail)
border-radius: 14px;
background: #0f172a;
color: #e2e8f0;
overflow: auto;
overflow-y: auto;
font-size: var(--text-xs);
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
@media (max-width: 900px) {