From e2e1580d5b8128d7a67dea78c7d2aeb36087155f Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Mon, 9 Oct 2023 02:04:26 +0800
Subject: [PATCH] feat: comment like and Dislike

---
 src/api/topic/comment.ts                      |  28 ++++-
 src/api/topic/types/comment.ts                |  21 ++++
 src/api/topic/types/reply.ts                  |   2 +-
 src/store/modules/topic.ts                    |  39 +++++-
 src/views/topic/KUNGalgameTopicPage.vue       |  47 ++++----
 .../topic/components/comment/CommentPanel.vue |   4 +-
 .../topic/components/comment/Comments.vue     |  31 +++--
 .../topic/components/comment/Dislike.vue      | 111 ++++++++++++++++++
 src/views/topic/components/comment/Like.vue   | 104 ++++++++++++++++
 9 files changed, 349 insertions(+), 38 deletions(-)
 create mode 100644 src/views/topic/components/comment/Dislike.vue
 create mode 100644 src/views/topic/components/comment/Like.vue

diff --git a/src/api/topic/comment.ts b/src/api/topic/comment.ts
index a01cc2b5..915ec501 100644
--- a/src/api/topic/comment.ts
+++ b/src/api/topic/comment.ts
@@ -1,4 +1,6 @@
-import { fetchGet, fetchPost } from '@/utils/request'
+import { fetchGet, fetchPut, fetchPost } from '@/utils/request'
+// 将对象转为请求参数的函数
+import objectToQueryParams from '@/utils/objectToQueryParams'
 
 import * as Comment from './types/comment'
 
@@ -19,6 +21,30 @@ export async function getCommentsByReplyRidApi(
   }
 }
 
