From bc2d6c59bbe1f232dd1ae25ba81b0bcf1bdef8fe Mon Sep 17 00:00:00 2001
From: Kisechan <kisechan_@outlook.com>
Date: Thu, 6 Mar 2025 14:11:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E2=80=9C=E9=98=85=E8=AF=BB?=
 =?UTF-8?q?=E6=9B=B4=E5=A4=9A=E2=80=9D=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20GitHub=20=E6=97=A5=E5=8E=86=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=EF=BC=8C=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=92=8C=E4=BA=A4=E4=BA=92=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index c5bd8e1..a78d84a 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -14,8 +14,7 @@
             <hr />
             <div class="github-calendar-container">
               <h3>My Github Contributions</h3>
-              <div id="github-graph">
-              </div>
+              <div id="github-graph"></div>
             </div>
             <hr />
             <div class="rss-feed-container">
@@ -60,6 +59,14 @@
                 </el-col>
               </el-row>
             </div>
+            <div class="read-more-container">
+              <el-card class="read-more-card" shadow="hover" @click="goToBlog">
+                <div class="read-more-content">
+                  <span>Read More</span>
+                  <i class="fa-brands fa-readme"></i>
+                </div>
+              </el-card>
+            </div>
           </el-card>
         </el-col>
 
@@ -130,11 +137,15 @@ const loadGitHubCalendar = async () => {
   }
 
   const GitHubCalendar = await import("github-calendar");
-  githubCalendarInstance.value = GitHubCalendar.default(calendarElement, "Kisechan", {
-    responsive: true,
-    tooltips: true,
-    global_stats: false,
-  });
+  githubCalendarInstance.value = GitHubCalendar.default(
+    calendarElement,
+    "Kisechan",
+    {
+      responsive: true,
+      tooltips: true,
+      global_stats: false,
+    }
+  );
   isLoaded.value = true;
 };
 
@@ -157,12 +168,12 @@ const fetchRSSFeed = async () => {
     const items = data.querySelectorAll("entry");
 
     feedItems.value = Array.from(items)
-      .map(item => ({
+      .map((item) => ({
         title: item.querySelector("title").textContent,
         link: item.querySelector("link").getAttribute("href"),
         pubDate: item.querySelector("updated").textContent,
-        tags: Array.from(item.querySelectorAll("category")).map(
-          category => category.getAttribute("term")
+        tags: Array.from(item.querySelectorAll("category")).map((category) =>
+          category.getAttribute("term")
         ),
       }))
       .slice(0, 6); // 只取前 6 篇文章
@@ -176,6 +187,10 @@ const formatDate = (dateString) => {
   return date.toLocaleDateString();
 };
 
+const goToBlog = () => {
+  window.open("https://blog.kisechan.space", "_blank");
+};
+
 onMounted(() => {
   loadGitHubCalendar();
   fetchRSSFeed();
@@ -294,4 +309,41 @@ onUnmounted(() => {
 .tag {
   margin-left: 5px;
 }
-</style>
\ No newline at end of file
+
+.read-more-container {
+  display: flex;
+  justify-content: flex-end; /* 靠右排版 */
+  margin-top: 10px; /* 调整上边距 */
+}
+
+.read-more-card {
+  cursor: pointer;
+  width: 150px; /* 调整宽度 */
+  padding: 10px; /* 调整内边距 */
+  text-align: center;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.read-more-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.read-more-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  font-size: 1em; /* 调整字体大小 */
+  color: #409eff;
+}
+
+.read-more-icon {
+  color: #409eff;
+  transition: transform 0.3s ease;
+}
+
+.read-more-card:hover .read-more-icon {
+  transform: translateX(5px);
+}
+</style>