From eae736ea5bb108767904949e5a412e8cf7d94c33 Mon Sep 17 00:00:00 2001
From: wyt <1955803161@qq.com>
Date: Wed, 29 Oct 2025 22:09:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=B4=E9=9B=A8=E7=9E=B3=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=BA=86=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Tag/src/TagItem.vue        | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/aurora-vue/aurora-blog/src/components/Tag/src/TagItem.vue b/aurora-vue/aurora-blog/src/components/Tag/src/TagItem.vue
index d984af4..aab1b95 100644
--- a/aurora-vue/aurora-blog/src/components/Tag/src/TagItem.vue
+++ b/aurora-vue/aurora-blog/src/components/Tag/src/TagItem.vue
@@ -1,28 +1,37 @@
 <template>
+  <!-- 标签项容器：使用flex布局，设置悬停效果、间距和过渡动画 -->
   <div class="flex flex-row items-center hover:opacity-50 mr-2 mb-2 cursor-pointer transition-all">
+    <!-- 标签名称链接：跳转到对应标签的文章列表页，携带标签ID和名称参数 -->
     <router-link
-      class="bg-ob-deep-900 text-center px-3 py-1 rounded-tl-md rounded-bl-md text-sm"
-      :to="{ path: '/article-list/' + id, query: { tagName: name } }"
-      :style="stylingTag()">
+        class="bg-ob-deep-900 text-center px-3 py-1 rounded-tl-md rounded-bl-md text-sm"
+        :to="{ path: '/article-list/' + id, query: { tagName: name } }"
+        :style="stylingTag()">
       <em class="opacity-50">#</em>
       {{ name }}
     </router-link>
+    <!-- 标签数量显示：展示该标签下的文章数量，设置右侧圆角 -->
     <span
-      class="bg-ob-deep-900 text-ob-secondary text-center px-2 py-1 rounded-tr-md rounded-br-md text-sm opacity-70"
-      :style="stylingTag()">
+        class="bg-ob-deep-900 text-ob-secondary text-center px-2 py-1 rounded-tr-md rounded-br-md text-sm opacity-70"
+        :style="stylingTag()">
       {{ count }}
     </span>
   </div>
 </template>
 
 <script lang="ts">
+// 导入Vue相关工具：组件定义、响应式属性转换
 import { defineComponent, toRefs } from 'vue'
 
+// 定义标签项组件
 export default defineComponent({
   name: 'ObTagItem',
+  // 组件接收的属性：标签ID、名称、文章数量、尺寸
   props: ['id', 'name', 'count', 'size'],
   setup(props) {
+    // 将props中的size属性转换为响应式引用
     const tagSize = toRefs(props).size
+
+    // 根据标签尺寸设置样式（字体大小和行高）
     const stylingTag = () => {
       if (tagSize.value === 'xs') {
         return {
@@ -54,13 +63,15 @@ export default defineComponent({
           lineHeight: '2rem'
         }
       }
+      // 默认样式
       return {
         fontSize: '1rem',
         lineHeight: '1.5rem'
       }
     }
 
+    // 暴露样式设置方法供模板使用
     return { stylingTag }
   }
 })
-</script>
+</script>
\ No newline at end of file