mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-04-22 03:47:28 +08:00
fix comment link navigation
This commit is contained in:
@@ -50,6 +50,7 @@
|
|||||||
:key="r.id"
|
:key="r.id"
|
||||||
:comment="r"
|
:comment="r"
|
||||||
:level="level + 1"
|
:level="level + 1"
|
||||||
|
:default-show-replies="r.openReplies"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -72,10 +73,14 @@ const CommentItem = {
|
|||||||
level: {
|
level: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0
|
default: 0
|
||||||
|
},
|
||||||
|
defaultShowReplies: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const showReplies = ref(false)
|
const showReplies = ref(props.defaultShowReplies)
|
||||||
const showEditor = ref(false)
|
const showEditor = ref(false)
|
||||||
const isWaitingForReply = ref(false)
|
const isWaitingForReply = ref(false)
|
||||||
const toggleReplies = () => {
|
const toggleReplies = () => {
|
||||||
@@ -114,8 +119,10 @@ const CommentItem = {
|
|||||||
time: new Date(r.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }),
|
time: new Date(r.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }),
|
||||||
avatar: r.avatar,
|
avatar: r.avatar,
|
||||||
text: r.content,
|
text: r.content,
|
||||||
reply: []
|
reply: [],
|
||||||
}))
|
openReplies: false
|
||||||
|
})),
|
||||||
|
openReplies: false
|
||||||
})
|
})
|
||||||
showEditor.value = false
|
showEditor.value = false
|
||||||
toast.success('回复成功')
|
toast.success('回复成功')
|
||||||
|
|||||||
@@ -68,7 +68,14 @@
|
|||||||
<CommentEditor @submit="postComment" :loading="isWaitingPostingComment" />
|
<CommentEditor @submit="postComment" :loading="isWaitingPostingComment" />
|
||||||
|
|
||||||
<div class="comments-container">
|
<div class="comments-container">
|
||||||
<CommentItem v-for="comment in comments" :key="comment.id" :comment="comment" :level="0" ref="postItems" />
|
<CommentItem
|
||||||
|
v-for="comment in comments"
|
||||||
|
:key="comment.id"
|
||||||
|
:comment="comment"
|
||||||
|
:level="0"
|
||||||
|
:default-show-replies="comment.openReplies"
|
||||||
|
ref="postItems"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -125,9 +132,31 @@ export default {
|
|||||||
time: new Date(c.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }),
|
time: new Date(c.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }),
|
||||||
avatar: c.author.avatar,
|
avatar: c.author.avatar,
|
||||||
text: c.content,
|
text: c.content,
|
||||||
reply: (c.replies || []).map(mapComment)
|
reply: (c.replies || []).map(mapComment),
|
||||||
|
openReplies: false
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const findCommentPath = (id, list) => {
|
||||||
|
for (const item of list) {
|
||||||
|
if (item.id === Number(id) || item.id === id) {
|
||||||
|
return [item]
|
||||||
|
}
|
||||||
|
if (item.reply && item.reply.length) {
|
||||||
|
const sub = findCommentPath(id, item.reply)
|
||||||
|
if (sub) return [item, ...sub]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const expandCommentPath = (id) => {
|
||||||
|
const path = findCommentPath(id, comments.value)
|
||||||
|
if (!path) return
|
||||||
|
for (let i = 0; i < path.length - 1; i++) {
|
||||||
|
path[i].openReplies = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const fetchPost = async () => {
|
const fetchPost = async () => {
|
||||||
try {
|
try {
|
||||||
isWaitingFetchingPost.value = true;
|
isWaitingFetchingPost.value = true;
|
||||||
@@ -220,7 +249,10 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
|
const hash = location.hash
|
||||||
|
const id = hash.startsWith('#comment-') ? hash.substring('#comment-'.length) : null
|
||||||
await fetchPost()
|
await fetchPost()
|
||||||
|
if (id) expandCommentPath(id)
|
||||||
updateCurrentIndex()
|
updateCurrentIndex()
|
||||||
await jumpToHashComment()
|
await jumpToHashComment()
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user