feat:增加博客统计数据

docs/.vitepress/theme/components/StatsChart.vue

@@ -1,26 +1,31 @@
 <template>
-  <calendar-heatmap
-    v-if="!isMobile()"
-    :values="heatmapData"
-    :end-date="new Date()"
-    no-data-text="暂无记录"
-    tooltip-unit="篇"
-    :round="2"
-    :locale="{
-      less: '少于',
-      more: '多于',
-      months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
-      days: ['日', '一', '二', '三', '四', '五', '六'],
-    }"
-    class="blog-heatmap"
-  />
+  <div v-if="!isMobile()">
+    <calendar-heatmap
+      :values="heatmapData"
+      :end-date="new Date()"
+      no-data-text="暂无记录"
+      tooltip-unit="篇"
+      :round="2"
+      :locale="{
+        less: '少于',
+        more: '多于',
+        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+        days: ['日', '一', '二', '三', '四', '五', '六'],
+      }"
+      class="blog-heatmap"
+    />
+    <div class="heatmap-footer">
+      ⏱️ 已坚持<span class="highlight">{{ getDaysDifference(new Date(), startBlogDate) }}</span> 天 
+      | 📝 已创作<span class="highlight">{{  data.length }}</span> 篇
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { CalendarHeatmap } from 'vue3-calendar-heatmap';
 import 'vue3-calendar-heatmap/dist/style.css';
 import { data } from '../../data/posts.data.js'
-import {isMobile} from "../utils";
+import { isMobile, getDaysDifference, startBlogDate } from "../utils";
 
 const dateCountMap = new Map<string, number>();
 
@@ -58,4 +63,20 @@ const heatmapData = Array.from(dateCountMap.entries()).map(([date, count]) => ({
 .blog-heatmap :deep(.vch__day__label) {
   font-size: 8px !important;
 }
+
+.heatmap-footer {
+  font-size: 15px;
+  color: #666;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+}
+
+.highlight {
+  font-weight: 700;
+  color: #6366f1;
+  margin: 0 2px;
+  font-size: 16px;
+}
 </style>