Skip to content

C
corporateCulture-qd
Commit 5ce1af42 by lijiabin
Options

【需求 20331】 perf: 优化组件

parent 6902c1be
Showing with 232 additions and 223 deletions
src/components/common/Comment/index.vue
......@@ -90,256 +90,265 @@
<!-- 分割线 -->
<!-- 评论列表 -->
<div v-loading="loading" class="divide-y divide-gray-100" v-if="list.length">
<div
v-for="(item, index) in list"
:key="item.id"
:ref="(el) => (commentItemRefList[index] = el as HTMLElement)"
>
<div class="p-4 transition-colors">
<div class="flex gap-3">
<img
@click="jumpToUserHomePage({ userId: item.userId, type })"
:src="item.avatar"
alt=""
class="w-10 h-10 rounded-full object-cover cursor-pointer"
/>
<div class="flex-1">
<div class="flex items-center gap-2 mb-2">
<span class="font-semibold text-gray-800">{{ item.replyUser }}</span>
<!-- <span
<div v-loading="loading" class="divide-y divide-gray-100">
<div v-show="list.length">
<div
v-for="(item, index) in list"
:key="item.id"
:ref="(el) => (commentItemRefList[index] = el as HTMLElement)"
>
<div class="p-4 transition-colors">
<div class="flex gap-3">
<img
@click="jumpToUserHomePage({ userId: item.userId, type })"
:src="item.avatar"
alt=""
class="w-10 h-10 rounded-full object-cover cursor-pointer"
/>
<div class="flex-1">
<div class="flex items-center gap-2 mb-2">
<span class="font-semibold text-gray-800">{{ item.replyUser }}</span>
<!-- <span
class="px-2 py-0.5 text-xs bg-gradient-to-r from-purple-100 to-blue-100 text-purple-600 rounded-full"
>
技术专家
</span> -->
<!-- <span class="px-2 py-0.5 text-xs bg-red-100 text-red-600 rounded-full">置顶</span> -->
</div>
<!-- 换行 -->
<p
class="text-gray-800 my-2 break-all whitespace-pre-wrap"
v-html="parseEmoji(item.content)"
></p>
<!-- 评论图片列表 -->
<div class="flex flex-wrap gap-2">
<div
v-for="(img, imgIndex) in item.imgUrl.split(',').filter(Boolean)"
:key="imgIndex"
class="w-20 h-20 rounded-lg overflow-hidden mb-2 cursor-pointer"
>
<el-image
:src="img"
:preview-teleported="true"
class="w-full h-full object-cover"
:preview-src-list="item.imgUrl.split(',').filter(Boolean)"
:initial-index="imgIndex"
fit="cover"
/>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-6 text-gray-500">
<span class="flex items-center gap-2 text-[14px]">
<span
>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
</span>
<span>·</span>
<span class="text-gray-500">{{ item.region }}</span>
</span>
<div class="flex gap-2 items-center hover:text-blue-500">
<div
class="flex items-center gap-1 cursor-pointer"
@click="handleLickComment(item)"
>
<el-icon :size="16">
<svg-icon :name="item.hasPraise ? 'praise_fill' : 'praise'"></svg-icon>
</el-icon>
<span>{{ item.postPriseCount }}</span>
</div>
</div>
<button
class="cursor-pointer hover:text-blue-500 transition-colors text-[14px]"
@click="handleReply(item, index)"
>
回复
</button>
<!-- <span class="px-2 py-0.5 text-xs bg-red-100 text-red-600 rounded-full">置顶</span> -->
</div>
</div>
<!-- 回复列表 -->
<!-- 问吧 和 其他 做区分 -->
<template v-if="!isQuestion">
<div v-if="item.children?.length" class="mt-3 ml-4 space-y-3">
<!-- 回复评论的内容 里面可能是 展示全部的 也有可能是展示5条之内容 -->
<!-- 换行 -->
<p
class="text-gray-800 my-2 break-all whitespace-pre-wrap"
v-html="parseEmoji(item.content)"
></p>
<!-- 评论图片列表 -->
<div class="flex flex-wrap gap-2">
<div
v-for="child in getCurrentChildrenList(item)"
v-loading="item.loadingChildren"
:key="child.id"
class="flex gap-2 p-3 rounded-lg"
v-for="(img, imgIndex) in item.imgUrl.split(',').filter(Boolean)"
:key="imgIndex"
class="w-20 h-20 rounded-lg overflow-hidden mb-2 cursor-pointer"
>
<img
@click="jumpToUserHomePage({ userId: child.userId, type })"
:src="child.avatar"
alt=""
class="w-8 h-8 rounded-full object-cover cursor-pointer"
<el-image
:src="img"
:preview-teleported="true"
class="w-full h-full object-cover"
:preview-src-list="item.imgUrl.split(',').filter(Boolean)"
:initial-index="imgIndex"
fit="cover"
/>
<div class="flex-1">
<div class="flex items-center gap-1">
<span class="font-semibold text-gray-600 text-base">{{
child.replyUser
}}</span>
<!-- v-if="item.replyName && item.replyName !== parentComment?.replyUser" -->
<span class="text-gray-500 text-sm flex items-center gap-1">
<el-icon class="mx-1"><IEpCaretRight /></el-icon>
{{ child.replyName }}
</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-6 text-gray-500">
<span class="flex items-center gap-2 text-[14px]">
<span
>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
</span>
<span>·</span>
<span class="text-gray-500">{{ item.region }}</span>
</span>
<div class="flex gap-2 items-center hover:text-blue-500">
<div
class="flex items-center gap-1 cursor-pointer"
@click="handleLickComment(item)"
>
<el-icon :size="16">
<svg-icon :name="item.hasPraise ? 'praise_fill' : 'praise'"></svg-icon>
</el-icon>
<span>{{ item.postPriseCount }}</span>
</div>
<p
class="text-gray-800 my-2 break-all whitespace-pre-wrap text-[16px]"
v-html="parseEmoji(child.content)"
></p>
<!-- 评论图片列表 -->
<div class="flex flex-wrap gap-2">
<div
v-for="(img, imgIndex) in child.imgUrl.split(',').filter(Boolean)"
:key="imgIndex"
class="w-20 h-20 rounded-lg overflow-hidden mb-2"
>
<el-image
:src="img"
:preview-teleported="true"
class="w-full h-full object-cover"
:preview-src-list="child.imgUrl.split(',').filter(Boolean)"
:initial-index="imgIndex"
fit="cover"
/>
</div>
<button
class="cursor-pointer hover:text-blue-500 transition-colors text-[14px]"
@click="handleReply(item, index)"
>
回复
</button>
</div>
</div>
<!-- 回复列表 -->
<!-- 问吧 和 其他 做区分 -->
<template v-if="!isQuestion">
<div v-if="item.children?.length" class="mt-3 ml-4 space-y-3">
<!-- 回复评论的内容 里面可能是 展示全部的 也有可能是展示5条之内容 -->
<div
v-for="child in getCurrentChildrenList(item)"
v-loading="item.loadingChildren"
:key="child.id"
class="flex gap-2 p-3 rounded-lg"
>
<img
@click="jumpToUserHomePage({ userId: child.userId, type })"
:src="child.avatar"
alt=""
class="w-8 h-8 rounded-full object-cover cursor-pointer"
/>
<div class="flex-1">
<div class="flex items-center gap-1">
<span class="font-semibold text-gray-600 text-base">{{
child.replyUser
}}</span>
<!-- v-if="item.replyName && item.replyName !== parentComment?.replyUser" -->
<span class="text-gray-500 text-sm flex items-center gap-1">
<el-icon class="mx-1"><IEpCaretRight /></el-icon>
{{ child.replyName }}
</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-6 text-gray-500 text-[14px]">
<span class="flex items-center gap-2">
<span
>{{ dayjs(child.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
<p
class="text-gray-800 my-2 break-all whitespace-pre-wrap text-[16px]"
v-html="parseEmoji(child.content)"
></p>
<!-- 评论图片列表 -->
<div class="flex flex-wrap gap-2">
<div
v-for="(img, imgIndex) in child.imgUrl.split(',').filter(Boolean)"
:key="imgIndex"
class="w-20 h-20 rounded-lg overflow-hidden mb-2"
>
<el-image
:src="img"
:preview-teleported="true"
class="w-full h-full object-cover"
:preview-src-list="child.imgUrl.split(',').filter(Boolean)"
:initial-index="imgIndex"
fit="cover"
/>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-6 text-gray-500 text-[14px]">
<span class="flex items-center gap-2">
<span
>{{
dayjs(child.createTime * 1000).format('YYYY-MM-DD HH:mm:ss')
}}
</span>
<span>·</span>
<span class="text-gray-500">{{ child.region }}</span>
</span>
<span>·</span>
<span class="text-gray-500">{{ child.region }}</span>
</span>
<div class="flex gap-2 items-center hover:text-blue-500">
<div
class="flex items-center gap-1 cursor-pointer"
@click="handleLickComment(child)"
>
<el-icon :size="16">
<svg-icon
:name="child.hasPraise ? 'praise_fill' : 'praise'"
></svg-icon>
</el-icon>
<span>{{ child.postPriseCount }}</span>
<div class="flex gap-2 items-center hover:text-blue-500">
<div
class="flex items-center gap-1 cursor-pointer"
@click="handleLickComment(child)"
>
<el-icon :size="16">
<svg-icon
:name="child.hasPraise ? 'praise_fill' : 'praise'"
></svg-icon>
</el-icon>
<span>{{ child.postPriseCount }}</span>
</div>
</div>
<button
@click="handleReply(child, index)"
class="cursor-pointer hover:text-blue-500 transition-colors"
>
回复
</button>
</div>
<button
@click="handleReply(child, index)"
class="cursor-pointer hover:text-blue-500 transition-colors"
>
回复
</button>
</div>
</div>
</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">
<!-- 展示 展开回复 -->
<button
v-show="!item.showChildrenPage"
class="cursor-pointer text-sm text-gray-500"
@click="handleExpandReply(item)"
>
还有{{ item.childrenNum - 5 }}条回复,<span
class="hover:text-blue-500 transition-colors"
>点击查看</span
>
</button>
<!-- 展示 收起回复 以及分页 -->
<div class="flex items-center gap-2" v-show="item.showChildrenPage">
<span class="text-sm text-gray-500"
>共{{ Math.ceil(item.childrenNum / 10) }}页</span
>
<el-pagination
:pager-count="5"
layout="pager"
v-show="item.showChildrenPage"
:current-page="item.childrenPageCurrent"
:total="item.childrenNum"
@current-change="handleChildrenCurrentChange($event, item, index)"
/>
</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">
<!-- 展示 展开回复 -->
<button
class="cursor-pointer hover:text-blue-500 transition-colors text-sm text-gray-500"
@click="handleCollapseReply(item, index)"
v-show="!item.showChildrenPage"
class="cursor-pointer text-sm text-gray-500"
@click="handleExpandReply(item)"
>
收起回复
还有{{ item.childrenNum - 5 }}条回复,<span
class="hover:text-blue-500 transition-colors"
>点击查看</span
>
</button>
<!-- 展示 收起回复 以及分页 -->
<div class="flex items-center gap-2" v-show="item.showChildrenPage">
<span class="text-sm text-gray-500"
>共{{ Math.ceil(item.childrenNum / 10) }}页</span
>
<el-pagination
:pager-count="5"
layout="pager"
v-show="item.showChildrenPage"
:current-page="item.childrenPageCurrent"
:total="item.childrenNum"
@current-change="handleChildrenCurrentChange($event, item, index)"
/>
<button
class="cursor-pointer hover:text-blue-500 transition-colors text-sm text-gray-500"
@click="handleCollapseReply(item, index)"
>
收起回复
</button>
</div>
</div>
<!-- 展示 回复评论的输入框 -->
<transition name="fadeToComment">
<div v-show="showCommentBox(item)" class="flex gap-3 mt-4">
<img
:src="userAvatar"
alt=""
class="w-10 h-10 rounded-full object-cover cursor-pointer"
@click="jumpToUserHomePage({ userId: userInfo.userId, type })"
/>
<CommentBox
v-model:inputText="commentToOther"
v-model:inputImg="commentToOtherImgStr"
class="flex-1"
:ref="(el) => (replyToOtherBoxRefList[index] = el as HTMLElement)"
>
<template #submit>
<button
class="cursor-pointer disabled:opacity-50 px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-full text-sm hover:shadow-lg transition-all"
:disabled="!commentToOther.trim() || commentToOtherLoading"
@click="handleComment(index)"
>
发表
</button>
</template>
</CommentBox>
</div>
</transition>
</div>
<!-- 展示 回复评论的输入框 -->
<transition name="fadeToComment">
<div v-show="showCommentBox(item)" class="flex gap-3 mt-4">
<img
:src="userAvatar"
alt=""
class="w-10 h-10 rounded-full object-cover cursor-pointer"
@click="jumpToUserHomePage({ userId: userInfo.userId, type })"
/>
<CommentBox
v-model:inputText="commentToOther"
v-model:inputImg="commentToOtherImgStr"
class="flex-1"
:ref="(el) => (replyToOtherBoxRefList[index] = el as HTMLElement)"
>
<template #submit>
<button
class="cursor-pointer disabled:opacity-50 px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-full text-sm hover:shadow-lg transition-all"
:disabled="!commentToOther.trim() || commentToOtherLoading"
@click="handleComment(index)"
>
发表
</button>
</template>
</CommentBox>
</div>
</transition>
</div>
</div>
<div class="px-4">
<el-divider class="my-2!" />
</div>
</div>
<div class="px-4">
<el-divider class="my-2!" />
<!-- 底部分页 -->
<!-- 靠右侧 -->
<div class="flex justify-end">
<div class="w-fit p-4">
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:total="firstComentTotal"
@current-change="handleCurrentChange"
@size-change="changePageSize"
layout="prev, pager, next, slot"
>
<div>共 {{ total }} 条</div>
</el-pagination>
</div>
</div>
</div>
<!-- 底部分页 -->
<!-- 靠右侧 -->
<div class="flex justify-end">
<div class="w-fit p-4">
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:total="firstComentTotal"
@current-change="handleCurrentChange"
@size-change="changePageSize"
layout="prev, pager, next, slot"
>
<div>共 {{ total }} 条</div>
</el-pagination>
<div v-show="!list.length">
<div class="flex items-center justify-center">
<el-empty :image-size="100" description="暂无评论" />
</div>
</div>
</div>
......
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