feat: update admin

frontend/admin/src/api/statisticsService.js

@@ -1,67 +1,7 @@
 import httpClient from './httpClient';
-import { mockService } from './mockService';
-
-// Simplify environment detection and ensure the console log works
-let isDevelopment = true; // Default to development mode
-
-// Try different ways to detect environment
-try {
-    if (typeof process !== 'undefined' && process.env) {
-        console.log('Detected process.env, NODE_ENV:', process.env.NODE_ENV);
-        isDevelopment = process.env.NODE_ENV === 'development';
-    } else if (typeof import.meta !== 'undefined' && import.meta.env) {
-        console.log('Detected import.meta.env, MODE:', import.meta.env.MODE);
-        isDevelopment = import.meta.env.MODE === 'development';
-    } else {
-        console.log('No environment variables detected, defaulting to development mode');
-    }
-} catch (error) {
-    console.error('Error detecting environment:', error);
-}
-
-// Force console log with timeout to ensure it runs after other initialization
-setTimeout(() => {
-    console.log('%cCurrent environment: ' + (isDevelopment ? 'DEVELOPMENT' : 'PRODUCTION'),
-        'background: #222; color: #bada55; font-size: 16px; padding: 4px;');
-}, 0);
-
-// Use the appropriate service based on environment
-const apiService = isDevelopment ? mockService : {
-    getPostsCount() {
-        return httpClient.get('/posts/count');
-    },
-
-    getMediasCount() {
-        return httpClient.get('/medias/count');
-    },
-
-    getAllStatistics() {
-        return httpClient.get('/statistics');
-    }
-};
 
 export const statisticsService = {
-    /**
-     * Get count of posts
-     * @returns {Promise<{count: number}>}
-     */
-    getPostsCount() {
-        return apiService.getPostsCount();
+    get() {
+        return httpClient.get('/admin/statistics');
     },
-
-    /**
-     * Get count of media items
-     * @returns {Promise<{count: number}>}
-     */
-    getMediasCount() {
-        return apiService.getMediasCount();
-    },
-
-    /**
-     * Get all statistics in a single call
-     * @returns {Promise<{posts: number, medias: number}>}
-     */
-    getAllStatistics() {
-        return apiService.getAllStatistics();
-    }
-};
+}

frontend/admin/src/api/statsApi.js

@@ -1,132 +0,0 @@
-import { apiClient } from './apiClient';
-
-// Environment detection
-let isDevelopment = false; // Default to development mode
-
-// Try different ways to detect environment
-try {
-    if (typeof process !== 'undefined' && process.env) {
-        console.log('Detected process.env, NODE_ENV:', process.env.NODE_ENV);
-        isDevelopment = process.env.NODE_ENV === 'development';
-    } else if (typeof import.meta !== 'undefined' && import.meta.env) {
-        console.log('Detected import.meta.env, MODE:', import.meta.env.MODE);
-        isDevelopment = import.meta.env.MODE === 'development';
-    }
-} catch (error) {
-    console.error('Error detecting environment:', error);
-}
-setTimeout(() => {
-    console.log('%cCurrent environment: ' + (isDevelopment ? 'DEVELOPMENT' : 'PRODUCTION'),
-        'background: #222; color: #bada55; font-size: 16px; padding: 4px;');
-}, 0);
-
-// Mock service implementation
-const mockService = {
-    /**
-     * Mock implementation for getting media count
-     * @returns {Promise<{count: number}>}
-     */
-    getMediaCount: async () => {
-        // Simulate network delay
-        await new Promise(resolve => setTimeout(resolve, 800));
-
-        // Return mock data
-        return {
-            data: {
-                count: Math.floor(Math.random() * 500) + 100 // Random count between 100-600
-            }
-        };
-    },
-
-    /**
-     * Mock implementation for getting article count
-     * @returns {Promise<{count: number}>}
-     */
-    getArticleCount: async () => {
-        // Simulate network delay
-        await new Promise(resolve => setTimeout(resolve, 600));
-
-        // Return mock data
-        return {
-            data: {
-                count: Math.floor(Math.random() * 200) + 50 // Random count between 50-250
-            }
-        };
-    }
-};
-
-// Real API implementation
-const realApiService = {
-    /**
-     * Real implementation for getting media count
-     * @returns {Promise<{count: number}>}
-     */
-    getMediaCount: async () => {
-        try {
-            return await apiClient.get('/api/media/count');
-        } catch (error) {
-            console.error('Error fetching media count:', error);
-            throw error;
-        }
-    },
-
-    /**
-     * Real implementation for getting article count
-     * @returns {Promise<{count: number}>}
-     */
-    getArticleCount: async () => {
-        try {
-            return await apiClient.get('/api/articles/count');
-        } catch (error) {
-            console.error('Error fetching article count:', error);
-            throw error;
-        }
-    }
-};
-
-// Log which service we're using
-console.log(`Using ${isDevelopment ? 'MOCK' : 'REAL'} API service for stats`);
-
-// Use the appropriate service based on environment
-const apiService = isDevelopment ? mockService : realApiService;
-
-export const statsApi = {
-    /**
-     * Get the total count of media items
-     * @returns {Promise<{count: number}>} The media count
-     */
-    getMediaCount: async () => {
-        const response = await apiService.getMediaCount();
-        return response.data;
-    },
-
-    /**
-     * Get the total count of articles
-     * @returns {Promise<{count: number}>} The article count
-     */
-    getArticleCount: async () => {
-        const response = await apiService.getArticleCount();
-        return response.data;
-    },
-
-    /**
-     * Get all statistics in a single call
-     * @returns {Promise<{mediaCount: number, articleCount: number}>}
-     */
-    getAllStats: async () => {
-        try {
-            const [mediaResponse, articleResponse] = await Promise.all([
-                apiService.getMediaCount(),
-                apiService.getArticleCount()
-            ]);
-
-            return {
-                mediaCount: mediaResponse.data.count,
-                articleCount: articleResponse.data.count
-            };
-        } catch (error) {
-            console.error('Error fetching all stats:', error);
-            throw error;
-        }
-    }
-};

frontend/admin/src/pages/HomePage.vue

@@ -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>