mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-05-10 20:57:28 +08:00
Revert "feat: add comment timeline component"
This reverts commit a509099455.
This commit is contained in:
@@ -6,11 +6,11 @@
|
|||||||
...(level > 0 ? { /*borderLeft: '1px solid #e0e0e0', */borderBottom: 'none' } : {})
|
...(level > 0 ? { /*borderLeft: '1px solid #e0e0e0', */borderBottom: 'none' } : {})
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<div class="user-avatar-container" v-if="showAvatar">
|
<div class="user-avatar-container">
|
||||||
<div class="user-avatar-item">
|
<div class="user-avatar-item">
|
||||||
<img class="user-avatar-item-img" :src="comment.avatar" alt="avatar" />
|
<img class="user-avatar-item-img" :src="comment.avatar" alt="avatar" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-content">
|
<div class="info-content">
|
||||||
<div class="info-content-header">
|
<div class="info-content-header">
|
||||||
<div class="user-name">{{ comment.userName }}</div>
|
<div class="user-name">{{ comment.userName }}</div>
|
||||||
@@ -45,7 +45,13 @@
|
|||||||
{{ comment.reply.length }}条回复
|
{{ comment.reply.length }}条回复
|
||||||
</div>
|
</div>
|
||||||
<div v-if="showReplies" class="reply-list">
|
<div v-if="showReplies" class="reply-list">
|
||||||
<CommentTimeline :comments="comment.reply" :level="level + 1" />
|
<CommentItem
|
||||||
|
v-for="r in comment.reply"
|
||||||
|
:key="r.id"
|
||||||
|
:comment="r"
|
||||||
|
:level="level + 1"
|
||||||
|
:default-show-replies="r.openReplies"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -54,7 +60,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import { ref, watch } from 'vue'
|
import { ref, watch } from 'vue'
|
||||||
import CommentEditor from './CommentEditor.vue'
|
import CommentEditor from './CommentEditor.vue'
|
||||||
import CommentTimeline from './CommentTimeline.vue'
|
|
||||||
import { renderMarkdown } from '../utils/markdown'
|
import { renderMarkdown } from '../utils/markdown'
|
||||||
import { API_BASE_URL, toast } from '../main'
|
import { API_BASE_URL, toast } from '../main'
|
||||||
import { getToken } from '../utils/auth'
|
import { getToken } from '../utils/auth'
|
||||||
@@ -72,10 +77,6 @@ const CommentItem = {
|
|||||||
defaultShowReplies: {
|
defaultShowReplies: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
|
||||||
showAvatar: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
@@ -149,7 +150,7 @@ const CommentItem = {
|
|||||||
return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown, isWaitingForReply }
|
return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown, isWaitingForReply }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
CommentItem.components = { CommentItem, CommentEditor, CommentTimeline }
|
CommentItem.components = { CommentItem, CommentEditor }
|
||||||
export default CommentItem
|
export default CommentItem
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,51 +0,0 @@
|
|||||||
<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>
|
|
||||||
Reference in New Issue
Block a user