Commit 0ddc8e7d by lijiabin

【需求 25171】refactor: 统一问吧和普通帖子的评论回复展示逻辑

问吧的子评论之前会收起成"查看全部N条回复"跳转弹窗,跟帖子的内联展开+分页不一致。
getQuestionComment 实际已经和帖子一样直接返回前5条 children,只是总数字段名不同
(childNum vs childrenNum),所以是纯前端展示差异,统一成和帖子一致的内联展开/分页
即可,不需要改后端。CommentListDialog 因此变成无引用组件,一并删除。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
parent 17cdccfc
......@@ -186,8 +186,6 @@
</div>
</div>
<!-- 回复列表 -->
<!-- 问吧 和 其他 做区分 -->
<template v-if="!isQuestion">
<div v-if="item.children?.length" class="mt-3 ml-4 space-y-3">
<!-- 回复评论的内容 里面可能是 展示全部的 也有可能是展示5条之内容 -->
<div
......@@ -278,20 +276,8 @@
</div>
</div>
</div>
</template>
<!-- 问吧 如果有 子评论 直接变成 查看更多 -->
<template v-else>
<div v-if="item.childNum">
<button
class="cursor-pointer text-sm text-gray-500 mt-2"
@click="handleOpenCommentDialog(item)"
>
查看全部{{ item.childNum }} 条回复>
</button>
</div>
</template>
<!-- 只有大于5 才会显示这个 -->
<div class="ml-4" v-show="item.childrenNum > 5 && !isQuestion">
<div class="ml-4" v-show="item.childrenNum > 5">
<!-- 展示 展开回复 -->
<button
v-show="!item.showChildrenPage"
......@@ -386,7 +372,6 @@
</div>
</div>
</div>
<CommentListDialog ref="commentListDialogRef" :articleId="id" :pid="currentDialogCommentPid" />
</div>
</template>
<script setup lang="ts">
......@@ -396,6 +381,7 @@ import {
addComment,
getCommentChildren,
getSecondCommentList,
getSecondCommentChildren,
topOrCancelTopComment,
deleteComment,
} from '@/api'
......@@ -404,7 +390,6 @@ import { ArticleTypeEnum, BooleanFlag } from '@/constants'
import type { CommentItemDto } from '@/api'
import { useUserStore } from '@/stores'
import { storeToRefs } from 'pinia'
import CommentListDialog from '../CommentListDialog/index.vue'
import { useNavigation } from '@/hooks'
import { parseEmoji } from '@/utils/emoji'
import CommentBox from '../CommentBox/index.vue'
......@@ -456,7 +441,6 @@ const isAuthor = computed(() => {
return authorId === userInfo.value.userId
})
const commentRef = useTemplateRef<HTMLElement | null>('commentRef')
const commentListDialogRef = useTemplateRef<typeof CommentListDialog>('commentListDialogRef')
const replyToOtherBoxRefList = ref<InstanceType<typeof CommentBox>[]>([])
const commentItemRefList = ref<HTMLElement[]>([])
// 回滚到评论框
......@@ -491,6 +475,9 @@ const {
...item,
imgUrlList: getCommentImageList(item.imgUrl),
children: item.children?.map(formatCommentImageList) ?? [],
// 问吧(getQuestionComment)用的是 childNum,帖子(getComment)用的是 childrenNum,
// 这里统一映射成 childrenNum,模板就不用再按 isQuestion 分支判断了
childrenNum: item.childrenNum ?? item.childNum,
}
// if (obj.showChildrenPage == undefined) {
obj.showChildrenPage = false
......@@ -712,7 +699,8 @@ const handleChildrenCurrentChange = (e: number, item: CommentItemDto, index: num
// 根据页数获取子评论列表
const getCommentChildrenList = async (item: CommentItemDto) => {
const { data } = await getCommentChildren({
const fetchChildren = isQuestion ? getSecondCommentChildren : getCommentChildren
const { data } = await fetchChildren({
pid: item.id,
articleId: id,
current: item.childrenPageCurrent,
......@@ -730,12 +718,6 @@ const getCurrentChildrenList = (item: CommentItemDto) => {
}
}
const currentDialogCommentPid = ref(0)
const handleOpenCommentDialog = (item: CommentItemDto) => {
currentDialogCommentPid.value = item.id
commentListDialogRef.value?.open()
}
defineExpose({
scrollToCommentBox: () => handleBackTop(),
search: () => search(),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment