From 51edb891ca721a3d0c4aa754958babcc78e2fd27 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Sun, 27 Aug 2023 22:27:13 +0800
Subject: [PATCH] feat: topic page

---
 src/api/edit/index.ts                         |  2 +-
 src/api/topic/index.ts                        | 10 ++--
 src/api/topic/types/topic.ts                  | 11 ++--
 src/router/modules/topic.ts                   |  3 +-
 src/store/modules/topic.ts                    | 22 ++++++--
 src/views/edit/components/Button.vue          |  9 +++-
 src/views/topic/KUNGalgameTopicPage.vue       |  2 +-
 .../topic/content/KUNGalgameTopicContent.vue  | 49 ++++++++++++------
 .../content/components/KUNGalgamerInfo.vue    |  1 +
 src/views/topic/content/components/Master.vue | 13 ++---
 src/views/topic/content/components/Reply.vue  | 51 ++++++++++++++-----
 src/views/topic/content/components/Time.vue   |  4 +-
 .../topic/content/components/TopicContent.vue | 31 -----------
 .../topic/content/components/TopicFooter.vue  | 13 ++---
 14 files changed, 128 insertions(+), 93 deletions(-)
 delete mode 100644 src/views/topic/content/components/TopicContent.vue

diff --git a/src/api/edit/index.ts b/src/api/edit/index.ts
index 5b9466c0..2aa75963 100644
--- a/src/api/edit/index.ts
+++ b/src/api/edit/index.ts
@@ -15,7 +15,7 @@ export async function postEditNewTopicApi(
       newTopicData
     )
 
