feat: get hot tags

src/api/edit/index.ts

@@ -1,14 +1,17 @@
-import { fetchPost } from '@/utils/request'
+import { fetchPost, fetchGet } from '@/utils/request'
 import type * as Edit from './types/edit'
+// 将对象转为请求参数的函数
+import objectToQueryParams from '@/utils/objectToQueryParams'
 
 const editURLs = {
   create: `/edit/topic`,
+  hotTags: `/tag/popular`,
 }
 
+// 创建话题
 export async function postEditNewTopicApi(
   newTopicData: Edit.EditCreateTopicRequestData
 ): Promise<Edit.EditCreateTopicResponseData> {
-  try {
   // 调用 fetchPost 函数
   const response = await fetchPost<Edit.EditCreateTopicResponseData>(
     editURLs.create,
@@ -17,9 +20,16 @@ export async function postEditNewTopicApi(
 
   // 返回创建好的话题 tid
   return response
-  } catch (error) {
-    // 处理错误
-    console.error(error)
-    throw new Error('Failed to create new topic')
-  }
+}
+
+// 获取 10 个热门 tag
+export async function getTopTagsApi(
+  requestData: Edit.EditGetHotTagsRequestData
+): Promise<Edit.EditGetHotTagsResponseData> {
+  const queryParams = objectToQueryParams(requestData)
+
+  const response = await fetchGet<Edit.EditGetHotTagsResponseData>(
+    `${editURLs.hotTags}?${queryParams}`
+  )
+  return response
 }

src/api/edit/types/edit.ts

@@ -28,6 +28,14 @@ export interface EditKUNGalgameTopic {
   // edited: number
 }
 
+// 获取热门 tag 的请求数据格式
+export interface EditGetHotTagsRequestData {
+  limit: number
+}
+
 // 创建话题响应数据的格式
 export type EditCreateTopicResponseData =
   KUNGalgameResponseData<EditKUNGalgameTopic>
+
+// 热门 tag 的返回数据格式
+export type EditGetHotTagsResponseData = KUNGalgameResponseData<string[]>

src/store/modules/edit.ts

@@ -1,9 +1,11 @@
 /* 编辑区的 store */
 import { defineStore } from 'pinia'
-import { postEditNewTopicApi } from '@/api/index'
+import { postEditNewTopicApi, getTopTagsApi } from '@/api/index'
 import {
   EditCreateTopicRequestData,
   EditCreateTopicResponseData,
+  EditGetHotTagsRequestData,
+  EditGetHotTagsResponseData,
 } from '@/api/index'
 
 interface Topic {
@@ -72,6 +74,19 @@ export const useKUNGalgameEditStore = defineStore({
           })
       })
     },
