From 44ceb8ce2bf8dd188ac1e0d84fa0c78d095f55ae Mon Sep 17 00:00:00 2001
From: Jeffrey Hsu <xfj12@outlook.com>
Date: Wed, 2 Oct 2024 14:57:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8A=A0=E8=BD=BD=E9=AA=A8?=
 =?UTF-8?q?=E6=9E=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/HomeView.vue | 53 ++++++++++++++++++++++++++++++++-----
 1 file changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/views/home/HomeView.vue b/src/views/home/HomeView.vue
index 702b96c..32c4682 100644
--- a/src/views/home/HomeView.vue
+++ b/src/views/home/HomeView.vue
@@ -7,11 +7,38 @@ import NavBar from "@/components/nav/NavBar.vue";
 import IntroCard from "@/components/card/IntroCard.vue";
 
 const recentPosts = ref<IPost[] | null>(null);
+const isLoading = ref(true);
+const isError = ref(false);
+
 const hasPosts = computed(() => (recentPosts.value ?? []).length > 0);
+const postsData = computed(() => {
+  if (!recentPosts.value) return [];
+  if (recentPosts.value.length > 4)
+    return recentPosts.value.slice(0, 4)
+  return recentPosts.value
+})
+
+const reloadPosts = async () => {
+  try {
+    isLoading.value = true
+    const postData = await getBlogRecentPost();
+    recentPosts.value = postData.data.dataSet
+    isLoading.value = false
+  } catch (e) {
+    isLoading.value = false
+    isError.value = true
+  }
+}
 
 onMounted(async () => {
-  const postData = await getBlogRecentPost();
-  recentPosts.value = postData.data.dataSet
+  try {
+    const postData = await getBlogRecentPost();
+    recentPosts.value = postData.data.dataSet
+    isLoading.value = false
+  } catch (e) {
+    isLoading.value = false
+    isError.value = true
+  }
 })
 </script>
 
@@ -36,10 +63,24 @@ onMounted(async () => {
         </a>
       </div>
       <!-- 内容 -->
-      <div :class="{'justify-center': !hasPosts}" class="container flex">
-        <span v-if="!hasPosts" class="text-2xl font-bold">最近没有动态</span>
-        <div v-else class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-          <article-card v-for="item in recentPosts" :key="item.cid" :post="item"/>
+      <div :class="{'justify-center': (!hasPosts || isError)}" class="container flex">
+        <div v-if="isLoading" class="h-56 w-full text-2xl font-bold">
+          <div
+              class="grid w-full grid-cols-1 gap-4 overflow-hidden sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <div v-for="index of 3" :key="index" class="h-56 animate-pulse rounded-2xl bg-gray-200"></div>
+          </div>
+        </div>
+        <div v-else>
+          <div v-if="isError" class="flex flex-col" @click="reloadPosts">
+            <span class="text-8xl mb-4">❌</span>
+            <span class="text-2xl font-bold text-center">载入错误</span>
+          </div>
+          <div v-else>
+            <span v-if="!hasPosts" class="text-2xl font-bold">最近没有动态</span>
+            <div v-else class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              <article-card v-for="item in postsData" :key="item.cid" :post="item"/>
+            </div>
+          </div>
         </div>
       </div>
     </div>