pref: standardized api and interface naming

src/api.d.ts

@@ -1,4 +1,4 @@
-/** 所有 api 接口的响应数据都应该准守该格式 */
+/** 所有 api 接口的响应数据都为该格式 */
 interface KUNGalgameResponseData<T> {
   code: number
   message: string

src/api/edit/index.ts

@@ -5,12 +5,12 @@ const editURLs = {
   create: `/edit/topic`,
 }
 
-export async function postNewTopicApi(
-  newTopicData: Edit.CreateTopicRequestData
-): Promise<Edit.CreateTopicResponseData> {
+export async function postEditNewTopicApi(
+  newTopicData: Edit.EditCreateTopicRequestData
+): Promise<Edit.EditCreateTopicResponseData> {
   try {
     // 调用 fetchPost 函数
-    const response = await fetchPost<Edit.CreateTopicResponseData>(
+    const response = await fetchPost<Edit.EditCreateTopicResponseData>(
       editURLs.create,
       newTopicData
     )

src/api/edit/types/edit.ts

@@ -1,4 +1,4 @@
-export interface CreateTopicRequestData {
+export interface EditCreateTopicRequestData {
   title: string
   content: string
   time: number
@@ -7,7 +7,7 @@ export interface CreateTopicRequestData {
   uid: string
 }
 
-export interface KUNGalgameTopic {
+export interface EditKUNGalgameTopic {
   tid: number
   // title: string
   // content: string
@@ -29,4 +29,5 @@ export interface KUNGalgameTopic {
 }
 
 // 创建话题响应数据的格式
-export type CreateTopicResponseData = KUNGalgameResponseData<KUNGalgameTopic>
+export type EditCreateTopicResponseData =
+  KUNGalgameResponseData<EditKUNGalgameTopic>

src/api/home/index.ts

@@ -31,10 +31,12 @@ export async function getHomeTopicApi(
 }
 
 // 首页今日热门话题
-export async function getHomeNavHotTopicApi(): Promise<Home.HotTopicResponseData> {
+export async function getHomeNavHotTopicApi(): Promise<Home.HomeHotTopicResponseData> {
   try {
     // 调用 fetchPost 函数
-    const response = await fetchGet<Home.HotTopicResponseData>(homeURLs.navHot)
+    const response = await fetchGet<Home.HomeHotTopicResponseData>(
+      homeURLs.navHot
+    )
 
     return response
   } catch (error) {
@@ -45,10 +47,12 @@ export async function getHomeNavHotTopicApi(): Promise<Home.HotTopicResponseData
 }
 
 // 首页今日最新话题
-export async function getHomeNavNewTopicApi(): Promise<Home.NewTopicResponseData> {
+export async function getHomeNavNewTopicApi(): Promise<Home.HomeNewTopicResponseData> {
   try {
     // 调用 fetchPost 函数
-    const response = await fetchGet<Home.NewTopicResponseData>(homeURLs.navNew)
+    const response = await fetchGet<Home.HomeNewTopicResponseData>(
+      homeURLs.navNew
+    )
 
     return response
   } catch (error) {

src/api/home/types/home.ts

@@ -1,16 +1,16 @@
-interface UserInfo {
+interface HomeUserInfo {
   uid: number
   avatar: string
   name: string
 }
 
-export interface HotTopic {
+export interface HomeHotTopic {
   tid: number
   title: string
   popularity: number
 }
 
-export interface NewTopic {
+export interface HomeNewTopic {
   tid: number
   title: string
   time: number
@@ -38,16 +38,16 @@ export interface HomeTopic {
   tags: Array<string>
   category: Array<string>
   popularity: number
-  uid: UserInfo
+  uid: HomeUserInfo
 }
 
 // 首页响应数据的格式
 
 // 左侧热门话题 10 个
-export type HotTopicResponseData = KUNGalgameResponseData<HotTopic[]>
+export type HomeHotTopicResponseData = KUNGalgameResponseData<HomeHotTopic[]>
 
 // 左侧最新话题 10 个
-export type NewTopicResponseData = KUNGalgameResponseData<NewTopic[]>
+export type HomeNewTopicResponseData = KUNGalgameResponseData<HomeNewTopic[]>
 
 // 中间展示的话题
 export type HomeTopicResponseData = KUNGalgameResponseData<HomeTopic[]>

src/api/index.ts

@@ -0,0 +1,19 @@
+/**
+ * 这里的 interface 及 api 命名需遵循 请求方式 + 文件夹名 + Others 的规范，保证命名不重复
+ */
+
+// 暴露出所有 interface
+export * from './edit/types/edit'
+export * from './home/types/home'
+export * from './kungalgamer/types/kungalgamer'
+export * from './login/types/login'
+export * from './topic/types/topic'
+export * from './update-log/types/updateLog'
+
+// 暴露出所有 api
+export * from './edit'
+export * from './home'
+export * from './kungalgamer'
+export * from './login'
+export * from './topic'
+export * from './update-log'

src/api/kungalgamer/index.ts

@@ -1,9 +1,7 @@
 import { KUNGalgamer } from './types/kungalgamer'
 import { fetchGet } from '@/utils/request'
 
-export async function getSingleKUNGalgamerApi(
-  id: number
-): Promise<KUNGalgamer> {
+export async function getKUNGalgamerInfoApi(id: number): Promise<KUNGalgamer> {
   try {
     const url = `/kungalgamer/${id}`
 

src/api/topic/index.ts

@@ -3,8 +3,10 @@ import * as Topic from './types/topic'
 
 const topicURLs = {
   getTopicByTid: `/topic/detail`,
+  getRepliesByPid: `/topic/detail`,
 }
 
+// 获取单个话题
 export async function getTopicByTid(
   tid: number
 ): Promise<Topic.TopicDetailResponseData> {
@@ -19,3 +21,35 @@ export async function getTopicByTid(
     throw new Error('Failed to fetch topic')
   }
 }
+
+// 根据话题 id 获取话题回复
+export async function getRepliesByPid(
+  request: Topic.ReplyRequestData
+): 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 topic')
+  }
+}
+
+// 获取一个回复下面的评论
+export async function getCommentsByReplyRid(
+  request: Topic.ReplyRequestData
+): 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 topic')
+  }
+}

src/api/topic/types/topic.ts

@@ -1,5 +1,5 @@
 // 话题主，回复主的信息
-export interface UserInfo {
+export interface TopicUserInfo {
   uid: number
   name: string
   avatar: string
@@ -7,7 +7,7 @@ export interface UserInfo {
 }
 
 // 被回复的用户信息
-export interface ToUserInfo {
+export interface TopicToUserInfo {
   uid: number
   name: string
 }
@@ -25,16 +25,25 @@ export interface TopicDetail {
   upvotes: number
   tags: string[]
   edited: number
-  user: UserInfo
+  user: TopicUserInfo
   rid: number[]
 }
 
+// 回复的请求数据
+export interface TopicReplyRequestData {
+  tid: number
+  page?: number
+  limit?: number
+  sortField: string
+  sortOrder: string
+}
+
 // 回复的数据
 export interface TopicReply {
   rid: number
   tid: number
-  r_user: UserInfo
-  to_user: ToUserInfo
+  r_user: TopicUserInfo
+  to_user: TopicToUserInfo
   edited: string
   content: string
   likes: number
@@ -43,6 +52,9 @@ export interface TopicReply {
   cid: number[]
 }
 
+// 评论的数据
+export interface TopicComment {}
+
 // 获取单个话题响应数据的格式
 export type TopicDetailResponseData = KUNGalgameResponseData<TopicDetail>
 

src/api/type.ts

@@ -1,3 +0,0 @@
-export * from './kungalgamer/types/kungalgamer'
-export * from './topic/types/topic'
-export * from './login/types/login'

src/api/update-log/index.ts

@@ -1,7 +1,7 @@
 import { fetchGet } from '@/utils/request'
 
-import { KUNGalgameUpdateLog } from './types/updateLog'
+import { UpdateLog } from './types/updateLog'
 
-export async function getUpdateLogApi(): Promise<KUNGalgameUpdateLog[]> {
-  return await fetchGet<KUNGalgameUpdateLog[]>(`/update/logs`)
+export async function getUpdateLogApi(): Promise<UpdateLog[]> {
+  return await fetchGet<UpdateLog[]>(`/update/logs`)
 }

src/api/update-log/types/updateLog.ts

@@ -1,5 +1,5 @@
 // 更新日志的数据接口
-export interface KUNGalgameUpdateLog {
+export interface UpdateLog {
   // 更新描述
   description: string
   // 更新发布时间

src/store/modules/edit.ts

@@ -1,10 +1,10 @@
 /* 编辑区的 store */
 import { defineStore } from 'pinia'
-import { postNewTopicApi } from '@/api/edit/index'
+import { postEditNewTopicApi } from '@/api/index'
 import {
-  CreateTopicRequestData,
-  CreateTopicResponseData,
-} from '@/api/edit/types/edit'
+  EditCreateTopicRequestData,
+  EditCreateTopicResponseData,
+} from '@/api/index'
 
 interface Topic {
   // 话题标题
@@ -33,10 +33,10 @@ export const useKUNGalgameEditStore = defineStore({
   actions: {
     // 创建话题
     createNewTopic(
-      createTopicRequestData: CreateTopicRequestData
-    ): Promise<CreateTopicResponseData> {
+      createTopicRequestData: EditCreateTopicRequestData
+    ): Promise<EditCreateTopicResponseData> {
       return new Promise((resolve, reject) => {
-        postNewTopicApi(createTopicRequestData)
+        postEditNewTopicApi(createTopicRequestData)
           .then((res) => {
             resolve(res)
           })

src/store/modules/home.ts

@@ -1,12 +1,9 @@
 /* 主页的 store */
 import { defineStore } from 'pinia'
 
-import { getHomeTopicApi } from '@/api/home/index'
+import { getHomeTopicApi } from '@/api/index'
 
-import {
-  HomeTopicRequestData,
-  HomeTopicResponseData,
-} from '@/api/home/types/home'
+import { HomeTopicRequestData, HomeTopicResponseData } from '@/api/index'
 
 interface HomeStore {
   keywords: string

src/store/modules/kungalgamer.ts

@@ -3,8 +3,8 @@
  */
 import { defineStore } from 'pinia'
 import { type Ref, ref } from 'vue'
-import { LoginRequestData, LoginResponseData } from '@/api/type'
-import { postLoginDataApi } from '@/api/login/index'
+import { LoginRequestData, LoginResponseData } from '@/api/index'
+import { postLoginDataApi } from '@/api/index'
 
 interface UserState {
   uid: Ref<number>

src/store/modules/topic.ts

@@ -1,22 +1,36 @@
 /* 话题详情的 store */
 import { defineStore } from 'pinia'
 
-interface Tag {
-  index: number
-  name: string
+import { getRepliesByPid } from '@/api/index'
+import { TopicReplyRequestData, TopicReplyResponseData } from '@/api/index'
+
+// 回复的缓存
+interface ReplyDraft {
+  r_uid: number
+  to_uid: number
+  content: string
+  tags: string[]
 }
 
+// 评论的缓存
+interface CommentDraft {
+  c_uid: number
+  to_uid: number
+  content: string
+}
+
+// 话题页面的 store
 interface Topic {
   // 是否正在被编辑
   isEdit: boolean
   // 是否显示高级编辑模式
   isShowAdvance: boolean
-  // 话题标题
-  title: string
-  // 话题内容
-  article: string
-  // 话题标签
-  tags: Tag[]
+  // 回复的缓存
+  replyDraft: ReplyDraft
+  // 获取回复的请求接口格式
+  replyRequest: TopicReplyRequestData
+  // 评论的缓存
+  commentDraft: CommentDraft
 }
 
 export const useKUNGalgameTopicStore = defineStore({
@@ -25,8 +39,44 @@ export const useKUNGalgameTopicStore = defineStore({
   state: (): Topic => ({
     isEdit: false,
     isShowAdvance: false,
-    title: '',
-    article: '',
-    tags: [],
+    replyDraft: {
+      r_uid: 0,
+      to_uid: 0,
+      content: '',
+      tags: [],
+    },
+    replyRequest: {
+      tid: 0,
+      page: 0,
+      limit: 0,
+      sortField: '',
+      sortOrder: '',
+    },
+    commentDraft: {
+      c_uid: 0,
+      to_uid: 0,
+      content: '',
+    },
   }),
+  actions: {
+    // 获取回复
+    getReplies(tid: number): Promise<TopicReplyResponseData> {
+      return new Promise((resolve, reject) => {
+        const requestData: TopicReplyRequestData = {
+          tid: tid,
+          page: this.replyRequest.page,
+          limit: this.replyRequest.limit,
+          sortField: this.replyRequest.sortField,
+          sortOrder: this.replyRequest.sortOrder,
+        }
+        getRepliesByPid(requestData)
+          .then((res) => {
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+  },
 })

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

@@ -2,7 +2,7 @@
 import { ref, watch } from 'vue'
 import SingleTopic from './SingleTopic.vue'
 
-import { HomeTopic } from '@/api/home/types/home'
+import { HomeTopic } from '@/api/index'
 
 // 导入主页 store
 import { useKUNGalgameHomeStore } from '@/store/modules/home'

src/views/topic/content/KUNGalgameTopicContent.vue

@@ -6,13 +6,34 @@
   页面被拆成 3 个大组件，这是话题部分
  -->
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } 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'
+
+// 导入 topic store
+import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+import { storeToRefs } from 'pinia'
+
+const requestData = storeToRefs(useKUNGalgameTopicStore())
+
+// 在组件中定义响应式的话题数据
+const topics = ref<HomeTopic[]>([])
+
+// 在组件挂载时调用 fetchTopics 获取话题数据（watch 大法好！）
+// watch(
+//   [requestData.keywords, requestData.sortField, requestData.sortOrder],
+//   async () => {
+//     topics.value = (await useKUNGalgameHomeStore().getHomeTopic()).data
+//   },
+//   { immediate: true }
+// )
+
 const topicData = ref<TopicDetailResponseData>()
 onMounted(async () => {
   const res = await getTopicByTid(1)