feat: user info

src/api/index.ts

@@ -5,7 +5,7 @@
 // 暴露出所有 interface
 export * from './edit/types/edit'
 export * from './home/types/home'
-export * from './kungalgamer/types/kungalgamer'
+export * from './user/types/user'
 export * from './login/types/login'
 export * from './topic/types'
 export * from './update-log/types/updateLog'
@@ -13,7 +13,7 @@ export * from './update-log/types/updateLog'
 // 暴露出所有 api
 export * from './edit'
 export * from './home'
-export * from './kungalgamer'
+export * from './user'
 export * from './login'
 export * from './topic'
 export * from './update-log'

src/api/kungalgamer/index.ts

@@ -1,18 +0,0 @@
-import { KUNGalgamer } from './types/kungalgamer'
-import { fetchGet } from '@/utils/request'
-
-export async function getKUNGalgamerInfoApi(id: number): Promise<KUNGalgamer> {
-  try {
-    const url = `/kungalgamer/${id}`
-
-    // 调用fetchGet函数
-    const response = await fetchGet<KUNGalgamer>(url)
-
-    // 返回获取的用户数据
-    return response
-  } catch (error) {
-    // 处理错误
-    console.error(error)
-    throw new Error('Failed to fetch user data')
-  }
-}

src/api/login/index.ts

@@ -2,8 +2,8 @@ import { fetchPost } from '@/utils/request'
 import type * as Login from './types/login'
 
 const loginURLs = {
-  login: `/login/login`,
-  register: `/login/register`,
+  login: `/user/login`,
+  register: `/user/register`,
   verificationCode: `/auth/email/code`,
   refreshToken: `/auth/token/refresh`,
 }

src/api/user/index.ts

@@ -0,0 +1,14 @@
+import { fetchGet } from '@/utils/request'
+import * as User from './types/user'
+
+export async function getUserByUidApi(
+  uid: number
+): Promise<User.UserInfoResponseData> {
+  const url = `/user/${uid}`
+
+  // 调用fetchGet函数
+  const response = await fetchGet<User.UserInfoResponseData>(url)
+
+  // 返回获取的用户数据
+  return response
+}

src/api/user/types/user.ts

