first commit

2026-06-03 10:09:03 +08:00
commit 81f5039458
6266 changed files with 188236 additions and 0 deletions
@@ -0,0 +1,233 @@
+<template>
+  <div class="statistics-container">
+    <el-row :gutter="20" class="data-overview">
+      <el-col :xs="12" :sm="12" :md="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 :xs="24" :sm="24" :md="16">
+        <el-card shadow="hover" header="用户增长趋势">
+          <div ref="lineChartRef" class="chart-box"></div>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="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: {
+        orient: 'vertical',
+        right: '5%',
+        top: 'center',
+      },
+      series: [
+        {
+          name: '等级分布',
+          type: 'pie',
+          radius: ['40%', '70%'],
+          center: ['35%', '50%'],
+          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 {
+      margin-bottom: 16px;
+
+      .card-content {
+        display: flex;
+        align-items: center;
+
+        .icon-box {
+          width: 56px;
+          height: 56px;
+          flex-shrink: 0;
+          border-radius: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 15px;
+          color: #fff;
+          font-size: 24px;
+        }
+
+        .text-box {
+          min-width: 0;
+          .title {
+            font-size: 14px;
+            color: #909399;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          .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 {
+    .el-col {
+      margin-bottom: 16px;
+    }
+    .chart-box {
+      height: 350px;
+      width: 100%;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .statistics-container {
+    padding: 12px;
+
+    .data-overview .data-card .card-content {
+      .icon-box {
+        width: 44px;
+        height: 44px;
+        font-size: 20px;
+        margin-right: 10px;
+      }
+      .text-box .value {
+        font-size: 20px;
+      }
+    }
+
+    .charts-row .chart-box {
+      height: 300px;
+    }
+  }
+}
+
+// 深度修改 Element Plus 卡片头部样式
+:deep(.el-card__header) {
+  font-weight: bold;
+  font-size: 16px;
+  border-bottom: 1px solid #ebeef5;
+}
+</style>