添加加载骨架

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();
+  try {
-  recentPosts.value = postData.data.dataSet
+    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">
+      <div :class="{'justify-center': (!hasPosts || isError)}" class="container flex">
-        <span v-if="!hasPosts" class="text-2xl font-bold">最近没有动态</span>
+        <div v-if="isLoading" class="h-56 w-full text-2xl font-bold">
-        <div v-else class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          <div
-          <article-card v-for="item in recentPosts" :key="item.cid" :post="item"/>
+              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>