feat: get new comment in place

src/store/modules/topic.ts

@@ -293,6 +293,8 @@ export const useKUNGalgameTopicStore = defineStore({
       this.commentDraft.c_uid = 0
       this.commentDraft.to_uid = 0
       this.commentDraft.content = ''
+
+      this.commentDraft.isShowCommentPanelRid = 0
     },
   },
 })

src/views/topic/components/comment/CommentPanel.vue

@@ -4,6 +4,8 @@ import { onMounted, ref } from 'vue'
 import { Icon } from '@iconify/vue'
 import { debounce } from '@/utils/debounce'
 
+import { TopicComment } from '@/api/index'
+
 // 导入用户 store
 import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
 // 导入话题页面 store
@@ -12,6 +14,7 @@ import { storeToRefs } from 'pinia'
 
 const { name, uid } = storeToRefs(useKUNGalgameUserStore())
 
+// 定于父组件 props
 const { tid, rid, to_user } = defineProps<{
   tid: number
   rid: number
@@ -21,6 +24,11 @@ const { tid, rid, to_user } = defineProps<{
   }
 }>()
 
+const emits = defineEmits<{
+  getCommentEmits: [newComment: TopicComment]
+}>()
+
+// 使用评论的 store
 const { commentDraft } = storeToRefs(useKUNGalgameTopicStore())
 
 // 评论的内容
@@ -52,11 +60,13 @@ const handlePublishComment = async () => {
   commentDraft.value.to_uid = to_user.uid
   commentDraft.value.content = commentValue.value
 
-  const r = (await useKUNGalgameTopicStore().postNewComment()).data
-  console.log(r)
+  const newComment = (await useKUNGalgameTopicStore().postNewComment()).data
 
   // 发表完毕还原回复内容
   useKUNGalgameTopicStore().resetCommentDraft()
+
+  // 将新的评论内容给父组件
+  emits('getCommentEmits', newComment)
 }
 
 // 关闭评论面板
@@ -69,8 +79,9 @@ const handleCloseCommentPanel = () => {
   <div class="panel" v-if="commentDraft.isShowCommentPanelRid === rid">
     <div class="top">
       <div class="title">
-        <span>{{ name }}</span
-        >评论 @<span>{{ to_user.name }}</span>
+        <span>{{ name }}</span>
+        评论 @
+        <span>{{ to_user.name }}</span>
       </div>
       <div class="confirm">
         <button @click="handlePublishComment">发布评论</button>

src/views/topic/components/comment/Comments.vue

@@ -27,9 +27,13 @@ const getComments = async (tid: number, rid: number) => {
   return (await useKUNGalgameTopicStore().getComments(tid, rid)).data
 }
 
+// 拿到新发布的评论并 push 到原来的数据里，无需重新获取
+const getCommentEmits = (newComment: TopicComment) => {
+  commentsData.value?.push(newComment)
+}
+
 onMounted(async () => {
   commentsData.value = await getComments(tid, rid)
-  console.log(commentsData.value)
 })
 </script>
 
@@ -37,7 +41,12 @@ onMounted(async () => {
   <!-- 评论容器 -->
   <div class="comment-container">
     <!-- 评论的弹出面板 -->
-    <CommentPanel :tid="tid" :rid="rid" :to_user="toUser" />
+    <CommentPanel
+      @getCommentEmits="getCommentEmits"
+      :tid="tid"
+      :rid="rid"
+      :to_user="toUser"
+    />
 
     <!-- 评论的展示区域 -->
     <div class="container" v-if="commentsData?.length">

src/views/topic/components/reply/Reply.vue

@@ -35,12 +35,12 @@ defineProps<{
 const isCommentPanelOpen = ref(false)
 // 切换面板的状态
 const handleClickComment = (rid: number) => {
+  isCommentPanelOpen.value = !isCommentPanelOpen.value
   if (isCommentPanelOpen.value) {
     commentDraft.value.isShowCommentPanelRid = rid
   } else {
     commentDraft.value.isShowCommentPanelRid = 0
   }
-  isCommentPanelOpen.value = !isCommentPanelOpen.value
 }
 </script>