Merge pull request #115 from nagisa77/codex/create-generic-article-tags-container-component

Make ArticleTags reusable

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>
+
+<!-- 此组件不包含样式，使用方可根据需要自行定义 -->

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">
+            <ArticleTags :tags="article.tags" />
-              <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>
           </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 {

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">
+          <ArticleTags :tags="tags" />
-            <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>
         </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