SCHISANDRA/schisandra-cloud-album-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♿ optimize commenting experience

Browse Source
This commit is contained in:
landaiqing
2024-11-29 13:01:31 +08:00
parent 20d519c928
commit 594bd5b280
9 changed files with 94 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/CommentReply/src/CommentList/CommentList.vue
View File

@@ -91,9 +91,7 @@
{{ item.likes }}
</AButton>
</AFlex>
<AButton @click="()=>{
comment.handleShowCommentReply(item.id);
replyListThrottled(item.id)}" type="text" size="small"
<AButton @click="comment.toggleReplyVisibility(topicId,1,5,item.id)" type="text" size="small"
:icon="h(MessageOutlined)"
:disabled="item.reply_count === 0"
v-show="item.reply_count > 0"
@@ -139,7 +137,9 @@
<!-- 回复输入框 -->
<ReplyInput :item="item" v-show="comment.showReplyInput && item.id === comment.showReplyInput"/>
<!-- 子回复列表 -->
<ReplyList :item="item" v-show="comment.showCommentReply && item.id === comment.showCommentReply"/>
<transition name="fade">
<ReplyList :item="item" v-if="comment.replyVisibility[item.id]?.visible"/>
</transition>
</AFlex>
</AFlex>
</div>
@@ -231,27 +231,6 @@ function formatTimeAgo(dateString: string) {
}
/**
* 获取回复列表 throttled
*/
const replyListThrottled = useThrottleFn(getReplyList, 1000);
/**
* 获取回复列表
* @param reply_id
* @param page
* @param size
*/
async function getReplyList(reply_id: number, page: number = 1, size: number = 5) {
const params: any = {
topic_id: topicId.value,
page: page,
size: size,
comment_id: reply_id,
};
await comment.getReplyList(params);
}
const commentLikeThrottled = useThrottleFn(commentLike, 1000);
/**

16
src/components/CommentReply/src/CommentList/index.scss
View File

@@ -40,6 +40,22 @@
.reply-content {
margin-left: 20px;
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 0.3s;
}
.fade-leave-to {
opacity: 0;
}
.fade-leave-active {
transition: opacity 0.3s;
}
.reply-name {
font-size: 14px;
font-weight: 600;

8
src/components/CommentReply/src/ReplyInput/ReplyInput.vue
View File

@@ -204,12 +204,12 @@ async function replySubmit(point: any) {
nickname: user.user.nickname,
avatar: user.user.avatar,
is_liked: false,
reply_username: props.item.nickname,
reply_nickname: props.item.nickname,
};
if (!comment.replyList.comments) {
comment.replyList.comments = []; // 初始化 comments 数组
if (!comment.replyVisibility[props.item.id].data.comments) {
comment.replyVisibility[props.item.id].data.comments = []; // 初始化 comments 数组
}
comment.replyList.comments.unshift(tmpData);
comment.replyVisibility[props.item.id].data.comments.unshift(tmpData);
comment.commentMap[props.item.id].reply_count++;
comment.closeReplyInput();
replyContent.value = "";

18
src/components/CommentReply/src/ReplyList/ReplyList.vue
View File

@@ -1,8 +1,9 @@
<template>
<AFlex :vertical="true" class="reply-item-child">
<ASpin :spinning="comment.replyLoading" size="default">
<AFlex :vertical="true" v-if="comment.replyList.comments">
<AFlex :vertical="false" style="margin-top: 5px" v-for="(child, index) in comment.replyList.comments"
<ASpin :spinning="comment.replyLoading[item.id]" size="default">
<AFlex :vertical="true" v-if="comment.replyVisibility[item.id]?.data.comments">
<AFlex :vertical="false" style="margin-top: 5px"
v-for="(child, index) in comment.replyVisibility[item.id]?.data.comments"
:key="index">
<AFlex :vertical="true">
<Popover trigger="click" :arrow="false" :offset-x="170" :contentStyle="{padding: 0}">
@@ -118,15 +119,16 @@
</AFlex>
</AFlex>
</AFlex>
<APagination v-if="comment.replyList.total > 5" class="reply-pagination-child" size="small"
:total="comment.replyList.total"
:current="comment.replyList.current" :page-size="comment.replyList.size"
:default-page-size="comment.replyList.size"
<APagination v-if="comment.replyVisibility[item.id]?.data.total > 5" class="reply-pagination-child" size="small"
:total="comment.replyVisibility[item.id]?.data.total"
:current="comment.replyVisibility[item.id]?.data.current"
:page-size="comment.replyVisibility[item.id]?.data.size"
:default-page-size="comment.replyVisibility[item.id]?.data.size"
@change="replyListThrottled"
/>
</AFlex>
<AEmpty :description="null" v-show="!comment.replyList.comments"/>
<AEmpty :description="null" v-show="!comment.replyVisibility[item.id]?.data.comments"/>
</ASpin>
</AFlex>
</template>

2
src/components/CommentReply/src/ReplyList/index.scss
View File

@@ -58,7 +58,7 @@
.reply-card-child {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 530px;
width: 525px;
.reply-action-item-child {
margin-top: 10px;

8
src/components/CommentReply/src/ReplyReplyInput/ReplyReply.vue
View File

@@ -207,13 +207,13 @@ async function replyReplySubmit(point: any) {
nickname: user.user.nickname,
avatar: user.user.avatar,
is_liked: false,
reply_username: props.item.nickname,
reply_nickname: props.item.nickname,
reply_to: result.data.reply_to,
};
if (!comment.replyList.comments) {
comment.replyList.comments = []; // 初始化 comments 数组
if (!comment.replyVisibility[props.item.id].data.comments) {
comment.replyVisibility[props.item.id].data.comments = []; // 初始化 comments 数组
}
comment.replyList.comments.unshift(tmpData);
comment.replyVisibility[props.item.id].data.comments.unshift(tmpData);
comment.commentMap[props.item.id].reply_count++;
replyReplyContent.value = "";
await comment.clearFileList();

2
src/components/CommentReply/src/ReplyReplyInput/index.scss
View File

@@ -25,7 +25,7 @@
//margin-left: 10px;
.comment-text-reply-child {
width: 530px;
width: 525px;
}
.comment-actions-reply-child {