add topic info api, rebuild main page topic

.vscode/settings.json

@@ -13,6 +13,7 @@
     "kungalgamer",
     "Licence",
     "loli",
+    "moemoe",
     "moemoepoint",
     "non-moe",
     "persistedstate",

server/routes/topic.js

@@ -18,6 +18,8 @@ const topics = [
     topicViews: 10007,
     topicLikes: 1007,
     topicDislikes: 17,
+    /* 帖子的回复数 */
+    topicReplyCount: 1,
     topicPartition: ['galgame'],
     topicReplies: {
       reply: [
@@ -27,7 +29,7 @@ const topics = [
           replier: {
             avatar: './assets/images/topic.jpg',
             name: '鲲鲲鲲',
-            cutenessPoints: 107,
+            moemoePoints: 107,
           },
           repliedTo: 'KUN',
           isEdited: true,
@@ -67,14 +69,13 @@ const topics = [
               commentContent: '鲲鲲鲲鲲鲲,啊这可海星',
             },
           ],
-          replyCount: 1,
         },
         {
           replyId: 2,
           replier: {
             avatar: './assets/images/topic.jpg',
             name: 'KUN',
-            cutenessPoints: 107,
+            moemoePoints: 107,
           },
           repliedTo: 'KUN',
           isEdited: true,
@@ -96,17 +97,16 @@ const topics = [
               commentContent: '鲲鲲鲲鲲鲲,啊这可海星',
             },
           ],
-          replyCount: 1,
         },
       ],
-      replyCount: 1,
     },
-    topicStatus: '正常',
+    /* 两种状态, 0正常, 1 封禁 */
+    topicStatus: 0,
     topicIsEdited: false,
     topicAuthor: {
       avatar: './assets/images/KUN.jpg',
       name: 'KUN',
-      cutenessPoints: 1007,
+      moemoePoints: 1007,
     },
   },
   {
@@ -121,6 +121,8 @@ const topics = [
     topicViews: 10007,
     topicLikes: 1007,
     topicDislikes: 17,
+    /* 帖子的回复数 */
+    topicReplyCount: 1,
     topicPartition: ['galgame', '技术交流'],
     topicReplies: {
       reply: [
@@ -130,7 +132,7 @@ const topics = [
           replier: {
             avatar: './assets/images/topic.jpg',
             name: '鲲鲲鲲',
-            cutenessPoints: 107,
+            moemoePoints: 107,
           },
           repliedTo: 'KUN',
           isEdited: true,
@@ -170,14 +172,13 @@ const topics = [
               commentContent: '鲲鲲鲲鲲鲲,啊这可海星',
             },
           ],
-          replyCount: 1,
         },
         {
           replyId: 2,
           replier: {
             avatar: './assets/images/topic.jpg',
             name: 'KUN',
-            cutenessPoints: 107,
+            moemoePoints: 107,
           },
           repliedTo: 'KUN',
           isEdited: true,
@@ -199,30 +200,30 @@ const topics = [
               commentContent: '鲲鲲鲲鲲鲲,啊这可海星',
             },
           ],
-          replyCount: 1,
         },
       ],
-      replyCount: 1,
     },
-    topicStatus: '正常',
+    /* 两种状态, 0正常, 1 封禁 */
+    topicStatus: 0,
     topicIsEdited: false,
     topicAuthor: {
       avatar: './assets/images/KUN.jpg',
       name: 'KUN',
-      cutenessPoints: 1007,
+      moemoePoints: 1007,
     },
   },
 ]
 
 // 获取指定帖子的路由
 router.get('/:id', (req, res) => {
-  const topicId = parseInt(req.params.id)
-  const topic = topics.find((topic) => topic.topicId === topicId)
+  const id = parseInt(req.params.id)
+  const topic = topics.find((topic) => topic.topicId === id)
 
   if (topic) {
-    res.json(topic)
+    const { topicReplies, ...topicData } = topic
+    res.json(topicData)
   } else {
-    res.status(404).json({ error: 'Topic Not Found!' })
+    res.status(404).json({ error: 'Topic not found' })
   }
 })
 

server/routes/user.js