-    // 返回创建好的话题数据
+    // 返回创建好的话题 tid
     return response
   } catch (error) {
     // 处理错误
diff --git a/src/api/topic/index.ts b/src/api/topic/index.ts
index 27669b22..2aad74f9 100644
--- a/src/api/topic/index.ts
+++ b/src/api/topic/index.ts
@@ -7,7 +7,7 @@ const topicURLs = {
 }
 
 // 获取单个话题
-export async function getTopicByTid(
+export async function getTopicByTidApi(
   tid: number
 ): Promise<Topic.TopicDetailResponseData> {
   try {
@@ -23,8 +23,8 @@ export async function getTopicByTid(
 }
 
 // 根据话题 id 获取话题回复
-export async function getRepliesByPid(
-  request: Topic.ReplyRequestData
+export async function getRepliesByPidApi(
+  request: Topic.TopicReplyRequestData
 ): Promise<Topic.TopicReplyResponseData> {
   try {
     const url = `${topicURLs.getRepliesByPid}/${request.tid}/reply`
@@ -39,8 +39,8 @@ export async function getRepliesByPid(
 }
 
 // 获取一个回复下面的评论
-export async function getCommentsByReplyRid(
-  request: Topic.ReplyRequestData
+export async function getCommentsByReplyRidApi(
+  request: Topic.TopicReplyRequestData
 ): Promise<Topic.TopicReplyResponseData> {
   try {
     const url = `${topicURLs.getRepliesByPid}/${request.tid}/reply`
diff --git a/src/api/topic/types/topic.ts b/src/api/topic/types/topic.ts
index cd652e51..09bff714 100644
--- a/src/api/topic/types/topic.ts
+++ b/src/api/topic/types/topic.ts
@@ -42,13 +42,16 @@ export interface TopicReplyRequestData {
 export interface TopicReply {
   rid: number
   tid: number
+  floor: number
   r_user: TopicUserInfo
   to_user: TopicToUserInfo
-  edited: string
+  edited: number
   content: string
+  upvote: number
   likes: number
   dislikes: number
-  tags: string
+  tags: string[]
+  time: number
   cid: number[]
 }
 
@@ -58,5 +61,5 @@ export interface TopicComment {}
 // 获取单个话题响应数据的格式
 export type TopicDetailResponseData = KUNGalgameResponseData<TopicDetail>
 
-// 单个话题回复响应数据的格式
-export type TopicReplyResponseData = KUNGalgameResponseData<TopicReply>
+// 单个话题回复响应数据的格式，返回的是多条回复数据，是一个数组
+export type TopicReplyResponseData = KUNGalgameResponseData<TopicReply[]>
diff --git a/src/router/modules/topic.ts b/src/router/modules/topic.ts
index dbf382c0..8556dbf2 100644
--- a/src/router/modules/topic.ts
+++ b/src/router/modules/topic.ts
@@ -7,11 +7,10 @@ const topic: RouteRecordRaw[] = [
   {
     path: '/topic',
     component: Layout,
-    redirect: '/topic/:tid',
     children: [
       {
         name: 'Topic',
-        path: 'index',
+        path: ':tid',
         // 路由懒加载
         component: () => import('@/views/topic/KUNGalgameTopicPage.vue'),
         // 使路由参数作为组件的 props 传递
diff --git a/src/store/modules/topic.ts b/src/store/modules/topic.ts
index 460a5128..af003042 100644
--- a/src/store/modules/topic.ts
+++ b/src/store/modules/topic.ts
@@ -1,8 +1,12 @@
 /* 话题详情的 store */
 import { defineStore } from 'pinia'
 
-import { getRepliesByPid } from '@/api/index'
-import { TopicReplyRequestData, TopicReplyResponseData } from '@/api/index'
+import { getRepliesByPidApi, getTopicByTidApi } from '@/api/index'
+import {
+  TopicDetailResponseData,
+  TopicReplyRequestData,
+  TopicReplyResponseData,
+} from '@/api/index'
 
 // 回复的缓存
 interface ReplyDraft {
@@ -59,6 +63,18 @@ export const useKUNGalgameTopicStore = defineStore({
     },
   }),
   actions: {
+    // 获取单个话题
+    getTopicByTid(tid: number): Promise<TopicDetailResponseData> {
+      return new Promise((resolve, reject) => {
+        getTopicByTidApi(tid)
+          .then((res) => {
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
     // 获取回复
     getReplies(tid: number): Promise<TopicReplyResponseData> {
       return new Promise((resolve, reject) => {
@@ -69,7 +85,7 @@ export const useKUNGalgameTopicStore = defineStore({
           sortField: this.replyRequest.sortField,
           sortOrder: this.replyRequest.sortOrder,
         }
-        getRepliesByPid(requestData)
+        getRepliesByPidApi(requestData)
           .then((res) => {
             resolve(res)
           })
diff --git a/src/views/edit/components/Button.vue b/src/views/edit/components/Button.vue
index 29c71c7e..d93e4c78 100644
--- a/src/views/edit/components/Button.vue
+++ b/src/views/edit/components/Button.vue
@@ -41,8 +41,15 @@ const handlePublish = async () => {
     // 获取创建好话题的 tid
     const tid = createdTopic.data.tid
 
+    console.log(tid)
+
     // 将用户 push 进对应 tid 话题的详情页面
-    router.push({ name: 'Topic', params: { tid } })
+    router.push({
+      name: 'Topic',
+      params: {
+        tid: tid,
+      },
+    })
 
     message.info('AlertInfo.edit.publishSuccess')
     // 清除数据，并不再保存数据，因为此时该话题已被发布，这里使用 pinia 自带的 $reset 重置状态
diff --git a/src/views/topic/KUNGalgameTopicPage.vue b/src/views/topic/KUNGalgameTopicPage.vue
index 5ddcb682..f4c13acd 100644
--- a/src/views/topic/KUNGalgameTopicPage.vue
+++ b/src/views/topic/KUNGalgameTopicPage.vue
@@ -38,9 +38,9 @@ onBeforeMount(() => {
 
 <template>
   <!-- 回复面板组件 -->
-  <ReplyPanel />
   <!-- 总容器 -->
   <div class="main-wrapper">
+    <ReplyPanel />
     <!-- 下面话题详情区的容器 -->
     <div class="topic-wrapper">
       <!-- 下方可视内容区的容器 -->
diff --git a/src/views/topic/content/KUNGalgameTopicContent.vue b/src/views/topic/content/KUNGalgameTopicContent.vue
index 73eed7eb..76fa9a5d 100644
--- a/src/views/topic/content/KUNGalgameTopicContent.vue
+++ b/src/views/topic/content/KUNGalgameTopicContent.vue
@@ -6,24 +6,21 @@
   页面被拆成 3 个大组件，这是话题部分
  -->
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref, watch, computed } from 'vue'
 import Master from './components/Master.vue'
 import Reply from './components/Reply.vue'
 
-import { getTopicByTid } from '@/api/topic/index'
-import { TopicDetailResponseData } from '@/api/topic/types/topic'
-
-import { HomeTopic } from '@/api/index'
-import { TopicReplyRequestData, TopicReplyResponseData } from '@/api/index'
+import { TopicDetail, TopicReply } from '@/api/index'
 
 // 导入 topic store
 import { useKUNGalgameTopicStore } from '@/store/modules/topic'
 import { storeToRefs } from 'pinia'
 
-const requestData = storeToRefs(useKUNGalgameTopicStore())
+import { useRoute } from 'vue-router'
 
-// 在组件中定义响应式的话题数据
-const topics = ref<HomeTopic[]>([])
+const route = useRoute()
+
+const requestData = storeToRefs(useKUNGalgameTopicStore())
 
 // 在组件挂载时调用 fetchTopics 获取话题数据（watch 大法好！）
 // watch(
@@ -34,23 +31,43 @@ const topics = ref<HomeTopic[]>([])
 //   { immediate: true }
 // )
 
-const topicData = ref<TopicDetailResponseData>()
+const tid = computed(() => {
+  return Number(route.params.tid)
+})
+
+// 单个话题数据
+const topicData = ref<TopicDetail>()
+
+// 单个话题的回复数据
+const repliesData = ref<TopicReply[]>([])
+
+/** 这里拿到的已经是后端返回回来的 data 数据了  */
 onMounted(async () => {
-  const res = await getTopicByTid(1)
-  topicData.value = res
+  // 获取单个话题的数据
+  const topicResponseData = (
+    await useKUNGalgameTopicStore().getTopicByTid(tid.value)
+  ).data
+
+  topicData.value = topicResponseData
+
+  // 懒加载获取单个话题下面的回复数据
+  const replyResponseData = (
+    await useKUNGalgameTopicStore().getReplies(tid.value)
+  ).data
+  repliesData.value = replyResponseData
 })
 </script>
 
 <template>
-  <div class="content-right-part">
+  <div class="content">
     <Master v-if="topicData" :topicData="topicData" />
-    <Reply v-if="topicData" :replyIDs="topicData.data.rid" />
+    <Reply v-if="repliesData" :repliesData="repliesData" />
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 /* 右侧内容区 */
-.content-right-part {
+.content {
   height: 100%;
   width: 1px;
   flex-grow: 4;
diff --git a/src/views/topic/content/components/KUNGalgamerInfo.vue b/src/views/topic/content/components/KUNGalgamerInfo.vue
index 63473a6a..3b45e2f8 100644
--- a/src/views/topic/content/components/KUNGalgamerInfo.vue
+++ b/src/views/topic/content/components/KUNGalgamerInfo.vue
@@ -31,6 +31,7 @@ const props = defineProps<{
   display: flex;
   flex-direction: column;
   padding: 0 20px;
+  margin-bottom: 20px;
   color: var(--kungalgame-font-color-3);
 }
 /* 头像 */
diff --git a/src/views/topic/content/components/Master.vue b/src/views/topic/content/components/Master.vue
index c7255aa0..2a4d9e87 100644
--- a/src/views/topic/content/components/Master.vue
+++ b/src/views/topic/content/components/Master.vue
@@ -6,8 +6,6 @@
 import TopicFooter from '../components/TopicFooter.vue'
 // 楼主话题是否重新编辑
 import Rewrite from '../components/Rewrite.vue'
-// 楼主话题的内容
-import TopicContent from '../components/TopicContent.vue'
 // 楼主的信息
 import KUNGalgamerInfo from '../components/KUNGalgamerInfo.vue'
 // 楼主的发帖时间
@@ -15,9 +13,9 @@ import Time from '../components/Time.vue'
 // 楼主话题的标签
 import Tags from '../components/Tags.vue'
 
-import { TopicDetailResponseData } from '@/api/topic/types/topic'
+import { TopicDetail } from '@/api/topic/types/topic'
 const topicData = defineProps<{
-  topicData: TopicDetailResponseData
+  topicData: TopicDetail
 }>()
 
 const {
@@ -34,9 +32,7 @@ const {
   edited,
   user,
   rid,
-} = topicData.topicData?.data
-
-console.log(topicData.topicData.data)
+} = topicData.topicData
 </script>
 
 <template>
@@ -74,7 +70,7 @@ console.log(topicData.topicData.data)
       <!-- 话题的点赞数等信息 -->
       <TopicFooter
         :isOthersTopic="false"
-        :topicInfo="{ views, likes, dislikes, replies, upvotes }"
+        :info="{ views, likes, dislikes, replies, upvotes }"
       />
     </div>
   </div>
@@ -96,6 +92,7 @@ console.log(topicData.topicData.data)
 }
 /* 楼主话题内容区的容器 */
 .content-container {
+  flex-grow: 1;
   width: 100%;
   display: flex;
   flex-direction: column;
diff --git a/src/views/topic/content/components/Reply.vue b/src/views/topic/content/components/Reply.vue
index ec05c2bd..ab86e482 100644
--- a/src/views/topic/content/components/Reply.vue
+++ b/src/views/topic/content/components/Reply.vue
@@ -12,24 +12,30 @@ import TopicFooter from './../components/TopicFooter.vue'
 import Time from './../components/Time.vue'
 // 导入标签组件
 import Tags from './../components/Tags.vue'
-// 导入话题内容
-import TopicContent from './../components/TopicContent.vue'
 // 导入重新编辑
 import Rewrite from './../components/Rewrite.vue'
 // 导入发帖人个人信息
 import KUNGalgamerInfo from './../components/KUNGalgamerInfo.vue'
 
-const props = defineProps<{
-  replyIDs: number[]
+import { TopicReply } from '@/api/index'
+
+defineProps<{
+  repliesData: TopicReply[]
 }>()
 </script>
 
 <template>
   <!-- 其它人的回复 -->
-  <div class="other-topic-container">
+  <div
+    class="other-topic-container"
+    v-for="(reply, index) in repliesData"
+    :key="index"
+  >
     <!-- 每个人的单个话题 -->
     <!-- 楼层标志 -->
-    <div class="floor"><span>F1</span></div>
+    <div class="floor">
+      <span>F{{ reply.floor }}</span>
+    </div>
     <!-- 其他人话题内容区的容器 -->
     <div class="container">
       <!-- 其它人回复的内容区 -->
@@ -37,7 +43,7 @@ const props = defineProps<{
         <!-- 其他人回复的上部 -->
         <div class="article">
           <!-- 其它人回复的上部左侧区域 -->
-          <KUNGalgamerInfo />
+          <KUNGalgamerInfo :user="reply.r_user" />
           <!-- 其它人回复的上部右侧区域 -->
           <div class="right">
             <!-- 右侧的上部区域 -->
@@ -46,24 +52,35 @@ const props = defineProps<{
               <div class="reply">
                 <!-- TODO: 跳转到页面中话题的位置 -->
                 <span
-                  >回复给@<router-link to="#">啊这可海星啊这</router-link></span
+                  >回复给 @
+                  <router-link to="#">{{
+                    reply.to_user.name
+                  }}</router-link></span
                 >
               </div>
               <!-- 上部区域的右边 -->
-              <Rewrite />
+              <Rewrite v-if="reply.edited" :time="reply.edited" />
             </div>
             <!-- 右侧部分分文本 -->
-            <TopicContent />
+            <div class="text" v-html="reply.content"></div>
           </div>
         </div>
         <!-- 其他人回复的下部 -->
         <div class="bottom">
-          <Tags />
-          <Time />
+          <Tags :tags="reply.tags" />
+          <Time :time="reply.time" />
         </div>
       </div>
       <!-- 其它人回复的底部 -->
-      <TopicFooter :isOthersTopic="true" />
+      <TopicFooter
+        :isOthersTopic="true"
+        :info="{
+          likes: reply.likes,
+          dislikes: reply.dislikes,
+          replies: reply.cid.length,
+          upvotes: reply.upvote,
+        }"
+      />
       <Comments />
     </div>
   </div>
@@ -163,6 +180,14 @@ const props = defineProps<{
   }
 }
 
+/* 内容区右侧的话题展示区 */
+.text {
+  font-size: 15px;
+  padding: 17px;
+  border-left: 1px solid var(--kungalgame-blue-1);
+  color: var(--kungalgame-font-color-3);
+}
+
 @media (max-width: 1000px) {
   .top {
     flex-direction: column;
diff --git a/src/views/topic/content/components/Time.vue b/src/views/topic/content/components/Time.vue
index 20a82ad8..27a7a4b4 100644
--- a/src/views/topic/content/components/Time.vue
+++ b/src/views/topic/content/components/Time.vue
@@ -2,8 +2,8 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 
-const props = defineProps<{
-  time: number
+defineProps<{
+  time?: number
 }>()
 </script>
 
diff --git a/src/views/topic/content/components/TopicContent.vue b/src/views/topic/content/components/TopicContent.vue
deleted file mode 100644
index 1575ea07..00000000
--- a/src/views/topic/content/components/TopicContent.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<!-- 这是话题的内容区 -->
-<script setup lang="ts"></script>
-
-<template>
-  <!-- 内容区右侧的话题展示区 -->
-  <div class="text">
-    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/* 内容区右侧的话题展示区 */
-.text {
-  font-size: 15px;
-  padding: 17px;
-  border-left: 1px solid var(--kungalgame-blue-1);
-  color: var(--kungalgame-font-color-3);
-}
-</style>
diff --git a/src/views/topic/content/components/TopicFooter.vue b/src/views/topic/content/components/TopicFooter.vue
index e2e83f8d..49637260 100644
--- a/src/views/topic/content/components/TopicFooter.vue
+++ b/src/views/topic/content/components/TopicFooter.vue
@@ -15,12 +15,13 @@ const { isEdit } = storeToRefs(settingsStore)
 // 接受父组件的传值
 defineProps<{
   isOthersTopic?: boolean
-  topicInfo?: {
-    views: number
+  info?: {
+    views?: number
     likes: number
     dislikes: number
     replies: number
     upvotes: number
+    components?: number
   }
 }>()
 
@@ -38,22 +39,22 @@ const handelReply = () => {
         <!-- 查看数量 -->
         <li>
           <span class="icon"><Icon icon="ic:outline-remove-red-eye" /></span>
-          {{ topicInfo?.views }}
+          {{ info?.views }}
         </li>
         <!-- 推话题 -->
         <li>
           <span class="icon"><Icon icon="bi:rocket" /></span>
-          {{ topicInfo?.upvotes }}
+          {{ info?.upvotes }}
         </li>
         <!-- 点赞 -->
         <li>
           <span class="icon"><Icon icon="line-md:thumbs-up-twotone" /></span>
-          {{ topicInfo?.likes }}
+          {{ info?.likes }}
         </li>
         <!-- 踩 -->
         <li>
           <span class="icon"><Icon icon="line-md:thumbs-down-twotone" /></span>
-          {{ topicInfo?.dislikes }}
+          {{ info?.dislikes }}
         </li>
       </ul>
     </div>