From 8818c01323340a707069a1bad749fac6e9675cb6 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Thu, 12 Oct 2023 22:54:55 +0800
Subject: [PATCH] feat: getReplies

---
 src/api/user/index.ts                   | 14 +++++-
 src/api/user/types/user.ts              | 15 +++++++
 src/store/modules/kungalgamer.ts        | 18 +++++++-
 src/views/kungalgamer/content/Topic.vue | 60 +++++++++++++++++++------
 4 files changed, 90 insertions(+), 17 deletions(-)

diff --git a/src/api/user/index.ts b/src/api/user/index.ts
index 78cf7001..962dd024 100644
--- a/src/api/user/index.ts
+++ b/src/api/user/index.ts
@@ -78,9 +78,21 @@ export async function getUserTopicApi(
   request: User.UserGetUserTopicRequestData
 ): Promise<User.UserGetUserTopicResponseData> {
   const queryParams = objectToQueryParams(request, 'uid')
-  const url = `/user/${request.uid}/published-topic?${queryParams}`
+  const url = `/user/${request.uid}/topics?${queryParams}`
 
   const response = fetchGet<User.UserGetUserTopicResponseData>(url)
 
   return response
 }
+
+// 获取用户回复
+export async function getUserReplyApi(
+  request: User.UserGetUserReplyRequestData
+): Promise<User.UserGetUserReplyResponseData> {
+  const queryParams = objectToQueryParams(request, 'uid')
+  const url = `/user/${request.uid}/replies?${queryParams}`
+
+  const response = fetchGet<User.UserGetUserReplyResponseData>(url)
+
+  return response
+}
diff --git a/src/api/user/types/user.ts b/src/api/user/types/user.ts
index d22e745c..35923f05 100644
--- a/src/api/user/types/user.ts
+++ b/src/api/user/types/user.ts
@@ -52,6 +52,19 @@ export interface UserGetUserTopicRequestData {
   tidArray: number[]
 }
 
+// 发布评论返回数据
+export interface UserReply {
+  tid: number
+  content: string
+  time: number
+}
+
+// 获取用户发布的回复
+export interface UserGetUserReplyRequestData {
+  uid: number
+  ridArray: number[]
+}
+
 export type UserInfoResponseData = KUNGalgameResponseData<UserInfo>
 
 export type UserUpdateBioResponseData = KUNGalgameResponseData<{}>
@@ -67,3 +80,5 @@ export type UserUpdateEmailResponseData = KUNGalgameResponseData<{}>
 export type UserUpdatePasswordResponseData = KUNGalgameResponseData<{}>
 
 export type UserGetUserTopicResponseData = KUNGalgameResponseData<UserTopic[]>
+
+export type UserGetUserReplyResponseData = KUNGalgameResponseData<UserReply[]>
diff --git a/src/store/modules/kungalgamer.ts b/src/store/modules/kungalgamer.ts
index bcedcf17..2ba4fd3a 100644
--- a/src/store/modules/kungalgamer.ts
+++ b/src/store/modules/kungalgamer.ts
@@ -28,6 +28,8 @@ import type {
   UserUpdatePasswordResponseData,
   UserGetUserTopicRequestData,
   UserGetUserTopicResponseData,
+  UserGetUserReplyRequestData,
+  UserGetUserReplyResponseData,
 } from '@/api'
 
 import {
@@ -38,6 +40,7 @@ import {
   updateUserEmailApi,
   updateUserPasswordApi,
   getUserTopicApi,
+  getUserReplyApi,
 } from '@/api'
 
 // kungalgame store 类型
@@ -181,13 +184,24 @@ export const useKUNGalgameUserStore = defineStore({
       return updateUserPasswordApi(requestData)
     },
 
-    // 获取用户发布的话题
-    async getTopic(tidArray: number[]): Promise<UserGetUserTopicResponseData> {
+    // 获取用户的话题
+    async getTopics(tidArray: number[]): Promise<UserGetUserTopicResponseData> {
       const requestData: UserGetUserTopicRequestData = {
         uid: this.uid,
         tidArray: tidArray,
       }
       return getUserTopicApi(requestData)
     },
+
+    // 获取用户回复
+    async getReplies(
+      ridArray: number[]
+    ): Promise<UserGetUserReplyResponseData> {
+      const requestData: UserGetUserReplyRequestData = {
+        uid: this.uid,
+        ridArray: ridArray,
+      }
+      return getUserReplyApi(requestData)
+    },
   },
 })
