feat: comments use timeline

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

@@ -25,6 +25,7 @@ export default {
 .timeline {
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
 .timeline-item {

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">
       <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,23 @@
         {{ comment.reply.length }}条回复
       </div>
       <div v-if="showReplies" class="reply-list">
-        <CommentItem
+        <BaseTimeline :items="comment.reply" >
+          <template #item="{ item }">
+            <CommentItem
+              :key="item.id"
+              :comment="item"
+              :level="level + 1"
+              :default-show-replies="item.openReplies"
+            />
+          </template>
+        </BaseTimeline>
+        <!-- <CommentItem
           v-for="r in comment.reply"
           :key="r.id"
           :comment="r"
           :level="level + 1"
           :default-show-replies="r.openReplies"
-        />
+        /> -->
       </div>
     </div>
   </div>
@@ -61,6 +71,7 @@
 import { ref, watch } from 'vue'
 import CommentEditor from './CommentEditor.vue'
 import { renderMarkdown } from '../utils/markdown'
+import BaseTimeline from './BaseTimeline.vue'
 import { API_BASE_URL, toast } from '../main'
 import { getToken } from '../utils/auth'
 const CommentItem = {
@@ -150,7 +161,7 @@ const CommentItem = {
     return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown, isWaitingForReply }
   }
 }
-CommentItem.components = { CommentItem, CommentEditor }
+CommentItem.components = { CommentItem, CommentEditor, BaseTimeline }
 export default CommentItem
 </script>
 

open-isle-cli/src/views/PostPageView.vue

@@ -68,14 +68,24 @@
       <CommentEditor @submit="postComment" :loading="isWaitingPostingComment" />
 
       <div class="comments-container">
-        <CommentItem
+        <BaseTimeline :items="comments" >
+          <template #item="{ item }">
+            <CommentItem
+              :key="item.id"
+              :comment="item"
+              :level="level + 1"
+              :default-show-replies="item.openReplies"
+            />
+          </template>
+        </BaseTimeline>
+        <!-- <CommentItem
           v-for="comment in comments"
           :key="comment.id"
           :comment="comment"
           :level="0"
           :default-show-replies="comment.openReplies"
           ref="postItems"
-        />
+        /> -->
       </div>
     </div>
 
@@ -100,6 +110,7 @@ import { ref, computed, onMounted, nextTick } from 'vue'
 import { useRoute } from 'vue-router'
 import CommentItem from '../components/CommentItem.vue'
 import CommentEditor from '../components/CommentEditor.vue'
+import BaseTimeline from '../components/BaseTimeline.vue'
 import { renderMarkdown } from '../utils/markdown'
 import { API_BASE_URL, toast } from '../main'
 import { getToken } from '../utils/auth'
@@ -108,7 +119,7 @@ hatch.register()
 
 export default {
   name: 'PostPageView',
-  components: { CommentItem, CommentEditor },
+  components: { CommentItem, CommentEditor, BaseTimeline },
   setup() {
     const route = useRoute()
     const postId = route.params.id
@@ -133,7 +144,8 @@ export default {
       avatar: c.author.avatar,
       text: c.content,
       reply: (c.replies || []).map(mapComment),
-      openReplies: false
+      openReplies: false,
+      src: c.author.avatar,
     })
 
     const findCommentPath = (id, list) => {