From c639b8113311b375ef76787f014d34f7601b5d10 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Mon, 16 Oct 2023 01:22:32 +0800
Subject: [PATCH] feat: upload avatar!!!

---
 src/api/user/types/user.ts                  |  1 +
 src/components/top-bar/KUNGalgameTopBar.vue | 18 ++++++++----------
 src/store/modules/kungalgamer.ts            |  2 ++
 src/store/types/kungalgamer.d.ts            |  1 +
 src/views/kungalgamer/KUNGalgamer.vue       |  2 +-
 src/views/kungalgamer/components/Avatar.vue | 18 +++++++++++++++++-
 src/views/kungalgamer/components/Header.vue | 14 +++++++++++---
 7 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/api/user/types/user.ts b/src/api/user/types/user.ts
index ca797eae..bb135ce0 100644
--- a/src/api/user/types/user.ts
+++ b/src/api/user/types/user.ts
@@ -94,6 +94,7 @@ export type UserInfoResponseData = KUNGalgameResponseData<UserInfo>
 
 export type UserUpdateAvatarResponseData = KUNGalgameResponseData<{
   avatar: string
+  avatarMin: string
 }>
 
 export type UserUpdateBioResponseData = KUNGalgameResponseData<{}>
diff --git a/src/components/top-bar/KUNGalgameTopBar.vue b/src/components/top-bar/KUNGalgameTopBar.vue
index c9408641..8d2e01d6 100644
--- a/src/components/top-bar/KUNGalgameTopBar.vue
+++ b/src/components/top-bar/KUNGalgameTopBar.vue
@@ -1,26 +1,24 @@
 <script setup lang="ts">
-// 导入 Vue 函数
 import { defineAsyncComponent, ref } from 'vue'
-// 导入图标
 import { Icon } from '@iconify/vue'
-// 导入 css 动画
 import 'animate.css'
-// 导入导航栏的单个项目
 import { topBarItem } from './topBarItem'
 import { onBeforeRouteLeave } from 'vue-router'
-// 异步导入手机版 hamburger，提升首页加载速度
+// 手机版 hamburger
 const Hamburger = defineAsyncComponent(() => import('./Hamburger.vue'))
-
-// 异步导入设置面板，提升首页加载速度
+// 设置面板
 const KUNGalgameSettingsPanel = defineAsyncComponent(
   () => import('../setting-panel/KUNGalgameSettingPanel.vue')
 )
-
-// 异步导入点击用户头像的面板
+// 点击用户头像的面板
 const KUNGalgameUserInfo = defineAsyncComponent(
   () => import('./KUNGalgameUserInfo.vue')
 )
 
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
+import { storeToRefs } from 'pinia'
+const { avatarMin } = storeToRefs(useKUNGalgameUserStore())
+
 // 显示设置面板的状态值
 const showKUNGalgamePanel = ref(false)
 // 显示手机模式 hamburger 的状态值
