cfc/cfc-web/src/views/admin/Dashboard.vue

<template>
  <div class="dashboard-container">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20" class="stat-row">
      <el-col :span="6" v-for="(stat, idx) in statCards" :key="idx">
        <el-card class="stat-card" :class="'stat-card-' + stat.type">
          <div class="stat-icon">{{ stat.icon }}</div>
          <div class="stat-content">
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 收入和会员概览 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="16">
        <el-card class="chart-card">
          <div slot="header" class="card-header">
            <span>用户与家庭增长趋势（近30天）</span>
          </div>
          <div ref="trendChart" class="echarts-container"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <div slot="header" class="card-header">
            <span>会员等级分布</span>
          </div>
          <div ref="memberPieChart" class="echarts-container"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 收入概览 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="8">
        <el-card class="chart-card">
          <div slot="header" class="card-header">
            <span>本月佣金</span>
          </div>
          <div class="revenue-value">¥{{ revenueData.monthCommission || 0 }}</div>
          <div class="revenue-sub">待结算: ¥{{ revenueData.pendingCommission || 0 }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <div slot="header" class="card-header">
            <span>累计佣金</span>
          </div>
          <div class="revenue-value">¥{{ revenueData.totalCommission || 0 }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <div slot="header" class="card-header">
            <span>本月会员升级</span>
          </div>
          <div class="revenue-value">{{ membershipData.monthUpgrades || 0 }}</div>
          <div class="revenue-sub">试用会员: {{ membershipData.trialCount || 0 }}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'AdminDashboard',
  data() {
    return {
      statCards: [
        { label: '家庭总数', value: 0, icon: '👨‍👩‍👧', type: 'orange' },
        { label: '家长总数', value: 0, icon: '👤', type: 'blue' },
        { label: '成长规划师', value: 0, icon: '🎓', type: 'green' },
        { label: '待审核规划师', value: 0, icon: '⏳', type: 'red' }
      ],
      revenueData: {},
      membershipData: {},
      trendData: { familyTrend: {}, userTrend: {} }
    }
  },
  mounted() {
    this.loadOverview()
    this.loadRevenue()
    this.loadMembership()
    this.loadTrend()
  },
  methods: {
    async loadOverview() {
      try {
        const res = await this.$http.post('/api/stats/overview')
        if (res.data.code === 200) {
          const d = res.data.data
          this.statCards[0].value = d.totalFamilies || 0
          this.statCards[1].value = d.totalParents || 0
          this.statCards[2].value = d.totalTeachers || 0
          this.statCards[3].value = d.pendingGuides || 0
        }
      } catch (e) {
        console.error('加载概览失败', e)
      }
    },
    async loadRevenue() {
      try {
        const res = await this.$http.post('/api/stats/revenue')
        if (res.data.code === 200) {
          this.revenueData = res.data.data
        }
      } catch (e) {
        console.error('加载收入统计失败', e)
      }
    },
    async loadMembership() {
      try {
        const res = await this.$http.post('/api/stats/membership')
        if (res.data.code === 200) {
          this.membershipData = res.data.data
          this.initMemberPieChart()
        }
      } catch (e) {
        console.error('加载会员统计失败', e)
      }
    },
    async loadTrend() {
      try {
        const res = await this.$http.post('/api/stats/trend')
        if (res.data.code === 200) {
          this.trendData = res.data.data
          this.initTrendChart()
        }
      } catch (e) {
        console.error('加载趋势失败', e)
      }
    },
    initTrendChart() {
      const chart = echarts.init(this.$refs.trendChart)
      const familyData = Object.values(this.trendData.familyTrend || {})
      const userData = Object.values(this.trendData.userTrend || {})
      const xAxis = Object.keys(this.trendData.familyTrend || {})

      chart.setOption({
        tooltip: { trigger: 'axis' },
        legend: { data: ['新增家庭', '新增用户'] },
        xAxis: { type: 'category', data: xAxis },
        yAxis: { type: 'value' },
        series: [
          { name: '新增家庭', type: 'bar', data: familyData, itemStyle: { color: '#F97316' } },
          { name: '新增用户', type: 'line', data: userData, itemStyle: { color: '#0EA5E9' } }
        ]
      })
    },
    initMemberPieChart() {
      const chart = echarts.init(this.$refs.memberPieChart)
      chart.setOption({
        tooltip: { trigger: 'item' },
        legend: { orient: 'vertical', left: 'left' },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          data: [
            { value: this.membershipData.freeCount || 0, name: '免费用户' },
            { value: this.membershipData.familyCount || 0, name: '家庭会员' },
            { value: this.membershipData.providerCount || 0, name: '服务商' }
          ],
          itemStyle: {
            color: function(params) {
              var colors = ['#94A3B8', '#F97316', '#10B981']
              return colors[params.dataIndex]
            }
          }
        }]
      })
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}
.stat-row {
  margin-bottom: 20px;
}
.stat-card {
  display: flex;
  align-items: center;
  padding: 10px;
}
.stat-icon {
  font-size: 36px;
  margin-right: 16px;
}
.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #1E293B;
}
.stat-label {
  font-size: 14px;
  color: #64748B;
  margin-top: 4px;
}
.chart-card {
  min-height: 300px;
}
.echarts-container {
  height: 260px;
}
.card-header {
  font-weight: 600;
  color: #1E293B;
}
.revenue-value {
  font-size: 32px;
  font-weight: bold;
  color: #F97316;
  text-align: center;
  margin-top: 20px;
}
.revenue-sub {
  font-size: 14px;
  color: #64748B;
  text-align: center;
  margin-top: 8px;
}
</style>