吴雨瞳添加了注释

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>