blind-select/frontend-admin/src/views/Dashboard.vue

<template>
  <div>
    <h1 class="text-3xl font-bold mb-6">📊 仪表盘</h1>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      <div class="stats shadow">
        <div class="stat">
          <div class="stat-figure text-primary">👤</div>
          <div class="stat-title">总用户</div>
          <div class="stat-value text-primary">{{ stats.users }}</div>
          <div class="stat-desc">今日新增: <span class="text-success">+{{ stats.newUsers }}</span></div>
        </div>
      </div>
      <div class="stats shadow">
        <div class="stat">
          <div class="stat-figure text-secondary">🏪</div>
          <div class="stat-title">商家</div>
          <div class="stat-value text-secondary">{{ stats.merchants }}</div>
          <div class="stat-desc">待审核: <span class="text-warning">{{ stats.pending }}</span></div>
        </div>
      </div>
      <div class="stats shadow">
        <div class="stat">
          <div class="stat-figure text-accent">📦</div>
          <div class="stat-title">套餐</div>
          <div class="stat-value text-accent">{{ stats.packages }}</div>
          <div class="stat-desc">上架中: {{ stats.active }}</div>
        </div>
      </div>
      <div class="stats shadow">
        <div class="stat">
          <div class="stat-figure">🎲</div>
          <div class="stat-title">盲选次数</div>
          <div class="stat-value">{{ stats.blinds }}</div>
          <div class="stat-desc">今日: {{ stats.todayBlinds }}</div>
        </div>
      </div>
    </div>

    <!-- 会员收入 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title">💰 会员收入</h2>
          <div class="flex items-baseline">
            <span class="text-4xl font-bold text-success">¥{{ stats.monthRevenue }}</span>
            <span class="text-sm text-base-content/50 ml-2">本月</span>
          </div>
          <div class="divider my-0"></div>
          <div class="flex justify-between text-sm">
            <span>付费会员: <b>{{ stats.payingMembers }}</b></span>
            <span>转化率: <b class="text-success">{{ stats.conversionRate }}%</b></span>
          </div>
        </div>
      </div>

      <!-- 热门分类 -->
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title">🔥 热门盲选分类</h2>
          <div class="space-y-3">
            <div v-for="item in hotCategories" :key="item.name">
              <div class="flex justify-between text-sm mb-1">
                <span>{{ item.icon }} {{ item.name }}</span>
                <span>{{ item.count }} 次</span>
              </div>
              <progress class="progress progress-primary" :value="item.percent" max="100"></progress>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 最近用户 -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <h2 class="card-title">👥 最近注册用户</h2>
        <div class="overflow-x-auto">
          <table class="table table-zebra">
            <thead>
              <tr>
                <th>#</th>
                <th>昵称</th>
                <th>手机号</th>
                <th>会员</th>
                <th>注册时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(user, i) in recentUsers" :key="i">
                <td>{{ i + 1 }}</td>
                <td>{{ user.nickname }}</td>
                <td>{{ user.phone }}</td>
                <td>
                  <div class="badge" :class="user.member ? 'badge-success' : 'badge-ghost'">
                    {{ user.member ? 'VIP' : '免费' }}
                  </div>
                </td>
                <td class="text-sm text-base-content/50">{{ user.time }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const stats = ref({
  users: 12847,
  newUsers: 156,
  merchants: 328,
  pending: 12,
  packages: 1256,
  active: 1198,
  blinds: 45623,
  todayBlinds: 892,
  monthRevenue: '14,500',
  payingMembers: 523,
  conversionRate: 4.1,
})

const hotCategories = ref([
  { name: '日料', icon: '🍣', count: 8923, percent: 85 },
  { name: '火锅', icon: '🍲', count: 7654, percent: 73 },
  { name: '剧本杀', icon: '🔍', count: 6234, percent: 59 },
  { name: '西餐', icon: '🥩', count: 5123, percent: 49 },
  { name: '甜品', icon: '🍰', count: 3890, percent: 37 },
])

const recentUsers = ref([
  { nickname: '小明同学', phone: '138****1234', member: true, time: '2026-06-06 10:30' },
  { nickname: '吃货王', phone: '139****5678', member: false, time: '2026-06-06 09:15' },
  { nickname: '探店达人', phone: '137****9012', member: true, time: '2026-06-06 08:42' },
  { nickname: 'Luna', phone: '136****3456', member: false, time: '2026-06-05 22:10' },
])
</script>