@@ -91,7 +89,7 @@ onBeforeRouteLeave(() => {
       <div class="avatar">
         <img
           @click="showKUNGalgameUserPanel = true"
-          src="../../assets/images/KUN.jpg"
+          :src="avatarMin"
           alt="KUN"
         />
       </div>
diff --git a/src/store/modules/kungalgamer.ts b/src/store/modules/kungalgamer.ts
index 04eadaff..a1c63b9e 100644
--- a/src/store/modules/kungalgamer.ts
+++ b/src/store/modules/kungalgamer.ts
@@ -63,6 +63,7 @@ export const useKUNGalgameUserStore = defineStore({
     uid: 0,
     name: '',
     avatar: '',
+    avatarMin: '',
     moemoepoint: 0,
     moemoeAccessToken: '',
     roles: 0,
@@ -80,6 +81,7 @@ export const useKUNGalgameUserStore = defineStore({
       this.uid = uid
       this.name = name
       this.avatar = avatar
+      this.avatarMin = avatar.replace(/\.webp$/, '-77.webp')
       this.moemoepoint = moemoepoint
       this.roles = roles
     },
diff --git a/src/store/types/kungalgamer.d.ts b/src/store/types/kungalgamer.d.ts
index 9d9ff42c..57e82403 100644
--- a/src/store/types/kungalgamer.d.ts
+++ b/src/store/types/kungalgamer.d.ts
@@ -3,6 +3,7 @@ export interface KUNGalgamerStore {
   uid: number
   name: string
   avatar: string
+  avatarMin: string
   moemoepoint: number
   moemoeAccessToken: string
   roles: number
diff --git a/src/views/kungalgamer/KUNGalgamer.vue b/src/views/kungalgamer/KUNGalgamer.vue
index ec36f8ed..be68ff0e 100644
--- a/src/views/kungalgamer/KUNGalgamer.vue
+++ b/src/views/kungalgamer/KUNGalgamer.vue
@@ -38,7 +38,7 @@ onMounted(async () => {
   <div class="root">
     <!-- 信息区域容器 -->
     <div class="container">
-      <Header :name="user?.name" :moemoepoint="user?.moemoepoint" />
+      <Header :moemoepoint="user?.moemoepoint" />
       <!-- 内容区 -->
       <div class="content">
         <NavBar :uid="uid" />
diff --git a/src/views/kungalgamer/components/Avatar.vue b/src/views/kungalgamer/components/Avatar.vue
index eab4bc30..269eedc2 100644
--- a/src/views/kungalgamer/components/Avatar.vue
+++ b/src/views/kungalgamer/components/Avatar.vue
@@ -4,6 +4,7 @@ import Message from '@/components/alert/Message'
 // 上传头像的函数
 import { checkImageValid, resizeImage } from '../utils/handleFileChange'
 import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
+import { storeToRefs } from 'pinia'
 
 // 准备给后端的图片
 const uploadedImage = ref<Blob>()
@@ -11,6 +12,8 @@ const uploadedImage = ref<Blob>()
 const selectedFileUrl = ref<string>('')
 // 上传的 input
 const input = ref<HTMLElement>()
+// 本地保存的用户头像链接
+const { avatar, avatarMin } = storeToRefs(useKUNGalgameUserStore())
 
 // 上传图片的函数
 const uploadImage = async (file: File) => {
@@ -71,7 +74,20 @@ const handleChangeAvatar = async () => {
 
   console.log(uploadedImage.value)
 
-  await useKUNGalgameUserStore().updateAvatar(formData)
+  const res = await useKUNGalgameUserStore().updateAvatar(formData)
+
+  if (res.code === 200) {
+    // 保存返回的头像链接
+    const avatarLink = res.data.avatar
+    avatar.value = avatarLink
+    avatarMin.value = avatarLink.replace(/\.webp$/, '-77.webp')
+    // 清除数据
+    selectedFileUrl.value = ''
+
+    Message('Update avatar successfully!', '更新头像成功', 'success')
+  } else {
+    Message('Update avatar failed!', '更新头像失败', 'error')
+  }
 }
 </script>
 
diff --git a/src/views/kungalgamer/components/Header.vue b/src/views/kungalgamer/components/Header.vue
index 89a78652..90804c1a 100644
--- a/src/views/kungalgamer/components/Header.vue
+++ b/src/views/kungalgamer/components/Header.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
+import { storeToRefs } from 'pinia'
+
+const { name, avatar } = storeToRefs(useKUNGalgameUserStore())
 
 const props = defineProps<{
-  name?: string
   moemoepoint?: number
 }>()
 
@@ -16,11 +19,11 @@ const mpWidth = computed(() => {
   <div class="header">
     <!-- 用户头像 -->
     <div class="avatar">
-      <img src="@/assets/images/KUN.jpg" alt="KUN" />
+      <img v-if="avatar" :src="avatar" alt="KUN" />
     </div>
     <!-- 用户名 -->
     <div class="name">
-      <span>{{ props.name }}</span>
+      <span>{{ name }}</span>
       <span>KUNGalgame</span>
     </div>
     <!-- 用户萌萌点 -->
@@ -49,10 +52,15 @@ const mpWidth = computed(() => {
   position: absolute;
   /* 头像的定位 */
   top: 5px;
+  width: 140px;
+  height: 140px;
+  background-color: var(--kungalgame-trans-blue-0);
+  border-radius: 50%;
   left: 50px;
   z-index: 2;
   img {
     width: 140px;
+    height: 140px;
     border-radius: 50%;
     box-shadow: 0px 0px 2px 4px var(--kungalgame-trans-red-2);
     &:hover {