feat: 添加账户设置功能页面且兼容移动端 (#1022)

src/views/system/user/upload.vue

@@ -1,72 +0,0 @@
-<script setup lang="tsx">
-import { ref } from "vue";
-import ReCropper from "@/components/ReCropper";
-import { formatBytes } from "@pureadmin/utils";
-
-const props = defineProps({
-  imgSrc: String
-});
-
-const emit = defineEmits(["cropper"]);
-
-const infos = ref();
-const popoverRef = ref();
-const refCropper = ref();
-const showPopover = ref(false);
-const cropperImg = ref<string>("");
-
-function onCropper({ base64, blob, info }) {
-  infos.value = info;
-  cropperImg.value = base64;
-  emit("cropper", { base64, blob, info });
-}
-
-function hidePopover() {
-  popoverRef.value.hide();
-}
-
-defineExpose({ hidePopover });
-</script>
-
-<template>
-  <div v-loading="!showPopover" element-loading-background="transparent">
-    <el-popover
-      ref="popoverRef"
-      :visible="showPopover"
-      placement="right"
-      width="18vw"
-    >
-      <template #reference>
-        <div class="w-[18vw]">
-          <ReCropper
-            ref="refCropper"
-            :src="props.imgSrc"
-            circled
-            @cropper="onCropper"
-            @readied="showPopover = true"
-          />
-          <p v-show="showPopover" class="mt-1 text-center">
-            温馨提示：右键上方裁剪区可开启功能菜单
-          </p>
-        </div>
-      </template>
-      <div class="flex flex-wrap justify-center items-center text-center">
-        <el-image
-          v-if="cropperImg"
-          :src="cropperImg"
-          :preview-src-list="Array.of(cropperImg)"
-          fit="cover"
-        />
-        <div v-if="infos" class="mt-1">
-          <p>
-            图像大小：{{ parseInt(infos.width) }} ×
-            {{ parseInt(infos.height) }}像素
-          </p>
-          <p>
-            文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
-          </p>
-        </div>
-      </div>
-    </el-popover>
-  </div>
-</template>

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)