feat: fetch comment

src/api/topic/index.ts

@@ -14,7 +14,9 @@ const topicURLs = {
   // 根据话题 id 获取话题回复
   getRepliesByPid: `/topic/detail`,
   // 创建单个回复
-  postReplyByPidApi: `/topic/detail`,
+  postReplyByPid: `/topic/detail`,
+  // 获取一个回复下的所有评论
+  getCommentsByReplyRid: `/topic/detail`,
 }
 
 // 左侧相同标签下的其它话题
@@ -84,28 +86,12 @@ export async function getRepliesByPidApi(
   }
 }
 
-// 获取一个回复下面的评论
-// export async function getCommentsByReplyRidApi(
-//   request: Topic.TopicReplyRequestData
-// ): Promise<Topic.TopicReplyResponseData> {
-//   try {
-//     const url = `${topicURLs.getRepliesByPid}/${request.tid}/reply`
-
-//     const response = await fetchGet<Topic.TopicReplyResponseData>(url)
-
-//     return response
-//   } catch (error) {
-//     console.log(error)
-//     throw new Error('Failed to fetch comments')
-//   }
-// }
-
 // 根据 pid 创建一个评论
 export async function postReplyByPidApi(
   request: Topic.TopicCreateReplyRequestData
 ): Promise<Topic.TopicCreateReplyResponseData> {
   try {
-    const url = `${topicURLs.postReplyByPidApi}/${request.tid}/reply`
+    const url = `${topicURLs.postReplyByPid}/${request.tid}/reply`
 
     const response = await fetchPost<Topic.TopicCreateReplyResponseData>(
       url,
@@ -118,3 +104,20 @@ export async function postReplyByPidApi(
     throw new Error('Failed to create reply')
   }
 }
+
+// 获取一个回复下面的评论
+export async function getCommentsByReplyRidApi(
+  tid: number,
+  rid: number
+): Promise<Topic.TopicCommentResponseData> {
+  try {
+    const url = `${topicURLs.getCommentsByReplyRid}/${tid}/reply?rid=\`${rid}\``
+
+    const response = await fetchGet<Topic.TopicCommentResponseData>(url)
+
+    return response
+  } catch (error) {
+    console.log(error)
+    throw new Error('Failed to fetch comments')
+  }
+}

src/api/topic/types/topic.ts

@@ -68,7 +68,24 @@ export interface TopicCreateReplyRequestData {
 }
 
 // 评论的数据
-export interface TopicComment {}
+export interface TopicComment {
+  rid: number
+  tid: number
+  c_uid: Omit<TopicUserInfo, 'moemoepoint'>
+  to_uid: TopicToUserInfo
+  content: string
+  likes: number[]
+  dislikes: number[]
+}
+
+// 发表评论的请求数据
+export interface TopicCreateCommentRequestData {
+  tid: number
+  rid: number
+  c_uid: number
+  to_uid: number
+  content: string
+}
 
 // 获取单个话题响应数据的格式
 export type TopicDetailResponseData = KUNGalgameResponseData<TopicDetail>
@@ -76,5 +93,12 @@ export type TopicDetailResponseData = KUNGalgameResponseData<TopicDetail>
 // 单个话题回复响应数据的格式，返回的是多条回复数据，是一个数组
 export type TopicReplyResponseData = KUNGalgameResponseData<TopicReply[]>
 
-// 创建单个回复后返回的恢复数据
+// 创建单个回复后返回的回复数据
 export type TopicCreateReplyResponseData = KUNGalgameResponseData<TopicReply>
+
+// 单个回复底下所有的评论数据，是一个数组
+export type TopicCommentResponseData = KUNGalgameResponseData<TopicComment[]>
+
+// 创建单个评论后返回的评论数据
+export type TopicCreateCommentResponseData =
+  KUNGalgameResponseData<TopicComment>

src/store/modules/topic.ts

@@ -1,23 +1,26 @@
 /* 话题详情的 store */
 import { defineStore } from 'pinia'
-
+// 话题
 import {
-  getRelatedTopicsByTagsApi,
-  getPopularTopicsByUserUidApi,
-  getRepliesByPidApi,
   getTopicByTidApi,
-  TopicCreateReplyRequestData,
-  TopicCreateReplyResponseData,
-  postReplyByPidApi,
-} from '@/api/index'
-import {
-  TopicAsideOtherTagRequestData,
-  TopicAsideMasterRequestData,
-  TopicAsideResponseData,
   TopicDetailResponseData,
+  TopicAsideOtherTagRequestData,
+  getRelatedTopicsByTagsApi,
+  TopicAsideMasterRequestData,
+  getPopularTopicsByUserUidApi,
+  TopicAsideResponseData,
+} from '@/api'
+// 回复
+import {
+  getRepliesByPidApi,
+  postReplyByPidApi,
   TopicReplyRequestData,
   TopicReplyResponseData,
-} from '@/api/index'
+  TopicCreateReplyRequestData,
+  TopicCreateReplyResponseData,
+} from '@/api'
+// 评论
+import { getCommentsByReplyRidApi, TopicCommentResponseData } from '@/api'
 
 // 回复的缓存
 interface ReplyDraft {
@@ -218,6 +221,18 @@ export const useKUNGalgameTopicStore = defineStore({
           })
       })
     },
