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

feat: add prime vue

Browse Source
This commit is contained in:
yanghao05
2025-04-01 17:51:50 +08:00
parent f696dfdfe8
commit fe9a80405d
12 changed files with 339 additions and 1023 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,135 +1,91 @@
<template>
<div class="home-page">
<h1>仪表盘</h1>
<div class="statistics-container">
<div class="stat-card" @click="navigateTo('/posts')">
<div class="stat-icon">
<i class="fa fa-file-text"></i>
</div>
<div class="stat-content">
<h2>文章数量</h2>
<div class="stat-value">{{ postCount }}</div>
</div>
</div>
<div class="stat-card" @click="navigateTo('/medias')">
<div class="stat-icon">
<i class="fa fa-image"></i>
</div>
<div class="stat-content">
<h2>媒体数量</h2>
<div class="stat-value">{{ mediaCount }}</div>
</div>
</div>
</div>
<div v-if="error" class="error-message">
{{ error }}
</div>
</div>
</template>
<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 { useRouter } from 'vue-router';
import { statisticsService } from '../api/statisticsService';
import { statsApi } from '../api/statsApi';
const router = useRouter();
const postCount = ref(0);
const mediaCount = ref(0);
const error = ref('');
const loading = ref(false);
const articleCount = ref(0);
const loading = ref(true);
const error = ref(null);
const fetchStatistics = async () => {
const fetchCounts = async () => {
loading.value = true;
error.value = '';
error.value = null;
try {
// Option 1: Make parallel requests using our service
const [postsData, mediasData] = await Promise.all([
statisticsService.getPostsCount(),
statisticsService.getMediasCount()
// Use the API service instead of direct fetch calls
const [mediaData, articleData] = await Promise.all([
statsApi.getMediaCount(),
statsApi.getArticleCount()
]);
postCount.value = postsData.count;
mediaCount.value = mediasData.count;
// Option 2: If you have a combined endpoint
// const data = await statisticsService.getAllStatistics();
// postCount.value = data.posts;
// mediaCount.value = data.medias;
mediaCount.value = mediaData.count;
articleCount.value = articleData.count;
} catch (err) {
console.error('Error fetching statistics:', err);
error.value = '获取统计数据时出错';
console.error('Error fetching data:', err);
error.value = 'Failed to load data. Please try again later.';
} finally {
loading.value = false;
}
};
const navigateTo = (path) => {
router.push(path);
};
onMounted(() => {
fetchStatistics();
fetchCounts();
});
</script>
<style scoped>
.home-page {
padding: 20px;
}
<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>
.statistics-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}
<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>
.stat-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
display: flex;
min-width: 250px;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
<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>
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
<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">
<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>
</template>
<template #title>Media</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 />
</template>
</Card>
.stat-icon {
font-size: 2.5rem;
margin-right: 20px;
color: #3498db;
display: flex;
align-items: center;
}
.stat-content h2 {
margin: 0 0 10px 0;
font-size: 1.2rem;
color: #555;
}
.stat-value {
font-size: 2rem;
font-weight: bold;
color: #333;
}
.error-message {
margin-top: 20px;
padding: 10px;
background-color: #ffecec;
color: #f44336;
border-radius: 4px;
border-left: 4px solid #f44336;
}
</style>
<Card class="transition-all duration-200 hover:-translate-y-1 hover:shadow-lg">
<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>
</template>
<template #title>Articles</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 />
</template>
</Card>
</div>
</div>
</template>