BingLogyBlog-Frontend/app/pages/admin/dashboard.vue

<template>
  <div>
    <h1 class="text-2xl font-bold mb-6">数据分析</h1>

    <div v-if="loading" class="space-y-6">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <USkeleton v-for="i in 4" :key="i" class="h-24" />
      </div>
    </div>

    <div v-else class="space-y-6">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <UCard>
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-sm text-gray-500 dark:text-gray-400">总文章数</span>
              <UIcon name="i-heroicons-document-text" class="w-5 h-5 text-indigo-500" />
            </div>
          </template>
          <p class="text-3xl font-bold">{{ stats?.totalArticles || 0 }}</p>
        </UCard>

        <UCard>
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-sm text-gray-500 dark:text-gray-400">总评论数</span>
              <UIcon name="i-heroicons-chat-bubble-left-right" class="w-5 h-5 text-green-500" />
            </div>
          </template>
          <p class="text-3xl font-bold">{{ stats?.totalComments || 0 }}</p>
        </UCard>

        <UCard>
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-sm text-gray-500 dark:text-gray-400">总用户数</span>
              <UIcon name="i-heroicons-users" class="w-5 h-5 text-blue-500" />
            </div>
          </template>
          <p class="text-3xl font-bold">{{ stats?.totalUsers || 0 }}</p>
        </UCard>

        <UCard>
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-sm text-gray-500 dark:text-gray-400">近30天查看</span>
              <UIcon name="i-heroicons-eye" class="w-5 h-5 text-orange-500" />
            </div>
          </template>
          <p class="text-3xl font-bold">{{ stats?.totalViews || 0 }}</p>
        </UCard>
      </div>

      <UCard v-if="stats?.popularArticles?.length">
        <template #header>
          <h3 class="text-lg font-semibold">热门文章 TOP 10</h3>
        </template>
        <UTable :columns="columns" :rows="stats.popularArticles">
          <template #title-data="{ row }">
            <NuxtLink :to="`/article/${row.slug}`" class="text-indigo-600 dark:text-indigo-400 hover:underline">
              {{ row.title }}
            </NuxtLink>
          </template>
          <template #viewCount-data="{ row }">
            {{ row.viewCount }}
          </template>
        </UTable>
      </UCard>

      <UCard v-if="stats?.commentStats">
        <template #header>
          <h3 class="text-lg font-semibold">评论审核统计</h3>
        </template>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div class="text-center">
            <p class="text-2xl font-bold text-yellow-600">{{ stats.commentStats.pending }}</p>
            <p class="text-sm text-gray-500">待审核</p>
          </div>
          <div class="text-center">
            <p class="text-2xl font-bold text-green-600">{{ stats.commentStats.approved }}</p>
            <p class="text-sm text-gray-500">已通过</p>
          </div>
          <div class="text-center">
            <p class="text-2xl font-bold text-red-600">{{ stats.commentStats.rejected }}</p>
            <p class="text-sm text-gray-500">已拒绝</p>
          </div>
          <div class="text-center">
            <p class="text-2xl font-bold text-orange-600">{{ stats.commentStats.suspicious }}</p>
            <p class="text-sm text-gray-500">可疑</p>
          </div>
        </div>
      </UCard>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'admin',
  middleware: ['admin'],
})

const { get } = useApi()

const stats = ref<any>(null)
const loading = ref(true)

const columns = [
  { key: 'title', label: '标题' },
  { key: 'viewCount', label: '查看数' },
]

const loadStats = async () => {
  loading.value = true
  try {
    stats.value = await get('/analytics-summary?days=30')
  } catch (error) {
    console.error('Failed to load stats:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadStats()
})
</script>