yunzerwebsiteallinone/backend/src/views/analytics/users/index.vue

<template>
  <div class="statistics-container">
    <el-row :gutter="20" class="data-overview">
      <el-col :span="6" v-for="item in summaryData" :key="item.title">
        <el-card shadow="hover" class="data-card">
          <div class="card-content">
            <div class="icon-box" :style="{ backgroundColor: item.color }">
              <el-icon><component :is="item.icon" /></el-icon>
            </div>
            <div class="text-box">
              <div class="title">{{ item.title }}</div>
              <div class="value">{{ item.value.toLocaleString() }}</div>
              <div class="trend" :class="item.isUp ? 'up' : 'down'">
                {{ item.isUp ? '↑' : '↓' }} {{ item.percentage }}%
                <span>较上月</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="charts-row">
      <el-col :span="16">
        <el-card shadow="hover" header="用户增长趋势">
          <div ref="lineChartRef" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" header="用户等级分布">
          <div ref="pieChartRef" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, shallowRef } from 'vue';
import * as echarts from 'echarts';
import { User, Pointer, Connection, Histogram } from '@element-plus/icons-vue';

// --- 类型定义 ---
interface SummaryItem {
  title: string;
  value: number;
  icon: any;
  color: string;
  percentage: number;
  isUp: boolean;
}

// --- 响应式数据 ---
const lineChartRef = ref<HTMLElement | null>(null);
const pieChartRef = ref<HTMLElement | null>(null);
const lineChartInstance = shallowRef<echarts.ECharts | null>(null);
const pieChartInstance = shallowRef<echarts.ECharts | null>(null);

const summaryData = ref<SummaryItem[]>([
  { title: '总用户数', value: 12840, icon: User, color: '#3973FF', percentage: 12, isUp: true },
  { title: '今日新增', value: 156, icon: Pointer, color: '#67C23A', percentage: 5, isUp: true },
  { title: '活跃用户', value: 3420, icon: Connection, color: '#E6A23C', percentage: 2, isUp: false },
  { title: '留存率', value: 85, icon: Histogram, color: '#F56C6C', percentage: 1, isUp: true },
]);

// --- 初始化图表 ---
const initCharts = () => {
  // 折线图配置
  if (lineChartRef.value) {
    lineChartInstance.value = echarts.init(lineChartRef.value);
    lineChartInstance.value.setOption({
      tooltip: { trigger: 'axis' },
      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: { type: 'value' },
      series: [
        {
          name: '新增用户',
          type: 'line',
          smooth: true,
          data: [120, 132, 101, 134, 90, 230, 210],
          areaStyle: { opacity: 0.3 },
          itemStyle: { color: '#3973FF' }
        }
      ]
    });
  }

  // 饼图配置
  if (pieChartRef.value) {
    pieChartInstance.value = echarts.init(pieChartRef.value);
    pieChartInstance.value.setOption({
      tooltip: { trigger: 'item' },
      legend: { bottom: '0%', left: 'center' },
      series: [
        {
          name: '等级分布',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
          label: { show: false },
          data: [
            { value: 1048, name: '普通用户' },
            { value: 735, name: 'VIP会员' },
            { value: 580, name: '超级管理员' },
            { value: 484, name: '运营人员' }
          ]
        }
      ]
    });
  }
};

// --- 生命周期与自适应 ---
const handleResize = () => {
  lineChartInstance.value?.resize();
  pieChartInstance.value?.resize();
};

onMounted(() => {
  initCharts();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped lang="less">
.statistics-container {
  padding: 20px;
  min-height: 100vh;

  .data-overview {
    margin-bottom: 20px;

    .data-card {
      .card-content {
        display: flex;
        align-items: center;

        .icon-box {
          width: 56px;
          height: 56px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          color: #fff;
          font-size: 24px;
        }

        .text-box {
          .title {
            font-size: 14px;
            color: #909399;
          }
          .value {
            font-size: 24px;
            font-weight: bold;
            margin: 4px 0;
            color: var(--el-text-color-primary);
          }
          .trend {
            font-size: 12px;
            &.up { color: #67c23a; }
            &.down { color: #f56c6c; }
            span { color: #909399; margin-left: 4px; }
          }
        }
      }
    }
  }

  .charts-row {
    .chart-box {
      height: 350px;
      width: 100%;
    }
  }
}

// 深度修改 Element Plus 卡片头部样式
:deep(.el-card__header) {
  font-weight: bold;
  font-size: 16px;
  border-bottom: 1px solid #ebeef5;
}
</style>