BUG fix: PublishComment

src/store/modules/topic.ts

@@ -102,16 +102,6 @@ export const useKUNGalgameTopicStore = defineStore({
 
       isReplyRewriting: false,
     },
-
-    commentDraft: {
-      tid: 0,
-      rid: 0,
-      c_uid: 0,
-      to_uid: 0,
-      content: '',
-
-      isShowCommentPanelRid: 0,
-    },
   }),
   actions: {
     // 左侧相同标签下的其它话题
@@ -265,12 +255,17 @@ export const useKUNGalgameTopicStore = defineStore({
     },
 
     // 创建一个评论
-    async postNewComment(): Promise<TopicCreateCommentResponseData> {
+    async postNewComment(
+      tid: number,
+      rid: number,
+      toUid: number,
+      content: string
+    ): Promise<TopicCreateCommentResponseData> {
       const requestData: TopicCreateCommentRequestData = {
-        tid: this.commentDraft.tid,
-        rid: this.commentDraft.rid,
-        to_uid: this.commentDraft.to_uid,
-        content: this.commentDraft.content,
+        tid: tid,
+        rid: rid,
+        to_uid: toUid,
+        content: content,
       }
       return await postCommentByPidAndRidApi(requestData)
     },
@@ -291,16 +286,6 @@ export const useKUNGalgameTopicStore = defineStore({
       this.replyRequest.page = 1
       this.isLoading = true
     },
-    // 设置评论草稿为原始值，用于评论发布按钮
-    resetCommentDraft() {
-      this.commentDraft.tid = 0
-      this.commentDraft.rid = 0
-      this.commentDraft.c_uid = 0
-      this.commentDraft.to_uid = 0
-      this.commentDraft.content = ''
-
-      this.commentDraft.isShowCommentPanelRid = 0
-    },
     // 重置重新编辑回复数据，用于重新编辑回复
     resetRewriteTopicData() {
       this.replyDraft.textCount = 0

src/store/temp/comment.ts

@@ -0,0 +1,20 @@
+// 评论的临时数据，用于组件间传输
+import { defineStore } from 'pinia'
+
+export const useTempCommentStore = defineStore({
+  id: 'tempComment',
+  // 不持久
+  persist: false,
+  state: () => ({
+    tid: 0,
+    rid: 0,
+    toUid: 0,
+    toUsername: '',
+    content: '',
+
+    // 要展示哪个回复底下的评论面板
+    isShowCommentPanelRid: 0,
+  }),
+  getters: {},
+  actions: {},
+})

src/store/types/topic.d.ts

@@ -36,19 +36,6 @@ interface ReplyRequest {
   sortOrder: 'asc' | 'desc'
 }
 
-// 评论的缓存
-interface CommentDraft {
-  // 评论的内容
-  tid: number
-  rid: number
-  c_uid: number
-  to_uid: number
-  content: string
-
-  // 显示哪个评论的评论面板
-  isShowCommentPanelRid: number
-}
-
 // 更新评论的缓存
 interface ReplyRewrite {
   tid: number
@@ -83,7 +70,4 @@ export interface TopicStore {
   replyRequest: ReplyRequest
   // 更新评论的缓存
   replyRewrite: ReplyRewrite
-
-  // 评论的缓存
-  commentDraft: CommentDraft
 }

src/utils/toggle.ts

@@ -0,0 +1,18 @@
+import { ref } from 'vue'
+
+const toggleStatus = (initState: boolean, delay: number) => {
+  const on = ref(initState ?? false)
+
+  const toggle = (value: boolean) => {
+    setTimeout(() => {
+      on.value = value ?? !on.value
+    }, delay)
+  }
+
+  return {
+    on,
+    toggle,
+  }
+}
+
+export default toggleStatus

src/views/topic/KUNGalgameTopicPage.vue

@@ -32,6 +32,8 @@ import { useKUNGalgameTopicStore } from '@/store/modules/topic'
 import { useTempReplyStore } from '@/store/temp/reply'
 // 回复重新编辑响应的临时数据
 import { useTempReplyRewriteStore } from '@/store/temp/replyRewrite'
+// 使用不持久的评论 store
+import { useTempCommentStore } from '@/store/temp/comment'
 import { storeToRefs } from 'pinia'
 
 // 当前的路由
@@ -42,7 +44,6 @@ const {
   isShowAdvance,
   isEdit,
   replyRequest,
-  commentDraft,
   isScrollToTop,
   isLoading,
   scrollToReplyId,
@@ -51,6 +52,7 @@ const { tempReply } = storeToRefs(useTempReplyStore())
 const { rid, replyContent, tags, edited } = storeToRefs(
   useTempReplyRewriteStore()
 )
+const { isShowCommentPanelRid } = storeToRefs(useTempCommentStore())
 
 const tid = computed(() => {
   return Number(route.params.tid)
@@ -227,7 +229,7 @@ const topicPageWidth = computed(() => {
 
 // 在页面跳转和刷新时关闭回复面板和评论面板
 const resetPanelStatus = () => {
-  commentDraft.value.isShowCommentPanelRid = 0
+  isShowCommentPanelRid.value = 0
   isShowAdvance.value = false
   isEdit.value = false
   // 重置重新编辑回复的数据

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 // 全局消息组件（顶部）
 import message from '@/components/alert/Message'
 import { debounce } from '@/utils/debounce'
@@ -10,28 +10,20 @@ import { TopicComment } from '@/api/index'
 import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
 // 导入话题页面 store
 import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+// 使用不持久的评论 store
+import { useTempCommentStore } from '@/store/temp/comment'
 import { storeToRefs } from 'pinia'
 
-const { name, uid } = storeToRefs(useKUNGalgameUserStore())
+const { name } = storeToRefs(useKUNGalgameUserStore())
 
-// 定于父组件 props
-const props = defineProps<{
-  tid: number
-  rid: number
-  to_user: {
-    uid: number
-    name: string
-  }
-}>()
+const { tid, rid, toUid, toUsername, content, isShowCommentPanelRid } =
+  storeToRefs(useTempCommentStore())
 
 // 定义父组件 emits
 const emits = defineEmits<{
   getCommentEmits: [newComment: TopicComment]
 }>()
 
-// 使用评论的 store
-const { commentDraft } = storeToRefs(useKUNGalgameTopicStore())
-
 // 评论的内容
 const commentValue = ref('')
 
@@ -39,32 +31,23 @@ const commentValue = ref('')
 const handleInputComment = () => {
   // 创建一个防抖处理函数
   const debouncedUpdateContent = debounce(() => {
-    commentDraft.value.content = commentValue.value
+    content.value = commentValue.value
   }, 1007)
 
   // 调用防抖处理函数，会在延迟时间内只执行一次更新操作
   debouncedUpdateContent()
 }
 
-// 保存评论信息
-const saveComment = () => {
-  commentDraft.value.tid = props.tid
-  commentDraft.value.rid = props.rid
-  commentDraft.value.c_uid = uid.value
-  commentDraft.value.to_uid = props.to_user.uid
-  commentDraft.value.content = commentValue.value
-}
-
 // 检查评论是否合法
 const isValidComment = () => {
   // 评论内容为空警告
-  if (!commentDraft.value.content.trim()) {
+  if (!content.value.trim()) {
     message('Comment content cannot be empty!', '评论内容不能为空！', 'warn')
     return false
   }
 
   // 评论内容超出限制警告
-  if (commentDraft.value.content.trim().length > 1007) {
+  if (content.value.trim().length > 1007) {
     message(
       'The maximum length for comments should not exceed 1007 characters.',
       '评论最大长度不可超过1007个字符',
@@ -76,45 +59,44 @@ const isValidComment = () => {
   return true
 }
 
-// 挂载时初始化评论信息
-onMounted(() => {
-  // 首先重置评论内容
-  useKUNGalgameTopicStore().resetCommentDraft()
-})
-
 // 发布评论
 const handlePublishComment = async () => {
-  // 保存当前的回复内容
-  saveComment()
-
   if (isValidComment()) {
     // 获取新评论
-    const newComment = (await useKUNGalgameTopicStore().postNewComment()).data
-
-    // 发表完毕还原回复内容
-    useKUNGalgameTopicStore().resetCommentDraft()
+    const newComment = (
+      await useKUNGalgameTopicStore().postNewComment(
+        tid.value,
+        rid.value,
+        toUid.value,
+        content.value
+      )
+    ).data
 
     // 将新的评论内容给父组件
     emits('getCommentEmits', newComment)
 
     // 提醒用户
     message('Comment publish successfully!', '评论发布成功', 'success')
+
+    handleCloseCommentPanel()
+  } else {
+    message('Comment publish failed!', '评论发布失败', 'success')
   }
 }
 
 // 关闭评论面板
 const handleCloseCommentPanel = () => {
-  commentDraft.value.isShowCommentPanelRid = 0
+  isShowCommentPanelRid.value = 0
 }
 </script>
 
 <template>
-  <div class="panel" v-if="commentDraft.isShowCommentPanelRid === rid">
+  <div class="panel">
     <div class="top">
       <div class="title">
         <span>{{ name }}</span>
         <span>{{ $tm('topic.content.comment') }}</span>
-        <span>{{ to_user.name }}</span>
+        <span>{{ toUsername }}</span>
       </div>
       <div class="confirm">
         <button @click="handlePublishComment">

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

@@ -2,7 +2,7 @@
   这是回复话题下方的评论区，包含了所有的评论，是一个单独的组件，它的子组件是单个评论
  -->
 <script setup lang="ts">
-import { defineAsyncComponent, onMounted, reactive, ref, toRaw } from 'vue'
+import { defineAsyncComponent, onMounted, reactive, ref, watch } from 'vue'
 import { Icon } from '@iconify/vue'
 const CommentPanel = defineAsyncComponent(() => import('./CommentPanel.vue'))
 
@@ -10,8 +10,14 @@ import { TopicComment } from '@/api/index'
 
 // 导入话题页面 store
 import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+
+// 使用不持久的评论 store
+import { useTempCommentStore } from '@/store/temp/comment'
 import { storeToRefs } from 'pinia'
-const { commentDraft } = storeToRefs(useKUNGalgameTopicStore())
+
+const { tid, rid, toUid, toUsername, isShowCommentPanelRid } = storeToRefs(
+  useTempCommentStore()
+)
 
 const props = defineProps<{
   tid: number
@@ -22,16 +28,25 @@ const props = defineProps<{
   }
 }>()
 
-// 评论的数据
-const commentsData = ref<TopicComment[]>()
-// 评论给谁
-const toUserInfo = reactive({
-  uid: 0,
-  name: '',
-})
+const tidRef = ref(props.tid)
+const ridRef = ref(props.rid)
+const toUser = ref(props.toUser)
 
-const getComments = async (tid: number, rid: number) => {
-  return (await useKUNGalgameTopicStore().getComments(tid, rid)).data
+// 响应式
+watch(
+  () => props.rid,
+  async () => {
+    ridRef.value = props.rid
+    toUser.value = props.toUser
+    commentsData.value = await getComments(tidRef.value, ridRef.value)
+  }
+)
+
+// 评论的数据
+const commentsData = ref<TopicComment[]>([])
+
+const getComments = async (topicId: number, replyId: number) => {
+  return (await useKUNGalgameTopicStore().getComments(topicId, replyId)).data
 }
 
 // 拿到新发布的评论并 push 到原来的数据里，无需重新获取
@@ -40,21 +55,22 @@ const getCommentEmits = (newComment: TopicComment) => {
 }
 
 onMounted(async () => {
-  // 将用户信息给回复面板
-  toUserInfo.name = props.toUser.name
-  toUserInfo.uid = props.toUser.uid
-
-  commentsData.value = await getComments(props.tid, props.rid)
+  commentsData.value = await getComments(tidRef.value, ridRef.value)
 })
 
 // 点击回复
-const handleClickReply = (uid: number, name: string) => {
-  // 将当前回复的信息给回复面板
-  toUserInfo.name = name
-  toUserInfo.uid = uid
-
+const handleClickComment = (
+  topicId: number,
+  replyId: number,
+  uid: number,
+  name: string
+) => {
+  tid.value = topicId
+  rid.value = replyId
+  toUid.value = uid
+  toUsername.value = name
   // 打开回复面板
-  commentDraft.value.isShowCommentPanelRid = props.rid
+  isShowCommentPanelRid.value = ridRef.value
 }
 </script>
 
@@ -64,9 +80,7 @@ const handleClickReply = (uid: number, name: string) => {
     <!-- 评论的弹出面板 -->
     <CommentPanel
       @getCommentEmits="getCommentEmits"
-      :tid="tid"
-      :rid="rid"
-      :to_user="toUserInfo"
+      v-if="isShowCommentPanelRid === ridRef"
     />
 
     <!-- 评论的展示区域 -->
@@ -107,7 +121,12 @@ const handleClickReply = (uid: number, name: string) => {
                 </li>
                 <li
                   @click="
-                    handleClickReply(comment.c_user.uid, comment.c_user.name)
+                    handleClickComment(
+                      comment.tid,
+                      comment.rid,
+                      comment.c_user.uid,
+                      comment.c_user.name
+                    )
                   "
                 >
                   <Icon class="icon" icon="fa-regular:comment-dots" />

src/views/topic/components/footer/Footer.vue

@@ -105,7 +105,7 @@ const currUserUid = useKUNGalgameUserStore().uid
       <!-- 分享 -->
       <span class="icon"><Icon icon="majesticons:share-line" /></span>
 
-      <!-- 只看 -->
+      <!-- 只看 TODO: -->
       <!-- <span class="icon"><Icon icon="ph:user-focus-duotone" /></span> -->
 
       <!-- 编辑 -->

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

@@ -28,9 +28,16 @@ import { TopicReply } from '@/api/index'
 
 // 导入话题页面 store
 import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+
+// 使用不持久的评论 store
+import { useTempCommentStore } from '@/store/temp/comment'
 import { storeToRefs } from 'pinia'
 
-const { scrollToReplyId, commentDraft } = storeToRefs(useKUNGalgameTopicStore())
+const { scrollToReplyId } = storeToRefs(useKUNGalgameTopicStore())
+
+const { tid, rid, toUid, toUsername, isShowCommentPanelRid } = storeToRefs(
+  useTempCommentStore()
+)
 
 const props = defineProps<{
   repliesData: TopicReply[]
@@ -42,12 +49,21 @@ const replies = computed(() => props.repliesData)
 // 控制面板关闭的值
 const isCommentPanelOpen = ref(false)
 // 切换面板的状态
-const handleClickComment = (rid: number) => {
+const handleClickComment = (
+  topicId: number,
+  replyIid: number,
+  uid: number,
+  name: string
+) => {
   isCommentPanelOpen.value = !isCommentPanelOpen.value
   if (isCommentPanelOpen.value) {
-    commentDraft.value.isShowCommentPanelRid = rid
+    tid.value = topicId
+    rid.value = replyIid
+    toUid.value = uid
+    toUsername.value = name
+    isShowCommentPanelRid.value = replyIid
   } else {
-    commentDraft.value.isShowCommentPanelRid = 0
+    isShowCommentPanelRid.value = 0
   }
 }
 </script>
@@ -132,7 +148,17 @@ const handleClickComment = (rid: number) => {
             :to-floor="reply.floor"
           >
             <template #comment>
-              <span @click="handleClickComment(reply.rid)" class="icon">
+              <span
+                @click="
+                  handleClickComment(
+                    reply.tid,
+                    reply.rid,
+                    reply.r_user.uid,
+                    reply.r_user.name
+                  )
+                "
+                class="icon"
+              >
                 <Icon icon="fa-regular:comment-dots" />
               </span>
             </template>
@@ -273,7 +299,7 @@ const handleClickComment = (rid: number) => {
 
 /* 回复被推的样式 */
 .active-upvote .container {
-  border: 2px solid var(--kungalgame-pink-3);
+  border: 1px solid var(--kungalgame-red-4);
 }
 
 /* 滚动到指定话题激活后的样式 */