feat: 完成 #4 数据看板统计图表与自动刷新

package-lock.json

@@ -11,6 +11,7 @@
         "@element-plus/icons-vue": "^2.3.2",
         "axios": "^1.13.6",
         "dayjs": "^1.11.19",
+        "echarts": "^6.0.0",
         "element-plus": "^2.13.5",
         "pinia": "^3.0.4",
         "vue": "^3.5.25",
@@ -1749,6 +1750,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/echarts": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-6.0.0.tgz",
+      "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.0.0"
+      }
+    },
     "node_modules/element-plus": {
       "version": "2.13.5",
       "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.13.5.tgz",
@@ -3378,6 +3389,12 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/type-check/-/type-check-0.4.0.tgz",
@@ -3732,6 +3749,15 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zrender": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-6.0.0.tgz",
+      "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
     }
   }
 }

package.json

@@ -14,6 +14,7 @@
     "@element-plus/icons-vue": "^2.3.2",
     "axios": "^1.13.6",
     "dayjs": "^1.11.19",
+    "echarts": "^6.0.0",
     "element-plus": "^2.13.5",
     "pinia": "^3.0.4",
     "vue": "^3.5.25",

src/views/dashboard/index.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="dashboard-page">
-    <el-row :gutter="16" class="cards">
+    <el-alert
+      v-if="errorMessage"
+      :title="errorMessage"
+      type="error"
+      show-icon
+      closable
+      @close="errorMessage = ''"
+    />
+
+    <el-row v-loading="overviewLoading" :gutter="16" class="cards">
       <el-col :xs="12" :sm="12" :md="6">
         <el-card shadow="hover">
           <div class="card-value">{{ overview.total_mini_programs }}</div>
@@ -51,16 +60,16 @@
           </el-radio-group>
         </div>
       </template>
-      <el-table v-loading="growthLoading" :data="userGrowth" stripe>
+      <div v-loading="growthLoading" class="chart-wrap">
-        <el-table-column prop="date" label="日期" width="160" />
+        <div ref="growthChartRef" class="growth-chart"></div>
-        <el-table-column prop="count" label="新增用户数" />
+      </div>
-      </el-table>
     </el-card>
   </div>
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from 'vue'
+import * as echarts from 'echarts'
+import { onBeforeUnmount, onMounted, reactive, ref, nextTick } from 'vue'
 import { getMiniProgramStats, getOverviewStats, getUserGrowth } from '../../api/stats'
 
 const overview = reactive({
@@ -73,13 +82,25 @@ const overview = reactive({
 const miniProgramStats = ref([])
 const userGrowth = ref([])
 const growthDays = ref(7)
+const errorMessage = ref('')
 
+const overviewLoading = ref(false)
 const tableLoading = ref(false)
 const growthLoading = ref(false)
+const growthChartRef = ref(null)
+let growthChart = null
+let refreshTimer = null
 
 const loadOverview = async () => {
-  const res = await getOverviewStats()
+  overviewLoading.value = true
-  Object.assign(overview, res.data || {})
+  try {
+    const res = await getOverviewStats()
+    Object.assign(overview, res.data || {})
+  } catch (error) {
+    errorMessage.value = '加载总览数据失败，请稍后重试'
+  } finally {
+    overviewLoading.value = false
+  }
 }
 
 const loadMiniProgramStats = async () => {
@@ -87,27 +108,96 @@ const loadMiniProgramStats = async () => {
   try {
     const res = await getMiniProgramStats()
     miniProgramStats.value = res.data || []
+  } catch (error) {
+    errorMessage.value = '加载小程序统计失败，请稍后重试'
   } finally {
     tableLoading.value = false
   }
 }
 
+const renderGrowthChart = async () => {
+  await nextTick()
+  if (!growthChartRef.value) return
+
+  if (!growthChart) {
+    growthChart = echarts.init(growthChartRef.value)
+  }
+
+  const labels = userGrowth.value.map((item) => item.date)
+  const values = userGrowth.value.map((item) => item.count || 0)
+
+  growthChart.setOption({
+    tooltip: {
+      trigger: 'axis'
+    },
+    xAxis: {
+      type: 'category',
+      data: labels
+    },
+    yAxis: {
+      type: 'value'
+    },
+    grid: {
+      left: 24,
+      right: 24,
+      top: 30,
+      bottom: 24,
+      containLabel: true
+    },
+    series: [
+      {
+        name: '新增用户数',
+        type: 'line',
+        smooth: true,
+        data: values,
+        areaStyle: {
+          opacity: 0.12
+        }
+      }
+    ]
+  })
+}
+
 const loadGrowth = async () => {
   growthLoading.value = true
   try {
     const res = await getUserGrowth(growthDays.value)
     userGrowth.value = res.data || []
+    await renderGrowthChart()
+  } catch (error) {
+    errorMessage.value = '加载用户增长趋势失败，请稍后重试'
   } finally {
     growthLoading.value = false
   }
 }
 
 const loadAll = async () => {
+  errorMessage.value = ''
   await Promise.all([loadOverview(), loadMiniProgramStats(), loadGrowth()])
 }
 
+const handleResize = () => {
+  if (growthChart) {
+    growthChart.resize()
+  }
+}
+
 onMounted(() => {
   loadAll()
+  refreshTimer = window.setInterval(loadAll, 5 * 60 * 1000)
+  window.addEventListener('resize', handleResize)
+})
+
+onBeforeUnmount(() => {
+  if (refreshTimer) {
+    clearInterval(refreshTimer)
+    refreshTimer = null
+  }
+  window.removeEventListener('resize', handleResize)
+  if (growthChart) {
+    growthChart.dispose()
+    growthChart = null
+  }
 })
 </script>
 
@@ -144,4 +234,14 @@ onMounted(() => {
   align-items: center;
   justify-content: space-between;
 }
+
+.chart-wrap {
+  width: 100%;
+  min-height: 320px;
+}
+
+.growth-chart {
+  width: 100%;
+  min-height: 320px;
+}
 </style>