feat: 新增上传个人头像

Author: Charles7c

src/apis/system/user-center.ts

@@ -3,6 +3,11 @@ import type * as System from '@/apis/system/type'
 
 const BASE_URL = '/system/user'
 
+/** @desc 上传头像 */
+export function uploadAvatar(data: FormData) {
+  return http.post(`${BASE_URL}/avatar`, data)
+}
+
 /** @desc 修改用户基本信息 */
 export function updateUserBaseInfo(data: { nickname: string; gender: number }) {
   return http.patch(`${BASE_URL}/basic/info`, data)

src/components/GiFooter/index.vue

@@ -3,14 +3,11 @@
 </template>
 
 <script lang="ts" setup>
-import Dayjs from 'dayjs'
 import { useAppStore } from '@/stores'
 
 const appStore = useAppStore()
 
 defineOptions({ name: 'GiFooter' })
-
-const year = Dayjs(new Date()).format('YYYY')
 </script>
 
 <style lang="scss" scoped>

src/router/permission.ts

@@ -1,5 +1,5 @@
 import router from '@/router'
-import { useUserStore, useRouteStore, useAppStore } from '@/stores'
+import { useUserStore, useRouteStore } from '@/stores'
 import { getToken } from '@/utils/auth'
 import { isHttp } from '@/utils/validate'
 

src/utils/downloadFile.ts

@@ -26,7 +26,7 @@ export function downloadByUrl({
 }): Promise<boolean> {
   // 是否同源
   const isSameHost = new URL(url).host == location.host
-  return new Promise<boolean>((resolve, reject) => {
+  return new Promise<boolean>((resolve) => {
     if (isSameHost) {
       const link = document.createElement('a')
       link.href = url

src/utils/http.ts

@@ -177,7 +177,7 @@ const del = <T = any>(url: string, params?: object, config?: AxiosRequestConfig)
     ...config
   })
 }
-const download = <T = any>(url: string, params?: object, config?: AxiosRequestConfig): Promise<AxiosResponse> => {
+const download = (url: string, params?: object, config?: AxiosRequestConfig): Promise<AxiosResponse> => {
   return requestNative({
     method: 'get',
     url,

src/views/login/components/account/index.vue

@@ -37,7 +37,6 @@ import { getImageCaptcha } from '@/apis'
 import { Message, type FormInstance } from '@arco-design/web-vue'
 import { useUserStore } from '@/stores'
 import { useStorage } from '@vueuse/core'
-import { useLoading } from '@/hooks'
 import { encryptByRsa } from '@/utils/encrypt'
 
 const loginConfig = useStorage('login-config', {

src/views/setting/profile/AvatarModel.vue

@@ -0,0 +1,77 @@
+<template>
+  <a-modal v-model:visible="visible" title="修改基本信息" @before-ok="save" @close="reset">
+    <GiForm ref="formRef" v-model="form" :options="options" :columns="columns" />
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { updateUserBaseInfo } from '@/apis'
+import { Message } from '@arco-design/web-vue'
+import { GiForm, type Columns } from '@/components/GiForm'
+import { useForm } from '@/hooks'
+import { useUserStore } from '@/stores'
+
+const options: Options = {
+  form: {},
+  col: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },
+  btns: { hide: true }
+}
+
+const columns: Columns = [
+  {
+    label: '昵称',
+    field: 'nickname',
+    type: 'input',
+    rules: [{ required: true, message: '请输入昵称' }]
+  },
+  {
+    label: '性别',
+    field: 'gender',
+    type: 'radio-group',
+    options: [
+      { label: '男', value: 1 },
+      { label: '女', value: 2 },
+      { label: '未知', value: 0, disabled: true }
+    ],
+    rules: [{ required: true, message: '请选择性别' }]
+  }
+]
+
+const userStore = useUserStore()
+const userInfo = computed(() => userStore.userInfo)
+const { form, resetForm } = useForm({
+  nickname: userInfo.value.nickname,
+  gender: userInfo.value.gender
+})
+
+const formRef = ref<InstanceType<typeof GiForm>>()
+// 重置
+const reset = () => {
+  formRef.value?.formRef?.resetFields()
+  resetForm()
+}
+
+const visible = ref(false)
+// 修改
+const onUpdate = async () => {
+  reset()
+  visible.value = true
+}
+
+// 保存
+const save = async () => {
+  const isInvalid = await formRef.value?.formRef?.validate()
+  if (isInvalid) return false
+  try {
+    await updateUserBaseInfo(form)
+    Message.success('修改成功')
+    // 修改成功后，重新获取用户信息
+    await userStore.getInfo()
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+defineExpose({ onUpdate })
+</script>