From d0039feaf9f2bf545a40b956a734088c696732b1 Mon Sep 17 00:00:00 2001
From: Jeffrey Hsu <xfj12@outlook.com>
Date: Wed, 18 Dec 2024 08:43:00 +0800
Subject: [PATCH] fixed default picture not display in some times

---
 components/card/ArticleCard.vue         | 15 +++++++--------
 components/card/ArticleDefaultImage.vue | 21 +++++++++++++++++++++
 2 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 components/card/ArticleDefaultImage.vue

diff --git a/components/card/ArticleCard.vue b/components/card/ArticleCard.vue
index d022be8..2e441f9 100644
--- a/components/card/ArticleCard.vue
+++ b/components/card/ArticleCard.vue
@@ -5,13 +5,11 @@ const props = defineProps<{
   post: IPost
 }>()
 
-const thumbUrl = computed(() => {
-  // 如果文章缩略图为空，则从本地随机获取默认缩略图
-  props.post.fields.thumb.value = props.post.fields.thumb.value ? props.post.fields.thumb.value : getAssetURL(
-      `common/${Math.floor(Math.random() * (7 - 1 + 1)) + 1}.jpg`
-  )
-  return props.post.fields.thumb.value
-})
+const pid = useAsyncData('pid', async () => (Math.floor(Math.random() * (7 - 1 + 1)) + 1).toString())
+
+const thumbUrl = computed(() => props.post.fields.thumb.value)
+
+const randomId = computed(() => pid.data.value!)
 
 </script>
 
@@ -21,8 +19,9 @@ const thumbUrl = computed(() => {
        :to="{name: 'article-cid', params: {cid: post.cid}}">
     <!-- 图片 -->
     <div class="container h-full">
-      <img :src="thumbUrl" alt=""
+      <img v-if="thumbUrl" :src="thumbUrl" alt=""
            class="h-full w-full object-cover object-center transition-all duration-300 hover:scale-110">
+      <card-article-default-image :id="randomId"/>
     </div>
     <!-- 文字部分 -->
     <div class="container relative">
diff --git a/components/card/ArticleDefaultImage.vue b/components/card/ArticleDefaultImage.vue
new file mode 100644
index 0000000..53d2670
--- /dev/null
+++ b/components/card/ArticleDefaultImage.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  id: string
+}>()
+</script>
+
+<template>
+  <img src="~/assets/images/common/1.jpg" alt="" v-if="id === '1'"/>
+  <img src="~/assets/images/common/2.jpg" alt="" v-else-if="id === '2'"/>
+  <img src="~/assets/images/common/3.jpg" alt="" v-else-if="id === '3'"/>
+  <img src="~/assets/images/common/4.jpg" alt="" v-else-if="id === '4'"/>
+  <img src="~/assets/images/common/5.jpg" alt="" v-else-if="id === '5'"/>
+  <img src="~/assets/images/common/6.jpg" alt="" v-else-if="id === '6'"/>
+  <img src="~/assets/images/common/7.jpg" alt="" v-else-if="id === '7'"/>
+</template>
+
+<style scoped>
+img {
+  @apply h-full w-full object-cover object-center transition-all duration-300 hover:scale-110
+}
+</style>
\ No newline at end of file