From 9131148bc187f4f0e62601af332d01dac3b2f91d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=81=8C=E7=B3=96=E5=8C=85=E5=AD=90?=
 <colorfulsweet@icloud.com>
Date: Fri, 20 Mar 2026 22:27:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BE=8E=E5=8C=96=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增顶部统计卡片：文章总数、分类数量、最早发布、高频词汇
- 图表卡片化设计，统一圆角、阴影、边框样式
- 优化 ECharts 配色，使用 Element Plus 主题色系
- 图表添加标题、副标题和图标
- 支持响应式布局（大屏/中屏/小屏适配）

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/views/system/Statistics.vue | 558 ++++++++++++++++++++++++++------
 1 file changed, 456 insertions(+), 102 deletions(-)

diff --git a/src/views/system/Statistics.vue b/src/views/system/Statistics.vue
index 4c7cbcd..5f9984d 100644
--- a/src/views/system/Statistics.vue
+++ b/src/views/system/Statistics.vue
@@ -1,16 +1,91 @@
 <template>
-  <div>
-    <div class="echarts-container">
-    <div ref="categoriesChart" v-loading="categoriesChartLoading"></div>
-    <div ref="publishDatesChart" v-loading="publishDatesChartLoading"></div>
-    <div class="timeline-chart" ref="timelineWordsChart" v-loading="timelineWordsChartLoading"></div>
+  <div class="statistics-page">
+    <!-- 顶部统计卡片 -->
+    <div class="stat-cards">
+      <div class="stat-card">
+        <div class="stat-icon" style="background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <el-icon><Document /></el-icon>
+        </div>
+        <div class="stat-info">
+          <div class="stat-label">文章总数</div>
+          <div class="stat-value">{{ totalArticles }}</div>
+        </div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon" style="background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <el-icon><FolderOpened /></el-icon>
+        </div>
+        <div class="stat-info">
+          <div class="stat-label">分类数量</div>
+          <div class="stat-value">{{ totalCategories }}</div>
+        </div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon" style="background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <el-icon><Calendar /></el-icon>
+        </div>
+        <div class="stat-info">
+          <div class="stat-label">最早发布</div>
+          <div class="stat-value">{{ earliestDate }}</div>
+        </div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon" style="background-image: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <el-icon><TrendCharts /></el-icon>
+        </div>
+        <div class="stat-info">
+          <div class="stat-label">高频词汇</div>
+          <div class="stat-value">{{ topKeyword }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 图表区域 -->
+    <div class="charts-grid">
+      <!-- 文章分类 -->
+      <div class="chart-card">
+        <div class="chart-header">
+          <div class="chart-title">
+            <el-icon><PieChart /></el-icon>
+            <span>文章分类分布</span>
+          </div>
+          <div class="chart-subtitle">各类别文章数量占比</div>
+        </div>
+        <div ref="categoriesChart" v-loading="categoriesChartLoading" class="chart-body"></div>
+      </div>
+
+      <!-- 发布时间趋势 -->
+      <div class="chart-card">
+        <div class="chart-header">
+          <div class="chart-title">
+            <el-icon><TrendCharts /></el-icon>
+            <span>文章发布趋势</span>
+          </div>
+          <div class="chart-subtitle">各时间段文章发布数量变化</div>
+        </div>
+        <div ref="publishDatesChart" v-loading="publishDatesChartLoading" class="chart-body"></div>
+      </div>
+
+      <!-- 年度高频词汇 -->
+      <div class="chart-card chart-card-full">
+        <div class="chart-header">
+          <div class="chart-title">
+            <el-icon><Histogram /></el-icon>
+            <span>年度高频词汇分析</span>
+          </div>
+          <div class="chart-subtitle">基于文章分词结果的年度关键词统计</div>
+        </div>
+        <div ref="timelineWordsChart" v-loading="timelineWordsChartLoading" class="chart-body timeline-chart-body"></div>
+      </div>
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import * as echarts from 'echarts'
 import http from '@/utils/http'
+import { Document, FolderOpened, Calendar, TrendCharts, PieChart, Histogram } from '@element-plus/icons-vue'
 
 const categoriesChart = ref<HTMLElement>()
 const publishDatesChart = ref<HTMLElement>()
@@ -20,70 +95,115 @@ const categoriesChartLoading = ref(false)
 const publishDatesChartLoading = ref(false)
 const timelineWordsChartLoading = ref(false)
 
+// 统计卡片数据
+const totalArticles = ref(0)
+const totalCategories = ref(0)
+const earliestDate = ref('-')
+const topKeyword = ref('-')
+
 const categoriesChartOption: any = {
-  title: {
-    text: '文章分类',
-    x: 'center',
-    top: 10
-  },
   tooltip: {
     trigger: 'item',
-    formatter: "{a} <br/>{b} : {c} ({d}%)"
+    formatter: "{b}: {c}篇 ({d}%)"
   },
   legend: {
     type: 'scroll',
     orient: 'vertical',
     right: 10,
-    top: 50,
+    top: 40,
     bottom: 20,
-    data: [],
+    textStyle: {
+      color: '#606266'
+    }
   },
   series: {
     name: '类别',
     type: 'pie',
-    radius: ['40%', '70%'],
-    center: ['40%', '50%'],
+    radius: ['45%', '75%'],
+    center: ['35%', '50%'],
+    avoidLabelOverlap: false,
     itemStyle: {
-      borderRadius: 5,
-      borderColor: '#FFF',
-      borderWidth: 1
+      borderRadius: 8,
+      borderColor: '#fff',
+      borderWidth: 2
+    },
+    label: {
+      show: false
+    },
+    emphasis: {
+      label: {
+        show: true,
+        fontSize: 14,
+        fontWeight: 'bold'
+      }
+    },
+    labelLine: {
+      show: false
     },
     data: []
   }
 }
+
 const publishDatesChartOption: any = {
-  title: {
-    left: 'center',
-    text: '文章发布时间',
-    top: 10
-  },
   tooltip: {
     trigger: 'axis',
+    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+    borderColor: '#e4e7ed',
+    borderWidth: 1,
+    textStyle: {
+      color: '#606266'
+    },
     axisPointer: {
-      type: 'cross',
-      animation: false,
-      label: {
-        backgroundColor: '#ccc',
-        borderColor: '#aaa',
-        borderWidth: 1,
-        shadowBlur: 0,
-        shadowOffsetX: 0,
-        shadowOffsetY: 0,
-        color: '#222'
+      type: 'line',
+      lineStyle: {
+        color: '#409eff',
+        width: 2
       }
     },
   },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '15%',
+    top: '10%',
+    containLabel: true
+  },
   xAxis: {
     name: '发布时间',
+    nameTextStyle: {
+      color: '#909399'
+    },
     type: 'category',
     boundaryGap: false,
-    data: []
+    data: [],
+    axisLine: {
+      lineStyle: {
+        color: '#dcdfe6'
+      }
+    },
+    axisLabel: {
+      color: '#606266'
+    }
   },
   yAxis: {
     name: '文章数量',
+    nameTextStyle: {
+      color: '#909399'
+    },
     type: 'value',
-    max: function (value: {max: number}) {
-      return value.max + 10
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: '#606266'
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#ebeef5'
+      }
     }
   },
   dataZoom: [{
@@ -92,69 +212,156 @@ const publishDatesChartOption: any = {
     end: 100
   }, {
     start: 0,
-    end: 10
+    end: 100,
+    height: 20,
+    bottom: 10,
+    handleSize: '100%',
+    handleStyle: {
+      color: '#409eff'
+    }
   }],
   series: {
     name: '文章数量',
     type: 'line',
     smooth: true,
-    symbol: 'none',
+    symbol: 'circle',
+    symbolSize: 8,
     sampling: 'average',
     itemStyle: {
-      color: 'rgb(255, 70, 131)'
+      color: '#409eff'
+    },
+    lineStyle: {
+      width: 3,
+      shadowColor: 'rgba(64, 158, 255, 0.3)',
+      shadowBlur: 10,
+      shadowOffsetY: 5
     },
     areaStyle: {
       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
         {
           offset: 0,
-          color: 'rgb(255, 158, 68)'
+          color: 'rgba(64, 158, 255, 0.4)'
         }, {
           offset: 1,
-          color: 'rgb(255, 70, 131)'
+          color: 'rgba(64, 158, 255, 0.05)'
         }
       ])
     },
     data: []
   }
 }
