🎨 updated comment list

src/components/CommentReply/index.scss

@@ -1,7 +1,7 @@
 .comment-main {
     display: flex;
     flex-direction: column;
-    //border: 1px solid #ccc;
+    border: 1px solid #ccc;
     margin-top: 20px;
     width: 700px;
     padding: 50px;

src/components/CommentReply/src/CommentInput/CommentInput.vue

@@ -103,8 +103,6 @@ import {message} from "ant-design-vue";
 import {commentSubmitApi} from "@/api/comment";
 import {useDebounceFn, useThrottleFn} from "@vueuse/core";
 
-import {useRouter} from "vue-router";
-
 const {t} = useI18n();
 
 const showCommentActions = ref<boolean>(false);
@@ -114,7 +112,7 @@ const user = useStore().user;
 const topicId = ref<string>("123");
 const showSubmitCaptcha = ref<boolean>(false);
 const comment = useStore().comment;
-const router = useRouter();
+
 const commentSlideCaptchaEvent = {
   confirm: async (point: any) => {
     await commentSubmitDebounced(point);
@@ -176,31 +174,33 @@ async function commentSubmit(point: any) {
   };
   const result: any = await commentSubmitApi(commentParams);
   if (result.code === 200 && result.success) {
-    message.success(t('comment.commentSuccess'));
+    const tmpData: any = {
+      user_id: user.user.uid,
+      content: result.data.content,
+      images: comment.imageList,
+      nickname: user.user.userInfo.nickname,
+      avatar: user.user.userInfo.avatar,
+      id: result.data.id,
+      created_time: result.data.created_time,
+      browser: result.data.browser,
+      operating_system: result.data.operating_system,
+      reply_count: result.data.reply_count,
+      likes: result.data.likes,
+      author: result.data.author,
+      location: result.data.location,
+      is_liked:false,
+    };
+    comment.commentList.comments.unshift(tmpData);
     commentContent.value = "";
     await comment.clearFileList();
     showSubmitCaptcha.value = false;
-    await getCommentList();
+    message.success(t('comment.commentSuccess'));
   } else {
     await comment.getSlideCaptchaData();
     message.error(result.message || t('comment.commentError'));
   }
 }
 
-/**
- *  获取评论列表
- */
-async function getCommentList(page: number = 1, size: number = 5, hot: boolean = true) {
-  const params = {
-    user_id: user.user.uid,
-    topic_id: topicId.value,
-    page: page,
-    size: size,
-    is_hot: router.currentRoute.value.query.type === "hot" || hot,
-  };
-  await comment.getCommentList(params);
-}
-
 
 const getSlideCaptchaDataThrottled = useThrottleFn(comment.getSlideCaptchaData, 1000);
 

src/components/CommentReply/src/CommentList/CommentList.vue

@@ -27,7 +27,7 @@
             <!-- 评论头像 -->
             <ABadge :offset="[0,0]" :dot="false">
               <template #count v-if="true">
-                <img src="/level_icon/up.svg" style="width: 20px;height: 20px;"  alt="lv2">
+                <img src="/level_icon/up.svg" style="width: 20px;height: 20px;" alt="lv2">
               </template>
               <AFlex :vertical="true" class="reply-avatar" v-if="item.avatar">
                 <AAvatar :size="50" class="reply-avatar-img" shape="circle" :src="item.avatar"/>
@@ -36,7 +36,7 @@
             <!-- 评论内容 -->
             <AFlex :vertical="true" class="reply-content">
               <AFlex :vertical="true">
-                <AFlex :vertical="false" align="flex-start">
+                <AFlex :vertical="false" align="center" justify="flex-start">
                   <span class="reply-name">{{ item.nickname }}</span>
                   <img src="/level_icon/3/lv5.png" class="reply-level-icon" alt="lv1">
                   <img src="/level_icon/4/4.png" class="reply-level-icon" alt="lv2">
@@ -160,8 +160,6 @@ import {useRouter} from "vue-router";
 import ReplyInput from "@/components/CommentReply/src/ReplyInput/ReplyInput.vue";
 import ReplyList from "@/components/CommentReply/src/ReplyList/ReplyList.vue";
 import MessageReport from "@/components/CommentReply/src/MessageReport/MessageReport.vue";
-import {Comment} from "@/types/comment";
-import Badge from "@/components/MyUI/Badge/Badge.vue";
 
 
 const {t} = useI18n();
@@ -181,7 +179,7 @@ async function getCommentList(page: number = 1, size: number = 5, hot: boolean =
     topic_id: topicId.value,
     page: page,
     size: size,
-    is_hot: router.currentRoute.value.query.type === "hot" ? hot : false,
+    is_hot: hot,
   };
   await comment.getCommentList(params);
 }
@@ -195,6 +193,9 @@ function formatTimeAgo(dateString: string) {
   const date: any = new Date(dateString);
   const seconds = Math.floor((now - date) / 1000);
 
+  if (seconds < 60) {
+    return '刚刚';
+  }
   const intervals = [
     {label: '年', seconds: 31536000},
     {label: '个月', seconds: 2592000},
@@ -294,7 +295,6 @@ async function paginationCommentChange(page: number, pageSize: number) {
  *  热门评论
  */
 async function getHotCommentList() {
-  comment.commentList = {} as Comment;
   comment.commentLoading = true;
   getCommentList(1, 5, true).then(() => {
     router.push({
@@ -313,7 +313,6 @@ async function getHotCommentList() {
  *  最新评论
  */
 async function getLatestCommentList() {
-  comment.commentList = {} as Comment;
   comment.commentLoading = true;
   getCommentList(1, 5, false).then(() => {
     router.push({

src/components/CommentReply/src/CommentList/index.scss

@@ -8,7 +8,7 @@
 
 .reply-list {
     margin-top: 10px;
-    border: 1px dashed #e9e9e9;
+    //border: 1px dashed #e9e9e9;
     border-radius: 10px;
     background-color: var(--comment-list-background-color);
     padding: 10px;

src/components/CommentReply/src/ReplyInput/ReplyInput.vue

@@ -189,12 +189,31 @@ async function replySubmit(point: any) {
   };
   const result: any = await replySubmitApi(replyParams);
   if (result.code === 200 && result.success) {
+    const tmpData: any = {
+      id: result.data.id,
+      content: result.data.content,
+      images: comment.imageList,
+      reply_id: result.data.reply_id,
+      user_id: result.data.user_id,
+      author: result.data.author,
+      created_time: result.data.created_time,
+      browser: result.data.browser,
+      operating_system: result.data.operating_system,
+      location: result.data.location,
+      likes: result.data.likes,
+      reply_count: result.data.reply_count,
+      reply_user: result.data.reply_user,
+      nickname: user.user.userInfo.nickname,
+      avatar: user.user.userInfo.avatar,
+      is_liked: false,
+      reply_username: props.item.nickname,
+    };
+    comment.replyList.comments.unshift(tmpData);
+    comment.commentMap[props.item.id].reply_count++;
+    comment.closeReplyInput();
     replyContent.value = "";
     await comment.clearFileList();
     showSubmitCaptcha.value = false;
-    await getReplyList();
-    comment.closeReplyInput();
-    comment.commentMap[props.item.id].reply_count++;
     message.success(t('comment.replySuccess'));
   } else {
     await comment.getSlideCaptchaData();
@@ -202,20 +221,6 @@ async function replySubmit(point: any) {
   }
 }
 
-/**
- *  获取回复列表
- */
-async function getReplyList() {
-  const params: any = {
-    topic_id: topicId.value,
-    page: 1,
-    size: 5,
-    comment_id: props.item.id,
-    user_id: user.user.uid,
-  };
-  await comment.getReplyList(params);
-}
-
 const getSlideCaptchaDataThrottled = useThrottleFn(comment.getSlideCaptchaData, 1000);
 
 /**

src/components/CommentReply/src/ReplyList/ReplyList.vue

@@ -144,7 +144,9 @@ function formatTimeAgo(dateString: string) {
   const now: any = new Date();
   const date: any = new Date(dateString);
   const seconds = Math.floor((now - date) / 1000);
-
+  if (seconds < 60) {
+    return '刚刚';
+  }
   const intervals = [
     {label: '年', seconds: 31536000},
     {label: '个月', seconds: 2592000},

src/components/CommentReply/src/ReplyReplyInput/ReplyReply.vue

@@ -191,13 +191,34 @@ async function replyReplySubmit(point: any) {
   };
   const result: any = await replyReplySubmitApi(replyParams);
   if (result.code === 200 && result.success) {
-
+    const tmpData: any = {
+      id: result.data.id,
+      content: result.data.content,
+      images: comment.imageList,
+      reply_id: result.data.reply_id,
+      user_id: result.data.user_id,
+      author: result.data.author,
+      created_time: result.data.created_time,
+      browser: result.data.browser,
+      operating_system: result.data.operating_system,
+      location: result.data.location,
+      likes: result.data.likes,
+      reply_count: result.data.reply_count,
+      reply_user: result.data.reply_user,
+      nickname: user.user.userInfo.nickname,
+      avatar: user.user.userInfo.avatar,
+      is_liked: false,
+      reply_username: props.item.nickname,
+      reply_to: result.data.reply_to,
+    };
+    comment.replyList.comments.unshift(tmpData);
+    comment.commentMap[props.item.id].reply_count++;
     replyReplyContent.value = "";
     await comment.clearFileList();
     showSubmitCaptcha.value = false;
-    await getReplyList();
+    // await getReplyList();
     comment.closeReplyInput();
-    comment.commentMap[props.item.id].reply_count++;
+
     message.success(t('comment.replySuccess'));
   } else {
     await comment.getSlideCaptchaData();
@@ -225,19 +246,19 @@ async function showSlideCaptcha() {
   }
 }
 
-/**
- *  获取回复列表
- */
-async function getReplyList() {
-  const params: any = {
-    topic_id: topicId.value,
-    page: 1,
-    size: 5,
-    comment_id: props.item.id,
-    user_id: user.user.uid,
-  };
-  await comment.getReplyList(params);
-}
+// /**
+//  *  获取回复列表
+//  */
+// async function getReplyList() {
+//   const params: any = {
+//     topic_id: topicId.value,
+//     page: 1,
+//     size: 5,
+//     comment_id: props.item.id,
+//     user_id: user.user.uid,
+//   };
+//   await comment.getReplyList(params);
+// }
 </script>
 <style scoped lang="scss" src="./index.scss">