BUG: topic master router

src/api/index.ts

@@ -8,6 +8,7 @@ export * from './home/types/home'
 export * from './kungalgamer/types/kungalgamer'
 export * from './login/types/login'
 export * from './topic/types/topic'
+export * from './topic/types/aside'
 export * from './update-log/types/updateLog'
 
 // 暴露出所有 api

src/api/topic/index.ts

@@ -1,11 +1,54 @@
 import { fetchGet } from '@/utils/request'
+// 将对象转为请求参数的函数
+import objectToQueryParams from '@/utils/objectToQueryParams'
+import * as Aside from './types/aside'
 import * as Topic from './types/topic'
 
 const topicURLs = {
+  // 左侧相同标签下的其它话题
+  getRelatedTopicsByTags: `/topic/nav/same`,
+  // 楼主的其它话题
+  getPopularTopicsByUserUid: `/topic/nav/master`,
+  // 获取单个话题
   getTopicByTid: `/topic/detail`,
+  // 根据话题 id 获取话题回复
   getRepliesByPid: `/topic/detail`,
 }
 
+// 左侧相同标签下的其它话题
+export async function getRelatedTopicsByTagsApi(
+  request: Aside.TopicAsideOtherTagRequestData
+): Promise<Aside.TopicAsideResponseData> {
+  try {
+    const queryParams = objectToQueryParams(request)
+    const url = `${topicURLs.getRelatedTopicsByTags}?${queryParams}`
+
+    const response = await fetchGet<Aside.TopicAsideResponseData>(url)
+
+    return response
+  } catch (error) {
+    console.log(error)
+    throw new Error('Failed to fetch aside other topic')
+  }
+}
+
+// 楼主的其它话题
+export async function getPopularTopicsByUserUidApi(
+  request: Aside.TopicAsideMasterRequestData
+): Promise<Aside.TopicAsideResponseData> {
+  try {
+    const queryParams = objectToQueryParams(request)
+    const url = `${topicURLs.getPopularTopicsByUserUid}?${queryParams}`
+
+    const response = await fetchGet<Aside.TopicAsideResponseData>(url)
+
+    return response
+  } catch (error) {
+    console.log(error)
+    throw new Error('Failed to fetch master other topic')
+  }
+}
+
 // 获取单个话题
 export async function getTopicByTidApi(
   tid: number
@@ -34,7 +77,7 @@ export async function getRepliesByPidApi(
     return response
   } catch (error) {
     console.log(error)
-    throw new Error('Failed to fetch topic')
+    throw new Error('Failed to fetch replies')
   }
 }
 
@@ -50,6 +93,6 @@ export async function getCommentsByReplyRidApi(
     return response
   } catch (error) {
     console.log(error)
-    throw new Error('Failed to fetch topic')
+    throw new Error('Failed to fetch comments')
   }
 }

src/api/topic/types/aside.ts

@@ -0,0 +1,23 @@
+// 话题详情界面的侧边栏
+
+export interface TopicAside {
+  title: string
+  tid: number
+}
+
+export interface TopicAsideOtherTagRequestData {
+  // 本话题的 tags
+  tags: string[]
+  // 当前话题的 tid，因为相同标签下的其它话题不包括本话题
+  tid: string
+}
+
+export interface TopicAsideMasterRequestData {
+  // 楼主 id
+  uid: number
+  // 当前话题的 tid，因为相同标签下的其它话题不包括本话题
+  tid: string
+}
+
+// Aside 响应数据的格式
+export type TopicAsideResponseData = KUNGalgameResponseData<TopicAside[]>

src/router/guard/permission.ts

@@ -1,6 +1,6 @@
 import { Router } from 'vue-router'
 import { type RouteRecordRaw } from 'vue-router'
-import { useKUNGalgamerStore } from '@/store/modules/kungalgamer'
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
 import { WHITE_LIST } from '../router'
 import { storeToRefs } from 'pinia'
 import { unref } from 'vue'
@@ -10,7 +10,7 @@ import { asyncRoutes } from '../router'
 
 export const createPermission = (router: Router) => {
   router.beforeEach(async (to, from, next) => {
-    const useStore = useKUNGalgamerStore()
+    const useStore = useKUNGalgameUserStore()
     const { token } = storeToRefs(useStore)
     const getRoute = asyncRoutes
 

src/store/index.ts

@@ -3,7 +3,7 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import type { App } from 'vue'
 
 // 导入用户 store
-import { useKUNGalgamerStore } from '@/store/modules/kungalgamer'
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
 
 // 导入网站设置面板 store
 import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
@@ -16,7 +16,7 @@ export function setupPinia(app: App<Element>) {
 }
 
 export function storeReset() {
-  const userStore = useKUNGalgamerStore()
+  const userStore = useKUNGalgameUserStore()
   const settingsStore = useKUNGalgameSettingsStore()
 
   userStore.$reset()

src/store/modules/kungalgamer.ts

@@ -2,26 +2,25 @@
  * 用户的信息存储
  */
 import { defineStore } from 'pinia'
-import { type Ref, ref } from 'vue'
 import { LoginRequestData, LoginResponseData } from '@/api/index'
 import { postLoginDataApi } from '@/api/index'
 
 interface UserState {
-  uid: Ref<number>
-  avatar: Ref<string>
-  token: Ref<string>
-  refreshToken: Ref<string>
+  uid: number
+  avatar: string
+  token: string
+  refreshToken: string
 }
 
 // 这里用了 pinia-plugin-persistedstate，直接存储 token 即可
-export const useKUNGalgamerStore = defineStore({
+export const useKUNGalgameUserStore = defineStore({
   id: 'kungalgamer',
   persist: true,
   state: (): UserState => ({
-    uid: ref<number>(0),
-    avatar: ref<string>(''),
-    token: ref<string>(''),
-    refreshToken: ref<string>(''),
+    uid: 0,
+    avatar: '',
+    token: '',
+    refreshToken: '',
   }),
   getters: {},
   actions: {

src/store/modules/topic.ts

@@ -1,8 +1,16 @@
 /* 话题详情的 store */
 import { defineStore } from 'pinia'
 
-import { getRepliesByPidApi, getTopicByTidApi } from '@/api/index'
 import {
+  getRelatedTopicsByTagsApi,
+  getPopularTopicsByUserUidApi,
+  getRepliesByPidApi,
+  getTopicByTidApi,
+} from '@/api/index'
+import {
+  TopicAsideOtherTagRequestData,
+  TopicAsideMasterRequestData,
+  TopicAsideResponseData,
   TopicDetailResponseData,
   TopicReplyRequestData,
   TopicReplyResponseData,
@@ -68,6 +76,34 @@ export const useKUNGalgameTopicStore = defineStore({
     },
   }),
   actions: {
+    // 左侧相同标签下的其它话题
+    getRelatedTopicsByTags(
+      request: TopicAsideOtherTagRequestData
+    ): Promise<TopicAsideResponseData> {
+      return new Promise((resolve, reject) => {
+        getRelatedTopicsByTagsApi(request)
+          .then((res) => {
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    // 楼主的其它话题
+    getPopularTopicsByUserUid(
+      request: TopicAsideMasterRequestData
+    ): Promise<TopicAsideResponseData> {
+      return new Promise((resolve, reject) => {
+        getPopularTopicsByUserUidApi(request)
+          .then((res) => {
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
     // 获取单个话题
     getTopicByTid(tid: number): Promise<TopicDetailResponseData> {
       return new Promise((resolve, reject) => {

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

@@ -8,7 +8,7 @@ const props = defineProps(['data'])
 <template>
   <div class="topic">
     <UserPart :kungalgamer="props.data.uid" />
-    <!-- TODO: 进入指定话题的路由 -->
+    <!-- 进入指定话题的路由 -->
     <router-link :to="`/topic/${props.data.tid}`">
       <TopicPart :data="props.data" />
     </router-link>

src/views/edit/components/Button.vue

@@ -8,7 +8,7 @@ import { toRaw } from 'vue'
 // 导入编辑话题的 store
 import { useKUNGalgameEditStore } from '@/store/modules/edit'
 // 导入用户 store
-import { useKUNGalgamerStore } from '@/store/modules/kungalgamer'
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
 import { storeToRefs } from 'pinia'
 // 导入路由
 import { useRouter } from 'vue-router'
@@ -60,7 +60,7 @@ const handlePublish = async () => {
       time: Date.now(),
       tags: rawData.tags,
       category: rawData.category,
-      uid: useKUNGalgamerStore().uid,
+      uid: useKUNGalgameUserStore().uid,
     }
 
     // 检查提交数据是否合法

src/views/login/components/Login.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
-import { useKUNGalgamerStore } from '@/store/modules/kungalgamer'
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
 import { useRouter } from 'vue-router'
 // 使用全局通知
 import { useKUNGalgameMessageStore } from '@/store/modules/message'
@@ -24,7 +24,7 @@ const router = useRouter()
 
 const info = useKUNGalgameMessageStore()
 
-const useStore = useKUNGalgamerStore()
+const useStore = useKUNGalgameUserStore()
 
 // 用户登录的表单
 const loginForm = reactive({

src/views/topic/aside/components/TopicMaster.vue

@@ -2,21 +2,48 @@
   这里是楼主的其他话题组件
  -->
 <script setup lang="ts">
-// TODO: 后端接口
-import { asideTopic } from '@/types/topic/topic'
+import { ref } from 'vue'
+
+import { TopicAside } from '@/api/index'
+
+// 导入 topic store
+import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+// 导入用户 store
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
+import { storeToRefs } from 'pinia'
+
+import { RouterLink, useRoute } from 'vue-router'
+import { onMounted } from 'vue'
+
+const route = useRoute()
+
+const tid = route.params.tid as string
+
+const { uid } = storeToRefs(useKUNGalgameUserStore())
+
+const topicData = ref<TopicAside[]>()
+
+onMounted(async () => {
+  console.log(tid)
+
+  topicData.value = (
+    await useKUNGalgameTopicStore().getPopularTopicsByUserUid({
+      uid: uid.value,
+      tid: tid,
+    })
+  ).data
+})
 </script>
 
 <template>
   <!-- 楼主的其它话题 -->
   <div class="master">
-    <ul>
-      <li>
+    <div class="title">
       {{ $tm('topic.aside.master') }}
-      </li>
-      <li v-for="kun in asideTopic" :key="kun.index">
-        <router-link :to="kun.router">{{ kun.name }}</router-link>
-      </li>
-    </ul>
+    </div>
+    <div class="topic" v-for="(kun, index) in topicData" :key="index">
+      <router-link :to="`/topic/${kun.tid}`">{{ kun.title }}</router-link>
+    </div>
   </div>
 </template>
 
@@ -24,8 +51,6 @@ import { asideTopic } from '@/types/topic/topic'
 /* 楼主的其它话题 */
 .master {
   width: 100%;
-  height: 1px;
-  flex-grow: 4;
 
   /* 隐藏溢出的颜色 */
   overflow: hidden;
@@ -36,18 +61,30 @@ import { asideTopic } from '@/types/topic/topic'
   border: 1px solid var(--kungalgame-trans-pink-2);
   background-color: var(--kungalgame-trans-pink-0);
 
-  ul {
-    height: 100%;
-    /* 整体为一个无序列表，列表为弹性盒 */
+  height: 340px;
   display: flex;
   flex-direction: column;
-    & > li {
-      height: 1px;
-      width: 100%;
-      /* 每个项目相对于标题的占比 */
-      flex-grow: 3;
+
+  .title {
+    /* 左侧没有 border，没有 hover */
+    border-left: 0;
+    /* 相对于单个话题标题的比例 */
+    height: 40px;
+    font-size: 14px;
+    font-weight: bold;
+    color: var(--kungalgame-font-color-2);
+    background-color: var(--kungalgame-trans-pink-1);
+    /* 与单个话题标题的分割线 */
+    border-bottom: 1px solid var(--kungalgame-trans-pink-2);
     display: flex;
-      /* 垂直居中 */
+    justify-content: center;
+    align-items: center;
+  }
+
+  .topic {
+    height: 60px;
+    display: flex;
+    justify-content: center;
     align-items: center;
     /* 设置左侧的 border 方便制作 hover */
     border-left: 4px solid transparent;
@@ -59,6 +96,8 @@ import { asideTopic } from '@/types/topic/topic'
       transition: 0.2s;
     }
     a {
+      width: 100%;
+      height: 100%;
       /* 左右两侧的距离 */
       margin: 0 17px;
       color: var(--kungalgame-font-color-3);
@@ -70,24 +109,8 @@ import { asideTopic } from '@/types/topic/topic'
       -webkit-line-clamp: 2; /* 显示两行文本 */
       /* 标题的字体属性 */
       font-size: small;
-        line-height: 1.5em;
-        box-sizing: border-box;
-      }
-      &:nth-child(1) {
-        /* 左侧没有 border，没有 hover */
-        border-left: 0;
-        /* 相对于单个话题标题的比例 */
-        flex-grow: 2;
-        line-height: 40px;
-        font-size: 14px;
-        font-weight: bold;
-        color: var(--kungalgame-font-color-2);
-        background-color: var(--kungalgame-trans-pink-1);
-        /* 与单个话题标题的分割线 */
-        border-bottom: 1px solid var(--kungalgame-trans-pink-2);
-        /* 水平居中 */
-        justify-content: center;
-      }
+      display: flex;
+      align-items: center;
     }
   }
 }