Merge pull request #101 from nagisa77/codex/modify-multi-level-comment-component

Add comment timeline component with avatars

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
+        <CommentTimeline :comments="comment.reply" :level="level + 1" />
-          v-for="r in comment.reply"
-          :key="r.id"
-          :comment="r"
-          :level="level + 1"
-          :default-show-replies="r.openReplies"
-        />
       </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>
 

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

@@ -0,0 +1,51 @@
+<template>
+  <BaseTimeline :items="timelineItems">
+    <template #item="{ item }">
+      <div class="comment-timeline-item">
+        <CommentItem
+          :comment="item"
+          :level="level"
+          :default-show-replies="item.openReplies"
+          :show-avatar="false"
+        />
+        <div v-if="item.reply && item.reply.length" class="reply-list">
+          <CommentTimeline :comments="item.reply" :level="level + 1" />
+        </div>
+      </div>
+    </template>
+  </BaseTimeline>
+</template>
+
+<script>
+import BaseTimeline from './BaseTimeline.vue'
+import CommentItem from './CommentItem.vue'
+
+export default {
+  name: 'CommentTimeline',
+  components: { BaseTimeline, CommentItem },
+  props: {
+    comments: {
+      type: Array,
+      default: () => []
+    },
+    level: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    timelineItems () {
+      return this.comments.map(c => Object.assign({ src: c.avatar }, c))
+    }
+  }
+}
+</script>
+
+<style scoped>
+.comment-timeline-item {
+  width: 100%;
+}
+.reply-list {
+  margin-left: 30px;
+}
+</style>