diff --git a/src/views/kungalgamer/content/Topic.vue b/src/views/kungalgamer/content/Topic.vue
index 78975846..b91c666c 100644
--- a/src/views/kungalgamer/content/Topic.vue
+++ b/src/views/kungalgamer/content/Topic.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import type { UserInfo, UserTopic } from '@/api'
+import type { UserInfo, UserTopic, UserReply } from '@/api'
 import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
 import dayjs from 'dayjs'
+import { getPlainText } from '@/utils/getPlainText'
 
 const props = defineProps<{
   user: UserInfo
@@ -11,6 +12,7 @@ const props = defineProps<{
 
 const route = useRoute()
 const topics = ref<UserTopic[]>([])
+const replies = ref<UserReply[]>([])
 
 const tidArray = computed(() => {
   if (route.name === 'KUNGalgamerPublishedTopic') {
@@ -25,21 +27,52 @@ const tidArray = computed(() => {
   return []
 })
 
+const ridArray = computed(() => {
+  if (route.name === 'KUNGalgamerReply') {
+    return props.user.reply
+  }
+  return []
+})
+
 onMounted(async () => {
-  const response = await useKUNGalgameUserStore().getTopic(tidArray.value)
-  topics.value = response.data
+  // 如果有话题的话获取话题
+  if (tidArray.value.length) {
+    const response = await useKUNGalgameUserStore().getTopics(tidArray.value)
+    topics.value = response.data
+  }
+  // 如果有回复的话获取回复
+  if (ridArray.value.length) {
+    const response = await useKUNGalgameUserStore().getReplies(ridArray.value)
+    replies.value = response.data
+  }
 })
 </script>
 
 <template>
   <!-- 右侧内容区 -->
   <div class="article">
-    <!-- 单个项目 -->
-    <div class="topic" v-for="(topic, index) in topics" :key="index">
-      <div class="topic-title">
-        {{ topic.title }}
+    <!-- 如果是话题 -->
+    <div class="topic" v-if="tidArray.length">
+      <div class="item" v-for="(topic, index) in topics" :key="index">
+        <div class="title">
+          {{ topic.title }}
+        </div>
+        <div class="time">
+          {{ dayjs(topic.time).format('YYYY/MM/DD') }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 如果是回复 -->
+    <div class="topic" v-if="ridArray.length">
+      <div class="item" v-for="(reply, index) in replies" :key="index">
+        <div class="title">
+          {{ getPlainText(reply.content) }}
+        </div>
+        <div class="time">
+          {{ dayjs(reply.time).format('YYYY/MM/DD') }}
+        </div>
       </div>
-      <div class="topic-time">{{ dayjs(topic.time).format('YYYY/MM/DD') }}</div>
     </div>
   </div>
 </template>
@@ -47,8 +80,7 @@ onMounted(async () => {
 <style lang="scss" scoped>
 /* 内容区 */
 .article {
-  width: 50%;
-  flex-grow: 1;
+  width: 100%;
   padding: 7px 27px;
   /* 竖直弹性盒 */
   display: flex;
@@ -70,12 +102,12 @@ onMounted(async () => {
 }
 
 /* 单个话题的样式 */
-.topic {
+.item {
   width: 100%;
   /* 单个话题高度 */
   height: 30px;
   /* 话题之间的距离 */
-  padding: 2px;
+  padding: 2px 5px;
   margin: 5px 0;
   display: flex;
   justify-content: space-between;
@@ -85,12 +117,12 @@ onMounted(async () => {
   border-left: 2px solid var(--kungalgame-blue-4);
   cursor: pointer;
 }
-.topic:hover {
+.item:hover {
   border-bottom: 1px solid var(--kungalgame-blue-4);
   background-color: var(--kungalgame-trans-blue-1);
 }
 /* 单个话题的标题 */
-.topic-title {
+.title {
   /* 单行显示，溢出省略号 */
   display: inline-block;
   overflow: hidden;