From cb3e39289989ddd32aa4d1106f7f3b2ec2f973ff Mon Sep 17 00:00:00 2001
From: Kisechan <kisechan_@outlook.com>
Date: Wed, 5 Mar 2025 18:37:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=87=92=E5=8A=A0=E8=BD=BD=20GitHub=20?=
 =?UTF-8?q?=E8=B4=A1=E7=8C=AE=E5=9B=BE=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E6=8F=90=E7=A4=BA=EF=BC=8C=E4=BC=98=E5=8C=96=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=92=8C=E5=93=8D=E5=BA=94=E5=BC=8F=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/HomeView.vue | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 101c02b..f615775 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -14,7 +14,9 @@
             <hr />
             <h3>My Github Contributions</h3>
             <div class="github-calendar-container">
-              <div id="github-graph"></div>
+              <div id="github-graph">
+                <p v-if="!isLoaded">Loading...</p>
+              </div>
             </div>
           </el-card>
         </el-col>
@@ -52,18 +54,23 @@
 <script setup>
 import avatarUrl from "@/assets/avatar.png";
 import { onMounted } from "vue";
-import GitHubCalendar from "github-calendar";
+import { ref } from "vue";
 
-// 在组件挂载后初始化 GitHub 贡献图
-onMounted(() => {
-  GitHubCalendar("#github-graph", "Kisechan", {
-    responsive: false, // 响应式设计
+const isLoaded = ref(false);
+// 懒加载
+const loadGitHubCalendar = async () => {
+  const GitHubCalendar = await import("github-calendar");
+  GitHubCalendar.default("#github-graph", "Kisechan", {
+    responsive: true, // 响应式设计
     tooltips: true, // 显示提示信息
-    headers: {
-      Authorization: `token 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`,
-    },
-    global_stats: true, // 显示全局统计信息
+    global_stats: false, // 显示全局统计信息
   });
+  isLoaded.value = true;
+};
+
+// 在组件挂载后懒加载 GitHub 贡献图
+onMounted(() => {
+  loadGitHubCalendar();
 });
 </script>
 
@@ -94,11 +101,12 @@ onMounted(() => {
   color: #303133;
   margin: 0 10px;
   font-size: 24px;
-  transition: color 0.3s ease;
+  transition: color 0.3s ease, transform 0.3s ease;
 }
 
 .social-icons a:hover {
   color: rgb(159.5, 206.5, 255);
+  transform: scale(1.2);
 }
 
 .social-icons {