From d66e1aef8e558ba3a0ae249c7bd2f01d51830b23 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Fri, 12 Apr 2024 16:12:12 +0800
Subject: [PATCH] chore: update

---
 mock/login.ts                                 |   5 +-
 mock/mine.ts                                  |   2 +-
 mock/system.ts                                |  44 ++++-
 src/components/ReCropperPreview/index.ts      |   7 +
 .../ReCropperPreview/src/index.vue}           |   4 +
 src/components/ReDialog/index.vue             |   4 +
 src/components/ReFlop/src/index.vue           |   4 +
 src/components/ReText/src/index.vue           |   4 +
 src/layout/components/navbar.vue              |   2 +-
 src/layout/components/sidebar/horizontal.vue  |   2 +-
 src/layout/components/sidebar/mixNav.vue      |   2 +-
 src/layout/hooks/useNav.ts                    |  17 +-
 src/store/modules/types.ts                    |   2 +
 src/store/modules/user.ts                     |  12 ++
 src/utils/auth.ts                             |  30 ++-
 .../account-settings/components/profile.vue   | 186 ++++++++----------
 src/views/system/user/utils/hook.tsx          |   5 +-
 17 files changed, 208 insertions(+), 124 deletions(-)
 create mode 100644 src/components/ReCropperPreview/index.ts
 rename src/{views/system/user/upload.vue => components/ReCropperPreview/src/index.vue} (97%)