+    // 获取热门 tags
+    getHotTags(limit: number): Promise<EditGetHotTagsResponseData> {
+      return new Promise((resolve, reject) => {
+        const requestData: EditGetHotTagsRequestData = { limit }
+        getTopTagsApi(requestData)
+          .then((res) => {
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
     resetTopicData() {
       this.textCount = 0
       this.title = ''

src/views/Home/content/aside/components/AsideActive.vue

@@ -38,7 +38,7 @@ const props = defineProps(['isActive'])
 /* 侧边栏功能区 */
 .item-box {
   width: 100%;
-  height: 300px;
+  flex-grow: 1;
   /* 设置六个功能（模式、排行、背景等）分布的弹性盒 */
   display: flex;
   flex-direction: column;
@@ -48,7 +48,6 @@ const props = defineProps(['isActive'])
   width: 100%;
   /* 发布话题的按钮相对于功能区盒子的占比 */
   flex-grow: 1;
-  flex-shrink: 0;
   /* 发布按钮样式 */
   button {
     height: 100%;

src/views/Home/content/aside/components/Topic.vue

@@ -74,9 +74,6 @@ onMounted(async () => {
 <style lang="scss" scoped>
 /* 侧边栏动态推送话题的总容器 */
 .topic-wrap {
-  width: 100%;
-  height: 100%;
-
   /* 今日热门话题区域为竖直弹性盒 */
   display: flex;
   flex-direction: column;
@@ -84,7 +81,7 @@ onMounted(async () => {
 /* 标题六个字的样式 */
 .title-new,
 .title-hot {
-  height: 100%;
+  height: 50px;
   /* 设置（今日热门话题）居中 */
   display: flex;
   justify-content: center;
@@ -96,8 +93,7 @@ onMounted(async () => {
 }
 /* 展示热门话题的区域 */
 .topic-content {
-  height: 100%;
-
+  height: 43px;
   /* 热门话题标题部分为弹性盒 */
   display: flex;
   flex-direction: column;

src/views/edit/components/Tags.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, onBeforeMount } from 'vue'
+import { ref, computed, watch, onBeforeMount, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 // 全局消息组件（顶部）
 import message from '@/components/alert/Message'
@@ -27,16 +27,8 @@ const isShowKeywords = computed(() =>
     : replyDraft.value.isShowHotKeywords
 )
 
-// 临时数据，将会从后端返回 7 个热门 tag
-const hotTags = [
-  '啊这可海星',
-  '啊这可海星',
-  '啊这',
-  '啊这可海星az',
-  '啊这可海星啊这可海星',
-  '鲲鲲鲲',
-]
-
+// 后端返回的热门 tags
+const hotTags = ref<string[]>([])
 // 选中的 tag
 const selectedTags = ref<string[]>([])
 // input 框是否为 focus 状态
@@ -76,7 +68,7 @@ const handleTagClose = (tag: string) => {
 
 // 被选中后还留下的 tag
 const remainingTags = computed<string[]>(() => {
-  return hotTags.filter((tag) => !selectedTags.value.includes(tag))
+  return hotTags.value.filter((tag) => !selectedTags.value.includes(tag))
 })
 
 // 输入框事件，按下 enter 创建 tag，创建 tag 时长度不超过 17，个数不超过 7
@@ -142,6 +134,34 @@ watch(selectedTags.value, () => {
     tags.value = selectedTags.value
   }
 })
+
+// 获取热门 tags 的函数，获取 10 个
+const getTags = async () => {
+  return (await useKUNGalgameEditStore().getHotTags(10)).data
+}
+
+// 检测 isShowKeywords 的变化，为真时才获取 tag，适应页面的响应式
+watch(isShowKeywords, async () => {
+  if (isShowHotKeywords.value === true) {
+    hotTags.value = await getTags()
+  }
+})
+
+// 挂载时获取热门 tags
+onMounted(async () => {
+  // 是否需要在编辑界面触发接口
+  const isLoadEditHotTags =
+    routeName.value === 'Edit' && isShowHotKeywords.value
+
+  // 是否需要在回复界面触发接口
+  const isLoadTopicHotTags =
+    routeName.value === 'Topic' && replyDraft.value.isShowHotKeywords
+
+  // 需要获取时才触发
+  if (isLoadEditHotTags || isLoadTopicHotTags) {
+    hotTags.value = await getTags()
+  }
+})
 </script>
 
 <template>

src/views/edit/components/tags.ts

@@ -1,36 +0,0 @@
-export interface Tag {
-  index: number
-  name: string
-}
-
-// 临时数据，将会从后端返回 7 个热门 tag
-export const tag: Tag[] = [
-  {
-    index: 1,
-    name: '啊这可海星',
-  },
-  {
-    index: 2,
-    name: '啊这可海星',
-  },
-  {
-    index: 3,
-    name: '啊这可海星',
-  },
-  {
-    index: 4,
-    name: '啊这可海星啊这可海星',
-  },
-  {
-    index: 5,
-    name: '啊这可海星',
-  },
-  {
-    index: 6,
-    name: '啊这可海星啊这可海星',
-  },
-  {
-    index: 7,
-    name: '啊这可海星',
-  },
-]