+    // 获取评论
+    getComments(tid: number, rid: number): Promise<TopicCommentResponseData> {
+      return new Promise((resolve, reject) => {
+        getCommentsByReplyRidApi(tid, rid)
+          .then((res) => {
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
     // 设置回复草稿为原始值，用于发布按钮
     resetReplyDraft() {
       this.replyDraft.textCount = 0

src/views/edit/components/Button.vue

@@ -36,9 +36,9 @@ const checkPublish = (topicData: EditCreateTopicRequestData) => {
     // 内容为空的话，警告
     message('Content cannot be empty!', '内容不可为空！', 'warn')
     return false
-  } else if (topicData.tags.length) {
+  } else if (!topicData.tags.length) {
     message('Please use at least one tag!', '请至少使用一个标签！', 'warn')
-  } else if (topicData.category.length) {
+  } else if (!topicData.category.length) {
     message(
       'Please select at least one category!',
       '请至少选择一个分类！',

src/views/topic/KUNGalgameTopicPage.vue

@@ -18,10 +18,10 @@ import { TopicDetail, TopicReply } from '@/api'
 // Aside
 import Aside from './aside/Aside.vue'
 import Master from './components/Master.vue'
-import Reply from './components/Reply.vue'
+import Reply from './components/reply/Reply.vue'
 // 异步导入回复面板
 const ReplyPanel = defineAsyncComponent(
-  () => import('./components/ReplyPanel.vue')
+  () => import('./components/reply/ReplyPanel.vue')
 )
 
 // 导入设置面板 store

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

@@ -1,4 +1,8 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// 引入图标字体
+import { Icon } from '@iconify/vue'
+import { debounce } from '@/utils/debounce'
+</script>
 
 <template>
   <div class="panel">
@@ -6,9 +10,10 @@
       <div class="title"><span>kun</span>评论 @<span>啊这可海星</span></div>
       <div class="confirm">
         <button>发布评论</button>
-        <button></button>
+        <button>关闭</button>
       </div>
     </div>
+    <!-- textarea 容器 -->
     <div class="container">
       <textarea
         name="comment"
@@ -32,11 +37,12 @@
   display: flex;
   width: 100%;
   justify-content: space-between;
+  align-items: center;
   color: var(--kungalgame-font-color-3);
+  margin-bottom: 10px;
 }
 
 .title {
-  margin-bottom: 10px;
   span {
     &:nth-child(1) {
       margin-right: 10px;
@@ -53,10 +59,13 @@
 }
 
 .confirm {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   button {
     cursor: pointer;
     transition: all 0.2s;
-    color: var(--kungalgame-font-color-3);
+    color: var(--kungalgame-blue-4);
     padding: 2px 7px;
     border: 1px solid var(--kungalgame-blue-4);
     border-radius: 5px;
@@ -65,6 +74,9 @@
       background-color: var(--kungalgame-blue-4);
       color: var(--kungalgame-white);
     }
+    &:nth-child(2) {
+      margin-left: 10px;
+    }
   }
 }
 
@@ -72,15 +84,13 @@
   display: flex;
   textarea {
     color: var(--kungalgame-font-color-3);
-    transition: all 0.2s;
     flex: 1;
     margin-bottom: 20px;
     width: 100%;
     border: 1px solid var(--kungalgame-blue-4);
-    background-color: var(--kungalgame-trans-white-5);
+    background-color: var(--kungalgame-trans-white-9);
     border-radius: 5px;
     padding: 5px;
-    box-shadow: var(--shadow);
     &:focus {
       border: 1px solid var(--kungalgame-pink-3);
     }

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

@@ -2,8 +2,34 @@
   这是回复话题下方的评论区，包含了所有的评论，是一个单独的组件，它的子组件是单个评论
  -->
 <script setup lang="ts">
+import { onMounted, ref, toRaw } from 'vue'
 import { Icon } from '@iconify/vue'
 import CommentPanel from './CommentPanel.vue'
+
+import { TopicReply, TopicComment } from '@/api/index'
+
+// 导入话题页面 store
+import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+import { storeToRefs } from 'pinia'
+
+const { tid, rid } = defineProps<{
+  tid: number
+  rid: number
+}>()
+
+const { scrollToReplyId } = storeToRefs(useKUNGalgameTopicStore())
+
+// 评论的数据
+const commentsData = ref<TopicComment[]>()
+
+const getComments = async (tid: number, rid: number) => {
+  return (await useKUNGalgameTopicStore().getComments(tid, rid)).data
+}
+
+onMounted(async () => {
+  commentsData.value = await getComments(tid, rid)
+  console.log(toRaw(commentsData.value))
+})
 </script>
 
 <template>

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

@@ -4,18 +4,19 @@
   这个区域包含所有人回复给楼主的话题，其中每个人的话题将会被拆分成为单独的组件
  -->
 <script setup lang="ts">
+import { ref } from 'vue'
 // 导入评论组件
-import Comments from '../components/Comments.vue'
+import Comments from '../comment/Comments.vue'
 // 导入 Footer 组件
-import TopicFooter from './../components/TopicFooter.vue'
+import TopicFooter from '../TopicFooter.vue'
 // 导入发布时间组件
-import Time from './../components/Time.vue'
+import Time from '../Time.vue'
 // 导入标签组件
-import Tags from './../components/Tags.vue'
+import Tags from '../Tags.vue'
 // 导入重新编辑
-import Rewrite from './../components/Rewrite.vue'
-// 导入发帖人个人信息
-import KUNGalgamerInfo from './../components/KUNGalgamerInfo.vue'
+import Rewrite from '../Rewrite.vue'
+// 导入发布人个人信息
+import KUNGalgamerInfo from '../KUNGalgamerInfo.vue'
 
 import { TopicReply } from '@/api/index'
 
@@ -94,7 +95,7 @@ defineProps<{
             }"
             :rUser="reply.r_user"
           />
-          <Comments />
+          <Comments :tid="reply.tid" :rid="reply.rid" />
         </div>
       </div>
     </div>