From b8a0e5732474a972fc991f8c409bc31fa23ddea5 Mon Sep 17 00:00:00 2001
From: Mohan <jtkjcmh@126.com>
Date: Fri, 14 Aug 2026 18:27:00 +0800
Subject: [PATCH] feat(component): show stars on article card

---
 src/components/ArticleCard.vue    |  2 +-
 src/components/ArticleMetaBar.vue | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/ArticleCard.vue b/src/components/ArticleCard.vue
index 46af432..c07f48d 100644
--- a/src/components/ArticleCard.vue
+++ b/src/components/ArticleCard.vue
@@ -25,7 +25,7 @@ function coverSrc(): string | undefined {
         <ArticleMetaBar
           mode="card"
           :created-at="article.publishedAt || article.createdAt"
-          :content="article.summary"
+          :star-count="article.starCount"
         />
       </div>
       <div class="article-tags">
diff --git a/src/components/ArticleMetaBar.vue b/src/components/ArticleMetaBar.vue
index 9e9620e..f60d820 100644
--- a/src/components/ArticleMetaBar.vue
+++ b/src/components/ArticleMetaBar.vue
@@ -6,15 +6,17 @@ const props = withDefaults(
   defineProps<{
     createdAt?: string
     viewCount?: number
+    starCount?: number
     content?: string
     mode?: 'card' | 'detail'
   }>(),
-  { createdAt: '', viewCount: 0, content: '', mode: 'card' }
+  { createdAt: '', viewCount: 0, starCount: 0, content: '', mode: 'card' }
 )
 
 const day = computed(() => (props.createdAt ? formatDay(props.createdAt) : ''))
 const duration = computed(() => estimateReadingTime(props.content ?? ''))
 const showView = computed(() => props.mode === 'detail')
+const showDuration = computed(() => props.mode === 'detail')
 </script>
 
 <template>
@@ -35,13 +37,19 @@ const showView = computed(() => props.mode === 'detail')
       </svg>
       <span class="tnum">{{ viewCount }}</span>
     </span>
-    <span v-if="duration" class="meta-item">
+    <span v-if="showDuration" class="meta-item">
       <svg class="meta-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
         <circle cx="8" cy="8" r="6" />
         <path d="M8 5V8L10 9.2" />
       </svg>
       <span>{{ duration }}</span>
     </span>
+    <span v-if="mode === 'card'" class="meta-item">
+      <svg class="meta-icon" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+      </svg>
+      <span class="tnum">{{ starCount }}</span>
+    </span>
   </span>
 </template>