feat: add comment timeline component

open-isle-cli/src/components/CommentItem.vue

@@ -6,11 +6,11 @@
       ...(level > 0 ? { /*borderLeft: '1px solid #e0e0e0', */borderBottom: 'none' } : {})
     }"
   >
-    <div class="user-avatar-container">
+    <div class="user-avatar-container" v-if="showAvatar">
       <div class="user-avatar-item">
         <img class="user-avatar-item-img" :src="comment.avatar" alt="avatar" />
       </div>
-    </div>  
+    </div>
     <div class="info-content">
       <div class="info-content-header">
         <div class="user-name">{{ comment.userName }}</div>
@@ -45,13 +45,7 @@
         {{ comment.reply.length }}条回复
       </div>
       <div v-if="showReplies" class="reply-list">
-        <CommentItem
-          v-for="r in comment.reply"
-          :key="r.id"
-          :comment="r"
-          :level="level + 1"
-          :default-show-replies="r.openReplies"
-        />
+        <CommentTimeline :comments="comment.reply" :level="level + 1" />
       </div>
     </div>
   </div>
@@ -60,6 +54,7 @@
 <script>
 import { ref, watch } from 'vue'
 import CommentEditor from './CommentEditor.vue'
+import CommentTimeline from './CommentTimeline.vue'
 import { renderMarkdown } from '../utils/markdown'
 import { API_BASE_URL, toast } from '../main'
 import { getToken } from '../utils/auth'
@@ -77,6 +72,10 @@ const CommentItem = {
     defaultShowReplies: {
       type: Boolean,
       default: false
+    },
+    showAvatar: {
+      type: Boolean,
+      default: true
     }
   },
   setup(props) {
@@ -150,7 +149,7 @@ const CommentItem = {
     return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown, isWaitingForReply }
   }
 }
-CommentItem.components = { CommentItem, CommentEditor }
+CommentItem.components = { CommentItem, CommentEditor, CommentTimeline }
 export default CommentItem
 </script>