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

13
src/App.vue
View File

@@ -19,5 +19,16 @@ const app = useStore().theme;
const lang = useStore().lang;
</script>
<style scoped lang="scss">
.animation-enter {
opacity: 0; /* 初始透明 */
}
.animation-enter-active {
transition: opacity 0.2s; /* 渐入效果 */
}
.animation-leave-active {
transition: opacity 0.2s; /* 渐出效果 */
}
.animation-leave-to {
opacity: 0; /* 离开时透明 */
}
</style>

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 {

68
src/store/modules/commentStore.ts
View File

@@ -14,10 +14,10 @@ export const useCommentStore = defineStore(
() => {
const commentList = ref<Comment>({} as Comment);
const commentLoading = ref<boolean>(true);
const replyLoading = ref<boolean>(true);
const replyLoading = reactive<{ [key: number]: boolean }>({});
const showReplyInput = ref<number | null>(null);
const showCommentReply = ref<number | null>(null);
const replyList = ref<Comment>({} as Comment);
const replyVisibility = ref<{ [key: number]: { visible: boolean; data: Comment } }>({});
const commentMap = reactive<any>({});
const slideCaptchaData = reactive({
captKey: "",
@@ -54,16 +54,14 @@ export const useCommentStore = defineStore(
const result: any = await commentListApi(data);
if (result.code === 200 && result.data) {
commentList.value = result.data;
commentLoading.value = false;
if (Array.isArray(commentList.value.comments)) {
commentList.value.comments.map((item: any) => {
commentMap[item.id] = item;
replyLoading[item.id] = false;
});
}
} else {
commentLoading.value = false;
}
commentLoading.value = false;
}
/**
@@ -78,34 +76,52 @@ export const useCommentStore = defineStore(
const closeReplyInput = () => {
showReplyInput.value = null;
};
/**
* 是否显示回复
* 切换回复可见性
* @param topic_id
* @param page
* @param size
* @param commentId
*/
const handleShowCommentReply = (index: any) => {
showCommentReply.value = showCommentReply.value === index ? null : index;
};
async function toggleReplyVisibility(topic_id: string, page: number, size: number, commentId: number) {
replyLoading[commentId] = true;
const params: any = {
topic_id: topic_id,
page: page,
size: size,
comment_id: commentId,
};
if (!replyVisibility.value[commentId]) {
// 如果不存在这个评论的状态，初始化
replyVisibility.value[commentId] = {visible: false, data: {} as Comment};
await getReplyList(params);
} else {
// 切换可见性
replyVisibility.value[commentId].visible = !replyVisibility.value[commentId].visible;
// 在展开时检查数据是否需要更新
if (replyVisibility.value[commentId].visible) {
await getReplyList(params); // 重新获取最新的子评论
}
}
replyLoading[commentId] = false;
}
/**
* 获取回复列表
* @param data
*/
async function getReplyList(data: any) {
const params: any = {
topic_id: data.topic_id,
page: data.page,
size: data.size,
comment_id: data.comment_id,
};
replyLoading.value = true;
replyList.value = {} as Comment;
// 获取评论列表
const result: any = await replyListApi(params);
const result: any = await replyListApi(data);
if (result.code === 200 && result.data) {
replyList.value = result.data;
replyLoading.value = false;
} else {
replyLoading.value = false;
if (replyVisibility.value[data.comment_id].data !== result.data) {
replyVisibility.value[data.comment_id].data = result.data;
}
replyVisibility.value[data.comment_id].visible = true;
}
replyLoading[data.comment_id] = false;
}
/**
@@ -278,7 +294,7 @@ export const useCommentStore = defineStore(
commentLoading,
showReplyInput,
showCommentReply,
replyList,
replyVisibility,
replyLoading,
slideCaptchaData,
commentMap,
@@ -293,7 +309,7 @@ export const useCommentStore = defineStore(
getCommentList,
handleShowReplyInput,
closeReplyInput,
handleShowCommentReply,
toggleReplyVisibility,
getReplyList,
commentLike,
cancelCommentLike,
@@ -312,7 +328,7 @@ export const useCommentStore = defineStore(
persist: {
key: 'comment',
storage: localStorage,
pick: ["emojiList", "commentList", "replyList", "commentMap"],
pick: ["emojiList", "commentList", "replyVisibility", "commentMap"],
}
}
);