吴雨瞳添加了注释

aurora-vue/aurora-blog/src/components/Comment/src/CommentList.vue

@@ -1,57 +1,77 @@
 <template>
+  <!-- 评论列表过渡组，用于评论项添加淡入淡出动画效果 -->
   <transition-group name="fade">
-    <CommentItem v-for="(comment, index) in comments" :key="comment.id" :comment="comment" :index="index">
+    <!-- 遍历评论列表，渲染每个评论项组件 -->
+    <CommentItem
+        v-for="(comment, index) in comments"
+        :key="comment.id"
+        :comment="comment"
+        :index="index">
     </CommentItem>
   </transition-group>
+  <!-- 加载更多按钮，当有更多评论时显示 -->
   <button
-    class="load-more-button mt-7 w-32 text-white p-2 rounded-lg shadow-lg transition transform hover:scale-105 flex mx-auto"
-    v-if="haveMore">
+      class="load-more-button mt-7 w-32 text-white p-2 rounded-lg shadow-lg transition transform hover:scale-105 flex mx-auto"
+      v-if="haveMore">
+    <!-- 点击按钮触发加载更多评论方法 -->
     <span class="text-center flex-grow" @click="loadMore">Load More</span>
   </button>
 </template>
 
 <script lang="ts">
-// @ts-nocheck
+// @ts-nocheck 忽略TypeScript类型检查
+// 导入Vue相关API
 import { defineComponent, inject } from 'vue'
+// 导入评论项组件
 import CommentItem from './CommentItem.vue'
+// 导入评论状态管理
 import { useCommentStore } from '@/stores/comment'
+// 导入事件总线
 import emitter from '@/utils/mitt'
 
+// 定义评论列表组件
 export default defineComponent({
   components: {
-    CommentItem
+    CommentItem // 注册评论项子组件
   },
   setup() {
+    // 获取评论状态管理实例
     const commentStore = useCommentStore()
+
+    // 加载更多评论方法
     const loadMore = async () => {
+      // 根据评论类型（对应不同页面）触发不同的加载更多事件
       switch (commentStore.type) {
         case 1:
-          emitter.emit('articleLoadMore')
+          emitter.emit('articleLoadMore') // 文章评论加载更多
           break
         case 2:
-          emitter.emit('messageLoadMore')
+          emitter.emit('messageLoadMore') // 留言板评论加载更多
           break
         case 3:
-          emitter.emit('aboutLoadMore')
+          emitter.emit('aboutLoadMore') // 关于页评论加载更多
           break
         case 4:
-          emitter.emit('friendLinkLoadMore')
+          emitter.emit('friendLinkLoadMore') // 友链页评论加载更多
           break
         case 5:
-          emitter.emit('talkLoadMore')
+          emitter.emit('talkLoadMore') // 说说评论加载更多
       }
     }
+
     return {
-      comments: inject('comments'),
-      haveMore: inject('haveMore'),
-      loadMore
+      comments: inject('comments'), // 注入评论列表数据
+      haveMore: inject('haveMore'), // 注入是否有更多评论的状态
+      loadMore // 加载更多方法
     }
   }
 })
 </script>
+
 <style lang="scss" scoped>
+// 加载更多按钮样式
 .load-more-button {
   outline: none;
-  background: var(--main-gradient);
+  background: var(--main-gradient); // 使用主题渐变背景
 }
-</style>
+</style>