From 6e054f7caeedfc34b14561efdb22c648df431da9 Mon Sep 17 00:00:00 2001
From: Cxx0822 <1556464090@qq.com>
Date: Thu, 18 Dec 2025 23:21:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E5=8D=9A=E5=AE=A2?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../theme/components/StatsChart.vue           | 53 +++++++++++++------
 docs/.vitepress/theme/style/var.css           |  5 ++
 docs/.vitepress/theme/utils/index.ts          | 10 ++++
 3 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/docs/.vitepress/theme/components/StatsChart.vue b/docs/.vitepress/theme/components/StatsChart.vue
index 3370c5d..706ecfc 100644
--- a/docs/.vitepress/theme/components/StatsChart.vue
+++ b/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>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/style/var.css b/docs/.vitepress/theme/style/var.css
index 4bc029a..5f391b6 100644
--- a/docs/.vitepress/theme/style/var.css
+++ b/docs/.vitepress/theme/style/var.css
@@ -31,6 +31,11 @@
     padding: 18px;
 }
 
+.vp-doc h2 {
+    margin: 0;
+    border-top: none;
+}
+
 .medium-zoom-overlay {
   background-color: var(--vp-c-bg) !important;
   z-index: 100;
diff --git a/docs/.vitepress/theme/utils/index.ts b/docs/.vitepress/theme/utils/index.ts
index 3d18fa9..9c7b471 100644
--- a/docs/.vitepress/theme/utils/index.ts
+++ b/docs/.vitepress/theme/utils/index.ts
@@ -54,4 +54,14 @@ export const isMobile = (): boolean => {
     const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
 
     return mobileRegex.test(userAgent);
+}
+
+export const startBlogDate = new Date('2025-11-26');
+
+export const getDaysDifference = (date1: Date, date2: Date): number => {
+  let d1 = new Date(date1);
+  let d2 = new Date(date2);
+  
+  const diffMs = Math.abs(d2.getTime() - d1.getTime());
+  return Math.floor(diffMs / (1000 * 60 * 60 * 24));
 }
\ No newline at end of file