From 66cee606fd04750a8341f4d0af0455d28c70d1dc Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Tue, 8 Jul 2025 16:31:12 +0800
Subject: [PATCH] feat: add reusable ArticleTags component

---
 open-isle-cli/src/components/ArticleTags.vue | 28 ++++++++++++++++++++
 open-isle-cli/src/views/HomePageView.vue     | 11 +++-----
 open-isle-cli/src/views/PostPageView.vue     | 10 +++----
 3 files changed, 35 insertions(+), 14 deletions(-)
 create mode 100644 open-isle-cli/src/components/ArticleTags.vue

diff --git a/open-isle-cli/src/components/ArticleTags.vue b/open-isle-cli/src/components/ArticleTags.vue
new file mode 100644
index 000000000..a6b49aae5
--- /dev/null
+++ b/open-isle-cli/src/components/ArticleTags.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="article-tags-container">
+    <div
+      class="article-info-item"
+      v-for="tag in tags"
+      :key="tag.id || tag.name"
+    >
+      <img
+        v-if="tag.smallIcon"
+        class="article-info-item-img"
+        :src="tag.smallIcon"
+        :alt="tag.name"
+      />
+      <div class="article-info-item-text">{{ tag.name }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ArticleTags',
+  props: {
+    tags: { type: Array, default: () => [] }
+  }
+}
+</script>
+
+<!-- 此组件不包含样式，使用方可根据需要自行定义 -->
diff --git a/open-isle-cli/src/views/HomePageView.vue b/open-isle-cli/src/views/HomePageView.vue
index 63ff84c30..2962b50db 100644
--- a/open-isle-cli/src/views/HomePageView.vue
+++ b/open-isle-cli/src/views/HomePageView.vue
@@ -61,12 +61,7 @@
               <div class="article-info-item-text">{{ article.category.name }}</div>
             </div>
 
-            <div class="article-tags-container">
-              <div class="article-info-item" v-for="tag in article.tags" :key="tag">
-                <img class="article-info-item-img" :src="tag.smallIcon" alt="tag">
-                <div class="article-info-item-text">{{ tag.name }}</div>
-              </div>
-            </div>
+            <ArticleTags :tags="article.tags" />
           </div>
         </div>
 
@@ -96,6 +91,7 @@ import { stripMarkdown } from '../utils/markdown'
 import { API_BASE_URL } from '../main'
 import CategorySelect from '../components/CategorySelect.vue'
 import TagSelect from '../components/TagSelect.vue'
+import ArticleTags from '../components/ArticleTags.vue'
 import { hatch } from 'ldrs'
 hatch.register()
 
@@ -104,7 +100,8 @@ export default {
   name: 'HomePageView',
   components: {
     CategorySelect,
-    TagSelect
+    TagSelect,
+    ArticleTags
   },
   data() {
     return {
diff --git a/open-isle-cli/src/views/PostPageView.vue b/open-isle-cli/src/views/PostPageView.vue
index bdefbf1e8..f56e432c5 100644
--- a/open-isle-cli/src/views/PostPageView.vue
+++ b/open-isle-cli/src/views/PostPageView.vue
@@ -12,12 +12,7 @@
             <div class="article-info-item-text">{{ category.name }}</div>
           </div>
 
-          <div class="article-tags-container">
-            <div class="article-info-item" v-for="tag in tags" :key="tag">
-              <img class="article-info-item-img" :src="tag.smallIcon" alt="tag">
-              <div class="article-info-item-text">{{ tag.name }}</div>
-            </div>
-          </div>
+          <ArticleTags :tags="tags" />
         </div>
       </div>
 
@@ -106,6 +101,7 @@ import { useRoute } from 'vue-router'
 import CommentItem from '../components/CommentItem.vue'
 import CommentEditor from '../components/CommentEditor.vue'
 import BaseTimeline from '../components/BaseTimeline.vue'
+import ArticleTags from '../components/ArticleTags.vue'
 import { renderMarkdown } from '../utils/markdown'
 import { API_BASE_URL, toast } from '../main'
 import { getToken } from '../utils/auth'
@@ -114,7 +110,7 @@ hatch.register()
 
 export default {
   name: 'PostPageView',
-  components: { CommentItem, CommentEditor, BaseTimeline },
+  components: { CommentItem, CommentEditor, BaseTimeline, ArticleTags },
   setup() {
     const route = useRoute()
     const postId = route.params.id