吴雨瞳添加了注释

aurora-vue/aurora-blog/src/components/Sidebar/src/TagBox.vue

@@ -1,9 +1,22 @@
 <template>
+  <!-- 侧边栏标签盒子组件容器，应用sidebar-box样式 -->
   <div class="sidebar-box">
+    <!-- 子标题组件：显示标题为国际化的"标签列表"，图标为标签图标 -->
     <SubTitle :title="'titles.tag_list'" icon="tag" />
+    <!-- 标签列表容器组件 -->
     <TagList>
+      <!-- 当标签数据存在且不为空时渲染标签列表 -->
       <template v-if="tags != '' && tags.length > 0">
-        <TagItem v-for="tag in tags" :key="tag.id" :id="tag.id" :name="tag.tagName" :count="tag.count" size="xs" />
+        <!-- 遍历标签数据，渲染每个标签项 -->
+        <TagItem
+            v-for="tag in tags"
+            :key="tag.id"
+            :id="tag.id"
+            :name="tag.tagName"
+            :count="tag.count"
+            size="xs"
+        />
+        <!-- 查看更多标签链接：跳转到标签列表页 -->
         <div class="flex flex-row items-center hover:opacity-50 mr-2 mb-2 cursor-pointer transition-all">
           <span class="text-center px-3 py-1 rounded-md text-sm">
             <b class="border-b-2 border-ob hover:text-ob">
@@ -17,29 +30,47 @@
 </template>
 
 <script lang="ts">
+// 导入Vue相关工具：组件定义、生命周期钩子、响应式引用转换
 import { defineComponent, onMounted, toRef } from 'vue'
+// 导入子标题组件
 import { SubTitle } from '@/components/Title'
+// 导入标签状态存储
 import { useTagStore } from '@/stores/tag'
+// 导入标签列表和标签项组件
 import { TagList, TagItem } from '@/components/Tag'
+// 导入国际化工具
 import { useI18n } from 'vue-i18n'
+// 导入API请求工具
 import api from '@/api/api'
 
+// 定义标签盒子组件
 export default defineComponent({
   name: 'ObTag',
+  // 注册子组件
   components: { SubTitle, TagList, TagItem },
   setup() {
+    // 获取标签状态实例
     const tagStore = useTagStore()
+    // 获取国际化翻译函数
     const { t } = useI18n()
+
+    // 组件挂载时获取前10个标签数据
     onMounted(() => {
       fetchTopTenTags()
     })
+
+    // 获取前10个标签的函数：调用API获取数据并存储到标签状态中
     const fetchTopTenTags = () => {
       api.getTopTenTags().then(({ data }) => {
         tagStore.homeTags = data.data
       })
     }
+
+    // 暴露数据和方法供模板使用
     return {
+      // 从状态管理中获取首页标签数据（响应式）
       tags: toRef(tagStore.$state, 'homeTags'),
+      // 国际化翻译函数
       t
     }
   }
@@ -47,7 +78,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+// 侧边栏盒子内的骨架屏列表项样式：设置右外边距和下外边距
 .sidebar-box li.ob-skeleton {
   @apply mr-2 mb-2;
 }
-</style>
+</style>