+
 const timelineWordsChartOption: any = {
-  options: [],
-  timeline: {
-    axisType: 'category',
-    autoPlay: false,
-    playInterval: 1000,
-    data: [],
-  },
-  title: {
-    left: 'center',
-    subtext: '数据来自文章分词结果'
-  },
-  calculable: true,
-  grid: {
-    top: 80,
-    bottom: 80
-  },
-  xAxis: {
-    name: '高频词汇',
-    type: 'category',
-    splitLine: {show: false}
-  },
-  yAxis: {
-    name: '词汇出现次数',
-    type: 'value'
-  },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      type: 'shadow'
+  baseOption: {
+    timeline: {
+      axisType: 'category',
+      autoPlay: false,
+      playInterval: 1500,
+      data: [],
+      bottom: 10,
+      left: 50,
+      right: 50,
+      lineStyle: {
+        color: '#dcdfe6'
+      },
+      itemStyle: {
+        color: '#c0c4cc'
+      },
+      checkpointStyle: {
+        color: '#409eff',
+        borderColor: '#409eff'
+      },
+      controlStyle: {
+        itemSize: 20,
+        color: '#409eff',
+        borderColor: '#409eff'
+      },
+      label: {
+        color: '#606266'
+      }
+    },
+    title: {
+      left: 'center',
+      top: 10,
+      textStyle: {
+        fontSize: 16,
+        fontWeight: 'normal',
+        color: '#303133'
+      }
+    },
+    calculable: true,
+    grid: {
+      top: 60,
+      bottom: 80,
+      left: 60,
+      right: 40
+    },
+    xAxis: {
+      name: '高频词汇',
+      nameTextStyle: {
+        color: '#909399'
+      },
+      type: 'category',
+      axisLine: {
+        lineStyle: {
+          color: '#dcdfe6'
+        }
+      },
+      axisLabel: {
+        color: '#606266',
+        interval: 0,
+        rotate: 30
+      }
+    },
+    yAxis: {
+      name: '出现次数',
+      nameTextStyle: {
+        color: '#909399'
+      },
+      type: 'value',
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#606266'
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#ebeef5'
+        }
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      borderColor: '#e4e7ed',
+      borderWidth: 1,
+      textStyle: {
+        color: '#606266'
+      },
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: 'rgba(64, 158, 255, 0.1)'
+        }
+      }
+    },
+    series: {
+      type: 'bar',
+      itemStyle: {
+        borderRadius: [6, 6, 0, 0],
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#409eff' },
+          { offset: 1, color: '#67c23a' }
+        ])
+      },
+      barWidth: '50%'
     }
   },
