rogee/quyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update admin

Browse Source
This commit is contained in:
yanghao05
2025-04-28 19:12:31 +08:00
parent 82c112b1eb
commit 685c87207f
12 changed files with 251 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
frontend/admin/src/pages/HomePage.vue
View File

@@ -4,26 +4,29 @@ import Card from 'primevue/card';
import Message from 'primevue/message';
import ProgressSpinner from 'primevue/progressspinner';
import { onMounted, ref } from 'vue';
import { statsApi } from '../api/statsApi';
import { statisticsService } from '../api/statisticsService';
const mediaCount = ref(0);
const articleCount = ref(0);
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 [mediaData, articleData] = await Promise.all([
statsApi.getMediaCount(),
statsApi.getArticleCount()
]);
const { data } = await statisticsService.get();
mediaCount.value = mediaData.count;
articleCount.value = articleData.count;
stats.value = data;
} catch (err) {
console.error('Error fetching data:', err);
error.value = 'Failed to load data. Please try again later.';
@@ -54,38 +57,62 @@ onMounted(() => {
<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-3 gap-6 my-8">
<Card class="transition-all duration-200 hover:-translate-y-1 hover:shadow-lg">
<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="flex items-center justify-center p-4 bg-primary bg-opacity-10">
<i class="pi pi-image text-4xl! text-white"></i>
</div>
<div class="border border-primary"></div>
</template>
<template #title>Media</template>
<template #title>媒体数量</template>
<template #content>
<div class="text-4xl font-bold mb-2 text-primary">{{ mediaCount }}</div>
<div class="text-base text-gray-500 mb-4">Total Media Items</div>
</template>
<template #footer>
<Button label="View All Media" icon="pi pi-arrow-right" link />
<div class="text-4xl font-bold mb-2 text-primary">{{ stats.media }}</div>
</template>
</Card>
<Card class="transition-all duration-200 hover:-translate-y-1 hover:shadow-lg">
<Card class="shadow-none! rounded-none! border border-gray-100">
<template #header>
<div class="flex items-center justify-center p-4 bg-primary bg-opacity-10">
<i class="pi pi-file text-4xl! text-white"></i>
</div>
<div class="border border-primary"></div>
</template>
<template #title>Articles</template>
<template #title>文章数量</template>
<template #content>
<div class="text-4xl font-bold mb-2 text-primary">{{ articleCount }}</div>
<div class="text-base text-gray-500 mb-4">Total Articles</div>
</template>
<template #footer>
<Button label="View All Articles" icon="pi pi-arrow-right" link />
<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>