119 lines
4.2 KiB
Vue
119 lines
4.2 KiB
Vue
<script setup>
|
|
import Button from 'primevue/button';
|
|
import Card from 'primevue/card';
|
|
import Message from 'primevue/message';
|
|
import ProgressSpinner from 'primevue/progressspinner';
|
|
import { onMounted, ref } from 'vue';
|
|
import { statisticsService } from '../api/statisticsService';
|
|
|
|
const loading = ref(true);
|
|
const error = ref(null);
|
|
|
|
const stats = ref({
|
|
"post_draft": 0,
|
|
"post_published": 0,
|
|
"media": 0,
|
|
"order": 0,
|
|
"user": 0,
|
|
"amount": 0
|
|
})
|
|
|
|
const fetchCounts = async () => {
|
|
loading.value = true;
|
|
error.value = null;
|
|
|
|
try {
|
|
// Use the API service instead of direct fetch calls
|
|
const { data } = await statisticsService.get();
|
|
|
|
stats.value = data;
|
|
} catch (err) {
|
|
console.error('Error fetching data:', err);
|
|
error.value = 'Failed to load data. Please try again later.';
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
fetchCounts();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full">
|
|
<div class="flex justify-between items-center mb-8 pb-2">
|
|
<h1 class="m-0 text-2xl text-gray-800 font-medium">Dashboard</h1>
|
|
<Button @click="fetchCounts" icon="pi pi-refresh" rounded text aria-label="Refresh" />
|
|
</div>
|
|
|
|
<div v-if="loading" class="flex flex-col items-center justify-center py-12 text-center min-h-[200px]">
|
|
<ProgressSpinner />
|
|
<p class="mt-4 text-gray-500">Loading data...</p>
|
|
</div>
|
|
|
|
<div v-else-if="error" class="flex flex-col items-center justify-center py-12 text-center min-h-[200px]">
|
|
<Message severity="error" :closable="false">{{ error }}</Message>
|
|
<Button @click="fetchCounts" label="Retry" icon="pi pi-refresh" severity="secondary" class="mt-3" />
|
|
</div>
|
|
|
|
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 my-8">
|
|
|
|
<Card class="shadow-none! rounded-none! border border-gray-100">
|
|
<template #header>
|
|
<div class="border border-primary"></div>
|
|
</template>
|
|
<template #title>媒体数量</template>
|
|
<template #content>
|
|
<div class="text-4xl font-bold mb-2 text-primary">{{ stats.media }}</div>
|
|
</template>
|
|
</Card>
|
|
|
|
<Card class="shadow-none! rounded-none! border border-gray-100">
|
|
<template #header>
|
|
<div class="border border-primary"></div>
|
|
</template>
|
|
<template #title>文章数量</template>
|
|
<template #content>
|
|
<div class="text-4xl font-bold mb-2 text-primary">
|
|
{{ stats.post_published }}/{{ stats.post_draft }}
|
|
</div>
|
|
<div class="text-sm text-gray-500">已发布/未发布</div>
|
|
</template>
|
|
</Card>
|
|
|
|
<Card class="shadow-none! rounded-none! border border-gray-100">
|
|
<template #header>
|
|
<div class="border border-primary"></div>
|
|
</template>
|
|
<template #title>订单数量</template>
|
|
<template #content>
|
|
<div class="text-4xl font-bold mb-2 text-primary">{{ stats.order }}</div>
|
|
</template>
|
|
</Card>
|
|
|
|
<Card class="shadow-none! rounded-none! border border-gray-100">
|
|
<template #header>
|
|
<div class="border border-primary"></div>
|
|
</template>
|
|
<template #title>用户数量</template>
|
|
<template #content>
|
|
<div class="text-4xl font-bold mb-2 text-primary">{{ stats.user }}</div>
|
|
</template>
|
|
</Card>
|
|
|
|
|
|
<Card class="shadow-none! rounded-none! border border-gray-100">
|
|
<template #header>
|
|
<div class="border border-primary"></div>
|
|
</template>
|
|
<template #title>订单收入</template>
|
|
<template #content>
|
|
<div class="text-4xl font-bold mb-2 text-primary">{{ stats.amount }}</div>
|
|
</template>
|
|
</Card>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|