-  series: {
-    type: 'bar',
-    itemStyle: {
-      borderRadius: 5
-    }
-  }
+  options: []
 }
 
 onMounted(async () => {
@@ -162,49 +369,196 @@ onMounted(async () => {
   publishDatesChartLoading.value = true
   timelineWordsChartLoading.value = true
 
+  // 加载基础统计数据
   const articleData = await http.get<{params:{type:string}}, any>('/api/v1/article/statistics', {params: {type: 'normal'}})
-  categoriesChartOption.legend.data = articleData.categories.map((item: any) => item._id)
-  categoriesChartOption.series.data = articleData.categories.map((item: any) => {
-    return {name: item._id, value: item.cnt}
-  })
-  publishDatesChartOption.xAxis.data = articleData.publishDates.map((item: any) => item._id)
-  publishDatesChartOption.series.data = articleData.publishDates.map((item: any) => item.cnt)
 
+  // 更新统计卡片
+  totalArticles.value = articleData.categories.reduce((sum: number, item: any) => sum + item.cnt, 0)
+  totalCategories.value = articleData.categories.length
+
+  if (articleData.publishDates.length > 0) {
+    earliestDate.value = articleData.publishDates[0]._id
+  }
+
+  // 分类饼图
+  categoriesChartOption.series.data = articleData.categories.map((item: any) => ({
+    name: item._id,
+    value: item.cnt
+  }))
   const categoriesChartInstance = echarts.init(categoriesChart.value as HTMLElement)
   categoriesChartInstance.setOption(categoriesChartOption)
+  categoriesChartLoading.value = false
+
+  // 发布趋势图
+  publishDatesChartOption.xAxis.data = articleData.publishDates.map((item: any) => item._id)
+  publishDatesChartOption.series.data = articleData.publishDates.map((item: any) => item.cnt)
   const publishDatesChartInstance = echarts.init(publishDatesChart.value as HTMLElement)
   publishDatesChartInstance.setOption(publishDatesChartOption)
-  categoriesChartLoading.value = false
   publishDatesChartLoading.value = false
 
+  // 时间轴词汇统计
   const timelineData = await http.get<{params:{type:string}}, any>('/api/v1/article/statistics', {params: {type: 'timelineWords'}})
-  timelineWordsChartOption.timeline.data = timelineData.timelineWords.map((item: any) => item._id)
-  timelineData.timelineWords.forEach((item: any) => {
-    timelineWordsChartOption.options.push({
-      title: {text: `${item._id}年发布的文章`},
-      xAxis: {data: item.keys.map((keyItem: any) => keyItem.key)},
-      series: {data: item.keys.map((keyItem: any) => keyItem.total)}
-    })
-  })
+
+  if (timelineData.timelineWords.length > 0 && timelineData.timelineWords[0].keys.length > 0) {
+    topKeyword.value = timelineData.timelineWords[0].keys[0].key
+  }
+
+  timelineWordsChartOption.baseOption.timeline.data = timelineData.timelineWords.map((item: any) => item._id)
+  timelineWordsChartOption.options = timelineData.timelineWords.map((item: any) => ({
+    title: {text: `${item._id}年发布的文章 - 高频词汇TOP10`},
+    xAxis: {data: item.keys.map((keyItem: any) => keyItem.key)},
+    series: {data: item.keys.map((keyItem: any) => keyItem.total)}
+  }))
   const timelineWordsChartInstance = echarts.init(timelineWordsChart.value as HTMLElement)
   timelineWordsChartInstance.setOption(timelineWordsChartOption)
   timelineWordsChartLoading.value = false
+
+  // 窗口大小变化时重绘
+  window.addEventListener('resize', () => {
+    categoriesChartInstance.resize()
+    publishDatesChartInstance.resize()
+    timelineWordsChartInstance.resize()
+  })
 })
 </script>
+
 <style lang="less" scoped>
-.echarts-container {
-  display: grid;
-  grid-template-columns: 50% 50%;
-  grid-template-rows: 50% 50%;
+.statistics-page {
+  padding: 20px;
   height: 100%;
-  > .echarts {
-    border: 1px solid #ccc;
-    width: auto;
-    height: auto;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+// 顶部统计卡片
+.stat-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  margin-bottom: 24px;
+}
+
+.stat-card {
+  background: var(--el-bg-color);
+  border-radius: var(--el-border-radius-large);
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  border: 1px solid var(--el-border-color-lighter);
+  transition: transform 0.3s, box-shadow 0.3s;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   }
 }
-.timeline-chart {
-  grid-column-start: 1;
-  grid-column-end: 3;
+
+.stat-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 28px;
+  flex-shrink: 0;
+}
+
+.stat-info {
+  flex: 1;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+  margin-bottom: 4px;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+// 图表区域
+.charts-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: auto auto;
+  gap: 20px;
+}
+
+.chart-card {
+  background: var(--el-bg-color);
+  border-radius: var(--el-border-radius-large);
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  border: 1px solid var(--el-border-color-lighter);
+  display: flex;
+  flex-direction: column;
+
+  &-full {
+    grid-column: span 2;
+  }
+}
+
+.chart-header {
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.chart-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+  margin-bottom: 4px;
+
+  .el-icon {
+    color: var(--el-color-primary);
+    font-size: 18px;
+  }
+}
+
+.chart-subtitle {
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+  padding-left: 26px;
+}
+
+.chart-body {
+  flex: 1;
+  min-height: 320px;
+}
+
+.timeline-chart-body {
+  min-height: 420px;
+}
+
+// 响应式
+@media (max-width: 1200px) {
+  .stat-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .charts-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .chart-card-full {
+    grid-column: span 1;
+  }
+}
+
+@media (max-width: 768px) {
+  .stat-cards {
+    grid-template-columns: 1fr;
+  }
 }
 </style>