@@ -35,7 +35,7 @@ const users = [
     token: 'azkhx',
     avatar: './assets/images/topic.jpg',
     registrationTime: Date.now(),
-    cutePoints: 11000,
+    moemoePoints: 11000,
     bio: '啊这可海星',
     likesCount: 1007,
     commentsCount: 20,

src/api/topic/index.ts

@@ -0,0 +1,15 @@
+import { request } from '@/utils/request'
+
+import { KUNGalgameTopic } from './types/topic'
+
+export async function getTopicApi(id: number) {
+  return await request<KUNGalgameTopic>(`/topic/${id}`)
+}
+
+export async function getTopicReplyApi(id: number) {
+  return await request<KUNGalgameTopic>(`/topic/reply/${id}`)
+}
+
+export async function getTopicCommentApi(id: number) {
+  return await request<KUNGalgameTopic>(`/topic/comment/${id}`)
+}

src/api/topic/types/topic.ts

@@ -0,0 +1,91 @@
+// 发帖人，评论人的数据接口
+export interface KUNGalgameAuthor {
+  // 头像
+  avatar: string
+  // 名字
+  name: string
+  // 萌萌点
+  moemoePoints: number
+}
+
+// 帖子评论接口
+export interface KUNGalgameTopicComment {
+  // 评论 ID
+  commentId: number
+  // 评论者的头像
+  commenterAvatar: string
+  // 评论者的名字
+  commenterName: string
+  // 评论给谁
+  commentedTo: string
+  // 评论的点赞数
+  commentUpvotes: number
+  // 评论的踩
+  commentDislikes: number
+  // 评论的内容
+  commentContent: string
+}
+
+// 帖子回复接口
+export interface KUNGalgameTopicReply {
+  // 回复的 ID
+  replyId: number
+  //   回复者的个人信息
+  replier: KUNGalgameAuthor
+  //   回复给谁
+  repliedTo: string
+  //   是否重新编辑
+  isEdited: boolean
+  //   重新编辑的时间戳
+  editedTimestamp: number
+  //   回复的时间戳
+  replyTime: number
+  //   回复内容
+  replyContent: string
+  //   回复的被推数
+  replyUpvotes: number
+  //   回复的点赞数
+  replyLikes: number
+  //   回复的点踩数
+  replyDislikes: number
+  //   回复的评论
+  replyComments: KUNGalgameTopicComment[]
+  //   回复的数量
+  replyCount: number
+}
+
+// 单个帖子信息接口
+export interface KUNGalgameTopic {
+  // 帖子 ID
+  topicId: number
+  //   帖子标题
+  topicTitle: string
+  //   帖子的楼层数
+  topicFloorCount: number
+  //   帖子的内容
+  topicContent: string
+  //   帖子的发布时间
+  topicPublishTime: number
+  //   帖子的热度值
+  topicPopularity: number
+  //   帖子的标签
+  topicTags: string[]
+  //   帖子的被推数
+  topicUpvotes: number
+  //   帖子的点击数
+  topicViews: number
+  //   帖子的点赞数
+  topicLikes: number
+  //   帖子的点踩数
+  topicDislikes: number
+  //   帖子的回复数
+  topicReplyCount: 1
+  //   帖子的分区
+  topicPartition: string[]
+  //   帖子的状态
+  topicStatus: number
+  //   帖子是否被重新编辑
+  topicIsEdited: false
+  //   帖子的发布者
+  topicAuthor: KUNGalgameAuthor
+}

src/utils/request.ts

@@ -1,9 +1,10 @@
 // request.ts
 
-export async function request(
+export async function request<T>(
   url: string,
   options: RequestInit = {}
-): Promise<Response> {
+): Promise<T> {
   const response = await fetch(url, options)
-  return response
+  const data = await response.json()
+  return data as T
 }

src/views/Home/content/article/MainPageArticle.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import ArticleHeader from './components/header/ArticleHeader.vue'
-import ArticleContent from './content/ArticleContent.vue'
+import ArticleContent from './components/ArticleContent.vue'
 </script>
 
 <template>
@@ -28,8 +28,6 @@ import ArticleContent from './content/ArticleContent.vue'
   /* 左侧文章区的总大小 */
   width: 100%;
   height: 100%;
-  /* 盒子的边显示在内侧 */
-  box-sizing: border-box;
   /* 文章区边上的颜色 */
   border: 1px solid var(--kungalgame-trans-blue-4);
   background-color: var(--kungalgame-trans-blue-0);

src/views/Home/content/article/components/ArticleContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import SingleTopic from './topic/SingleTopic.vue'
+import SingleTopic from './SingleTopic.vue'
 </script>
 
 <template>

src/views/Home/content/article/components/SingleTopic.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import UserPart from './components/UserPart.vue'
-import TopicPart from './components/TopicPart.vue'
+import UserPart from './UserPart.vue'
+import TopicPart from './TopicPart.vue'
 </script>
 <template>
   <div class="topic">