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

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;

src/components/ReCropperPreview/src/index.vue

@@ -0,0 +1,76 @@
+<script setup lang="tsx">
+import { ref } from "vue";
+import ReCropper from "@/components/ReCropper";
+import { formatBytes } from "@pureadmin/utils";
+
+defineOptions({
+  name: "ReCropperPreview"
+});
+
+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/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(() => {

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([]);
 

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: {