+// 点赞评论
+export async function updateCommentLikeApi(
+  request: Comment.TopicLikeCommentRequestData
+): Promise<Comment.TopicLikeCommentResponseData> {
+  const queryParams = objectToQueryParams(request, 'tid')
+  const url = `/topics/${request.tid}/comment/like?${queryParams}`
+
+  const response = fetchPut<Comment.TopicLikeCommentResponseData>(url)
+
+  return response
+}
+
+// 点踩评论
+export async function updateCommentDislikeApi(
+  request: Comment.TopicDislikeCommentRequestData
+): Promise<Comment.TopicDislikeCommentResponseData> {
+  const queryParams = objectToQueryParams(request, 'tid')
+  const url = `/topics/${request.tid}/comment/dislike?${queryParams}`
+
+  const response = fetchPut<Comment.TopicDislikeCommentResponseData>(url)
+
+  return response
+}
+
 // 根据 tid 和 rid 创建一个评论
 export async function postCommentByPidAndRidApi(
   request: Comment.TopicCreateCommentRequestData
diff --git a/src/api/topic/types/comment.ts b/src/api/topic/types/comment.ts
index b56bf253..407d64d9 100644
--- a/src/api/topic/types/comment.ts
+++ b/src/api/topic/types/comment.ts
@@ -2,6 +2,7 @@ import { TopicUserInfo, TopicToUserInfo } from './topic'
 
 // 评论的数据
 export interface TopicComment {
+  cid: number
   rid: number
   tid: number
   c_user: Omit<TopicUserInfo, 'moemoepoint'>
@@ -11,6 +12,20 @@ export interface TopicComment {
   dislikes: number[]
 }
 
+// 点赞评论的请求数据
+export interface TopicLikeCommentRequestData {
+  tid: number
+  cid: number
+  to_uid: number
+}
+
+// 点踩评论的请求数据
+export interface TopicDislikeCommentRequestData {
+  tid: number
+  cid: number
+  to_uid: number
+}
+
 // 发表评论的请求数据
 export interface TopicCreateCommentRequestData {
   tid: number
@@ -22,6 +37,12 @@ export interface TopicCreateCommentRequestData {
 // 单个回复底下所有的评论数据，是一个数组
 export type TopicCommentResponseData = KUNGalgameResponseData<TopicComment[]>
 
+// 点赞评论的响应数据
+export type TopicLikeCommentResponseData = KUNGalgameResponseData<{}>
+
+// 点踩评论的响应数据
+export type TopicDislikeCommentResponseData = KUNGalgameResponseData<{}>
+
 // 创建单个评论后返回的评论数据
 export type TopicCreateCommentResponseData =
   KUNGalgameResponseData<TopicComment>
diff --git a/src/api/topic/types/reply.ts b/src/api/topic/types/reply.ts
index ac93fcba..80a92aa1 100644
--- a/src/api/topic/types/reply.ts
+++ b/src/api/topic/types/reply.ts
@@ -27,7 +27,7 @@ export interface TopicReply {
   dislikes: number[]
   tags: string[]
   time: number
-  cid: number[]
+  comment: number[]
 }
 
 // 发表回复的请求数据
diff --git a/src/store/modules/topic.ts b/src/store/modules/topic.ts
index 5486bd20..a16ba972 100644
--- a/src/store/modules/topic.ts
+++ b/src/store/modules/topic.ts
@@ -48,10 +48,19 @@ import type {
 } from '@/api'
 
 // 评论
-import { getCommentsByReplyRidApi, postCommentByPidAndRidApi } from '@/api'
+import {
+  getCommentsByReplyRidApi,
+  updateCommentLikeApi,
+  updateCommentDislikeApi,
+  postCommentByPidAndRidApi,
+} from '@/api'
 
 import type {
   TopicCommentResponseData,
+  TopicLikeCommentRequestData,
+  TopicLikeCommentResponseData,
+  TopicDislikeCommentRequestData,
+  TopicDislikeCommentResponseData,
   TopicCreateCommentRequestData,
   TopicCreateCommentResponseData,
 } from '@/api'
@@ -254,6 +263,34 @@ export const useKUNGalgameTopicStore = defineStore({
       return await getCommentsByReplyRidApi(tid, rid)
     },
 
+    // 点赞评论
+    async updateCommentLike(
+      tid: number,
+      cid: number,
+      toUid: number
+    ): Promise<TopicLikeCommentResponseData> {
+      const requestData: TopicLikeCommentRequestData = {
+        tid: tid,
+        cid: cid,
+        to_uid: toUid,
+      }
+      return await updateCommentLikeApi(requestData)
+    },
+
+    // 点踩评论
+    async updateCommentDislike(
+      tid: number,
+      cid: number,
+      toUid: number
+    ): Promise<TopicDislikeCommentResponseData> {
+      const requestData: TopicDislikeCommentRequestData = {
+        tid: tid,
+        cid: cid,
+        to_uid: toUid,
+      }
+      return await updateCommentDislikeApi(requestData)
+    },
+
     // 创建一个评论
     async postNewComment(
       tid: number,
diff --git a/src/views/topic/KUNGalgameTopicPage.vue b/src/views/topic/KUNGalgameTopicPage.vue
index 549d4b9c..bd1ccab7 100644
--- a/src/views/topic/KUNGalgameTopicPage.vue
+++ b/src/views/topic/KUNGalgameTopicPage.vue
@@ -12,6 +12,8 @@ import {
 } from 'vue'
 import { onBeforeRouteLeave, useRoute } from 'vue-router'
 import message from '@/components/alert/Message'
+// 全局消息组件（底部）
+import { useKUNGalgameMessageStore } from '@/store/modules/message'
 
 import { TopicDetail, TopicReply } from '@/api'
 
@@ -44,6 +46,7 @@ const {
   isShowAdvance,
   isEdit,
   replyRequest,
+  replyRewrite,
   isScrollToTop,
   isLoading,
   scrollToReplyId,
@@ -236,31 +239,27 @@ const resetPanelStatus = () => {
   // useKUNGalgameTopicStore().resetRewriteTopicData()
 }
 
-// 页面离开时关闭回复面板
-onBeforeRouteLeave(() => {
-  resetPanelStatus()
+// 页面离开时关闭回复面板，如果重新编辑回复需要确认离开
+onBeforeRouteLeave(async (to, from, next) => {
+  // 如果是正在更新回复
+  if (replyRewrite.value.isReplyRewriting) {
+    // 获取用户点击的结果
+    const res = await useKUNGalgameMessageStore().alert(
+      'AlertInfo.edit.leave',
+      true
+    )
+    if (res) {
+      resetPanelStatus()
+      // 用户确认离开，继续导航
+      next()
+    } else {
+      // 用户取消离开，阻止导航
+      next(false)
+    }
+  } else {
+    next()
+  }
 })
-// onBeforeRouteLeave(async (to, from, next) => {
-//   // 如果是正在更新回复
-//   if (replyRewrite.value.isReplyRewriting) {
-//     // 获取用户点击的结果
-//     const res = await useKUNGalgameMessageStore().alert(
-//       'AlertInfo.edit.leave',
-//       true
-//     )
-//     if (res) {
-//       // 重置重新编辑话题的数据
-//       useKUNGalgameEditStore().resetRewriteTopicData()
-//       // 用户确认离开，继续导航
-//       next()
-//     } else {
-//       // 用户取消离开，阻止导航
-//       next(false)
-//     }
-//   } else {
-//     next()
-//   }
-// })
 
 // 挂载之前关闭回复面板
 onBeforeMount(() => {
diff --git a/src/views/topic/components/comment/CommentPanel.vue b/src/views/topic/components/comment/CommentPanel.vue
index 4182a8be..e53e1f2e 100644
--- a/src/views/topic/components/comment/CommentPanel.vue
+++ b/src/views/topic/components/comment/CommentPanel.vue
@@ -32,7 +32,7 @@ const handleInputComment = () => {
   // 创建一个防抖处理函数
   const debouncedUpdateContent = debounce(() => {
     content.value = commentValue.value
-  }, 1007)
+  }, 300)
 
   // 调用防抖处理函数，会在延迟时间内只执行一次更新操作
   debouncedUpdateContent()
@@ -79,8 +79,6 @@ const handlePublishComment = async () => {
     message('Comment publish successfully!', '评论发布成功', 'success')
 
     handleCloseCommentPanel()
-  } else {
-    message('Comment publish failed!', '评论发布失败', 'success')
   }
 }
 
diff --git a/src/views/topic/components/comment/Comments.vue b/src/views/topic/components/comment/Comments.vue
index 1ab152a1..d953c5d9 100644
--- a/src/views/topic/components/comment/Comments.vue
+++ b/src/views/topic/components/comment/Comments.vue
@@ -4,12 +4,19 @@
 <script setup lang="ts">
 import { defineAsyncComponent, onMounted, reactive, ref, watch } from 'vue'
 import { Icon } from '@iconify/vue'
+// 异步导入回复面板组件
 const CommentPanel = defineAsyncComponent(() => import('./CommentPanel.vue'))
+// 点赞组件
+import Like from './Like.vue'
+// 点踩组件
+import Dislike from './Dislike.vue'
 
 import { TopicComment } from '@/api/index'
 
 // 导入话题页面 store
 import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+// 导入用户 store
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
 
 // 使用不持久的评论 store
 import { useTempCommentStore } from '@/store/temp/comment'
@@ -31,6 +38,8 @@ const props = defineProps<{
 const tidRef = ref(props.tid)
 const ridRef = ref(props.rid)
 const toUser = ref(props.toUser)
+// 当前用户 uid
+const currentUserUid = useKUNGalgameUserStore().uid
 
 // 响应式
 watch(
@@ -110,15 +119,21 @@ const handleClickComment = (
             <div class="operate">
               <ul>
                 <!-- 点赞 -->
-                <li>
-                  <Icon class="icon" icon="line-md:thumbs-up-twotone" />
-                  {{ comment.likes.length }}
-                </li>
+                <Like
+                  :tid="props.tid"
+                  :cid="comment.cid"
+                  :uid="currentUserUid"
+                  :to-uid="comment.c_user.uid"
+                  :likes="comment.likes"
+                />
                 <!-- 踩 -->
-                <li>
-                  <Icon class="icon" icon="line-md:thumbs-down-twotone" />
-                  {{ comment.dislikes.length }}
-                </li>
+                <Dislike
+                  :tid="props.tid"
+                  :cid="comment.cid"
+                  :uid="currentUserUid"
+                  :to-uid="comment.c_user.uid"
+                  :dislikes="comment.dislikes"
+                />
                 <li
                   @click="
                     handleClickComment(
diff --git a/src/views/topic/components/comment/Dislike.vue b/src/views/topic/components/comment/Dislike.vue
new file mode 100644
index 00000000..0f3c1b37
--- /dev/null
+++ b/src/views/topic/components/comment/Dislike.vue
@@ -0,0 +1,111 @@
+<!-- 
+  这是回复话题下方的评论区，包含了所有的评论，是一个单独的组件，它的子组件是单个评论
+ -->
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Icon } from '@iconify/vue'
+// 全局消息组件（顶部）
+import message from '@/components/alert/Message'
+// throttle 函数
+import { throttle } from '@/utils/throttle'
+
+// 导入话题页面 store
+import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+
+const props = defineProps<{
+  tid: number
+  cid: number
+  uid: number
+  toUid: number
+
+  dislikes: number[]
+}>()
+
+const isDisliked = ref(props.dislikes.includes(props.uid))
+const dislikesCount = ref(props.dislikes.length)
+
+// 响应式
+watch(
+  () => props.dislikes,
+  (newLikes) => {
+    isDisliked.value = newLikes.includes(props.uid)
+    dislikesCount.value = newLikes.length
+  }
+)
+
+// throttle 回调函数
+const throttleCallback = () => {
+  message(
+    'You can only perform one operation within 1007 milliseconds',
+    '您在 1007 毫秒内只能进行一次操作',
+    'warn'
+  )
+}
+
+const dislikeComment = async () => {
+  // 已经点踩
+  if (isDisliked.value) {
+    message(`You've already disliked it`, '您已经点过踩了', 'warn')
+    return
+  }
+
+  // 当前用户不可以给自己点赞
+  if (props.uid === props.toUid) {
+    message('You cannot dislike yourself', '您不可以给自己点踩', 'warn')
+    return
+  }
+
+  const { tid, cid, toUid } = props
+  const res = await useKUNGalgameTopicStore().updateCommentDislike(
+    tid,
+    cid,
+    toUid
+  )
+
+  if (res.code === 200) {
+    dislikesCount.value++
+    isDisliked.value = true
+    message('Dislike successfully!', '点踩成功', 'success')
+  } else {
+    message('Dislike failed!', '点踩失败', 'error')
+  }
+}
+
+// throttle 函数，1007 毫秒仅会触发一次点踩
+const handleClickDislikeThrottled = throttle(
+  dislikeComment,
+  1007,
+  throttleCallback
+)
+
+// 点踩
+const handleClickDislike = () => {
+  handleClickDislikeThrottled()
+}
+</script>
+
+<template>
+  <li :class="isDisliked ? 'active' : ''" @click="handleClickDislike">
+    <Icon class="icon" icon="line-md:thumbs-down-twotone" />
+    {{ dislikesCount }}
+  </li>
+</template>
+
+<style lang="scss" scoped>
+li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px;
+  .icon {
+    cursor: pointer;
+    color: var(--kungalgame-font-color-2);
+    margin-right: 2px;
+  }
+}
+
+/* 激活后的样式 */
+.active .icon {
+  color: var(--kungalgame-blue-4);
+}
+</style>
diff --git a/src/views/topic/components/comment/Like.vue b/src/views/topic/components/comment/Like.vue
new file mode 100644
index 00000000..dd1ad0e0
--- /dev/null
+++ b/src/views/topic/components/comment/Like.vue
@@ -0,0 +1,104 @@
+<!-- 
+  这是回复话题下方的评论区，包含了所有的评论，是一个单独的组件，它的子组件是单个评论
+ -->
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Icon } from '@iconify/vue'
+// 全局消息组件（顶部）
+import message from '@/components/alert/Message'
+// throttle 函数
+import { throttle } from '@/utils/throttle'
+
+// 导入话题页面 store
+import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+
+const props = defineProps<{
+  tid: number
+  cid: number
+  uid: number
+  toUid: number
+
+  likes: number[]
+}>()
+
+const isLiked = ref(props.likes.includes(props.uid))
+const likesCount = ref(props.likes.length)
+
+// 响应式
+watch(
+  () => props.likes,
+  (newLikes) => {
+    // 更新 isLiked 和 likesCount
+    isLiked.value = newLikes.includes(props.uid)
+    likesCount.value = newLikes.length
+  }
+)
+
+// throttle 回调函数
+const throttleCallback = () => {
+  message(
+    'You can only perform one operation within 1007 milliseconds',
+    '您在 1007 毫秒内只能进行一次操作',
+    'warn'
+  )
+}
+
+const likeComment = async () => {
+  // 已经点赞
+  if (isLiked.value) {
+    message(`You've already liked it`, '您已经点过赞了', 'warn')
+    return
+  }
+
+  // 当前用户不可以给自己点赞
+  if (props.uid === props.toUid) {
+    message('You cannot like yourself', '您不可以给自己点赞', 'warn')
+    return
+  }
+
+  const { tid, cid, toUid } = props
+  const res = await useKUNGalgameTopicStore().updateCommentLike(tid, cid, toUid)
+
+  if (res.code === 200) {
+    likesCount.value++
+    isLiked.value = true
+    message('Like successfully!', '点赞成功', 'success')
+  } else {
+    message('Like failed!', '点赞失败', 'error')
+  }
+}
+
+// throttle 函数，1007 毫秒仅会触发一次点赞
+const handleClickLikeThrottled = throttle(likeComment, 1007, throttleCallback)
+
+// 点赞
+const handleClickLike = () => {
+  handleClickLikeThrottled()
+}
+</script>
+
+<template>
+  <li :class="isLiked ? 'active' : ''" @click="handleClickLike">
+    <Icon class="icon" icon="line-md:thumbs-up-twotone" />
+    {{ likesCount }}
+  </li>
+</template>
+
+<style lang="scss" scoped>
+li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px;
+  .icon {
+    cursor: pointer;
+    color: var(--kungalgame-font-color-2);
+    margin-right: 2px;
+  }
+}
+
+/* 激活后的样式 */
+.active .icon {
+  color: var(--kungalgame-blue-4);
+}
+</style>