114 lines
2.4 KiB
Vue
114 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
import { fetchAdminDashboardSummary } from '@/services/admin'
|
|
import type { AdminDashboardSummary } from '@/types/admin'
|
|
|
|
const loading = ref(true)
|
|
const summary = ref<AdminDashboardSummary | null>(null)
|
|
const errorMessage = ref('')
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const response = await fetchAdminDashboardSummary()
|
|
summary.value = response.data
|
|
} catch (error) {
|
|
errorMessage.value = error instanceof Error ? error.message : '读取概览失败'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
|
|
const cards = [
|
|
{ key: 'todayOrders', label: '今日订单' },
|
|
{ key: 'paidPendingClaim', label: '待领取' },
|
|
{ key: 'claimingTasks', label: '领取中' },
|
|
{ key: 'redeemedToday', label: '今日成功' },
|
|
{ key: 'abnormalTasks', label: '异常任务' },
|
|
{ key: 'skuWithInventory', label: '有库存 SKU' },
|
|
] as const
|
|
</script>
|
|
|
|
<template>
|
|
<section class="admin-panel">
|
|
<header class="panel-header">
|
|
<div>
|
|
<h1>系统概览</h1>
|
|
<p>快速查看订单和交付链路的运行状态。</p>
|
|
</div>
|
|
</header>
|
|
|
|
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
|
|
|
|
<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>
|
|
</div>
|
|
</section>
|
|
</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;
|
|
}
|
|
|
|
.summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.summary-card span {
|
|
display: block;
|
|
color: #6a7a91;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.summary-card strong {
|
|
display: block;
|
|
margin-top: 10px;
|
|
font-size: 28px;
|
|
color: #1f324a;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
</style>
|