@@ -1,22 +1,20 @@
-export interface KUNGalgamer {
+export interface UserInfo {
   uid: number
   name: string
-  email: string
-  token: string
   avatar: string
   roles: string
   status: number
   time: number
   moemoepoint: number
   bio: string
-  upvotes: number
+  upvote: number
   like: number
   dislike: number
-  comment: number[]
-  reply: number[]
+  daily_topic_count: number
+
   topic: number[]
-  like_topic: number[]
-  dislike_topic: number[]
-  upvotes_topic: number[]
-  reply_topic: number[]
+  reply: number[]
+  comment: number[]
 }
+
+export type UserInfoResponseData = KUNGalgameResponseData<UserInfo>

src/router/modules/kungalgamer.ts

@@ -1,4 +1,6 @@
 import { type RouteRecordRaw } from 'vue-router'
+// 当前用户的信息
+import { currentUserInfo } from '@/utils/getCurrentUserInfo'
 
 const Layout = () => import('@/layout/KUNGalgameAPP.vue')
 
@@ -7,12 +9,14 @@ const kungalgamer: RouteRecordRaw[] = [
   {
     path: '/kungalgamer',
     component: Layout,
-    redirect: '/kungalgamer/kungalgamer/info',
+    // 访问默认跳转到当前用户的主页
+    redirect: `/kungalgamer/${currentUserInfo.uid}/info`,
     children: [
       {
         // 这里的路径之后会改成单个用户的 id
         name: 'KUNGalgamer',
-        path: 'kungalgamer',
+        path: ':uid',
+        redirect: `/kungalgamer/${currentUserInfo.uid}/info`,
         component: () => import('@/views/kungalgamer/KUNGalgamer.vue'),
         meta: {
           permission: 'kungalgamer',

src/store/modules/kungalgamer.ts

@@ -2,18 +2,24 @@
  * 用户的信息存储
  */
 import { defineStore } from 'pinia'
-import {
+
+import type {
   LoginRequestData,
   LoginResponseData,
   RegisterRequestData,
   VerificationCodeMailRequestData,
 } from '@/api'
+
 import {
   postLoginDataApi,
   postRegisterDataApi,
   sendVerificationCodeMailApi,
 } from '@/api'
 
+import type { UserInfoResponseData } from '@/api'
+
+import { getUserByUidApi } from '@/api'
+
 // kungalgame store 类型
 import { KUNGalgamerStore } from '../types/kungalgamer'
 
@@ -77,5 +83,10 @@ export const useKUNGalgameUserStore = defineStore({
       }
       return res
     },
+
+    // 获取单个用户基本信息
+    async getUser(uid: number): Promise<UserInfoResponseData> {
+      return getUserByUidApi(uid)
+    },
   },
 })

src/utils/getCurrentUserInfo.ts

@@ -0,0 +1,5 @@
+// pinia 只能在 setup 中使用，有时候获取用户信息只能这么做
+
+const userInfoString = localStorage.getItem('KUNGalgameUser')
+
+export const currentUserInfo = userInfoString ? JSON.parse(userInfoString) : {}

src/views/kungalgamer/KUNGalgamer.vue

@@ -5,13 +5,6 @@ import NavBar from './components/NavBar.vue'
 import Header from './components/Header.vue'
 // 导入通用 Footer
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
-
-// 导入请求函数
-// import { getSingleKUNGalgamerApi } from '@/api/kungalgamer/index'
-
-// getSingleKUNGalgamerApi(1).then((userData) => {
-//   console.log(userData)
-// })
 </script>
 
 <template>

src/views/kungalgamer/components/NavBar.vue

@@ -1,52 +1,12 @@
 <script setup lang="ts">
-interface nav {
-  index: number
-  name: string
-  router: string
-}
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { navBarRoute } from './routeName'
 
-const navBar: nav[] = [
-  {
-    index: 1,
-    name: '个人信息',
-    router: '/kungalgamer/kungalgamer/info',
-  },
-  {
-    index: 2,
-    name: '信息设置',
-    router: '/kungalgamer/kungalgamer/settings',
-  },
-  {
-    index: 3,
-    name: '邮箱密码',
-    router: '/kungalgamer/kungalgamer/password',
-  },
-  {
-    index: 4,
-    name: '发的话题',
-    router: '/kungalgamer/kungalgamer/topic',
-  },
-  {
-    index: 5,
-    name: '赞的话题',
-    router: '/kungalgamer/kungalgamer/topic',
-  },
-  {
-    index: 6,
-    name: '推的话题',
-    router: '/kungalgamer/kungalgamer/topic',
-  },
-  {
-    index: 7,
-    name: '发的回复',
-    router: '/kungalgamer/kungalgamer/topic',
-  },
-  {
-    index: 8,
-    name: '发的评论',
-    router: '/kungalgamer/kungalgamer/topic',
-  },
-]
+// 从路由参数中获取当前的用户 uid
+const uid = computed(() => {
+  return parseInt(useRoute().params.uid as string)
+})
 </script>
 
 <template>
@@ -54,9 +14,11 @@ const navBar: nav[] = [
   <div class="nav">
     <!-- 交互区的单个项目 -->
     <ul>
-      <li v-for="kun in navBar" :key="kun.index">
+      <li v-for="kun in navBarRoute" :key="kun.index">
         <KeepAlive>
-          <router-link :to="kun.router">{{ kun.name }}</router-link>
+          <router-link :to="`/kungalgamer/${uid}/${kun.router}`">{{
+            kun.name
+          }}</router-link>
         </KeepAlive>
       </li>
     </ul>

src/views/kungalgamer/components/routeName.ts

@@ -0,0 +1,48 @@
+interface nav {
+  index: number
+  name: string
+  router: string
+}
+
+export const navBarRoute: nav[] = [
+  {
+    index: 1,
+    name: '个人信息',
+    router: 'info',
+  },
+  {
+    index: 2,
+    name: '信息设置',
+    router: 'settings',
+  },
+  {
+    index: 3,
+    name: '邮箱密码',
+    router: 'password',
+  },
+  {
+    index: 4,
+    name: '发的话题',
+    router: 'topic',
+  },
+  {
+    index: 5,
+    name: '赞的话题',
+    router: 'topic',
+  },
+  {
+    index: 6,
+    name: '推的话题',
+    router: 'topic',
+  },
+  {
+    index: 7,
+    name: '发的回复',
+    router: 'topic',
+  },
+  {
+    index: 8,
+    name: '发的评论',
+    router: 'topic',
+  },
+]

src/views/kungalgamer/content/Info.vue

@@ -1,37 +1,77 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import dayjs from 'dayjs'
+
+import type { UserInfo } from '@/api'
+// 导入用户 store
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
+
+const user = ref<UserInfo>()
+// 从路由参数中获取当前的用户 uid
+const uid = computed(() => {
+  return parseInt(useRoute().params.uid as string)
+})
+/* 
+  uid: number
+  name: string
+  avatar: string
+  roles: string
+  status: number
+  time: number
+  moemoepoint: number
+  bio: string
+  upvote: number
+  like: number
+  dislike: number
+  daily_topic_count: number
+
+  topic: number[]
+  reply: number[]
+  comment: number[] */
+// 获取当前用户信息
+const getUser = async (uid: number) => {
+  const userInfo = await useKUNGalgameUserStore().getUser(uid)
+  return userInfo.data
+}
+
+// 挂载时获取用户信息
+onMounted(async () => {
+  user.value = await getUser(uid.value)
+})
+</script>
 
 <template>
   <!-- 右侧内容区 -->
-  <div class="article">
+  <div class="article" v-if="user">
     <!-- 用户个人信息 -->
     <div class="kungalgamer-info">
       <!-- 用户基本信息 -->
-      <ul class="kungalgamer-basic">
-        <li>
-          <!-- 用户名 -->
-          <span>用户名: KUN</span>
-          <!-- 萌萌点 -->
-          <span>moemoepoint: 1007</span>
-        </li>
-        <li>
-          <!-- 注册序号 -->
-          <span>注册序号: 1007</span>
-          <!-- 注册时间 -->
-          <span>注册时间: 2019/10/07</span>
-        </li>
-      </ul>
+      <div class="kungalgamer-basic">
+        <!-- 用户名 -->
+        <span>用户名: {{ user.name }}</span>
+        <!-- 萌萌点 -->
+        <span>萌萌点: {{ user.moemoepoint }}</span>
+        <!-- 注册序号 -->
+        <span>注册序号: {{ user.uid }}</span>
+        <!-- 注册时间 -->
+        <span>注册时间: {{ dayjs(user.time).format('YYYY/MM/DD') }}</span>
+        <span>角色: {{ user.roles }}</span>
+        <span>状态: {{ user.status }}</span>
+        <span>被推数: {{ user.upvote }}</span>
+        <span>被赞数: {{ user.like }}</span>
+        <span>被踩数: {{ user.dislike }}</span>
+        <span>今日发表: {{ user.daily_topic_count }}</span>
+
+        <span>发表话题数: {{ user.topic.length }}</span>
+        <span>发表回复数: {{ user.reply.length }}</span>
+        <span>发表评论数: {{ user.comment.length }}</span>
+      </div>
       <!-- 用户签名 -->
       <ul class="kungalgamer-sign">
         <div>
           <div>签名:</div>
-          啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-          啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-          啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-          啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-          啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-          啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-          啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-          啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+          <div>{{ user.bio ? user.bio : 'NULL' }}</div>
         </div>
       </ul>
     </div>
@@ -51,20 +91,9 @@
 }
 /* 用户基本信息 */
 .kungalgamer-basic {
-  display: flex;
-}
-/* 对单个基本信息设置间距 */
-.kungalgamer-basic > li {
-  /* 基本信息距离用户签名的距离 */
-  margin-bottom: 27px;
-  display: flex;
-  flex-direction: column;
-}
-.kungalgamer-basic > li:nth-child(2) {
-  margin-left: 77px;
-}
-.kungalgamer-basic span:nth-child(2) {
-  margin-top: 7px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 2fr));
+  grid-template-rows: repeat(5, minmax(0, 30px));
 }
 /* 用户签名 */
 .kungalgamer-sign {