diff --git a/mock/login.ts b/mock/login.ts
index 62d21126a..a9c71b15d 100644
--- a/mock/login.ts
+++ b/mock/login.ts
@@ -10,7 +10,9 @@ export default defineFakeRoute([
         return {
           success: true,
           data: {
+            avatar: "https://avatars.githubusercontent.com/u/44761321",
             username: "admin",
+            nickname: "小铭",
             // 一个用户可能有多个角色
             roles: ["admin"],
             accessToken: "eyJhbGciOiJIUzUxMiJ9.admin",
@@ -22,8 +24,9 @@ export default defineFakeRoute([
         return {
           success: true,
           data: {
+            avatar: "https://avatars.githubusercontent.com/u/52823142",
             username: "common",
-            // 一个用户可能有多个角色
+            nickname: "小林",
             roles: ["common"],
             accessToken: "eyJhbGciOiJIUzUxMiJ9.common",
             refreshToken: "eyJhbGciOiJIUzUxMiJ9.commonRefresh",
diff --git a/mock/mine.ts b/mock/mine.ts
index 5491c7b19..0f8966133 100644
--- a/mock/mine.ts
+++ b/mock/mine.ts
@@ -12,7 +12,7 @@ export default defineFakeRoute([
         data: {
           avatar: "https://avatars.githubusercontent.com/u/44761321",
           username: "admin",
-          nickname: "Coder",
+          nickname: "小铭",
           email: "pureadmin@163.com",
           phone: "15888886789",
           description: "一个热爱开源的前端工程师"
diff --git a/mock/system.ts b/mock/system.ts
index d7b7cf75f..d34cd5fd8 100644
--- a/mock/system.ts
+++ b/mock/system.ts
@@ -9,9 +9,9 @@ export default defineFakeRoute([
     response: ({ body }) => {
       let list = [
         {
-          username: "admin",
-          nickname: "admin",
           avatar: "https://avatars.githubusercontent.com/u/44761321",
+          username: "admin",
+          nickname: "小铭",
           phone: "15888886789",
           email: faker.internet.email(),
           sex: 0,
@@ -27,9 +27,9 @@ export default defineFakeRoute([
           createTime: 1605456000000
         },
         {
-          username: "common",
-          nickname: "common",
           avatar: "https://avatars.githubusercontent.com/u/52823142",
+          username: "common",
+          nickname: "小林",
           phone: "18288882345",
           email: faker.internet.email(),
           sex: 1,
@@ -397,6 +397,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -420,6 +421,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -443,6 +445,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -466,6 +469,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -489,6 +493,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -512,6 +517,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: true,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -535,6 +541,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: true,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -558,6 +565,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: true,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -581,6 +589,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: true,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -604,6 +613,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: true,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -627,6 +637,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: true,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -651,6 +662,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -674,6 +686,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -697,6 +710,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -720,6 +734,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -743,6 +758,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -766,6 +782,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -790,6 +807,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -813,6 +831,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -836,6 +855,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -859,6 +879,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -882,6 +903,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -906,6 +928,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -929,6 +952,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -952,6 +976,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -975,6 +1000,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -998,6 +1024,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -1022,6 +1049,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -1045,6 +1073,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: true,
             showParent: false
           },
@@ -1068,6 +1097,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: false,
             showParent: false
           },
@@ -1091,6 +1121,7 @@ export default defineFakeRoute([
             frameLoading: true,
             keepAlive: false,
             hiddenTag: false,
+            fixedTag: false,
             showLink: false,
             showParent: false
           }
@@ -1472,6 +1503,7 @@ export default defineFakeRoute([
                 frameLoading: true,
                 keepAlive: false,
                 hiddenTag: false,
+                fixedTag: false,
                 showLink: true,
                 showParent: false
               },
@@ -1495,6 +1527,7 @@ export default defineFakeRoute([
                 frameLoading: true,
                 keepAlive: false,
                 hiddenTag: false,
+                fixedTag: false,
                 showLink: true,
                 showParent: false
               },
@@ -1518,6 +1551,7 @@ export default defineFakeRoute([
                 frameLoading: true,
                 keepAlive: false,
                 hiddenTag: false,
+                fixedTag: false,
                 showLink: true,
                 showParent: false
               },
@@ -1541,6 +1575,7 @@ export default defineFakeRoute([
                 frameLoading: true,
                 keepAlive: false,
                 hiddenTag: false,
+                fixedTag: false,
                 showLink: true,
                 showParent: false
               },
@@ -1564,6 +1599,7 @@ export default defineFakeRoute([
                 frameLoading: true,
                 keepAlive: false,
                 hiddenTag: false,
+                fixedTag: false,
                 showLink: true,
                 showParent: false
               }
diff --git a/src/components/ReCropperPreview/index.ts b/src/components/ReCropperPreview/index.ts
new file mode 100644
index 000000000..e7949feec
--- /dev/null
+++ b/src/components/ReCropperPreview/index.ts
@@ -0,0 +1,7 @@
+import reCropperPreview from "./src/index.vue";
+import { withInstall } from "@pureadmin/utils";
+
+/** 图片裁剪预览组件 */
+export const ReCropperPreview = withInstall(reCropperPreview);
+
+export default ReCropperPreview;
diff --git a/src/views/system/user/upload.vue b/src/components/ReCropperPreview/src/index.vue
similarity index 97%
rename from src/views/system/user/upload.vue
rename to src/components/ReCropperPreview/src/index.vue
index 561013fc3..d567a3521 100644
--- a/src/views/system/user/upload.vue
+++ b/src/components/ReCropperPreview/src/index.vue
@@ -3,6 +3,10 @@ import { ref } from "vue";
 import ReCropper from "@/components/ReCropper";
 import { formatBytes } from "@pureadmin/utils";
 
+defineOptions({
+  name: "ReCropperPreview"
+});
+
 const props = defineProps({
   imgSrc: String
 });
diff --git a/src/components/ReDialog/index.vue b/src/components/ReDialog/index.vue
index ba9ba1d00..1db105f53 100644
--- a/src/components/ReDialog/index.vue
+++ b/src/components/ReDialog/index.vue
@@ -11,6 +11,10 @@ import { isFunction } from "@pureadmin/utils";
 import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
 import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
 
+defineOptions({
+  name: "ReDialog"
+});
+
 const fullscreen = ref(false);
 
 const footerButtons = computed(() => {
diff --git a/src/components/ReFlop/src/index.vue b/src/components/ReFlop/src/index.vue
index b77e0a3a5..52ae7d5cf 100644
--- a/src/components/ReFlop/src/index.vue
+++ b/src/components/ReFlop/src/index.vue
@@ -2,6 +2,10 @@
 import flippers from "./filpper";
 import { ref, unref, nextTick, onUnmounted } from "vue";
 
+defineOptions({
+  name: "ReFlop"
+});
+
 const timer = ref(null);
 const flipObjs = ref([]);
 
diff --git a/src/components/ReText/src/index.vue b/src/components/ReText/src/index.vue
index 427af1743..ecaebdbb8 100644
--- a/src/components/ReText/src/index.vue
+++ b/src/components/ReText/src/index.vue
@@ -2,6 +2,10 @@
 import { h, onMounted, ref, useSlots } from "vue";
 import { type TippyOptions, useTippy } from "vue-tippy";
 
+defineOptions({
+  name: "ReText"
+});
+
 const props = defineProps({
   // 行数
   lineClamp: {
diff --git a/src/layout/components/navbar.vue b/src/layout/components/navbar.vue
index 6d781d59d..174a89e29 100644
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -187,7 +187,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
 }
 
 .logout {
-  max-width: 120px;
+  width: 120px;
 
   ::v-deep(.el-dropdown-menu__item) {
     display: inline-flex;
diff --git a/src/layout/components/sidebar/horizontal.vue b/src/layout/components/sidebar/horizontal.vue
index 7d8a74c5f..ea1c431e1 100644
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -160,7 +160,7 @@ nextTick(() => {
 }
 
 .logout {
-  max-width: 120px;
+  width: 120px;
 
   ::v-deep(.el-dropdown-menu__item) {
     display: inline-flex;
diff --git a/src/layout/components/sidebar/mixNav.vue b/src/layout/components/sidebar/mixNav.vue
index 82fbb2794..2a8d38b7b 100644
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -193,7 +193,7 @@ watch(
 }
 
 .logout {
-  max-width: 120px;
+  width: 120px;
 
   ::v-deep(.el-dropdown-menu__item) {
     display: inline-flex;
diff --git a/src/layout/hooks/useNav.ts b/src/layout/hooks/useNav.ts
index bf3edece6..c1382caf6 100644
--- a/src/layout/hooks/useNav.ts
+++ b/src/layout/hooks/useNav.ts
@@ -2,16 +2,16 @@ import { storeToRefs } from "pinia";
 import { getConfig } from "@/config";
 import { useRouter } from "vue-router";
 import { emitter } from "@/utils/mitt";
-import userAvatar from "@/assets/user.jpg";
+import Avatar from "@/assets/user.jpg";
 import { getTopMenu } from "@/router/utils";
 import { useFullscreen } from "@vueuse/core";
-import { useGlobal } from "@pureadmin/utils";
 import type { routeMetaType } from "../types";
 import { transformI18n } from "@/plugins/i18n";
 import { router, remainingPaths } from "@/router";
 import { computed, type CSSProperties } from "vue";
 import { useAppStoreHook } from "@/store/modules/app";
 import { useUserStoreHook } from "@/store/modules/user";
+import { useGlobal, isAllEmpty } from "@pureadmin/utils";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
@@ -37,9 +37,18 @@ export function useNav() {
     };
   });
 
-  /** 用户名 */
+  /** 头像（如果头像为空则使用 src/assets/user.jpg ） */
+  const userAvatar = computed(() => {
+    return isAllEmpty(useUserStoreHook()?.avatar)
+      ? Avatar
+      : useUserStoreHook()?.avatar;
+  });
+
+  /** 昵称（如果昵称为空则显示用户名） */
   const username = computed(() => {
-    return useUserStoreHook()?.username;
+    return isAllEmpty(useUserStoreHook()?.nickname)
+      ? useUserStoreHook()?.username
+      : useUserStoreHook()?.nickname;
   });
 
   /** 设置国际化选中后的样式 */
diff --git a/src/store/modules/types.ts b/src/store/modules/types.ts
index b8cb592e6..2d7a59c27 100644
--- a/src/store/modules/types.ts
+++ b/src/store/modules/types.ts
@@ -38,7 +38,9 @@ export type setType = {
 };
 
 export type userType = {
+  avatar?: string;
   username?: string;
+  nickname?: string;
   roles?: Array<string>;
   verifyCode?: string;
   currentPage?: number;
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index e4a78e7c2..a54a488fa 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -12,8 +12,12 @@ import { type DataInfo, setToken, removeToken, userKey } from "@/utils/auth";
 export const useUserStore = defineStore({
   id: "pure-user",
   state: (): userType => ({
+    // 头像
+    avatar: storageLocal().getItem<DataInfo<number>>(userKey)?.avatar ?? "",
     // 用户名
     username: storageLocal().getItem<DataInfo<number>>(userKey)?.username ?? "",
+    // 昵称
+    nickname: storageLocal().getItem<DataInfo<number>>(userKey)?.nickname ?? "",
     // 页面级别权限
     roles: storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [],
     // 前端生成的验证码（按实际需求替换）
@@ -26,10 +30,18 @@ export const useUserStore = defineStore({
     loginDay: 7
   }),
   actions: {
+    /** 存储头像 */
+    SET_AVATAR(avatar: string) {
+      this.avatar = avatar;
+    },
     /** 存储用户名 */
     SET_USERNAME(username: string) {
       this.username = username;
     },
+    /** 存储昵称 */
+    SET_NICKNAME(nickname: string) {
+      this.nickname = nickname;
+    },
     /** 存储角色 */
     SET_ROLES(roles: Array<string>) {
       this.roles = roles;
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index ccefcf2b4..b158ae79d 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -9,8 +9,12 @@ export interface DataInfo<T> {
   expires: T;
   /** 用于调用刷新accessToken的接口时所需的token */
   refreshToken: string;
+  /** 头像 */
+  avatar?: string;
   /** 用户名 */
   username?: string;
+  /** 昵称 */
+  nickname?: string;
   /** 当前登陆用户的角色 */
   roles?: Array<string>;
 }
@@ -37,7 +41,7 @@ export function getToken(): DataInfo<number> {
  * @description 设置`token`以及一些必要信息并采用无感刷新`token`方案
  * 无感刷新：后端返回`accessToken`（访问接口使用的`token`）、`refreshToken`（用于调用刷新`accessToken`的接口时所需的`token`，`refreshToken`的过期时间（比如30天）应大于`accessToken`的过期时间（比如2小时））、`expires`（`accessToken`的过期时间）
  * 将`accessToken`、`expires`这两条信息放在key值为authorized-token的cookie里（过期自动销毁）
- * 将`username`、`roles`、`refreshToken`、`expires`这四条信息放在key值为`user-info`的localStorage里（利用`multipleTabsKey`当浏览器完全关闭后自动销毁）
+ * 将`avatar`、`username`、`nickname`、`roles`、`refreshToken`、`expires`这六条信息放在key值为`user-info`的localStorage里（利用`multipleTabsKey`当浏览器完全关闭后自动销毁）
  */
 export function setToken(data: DataInfo<Date>) {
   let expires = 0;
@@ -62,26 +66,44 @@ export function setToken(data: DataInfo<Date>) {
       : {}
   );
 
-  function setUserKey(username: string, roles: Array<string>) {
+  function setUserKey({ avatar, username, nickname, roles }) {
+    useUserStoreHook().SET_AVATAR(avatar);
     useUserStoreHook().SET_USERNAME(username);
+    useUserStoreHook().SET_NICKNAME(nickname);
     useUserStoreHook().SET_ROLES(roles);
     storageLocal().setItem(userKey, {
       refreshToken,
       expires,
+      avatar,
       username,
+      nickname,
       roles
     });
   }
 
   if (data.username && data.roles) {
     const { username, roles } = data;
-    setUserKey(username, roles);
+    setUserKey({
+      avatar: data?.avatar ?? "",
+      username,
+      nickname: data?.nickname ?? "",
+      roles
+    });
   } else {
+    const avatar =
+      storageLocal().getItem<DataInfo<number>>(userKey)?.avatar ?? "";
     const username =
       storageLocal().getItem<DataInfo<number>>(userKey)?.username ?? "";
+    const nickname =
+      storageLocal().getItem<DataInfo<number>>(userKey)?.nickname ?? "";
     const roles =
       storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
-    setUserKey(username, roles);
+    setUserKey({
+      avatar,
+      username,
+      nickname,
+      roles
+    });
   }
 }
 
diff --git a/src/views/account-settings/components/profile.vue b/src/views/account-settings/components/profile.vue
index 63c47a992..39ea664ef 100644
--- a/src/views/account-settings/components/profile.vue
+++ b/src/views/account-settings/components/profile.vue
@@ -1,22 +1,21 @@
 <script setup lang="ts">
-// [TO DO] 只有销毁dialog，再修改cropper src，编辑的图片才变。
 import { reactive, ref } from "vue";
-import { useNav } from "@/layout/hooks/useNav";
-import uploadLine from "@iconify-icons/ri/upload-line";
-import CroppingUpload from "@/views/system/user/upload.vue";
-import type { FormInstance, FormRules } from "element-plus";
 import { formUpload } from "@/api/mock";
 import { message } from "@/utils/message";
+import { type UserInfo, getMine } from "@/api/user";
+import type { FormInstance, FormRules } from "element-plus";
+import ReCropperPreview from "@/components/ReCropperPreview";
 import { createFormData, deviceDetection } from "@pureadmin/utils";
-import { getMine, UserInfo } from "@/api/user";
-const { userAvatar, getLogo, username } = useNav();
+import uploadLine from "@iconify-icons/ri/upload-line";
+
+const imgSrc = ref("");
+const cropperInfo = ref();
 const cropRef = ref();
-const upload = ref();
+const uploadRef = ref();
 const isShow = ref(false);
 const userInfoFormRef = ref<FormInstance>();
-// 从服务器拉取用户信息，然后填充表单
 
-const userInfoFormData = reactive({
+const userInfos = reactive({
   avatar: "",
   nickname: "",
   email: "",
@@ -24,86 +23,11 @@ const userInfoFormData = reactive({
   description: ""
 });
 
-getMine().then(res => {
-  Object.assign(userInfoFormData, res.data);
-});
-
 const rules = reactive<FormRules<UserInfo>>({
-  nickname: [
-    { required: true, message: "昵称必填", trigger: "blur" },
-    { min: 3, max: 5, message: "长度最小3最大16", trigger: "blur" }
-  ]
+  nickname: [{ required: true, message: "昵称必填", trigger: "blur" }]
 });
-const imgSrc = ref("");
-const onChange = uploadFile => {
-  const reader = new FileReader();
-  reader.onload = e => {
-    imgSrc.value = e.target.result as string;
-    isShow.value = true;
-  };
 
-  // reader.onloadend = () => {
-  //   cropRef.value.init();
-  // };
-  reader.readAsDataURL(uploadFile.raw);
-  /*   imgSrc.value = uploadFile.row;
-  isShow.value = true; */
-};
-
-let cropperInfo: any;
-const onCropper = info => {
-  cropperInfo = info;
-};
-
-const handleClose = () => {
-  cropRef.value.hidePopover();
-  upload.value.clearFiles();
-  isShow.value = false;
-};
-
-// 在编辑弹框中上传图片，获取在服务器上的url，
-const handleSubmitImage = () => {
-  const formData = createFormData({
-    files: new File([cropperInfo], "avatar") // file 文件
-  });
-  formUpload(formData)
-    .then(({ success, data }) => {
-      if (success) {
-        message("提交成功", { type: "success" });
-        handleClose();
-      } else {
-        message("提交失败");
-      }
-    })
-    .catch(error => {
-      message(`提交异常 ${error}`, { type: "error" });
-    });
-};
-
-// 监听级联选择器的值变化
-const handleCascaderChange = value => {
-  console.log(value);
-};
-
-// 更新基本信息
-const onSubmit = async (formEl: FormInstance) => {
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      console.log(userInfoFormData);
-      console.log("验证成功!");
-    } else {
-      console.log("error submit!", fields);
-    }
-  });
-};
-
-function createFilter(queryString) {
-  return item => {
-    return item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
-  };
-}
-
-function querySearchEmail(queryString, callback) {
+function queryEmail(queryString, callback) {
   const emailList = [
     { value: "@qq.com" },
     { value: "@126.com" },
@@ -115,10 +39,64 @@ function querySearchEmail(queryString, callback) {
     queryList.push({ value: queryString.split("@")[0] + item.value })
   );
   results = queryString
-    ? queryList.filter(createFilter(queryString))
+    ? queryList.filter(
+        item =>
+          item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+      )
     : queryList;
   callback(results);
 }
+
+const onChange = uploadFile => {
+  const reader = new FileReader();
+  reader.onload = e => {
+    imgSrc.value = e.target.result as string;
+    isShow.value = true;
+  };
+  reader.readAsDataURL(uploadFile.raw);
+};
+
+const handleClose = () => {
+  cropRef.value.hidePopover();
+  uploadRef.value.clearFiles();
+  isShow.value = false;
+};
+
+const onCropper = info => (cropperInfo.value = info);
+
+const handleSubmitImage = () => {
+  const formData = createFormData({
+    files: new File([cropperInfo.value], "avatar")
+  });
+  formUpload(formData)
+    .then(({ success, data }) => {
+      if (success) {
+        message("更新头像成功", { type: "success" });
+        handleClose();
+      } else {
+        message("更新头像失败");
+      }
+    })
+    .catch(error => {
+      message(`提交异常 ${error}`, { type: "error" });
+    });
+};
+
+// 更新信息
+const onSubmit = async (formEl: FormInstance) => {
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log(userInfos);
+      message("更新信息成功", { type: "success" });
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+
+getMine().then(res => {
+  Object.assign(userInfos, res.data);
+});
 </script>
 
 <template>
@@ -133,18 +111,18 @@ function querySearchEmail(queryString, callback) {
       ref="userInfoFormRef"
       label-position="top"
       :rules="rules"
-      :model="userInfoFormData"
+      :model="userInfos"
     >
       <el-form-item label="头像">
-        <el-avatar :size="80" :src="userAvatar" />
+        <el-avatar :size="80" :src="userInfos.avatar" />
         <el-upload
-          ref="upload"
+          ref="uploadRef"
+          accept="image/*"
           action="#"
           :limit="1"
           :auto-upload="false"
           :show-file-list="false"
           :on-change="onChange"
-          accept="image/*"
         >
           <el-button plain class="ml-4">
             <IconifyIconOffline :icon="uploadLine" />
@@ -153,15 +131,12 @@ function querySearchEmail(queryString, callback) {
         </el-upload>
       </el-form-item>
       <el-form-item label="昵称" prop="nickname">
-        <el-input
-          v-model="userInfoFormData.nickname"
-          placeholder="请输入昵称"
-        />
+        <el-input v-model="userInfos.nickname" placeholder="请输入昵称" />
       </el-form-item>
       <el-form-item label="邮箱" prop="email">
         <el-autocomplete
-          v-model="userInfoFormData.email"
-          :fetch-suggestions="querySearchEmail"
+          v-model="userInfos.email"
+          :fetch-suggestions="queryEmail"
           :trigger-on-focus="false"
           placeholder="请输入邮箱"
           clearable
@@ -170,14 +145,14 @@ function querySearchEmail(queryString, callback) {
       </el-form-item>
       <el-form-item label="联系电话">
         <el-input
-          v-model="userInfoFormData.phone"
+          v-model="userInfos.phone"
           placeholder="请输入联系电话"
           clearable
         />
       </el-form-item>
       <el-form-item label="简介">
         <el-input
-          v-model="userInfoFormData.description"
+          v-model="userInfos.description"
           placeholder="请输入简介"
           type="textarea"
           :autosize="{ minRows: 6, maxRows: 8 }"
@@ -191,15 +166,18 @@ function querySearchEmail(queryString, callback) {
     </el-form>
     <el-dialog
       v-model="isShow"
+      width="40%"
       title="编辑头像"
-      :before-close="handleClose"
       destroy-on-close
+      :closeOnClickModal="false"
+      :before-close="handleClose"
+      :fullscreen="deviceDetection()"
     >
-      <CroppingUpload ref="cropRef" :imgSrc="imgSrc" @cropper="onCropper" />
+      <ReCropperPreview ref="cropRef" :imgSrc="imgSrc" @cropper="onCropper" />
       <template #footer>
         <div class="dialog-footer">
-          <el-button @click="handleClose">取消</el-button>
-          <el-button type="primary" @click="handleSubmitImage">
+          <el-button bg text @click="handleClose">取消</el-button>
+          <el-button bg text type="primary" @click="handleSubmitImage">
             确定
           </el-button>
         </div>
diff --git a/src/views/system/user/utils/hook.tsx b/src/views/system/user/utils/hook.tsx
index 1dd74453b..825cbad86 100644
--- a/src/views/system/user/utils/hook.tsx
+++ b/src/views/system/user/utils/hook.tsx
@@ -5,11 +5,11 @@ import editForm from "../form/index.vue";
 import { zxcvbn } from "@zxcvbn-ts/core";
 import { handleTree } from "@/utils/tree";
 import { message } from "@/utils/message";
-import croppingUpload from "../upload.vue";
 import userAvatar from "@/assets/user.jpg";
 import { usePublicHooks } from "../../hooks";
 import { addDialog } from "@/components/ReDialog";
 import type { PaginationProps } from "@pureadmin/table";
+import ReCropperPreview from "@/components/ReCropperPreview";
 import type { FormItemProps, RoleFormItemProps } from "../utils/types";
 import {
   getKeyList,
@@ -365,11 +365,10 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
     addDialog({
       title: "裁剪、上传头像",
       width: "40%",
-      draggable: true,
       closeOnClickModal: false,
       fullscreen: deviceDetection(),
       contentRenderer: () =>
-        h(croppingUpload, {
+        h(ReCropperPreview, {
           ref: cropRef,
           imgSrc: row.avatar || userAvatar,
           onCropper: info => (avatarInfo.value = info)