fix:修复个人中心头上面的图标和名字不更新问题，修改个人中心后无法及时更新问题

-import { UploadApiResult } from './model/uploadModel';
+import { FileUploadResponse } from './model/uploadModel';
 import { IPutPersonal } from './model/index';
 import { defHttp } from '/@/utils/http/axios';
-import { UploadFileParams } from '/#/axios';
 
 enum API {
-  BaseUploadUrl = '/api/yt/oss/upload',
+  BaseUploadUrl = '/oss/upload',
   PutPersonalUrl = '/user/center',
   GetPersonalUrl = '/user/',
 }
-/**
- * @description: Upload interface
- */
-export const uploadApi = (
-  params: UploadFileParams,
-  onUploadProgress: (progressEvent: ProgressEvent) => void
-) => {
-  return defHttp.uploadFile<UploadApiResult>(
-    {
-      url: API.BaseUploadUrl,
-      onUploadProgress,
-    },
-    params
-  );
+export const uploadApi = (file) => {
+  return defHttp.post<FileUploadResponse>({ url: API.BaseUploadUrl, params: file });
 };
 
 export const personalGet = (id: string) => {

-export interface UploadApiResult {
-  message: string;
-  code: number;
-  url: string;
+export interface FileUploadResponse {
+  fileName: string;
+  fileDownloadUri: string;
+  fileType: string;
+  size: number;
+  fileStaticUri: string;
 }

@@ -11,7 +11,7 @@
       class="ml-2 md:opacity-100"
       :class="getTitleClass"
       v-show="showTitle"
-      style="white-space: nowrap"
+      style="white-space: nowrap; font-size: small"
     >
       {{ getTitle }}
     </span>

@@ -22,15 +22,34 @@
           ><p style="font-size: 17px; margin-top: 7px; margin-left: 10px">个人信息</p></div
         >
         <div class="change-avatar" style="text-align: center">
-          <div class="mb-2">头像</div>
-          <CropperAvatar
-            :uploadApi="uploadApi"
-            :value="avatar"
-            btnText="更换头像"
-            :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
-            @change="updateAvatar"
-            width="150"
-          />
+          <div class="mb-2" style="font-weight: 700">个人头像</div>
+          <Upload
+            style="width: 20vw"
+            name="avatar"
+            list-type="picture-card"
+            class="avatar-uploader"
+            :show-upload-list="false"
+            :customRequest="customUploadqrcodePic"
+            :before-upload="beforeUploadqrcodePic"
+          >
+            <img
+              style="text-align: center; border-radius: 50%; width: 10vw; height: 15vh"
+              v-if="peresonalPic"
+              :src="peresonalPic"
+              alt="avatar"
+            />
+            <div v-else>
+              <div style="margin-top: 30px">
+                <PlusOutlined style="font-size: 30px" />
+              </div>
+              <div
+                class="ant-upload-text flex"
+                style="width: 280px; height: 130px; align-items: center"
+              >
+                支持.PNG、.JPG、.SVG格式，建议尺寸为300px × 300px（及以上），大小不超过2M。</div
+              >
+            </div>
+          </Upload>
         </div>
         <Description
           class="mt-8"
@@ -66,13 +85,13 @@
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './config';
   import { Description, DescItem, useDescription } from '/@/components/Description/index';
-  import { CropperAvatar } from '/@/components/Cropper';
-  import defaultImage from '/@/assets/images/logo.png';
   import { uploadApi, personalPut } from '/@/api/personal/index';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
-  import { useUserStore } from '/@/store/modules/user';
+  import { Upload } from 'ant-design-vue';
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { FileItem } from '/@/components/Upload/src/typing';
 
   const schema: DescItem[] = [
     {
@@ -102,59 +121,91 @@
   ];
   export default defineComponent({
     name: 'index',
-    components: { BasicModal, BasicForm, Description, CropperAvatar },
-    setup() {
-      const userStore = useUserStore();
+    components: { BasicModal, BasicForm, Description, Upload, PlusOutlined },
+    emits: ['refreshPersonl'],
+    setup(_, { emit }) {
       const userInfo = getAuthCache(USER_INFO_KEY);
       const { createMessage } = useMessage();
       const getPersonalValue: any = ref({});
       const getPersonalDetailValue: any = ref({});
-      const avatarUrl: any = ref('');
+      const updatePersonalData: any = ref({});
       const getBackendV: any = ref({});
       const [registerDesc] = useDescription({
         title: '个人详情',
         schema: schema,
       });
 
-      const avatar = computed(() => {
-        const { avatar } = userStore.getUserInfo;
-        return avatarUrl.value || avatar || defaultImage;
-      });
-      const updateAvatar = async (v) => {
-        avatarUrl.value = v.data.fileStaticUri;
+      const peresonalPic = ref();
+
+      const customUploadqrcodePic = async ({ file }) => {
+        if (beforeUploadqrcodePic(file)) {
+          const formData = new FormData();
+          formData.append('file', file);
+          const response = await uploadApi(formData);
+          if (response.fileStaticUri) {
+            peresonalPic.value = response.fileStaticUri;
+          }
+        }
       };
+
+      const beforeUploadqrcodePic = (file: FileItem) => {
+        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+        if (!isJpgOrPng) {
+          createMessage.error('只能上传图片文件!');
+        }
+        const isLt2M = (file.size as number) / 1024 / 1024 < 2;
+        if (!isLt2M) {
+          createMessage.error('图片大小不能超过2MB!');
+        }
+        return isJpgOrPng && isLt2M;
+      };
+
       const [registerForm, { validate, resetFields, setFieldsValue }] = useForm({
         showActionButtonGroup: false,
         schemas: formSchema,
       });
 
       const [registerModal, { closeModal }] = useModalInner(async (data) => {
-        setFieldsValue({
-          realName: data.userInfo.realName,
-          phoneNumber: data.userInfo.phoneNumber,
-          email: data.userInfo.email,
-        });
-        getPersonalDetailValue.value = data.userInfo;
+        (peresonalPic.value = data.userInfo.avatar),
+          setFieldsValue({
+            realName: data.userInfo.realName,
+            phoneNumber: data.userInfo.phoneNumber,
+            email: data.userInfo.email,
+          });
+        if (data.userInfo) {
+          getPersonalDetailValue.value = data.userInfo;
+        }
+        if (Object.keys(updatePersonalData.value).length != 0) {
+          getPersonalDetailValue.value = updatePersonalData.value;
+          peresonalPic.value = updatePersonalData.value.avatar;
+          setFieldsValue({
+            realName: updatePersonalData.value.realName,
+            phoneNumber: updatePersonalData.value.phoneNumber,
+            email: updatePersonalData.value.email,
+          });
+        }
       });
       const handleSubmit = async () => {
         const getUserInfo = await userInfo;
         getPersonalValue.value = await validate();
         getPersonalValue.value.id = getUserInfo.userId;
         getPersonalValue.value.username = getBackendV.value.username;
-        getPersonalValue.value.avatar = avatarUrl.value;
-        await personalPut(getPersonalValue.value);
+        getPersonalValue.value.avatar = peresonalPic.value;
+        const data = await personalPut(getPersonalValue.value);
+        updatePersonalData.value = data;
         createMessage.success('修改成功');
         closeModal();
         resetFields();
+        emit('refreshPersonl', updatePersonalData.value);
       };
       const compHeight = computed(() => {
         return 1000;
       });
       return {
-        uploadApi,
+        peresonalPic,
+        beforeUploadqrcodePic,
+        customUploadqrcodePic,
         compHeight,
-        updateAvatar,
-        avatar,
         handleSubmit,
         getPersonalDetailValue,
         registerDesc,
@@ -165,4 +216,22 @@
     },
   });
 </script>
-<style lang="less"></style>
+<style scoped lang="less">
+  .change-avatar {
+    /deep/ .ant-upload-select-picture-card {
+      display: inherit;
+      float: none;
+      width: 10vw;
+      height: 17vh;
+      margin-right: 8px;
+      margin-bottom: 8px;
+      text-align: center;
+      vertical-align: top;
+      background-color: #fafafa;
+      border: 1px dashed #d9d9d9;
+      border-radius: 50%;
+      cursor: pointer;
+      transition: border-color 0.3s ease;
+    }
+  }
+</style>

 <template>
   <Dropdown placement="bottomLeft" :overlayClassName="`${prefixCls}-dropdown-overlay`">
     <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
-      <img :class="`${prefixCls}__header`" :src="getUserInfo.avatar" />
+      <img
+        :class="`${prefixCls}__header`"
+        :src="refreshPersonlData.avatar ? refreshPersonlData.avatar : getUserInfo.avatar"
+      />
       <span :class="`${prefixCls}__info hidden md:block`">
         <span :class="`${prefixCls}__name  `" class="truncate">
-          {{ getUserInfo.realName }}
+          {{ refreshPersonlData.realName ? refreshPersonlData.realName : getUserInfo.realName }}
         </span>
       </span>
     </span>
 
     <template #overlay>
       <Menu @click="handleMenuClick">
-        <!-- <MenuItem
-          key="doc"
-          :text="t('layout.header.dropdownItemDoc')"
-          icon="ion:document-text-outline"
-          v-if="getShowDoc"
-        />
-        <MenuDivider v-if="getShowDoc" /> -->
         <MenuItem
           key="personal"
           :text="t('layout.header.dropdownItemPersonal')"
@@ -38,13 +34,17 @@
     </template>
   </Dropdown>
   <LockAction @register="register" />
-  <PersonalChild ref="personalRef" @register="registerPersonal" />
+  <PersonalChild
+    @refreshPersonl="refreshPersonlFunc"
+    ref="personalRef"
+    @register="registerPersonal"
+  />
 </template>
 <script lang="ts">
   // components
   import { Dropdown, Menu } from 'ant-design-vue';
 
-  import { defineComponent, computed, getCurrentInstance, ref } from 'vue';
+  import { defineComponent, computed, getCurrentInstance, ref, reactive } from 'vue';
 
   import { DOC_URL } from '/@/settings/siteSetting';
 
@@ -59,7 +59,6 @@
   import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
-  import { useUserStore } from '/@/store/modules/user';
   type MenuEvent = 'logout' | 'doc' | 'lock' | 'personal';
 
   export default defineComponent({
@@ -75,6 +74,10 @@
       theme: propTypes.oneOf(['dark', 'light']),
     },
     setup() {
+      const refreshPersonlData = reactive({
+        avatar: '',
+        realName: '',
+      });
       const userInfo = getAuthCache(USER_INFO_KEY);
       const { proxy } = getCurrentInstance();
       const personalRef = ref(null);
@@ -84,8 +87,8 @@
       const userStore = useUserStore();
 
       const getUserInfo = computed(() => {
-        const { realName = '', avatar, desc } = userStore.getUserInfo || {};
-        return { realName, avatar: avatar || headerImg, desc };
+        const { realName = '', avatar } = userStore.getUserInfo || {};
+        return { realName, avatar: avatar || headerImg };
       });
 
       const [register, { openModal }] = useModal();
@@ -130,7 +133,14 @@
         }, 10);
       };
 
+      const refreshPersonlFunc = (v) => {
+        refreshPersonlData.avatar = v.avatar;
+        refreshPersonlData.realName = v.realName;
+      };
+
       return {
+        refreshPersonlData,
+        refreshPersonlFunc,
         personalRef,
         registerPersonal,
         openPersonalFunc,