feat: 图片裁剪组件 & 头像上传

apps/web-antd/package.json

@@ -43,6 +43,7 @@
     "@vben/utils": "workspace:*",
     "@vueuse/core": "^11.0.3",
     "ant-design-vue": "^4.2.3",
+    "cropperjs": "^1.6.2",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.13",
     "echarts": "^5.5.1",

apps/web-antd/src/api/system/profile/index.ts

@@ -1,6 +1,7 @@
-import type { UpdatePasswordParam, UserProfile } from './model';
+import type { FileCallBack, UpdatePasswordParam, UserProfile } from './model';
 
 import { requestClient } from '#/api/request';
+import { buildUUID } from '#/utils/uuid';
 
 enum Api {
   root = '/system/user/profile',
@@ -35,3 +36,29 @@ export function userUpdatePassword(data: UpdatePasswordParam) {
     encrypt: true,
   });
 }
+
+/**
+ * 用户更新个人头像
+ * @param fileCallback data
+ * @returns void
+ */
+export function userUpdateAvatar(fileCallback: FileCallBack) {
+  /** 直接点击头像上传 filename为空 由于后台通过拓展名判断(默认文件名blob) 会上传失败 */
+  let { file } = fileCallback;
+  const { filename } = fileCallback;
+  /**
+   * Blob转File类型
+   * 1. 在直接点击确认 filename为空 取uuid作为文件名
+   * 2. 选择上传必须转为File类型 Blob类型上传后台获取文件名为空
+   */
+  file = filename
+    ? new File([file], filename)
+    : new File([file], `${buildUUID()}.png`);
+  return requestClient.post(
+    Api.updateAvatar,
+    {
+      avatarfile: file,
+    },
+    { headers: { 'Content-Type': 'multipart/form-data' } },
+  );
+}

apps/web-antd/src/api/system/profile/model.d.ts

@@ -67,3 +67,9 @@ export interface UpdatePasswordParam {
   oldPassword: string;
   newPassword: string;
 }
+
+interface FileCallBack {
+  name: string;
+  file: Blob;
+  filename: string;
+}

apps/web-antd/src/components/cropper/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from '#/utils';
+
+import cropperImage from './src/cropper.vue';
+import avatarCropper from './src/cropper-avatar.vue';
+
+export type { Cropper } from './src/typing';
+export const CropperImage = withInstall(cropperImage);
+export const CropperAvatar = withInstall(avatarCropper);

apps/web-antd/src/components/cropper/src/cropper-avatar.vue

@@ -0,0 +1,174 @@
+<script lang="ts" setup>
+import {
+  computed,
+  type CSSProperties,
+  type PropType,
+  ref,
+  unref,
+  watch,
+  watchEffect,
+} from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t as t } from '@vben/locales';
+
+import { type ButtonProps, message } from 'ant-design-vue';
+
+import cropperModal from './cropper-modal.vue';
+
+defineOptions({ name: 'CropperAvatar' });
+
+const props = defineProps({
+  btnProps: { default: () => ({}), type: Object as PropType<ButtonProps> },
+  btnText: { default: '', type: String },
+  showBtn: { default: true, type: Boolean },
+  size: { default: 5, type: Number },
+  uploadApi: {
+    required: true,
+    type: Function as PropType<
+      ({
+        file,
+        filename,
+        name,
+      }: {
+        file: Blob;
+        filename: string;
+        name: string;
+      }) => Promise<any>
+    >,
+  },
+  value: { default: '', type: String },
+
+  width: { default: '200px', type: [String, Number] },
+});
+
+const emit = defineEmits(['update:value', 'change']);
+
+const sourceValue = ref(props.value || '');
+const prefixCls = 'cropper-avatar';
+const [CropperModal, modalApi] = useVbenModal({
+  connectedComponent: cropperModal,
+});
+
+const getClass = computed(() => [prefixCls]);
+
+const getWidth = computed(() => `${`${props.width}`.replace(/px/, '')}px`);
+
+const getIconWidth = computed(
+  () => `${Number.parseInt(`${props.width}`.replace(/px/, '')) / 2}px`,
+);
+
+const getStyle = computed((): CSSProperties => ({ width: unref(getWidth) }));
+
+const getImageWrapperStyle = computed(
+  (): CSSProperties => ({ height: unref(getWidth), width: unref(getWidth) }),
+);
+
+watchEffect(() => {
+  sourceValue.value = props.value || '';
+});
+
+watch(
+  () => sourceValue.value,
+  (v: string) => {
+    emit('update:value', v);
+  },
+);
+
+function handleUploadSuccess({ data, source }: any) {
+  sourceValue.value = source;
+  emit('change', { data, source });
+  message.success(t('component.cropper.uploadSuccess'));
+}
+
+const closeModal = () => modalApi.close();
+const openModal = () => modalApi.open();
+
+defineExpose({
+  closeModal,
+  openModal,
+});
+</script>
+<template>
+  <div :class="getClass" :style="getStyle">
+    <div
+      :class="`${prefixCls}-image-wrapper`"
+      :style="getImageWrapperStyle"
+      @click="openModal"
+    >
+      <div :class="`${prefixCls}-image-mask`" :style="getImageWrapperStyle">
+        <span
+          :style="{
+            ...getImageWrapperStyle,
+            width: `${getIconWidth}`,
+            height: `${getIconWidth}`,
+            lineHeight: `${getIconWidth}`,
+          }"
+          class="icon-[ant-design--cloud-upload-outlined] text-[#d6d6d6]"
+        ></span>
+      </div>
+      <img v-if="sourceValue" :src="sourceValue" alt="avatar" />
+    </div>
+    <a-button
+      v-if="showBtn"
+      :class="`${prefixCls}-upload-btn`"
+      @click="openModal"
+      v-bind="btnProps"
+    >
+      {{ btnText ? btnText : t('component.cropper.selectImage') }}
+    </a-button>
+
+    <CropperModal
+      :size="size"
+      :src="sourceValue"
+      :upload-api="uploadApi"
+      @upload-success="handleUploadSuccess"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.cropper-avatar {
+  display: inline-block;
+  text-align: center;
+
+  &-image-wrapper {
+    overflow: hidden;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #eee;
+    border-radius: 50%;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  &-image-mask {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: inherit;
+    height: inherit;
+    cursor: pointer;
+    background: rgb(0 0 0 / 40%);
+    border: inherit;
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity 0.4s;
+
+    ::v-deep(svg) {
+      margin: auto;
+    }
+  }
+
+  &-image-mask:hover {
+    opacity: 40;
+  }
+
+  &-upload-btn {
+    margin: 10px auto;
+  }
+}
+</style>

apps/web-antd/src/components/cropper/src/cropper-modal.vue

@@ -0,0 +1,353 @@
+<script lang="ts" setup>
+import type { CropendResult, Cropper } from './typing';
+
+import { type PropType, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t as t } from '@vben/locales';
+
+import { Avatar, Space, Tooltip, Upload } from 'ant-design-vue';
+import { isFunction } from 'lodash-es';
+
+import { dataURLtoBlob } from '#/utils/file/base64Conver';
+
+import CropperImage from './cropper.vue';
+
+type apiFunParams = { file: Blob; filename: string; name: string };
+
+defineOptions({ name: 'CropperModal' });
+
+const props = defineProps({
+  circled: { default: true, type: Boolean },
+  size: { default: 0, type: Number },
+  src: { default: '', type: String },
+  uploadApi: {
+    required: true,
+    type: Function as PropType<(params: apiFunParams) => Promise<any>>,
+  },
+});
+
+const emit = defineEmits(['uploadSuccess', 'uploadError', 'register']);
+
+let filename = '';
+const src = ref(props.src || '');
+const previewSource = ref('');
+const cropper = ref<Cropper>();
+let scaleX = 1;
+let scaleY = 1;
+
+const prefixCls = 'cropper-am';
+const [BasicModal, modalApi] = useVbenModal({
+  onConfirm: handleOk,
+});
+
+// Block upload
+function handleBeforeUpload(file: File) {
+  if (props.size > 0 && file.size > 1024 * 1024 * props.size) {
+    emit('uploadError', { msg: t('component.cropper.imageTooBig') });
+    return false;
+  }
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  src.value = '';
+  previewSource.value = '';
+  reader.addEventListener('load', (e) => {
+    src.value = (e.target?.result as string) ?? '';
+    filename = file.name;
+  });
+  return false;
+}
+
+function handleCropend({ imgBase64 }: CropendResult) {
+  previewSource.value = imgBase64;
+}
+
+function handleReady(cropperInstance: Cropper) {
+  cropper.value = cropperInstance;
+}
+
+function handlerToolbar(event: string, arg?: number) {
+  if (event === 'scaleX') {
+    scaleX = arg = scaleX === -1 ? 1 : -1;
+  }
+  if (event === 'scaleY') {
+    scaleY = arg = scaleY === -1 ? 1 : -1;
+  }
+  (cropper?.value as any)?.[event]?.(arg);
+}
+
+async function handleOk() {
+  const uploadApi = props.uploadApi;
+  if (uploadApi && isFunction(uploadApi)) {
+    const blob = dataURLtoBlob(previewSource.value);
+    try {
+      modalApi.setState({ loading: true });
+      const result = await uploadApi({ file: blob, filename, name: 'file' });
+      emit('uploadSuccess', { data: result.url, source: previewSource.value });
+      modalApi.close();
+    } finally {
+      modalApi.setState({ loading: false });
+    }
+  }
+}
+</script>
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    :confirm-text="t('component.cropper.okText')"
+    :fullscreen-button="false"
+    :title="t('component.cropper.modalTitle')"
+    class="w-[800px]"
+  >
+    <div :class="prefixCls">
+      <div :class="`${prefixCls}-left`" class="w-full">
+        <div :class="`${prefixCls}-cropper`">
+          <CropperImage
+            v-if="src"
+            :circled="circled"
+            :src="src"
+            height="300px"
+            @cropend="handleCropend"
+            @ready="handleReady"
+          />
+        </div>
+
+        <div :class="`${prefixCls}-toolbar`">
+          <Upload
+            :before-upload="handleBeforeUpload"
+            :file-list="[]"
+            accept="image/*"
+          >
+            <Tooltip
+              :title="t('component.cropper.selectImage')"
+              placement="bottom"
+            >
+              <a-button size="small" type="primary">
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[ant-design--upload-outlined]"></span>
+                  </div>
+                </template>
+              </a-button>
+            </Tooltip>
+          </Upload>
+          <Space>
+            <Tooltip
+              :title="t('component.cropper.btn_reset')"
+              placement="bottom"
+            >
+              <a-button
+                :disabled="!src"
+                size="small"
+                type="primary"
+                @click="handlerToolbar('reset')"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[ant-design--reload-outlined]"></span>
+                  </div>
+                </template>
+              </a-button>
+            </Tooltip>
+            <Tooltip
+              :title="t('component.cropper.btn_rotate_left')"
+              placement="bottom"
+            >
+              <a-button
+                :disabled="!src"
+                size="small"
+                type="primary"
+                @click="handlerToolbar('rotate', -45)"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span
+                      class="icon-[ant-design--rotate-left-outlined]"
+                    ></span>
+                  </div>
+                </template>
+              </a-button>
+            </Tooltip>
+            <Tooltip
+              :title="t('component.cropper.btn_rotate_right')"
+              placement="bottom"
+            >
+              <a-button
+                :disabled="!src"
+                pre-icon="ant-design:rotate-right-outlined"
+                size="small"
+                type="primary"
+                @click="handlerToolbar('rotate', 45)"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span
+                      class="icon-[ant-design--rotate-right-outlined]"
+                    ></span>
+                  </div>
+                </template>
+              </a-button>
+            </Tooltip>
+            <Tooltip
+              :title="t('component.cropper.btn_scale_x')"
+              placement="bottom"
+            >
+              <a-button
+                :disabled="!src"
+                size="small"
+                type="primary"
+                @click="handlerToolbar('scaleX')"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[vaadin--arrows-long-h]"></span>
+                  </div>
+                </template>
+              </a-button>
+            </Tooltip>
+            <Tooltip
+              :title="t('component.cropper.btn_scale_y')"
+              placement="bottom"
+            >
+              <a-button
+                :disabled="!src"
+                size="small"
+                type="primary"
+                @click="handlerToolbar('scaleY')"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[vaadin--arrows-long-v]"></span>
+                  </div>
+                </template>
+              </a-button>
+            </Tooltip>
+            <Tooltip
+              :title="t('component.cropper.btn_zoom_in')"
+              placement="bottom"
+            >
+              <a-button
+                :disabled="!src"
+                size="small"
+                type="primary"
+                @click="handlerToolbar('zoom', 0.1)"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[ant-design--zoom-in-outlined]"></span>
+                  </div>
+                </template>
+              </a-button>
+            </Tooltip>
+            <Tooltip
+              :title="t('component.cropper.btn_zoom_out')"
+              placement="bottom"
+            >
+              <a-button
+                :disabled="!src"
+                size="small"
+                type="primary"
+                @click="handlerToolbar('zoom', -0.1)"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[ant-design--zoom-out-outlined]"></span>
+                  </div>
+                </template>
+              </a-button>
+            </Tooltip>
+          </Space>
+        </div>
+      </div>
+      <div :class="`${prefixCls}-right`">
+        <div :class="`${prefixCls}-preview`">
+          <img
+            v-if="previewSource"
+            :alt="t('component.cropper.preview')"
+            :src="previewSource"
+          />
+        </div>
+        <template v-if="previewSource">
+          <div :class="`${prefixCls}-group`">
+            <Avatar :src="previewSource" size="large" />
+            <Avatar :size="48" :src="previewSource" />
+            <Avatar :size="64" :src="previewSource" />
+            <Avatar :size="80" :src="previewSource" />
+          </div>
+        </template>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+
+<style lang="scss">
+.cropper-am {
+  display: flex;
+
+  &-left,
+  &-right {
+    height: 340px;
+  }
+
+  &-left {
+    width: 55%;
+  }
+
+  &-right {
+    width: 45%;
+  }
+
+  &-cropper {
+    height: 300px;
+    background: #eee;
+    background-image: linear-gradient(
+        45deg,
+        rgb(0 0 0 / 25%) 25%,
+        transparent 0,
+        transparent 75%,
+        rgb(0 0 0 / 25%) 0
+      ),
+      linear-gradient(
+        45deg,
+        rgb(0 0 0 / 25%) 25%,
+        transparent 0,
+        transparent 75%,
+        rgb(0 0 0 / 25%) 0
+      );
+    background-position:
+      0 0,
+      12px 12px;
+    background-size: 24px 24px;
+  }
+
+  &-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+  }
+
+  &-preview {
+    width: 220px;
+    height: 220px;
+    margin: 0 auto;
+    overflow: hidden;
+    border: 1px solid #eee;
+    border-radius: 50%;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-group {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding-top: 8px;
+    margin-top: 8px;
+    border-top: 1px solid #eee;
+  }
+}
+</style>

apps/web-antd/src/components/cropper/src/cropper.vue

@@ -0,0 +1,195 @@
+<script lang="ts" setup>
+import type { CSSProperties, PropType } from 'vue';
+import { computed, onMounted, onUnmounted, ref, unref, useAttrs } from 'vue';
+
+import { useDebounceFn } from '@vueuse/core';
+import Cropper from 'cropperjs';
+
+import 'cropperjs/dist/cropper.css';
+
+type Options = Cropper.Options;
+
+defineOptions({ name: 'CropperImage' });
+
+const props = defineProps({
+  alt: { default: '', type: String },
+  circled: { default: false, type: Boolean },
+  crossorigin: {
+    default: undefined,
+    type: String as PropType<'' | 'anonymous' | 'use-credentials' | undefined>,
+  },
+  height: { default: '360px', type: [String, Number] },
+  imageStyle: { default: () => ({}), type: Object as PropType<CSSProperties> },
+  options: { default: () => ({}), type: Object as PropType<Options> },
+  realTimePreview: { default: true, type: Boolean },
+  src: { required: true, type: String },
+});
+
+const emit = defineEmits(['cropend', 'ready', 'cropendError']);
+
+const defaultOptions: Options = {
+  aspectRatio: 1,
+  autoCrop: true,
+  background: true,
+  center: true,
+  checkCrossOrigin: true,
+  checkOrientation: true,
+  cropBoxMovable: true,
+  cropBoxResizable: true,
+  guides: true,
+  highlight: true,
+  modal: true,
+  movable: true,
+  responsive: true,
+  restore: true,
+  rotatable: true,
+  scalable: true,
+  toggleDragModeOnDblclick: true,
+  zoomable: true,
+  zoomOnTouch: true,
+  zoomOnWheel: true,
+};
+
+const attrs = useAttrs();
+
+type ElRef<T extends HTMLElement = HTMLDivElement> = null | T;
+const imgElRef = ref<ElRef<HTMLImageElement>>();
+const cropper = ref<Cropper | null>();
+const isReady = ref(false);
+
+const prefixCls = 'cropper-image';
+const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80);
+
+const getImageStyle = computed((): CSSProperties => {
+  return {
+    height: props.height,
+    maxWidth: '100%',
+    ...props.imageStyle,
+  };
+});
+
+const getClass = computed(() => {
+  return [
+    prefixCls,
+    attrs.class,
+    {
+      [`${prefixCls}--circled`]: props.circled,
+    },
+  ];
+});
+
+const getWrapperStyle = computed((): CSSProperties => {
+  return { height: `${`${props.height}`.replace(/px/, '')}px` };
+});
+
+onMounted(init);
+
+onUnmounted(() => {
+  cropper.value?.destroy();
+});
+
+async function init() {
+  const imgEl = unref(imgElRef);
+  if (!imgEl) {
+    return;
+  }
+  cropper.value = new Cropper(imgEl, {
+    ...defaultOptions,
+    crop() {
+      debounceRealTimeCroppered();
+    },
+    cropmove() {
+      debounceRealTimeCroppered();
+    },
+    ready: () => {
+      isReady.value = true;
+      realTimeCroppered();
+      emit('ready', cropper.value);
+    },
+    zoom() {
+      debounceRealTimeCroppered();
+    },
+    ...props.options,
+  });
+}
+
+// Real-time display preview
+function realTimeCroppered() {
+  props.realTimePreview && croppered();
+}
+
+// event: return base64 and width and height information after cropping
+function croppered() {
+  if (!cropper.value) {
+    return;
+  }
+  const imgInfo = cropper.value.getData();
+  const canvas = props.circled
+    ? getRoundedCanvas()
+    : cropper.value.getCroppedCanvas();
+  canvas.toBlob((blob) => {
+    if (!blob) {
+      return;
+    }
+    const fileReader: FileReader = new FileReader();
+    fileReader.readAsDataURL(blob);
+    fileReader.onloadend = (e) => {
+      emit('cropend', {
+        imgBase64: e.target?.result ?? '',
+        imgInfo,
+      });
+    };
+    // eslint-disable-next-line unicorn/prefer-add-event-listener
+    fileReader.onerror = () => {
+      emit('cropendError');
+    };
+  }, 'image/png');
+}
+
+// Get a circular picture canvas
+function getRoundedCanvas() {
+  const sourceCanvas = cropper.value!.getCroppedCanvas();
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d')!;
+  const width = sourceCanvas.width;
+  const height = sourceCanvas.height;
+  canvas.width = width;
+  canvas.height = height;
+  context.imageSmoothingEnabled = true;
+  context.drawImage(sourceCanvas, 0, 0, width, height);
+  context.globalCompositeOperation = 'destination-in';
+  context.beginPath();
+  context.arc(
+    width / 2,
+    height / 2,
+    Math.min(width, height) / 2,
+    0,
+    2 * Math.PI,
+    true,
+  );
+  context.fill();
+  return canvas;
+}
+</script>
+<template>
+  <div :class="getClass" :style="getWrapperStyle">
+    <img
+      v-show="isReady"
+      ref="imgElRef"
+      :alt="alt"
+      :crossorigin="crossorigin"
+      :src="src"
+      :style="getImageStyle"
+    />
+  </div>
+</template>
+<style lang="scss">
+.cropper-image {
+  &--circled {
+    .cropper-view-box,
+    .cropper-face {
+      border-radius: 50%;
+    }
+  }
+}
+</style>

apps/web-antd/src/components/cropper/src/typing.ts

@@ -0,0 +1,8 @@
+import type Cropper from 'cropperjs';
+
+export interface CropendResult {
+  imgBase64: string;
+  imgInfo: Cropper.Data;
+}
+
+export type { Cropper };

apps/web-antd/src/locales/langs/en-US.json

@@ -4,5 +4,22 @@
       "title": "Demos",
       "antd": "Ant Design Vue"
     }
+  },
+  "component": {
+    "cropper": {
+      "selectImage": "Select Image",
+      "uploadSuccess": "Uploaded success!",
+      "imageTooBig": "Image too big",
+      "modalTitle": "Avatar upload",
+      "okText": "Confirm and upload",
+      "btn_reset": "Reset",
+      "btn_rotate_left": "Counterclockwise rotation",
+      "btn_rotate_right": "Clockwise rotation",
+      "btn_scale_x": "Flip horizontal",
+      "btn_scale_y": "Flip vertical",
+      "btn_zoom_in": "Zoom in",
+      "btn_zoom_out": "Zoom out",
+      "preview": "Preview"
+    }
   }
 }

apps/web-antd/src/locales/langs/zh-CN.json

@@ -4,5 +4,22 @@
       "title": "演示",
       "antd": "Ant Design Vue"
     }
+  },
+  "component": {
+    "cropper": {
+      "selectImage": "选择图片",
+      "uploadSuccess": "上传成功",
+      "imageTooBig": "图片超限",
+      "modalTitle": "头像上传",
+      "okText": "确认并上传",
+      "btn_reset": "重置",
+      "btn_rotate_left": "逆时针旋转",
+      "btn_rotate_right": "顺时针旋转",
+      "btn_scale_x": "水平翻转",
+      "btn_scale_y": "垂直翻转",
+      "btn_zoom_in": "放大",
+      "btn_zoom_out": "缩小",
+      "preview": "预览"
+    }
   }
 }

apps/web-antd/src/utils/file/base64Conver.ts

@@ -0,0 +1,46 @@
+/**
+ * @description: base64 to blob
+ */
+export function dataURLtoBlob(base64Buf: string): Blob {
+  const arr = base64Buf.split(',');
+  const typeItem = arr[0];
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const mime = typeItem!.match(/:(.*?);/)![1];
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const bstr = window.atob(arr[1]!);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  while (n--) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    u8arr[n] = bstr.codePointAt(n)!;
+  }
+  return new Blob([u8arr], { type: mime });
+}
+
+/**
+ * img url to base64
+ * @param url
+ */
+export function urlToBase64(url: string, mineType?: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let canvas = document.createElement('CANVAS') as HTMLCanvasElement | null;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const ctx = canvas!.getContext('2d');
+
+    const img = new Image();
+    img.crossOrigin = '';
+    img.addEventListener('load', () => {
+      if (!canvas || !ctx) {
+        // eslint-disable-next-line prefer-promise-reject-errors
+        return reject();
+      }
+      canvas.height = img.height;
+      canvas.width = img.width;
+      ctx.drawImage(img, 0, 0);
+      const dataURL = canvas.toDataURL(mineType || 'image/png');
+      canvas = null;
+      resolve(dataURL);
+    });
+    img.src = url;
+  });
+}

apps/web-antd/src/utils/file/download.ts

@@ -0,0 +1,125 @@
+import { openWindow } from '..';
+import { dataURLtoBlob, urlToBase64 } from './base64Conver';
+
+export function downloadExcelFile(
+  data: BlobPart,
+  filename: string,
+  withRandomName = true,
+) {
+  let realFileName = filename;
+  if (withRandomName) {
+    realFileName = `${filename}-${Date.now()}.xlsx`;
+  }
+  downloadByData(data, realFileName);
+}
+
+/**
+ * Download online pictures
+ * @param url
+ * @param filename
+ * @param mime
+ * @param bom
+ */
+export function downloadByOnlineUrl(
+  url: string,
+  filename: string,
+  mime?: string,
+  bom?: BlobPart,
+) {
+  urlToBase64(url).then((base64) => {
+    downloadByBase64(base64, filename, mime, bom);
+  });
+}
+
+/**
+ * Download pictures based on base64
+ * @param buf
+ * @param filename
+ * @param mime
+ * @param bom
+ */
+export function downloadByBase64(
+  buf: string,
+  filename: string,
+  mime?: string,
+  bom?: BlobPart,
+) {
+  const base64Buf = dataURLtoBlob(buf);
+  downloadByData(base64Buf, filename, mime, bom);
+}
+
+/**
+ * Download according to the background interface file stream
+ * @param {*} data
+ * @param {*} filename
+ * @param {*} mime
+ * @param {*} bom
+ */
+export function downloadByData(
+  data: BlobPart,
+  filename: string,
+  mime?: string,
+  bom?: BlobPart,
+) {
+  const blobData = bom === undefined ? [data] : [bom, data];
+  const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
+
+  const blobURL = window.URL.createObjectURL(blob);
+  const tempLink = document.createElement('a');
+  tempLink.style.display = 'none';
+  tempLink.href = blobURL;
+  tempLink.setAttribute('download', filename);
+  if (tempLink.download === undefined) {
+    tempLink.setAttribute('target', '_blank');
+  }
+  document.body.append(tempLink);
+  tempLink.click();
+  tempLink.remove();
+  window.URL.revokeObjectURL(blobURL);
+}
+
+/**
+ * Download file according to file address
+ * @param {*} sUrl
+ */
+export function downloadByUrl({
+  fileName,
+  target = '_blank',
+  url,
+}: {
+  fileName?: string;
+  target?: '_blank' | '_self';
+  url: string;
+}): boolean {
+  const isChrome = window.navigator.userAgent.toLowerCase().includes('chrome');
+  const isSafari = window.navigator.userAgent.toLowerCase().includes('safari');
+
+  if (/iP/.test(window.navigator.userAgent)) {
+    console.error('Your browser does not support download!');
+    return false;
+  }
+  if (isChrome || isSafari) {
+    const link = document.createElement('a');
+    link.href = url;
+    link.target = target;
+
+    if (link.download !== undefined) {
+      link.download =
+        // eslint-disable-next-line unicorn/prefer-string-slice
+        fileName || url.substring(url.lastIndexOf('/') + 1, url.length);
+    }
+
+    if (document.createEvent) {
+      const e = document.createEvent('MouseEvents');
+      e.initEvent('click', true, true);
+      link.dispatchEvent(e);
+      return true;
+    }
+  }
+  if (!url.includes('?')) {
+    url += '?download';
+  }
+
+  openWindow(url, { target });
+  return true;
+}

apps/web-antd/src/views/_core/profile/index.vue

@@ -23,7 +23,7 @@ onMounted(loadProfile);
   <Page>
     <div class="flex flex-col gap-[16px] lg:flex-row">
       <!-- 左侧 -->
-      <ProfilePanel :profile="profile" />
+      <ProfilePanel :profile="profile" @upload-finish="loadProfile" />
       <!-- 右侧 -->
       <SettingPanel v-if="profile" :profile="profile" @reload="loadProfile" />
     </div>

apps/web-antd/src/views/_core/profile/profile-panel.vue

@@ -1,22 +1,42 @@
 <script setup lang="ts">
 import type { UserProfile } from '#/api/system/profile/model';
 
+import { computed } from 'vue';
+
 import {
-  Avatar,
   Card,
   Descriptions,
   DescriptionsItem,
   Tag,
+  Tooltip,
 } from 'ant-design-vue';
 
-defineProps<{ profile?: UserProfile }>();
+import { userUpdateAvatar } from '#/api/system/profile';
+import { CropperAvatar } from '#/components/cropper';
+
+const props = defineProps<{ profile?: UserProfile }>();
+
+defineEmits<{
+  // 头像上传完毕
+  uploadFinish: [];
+}>();
+
+const avatar = computed(() => props.profile?.user.avatar ?? '');
 </script>
 
 <template>
   <Card :loading="!profile" class="h-full lg:w-1/3">
     <div v-if="profile" class="flex flex-col items-center gap-[24px]">
       <div class="flex flex-col items-center gap-[20px]">
-        <Avatar :size="96" :src="profile.user.avatar" />
+        <Tooltip title="点击上传头像">
+          <CropperAvatar
+            :show-btn="false"
+            :upload-api="userUpdateAvatar"
+            :value="avatar"
+            width="120"
+            @change="$emit('uploadFinish')"
+          />
+        </Tooltip>
         <div class="flex flex-col items-center gap-[8px]">
           <span class="text-foreground text-xl font-bold">
             {{ profile.user.nickName ?? '未知' }}

pnpm-lock.yaml

@@ -180,6 +180,9 @@ importers:
       ant-design-vue:
         specifier: ^4.2.3
         version: 4.2.3(vue@3.4.38(typescript@5.5.4))
+      cropperjs:
+        specifier: ^1.6.2
+        version: 1.6.2
       crypto-js:
         specifier: ^4.2.0
         version: 4.2.0
@@ -216,7 +219,7 @@ importers:
         version: 4.17.12
       unplugin-vue-components:
         specifier: ^0.27.3
-        version: 0.27.4(@babel/parser@7.25.4)(rollup@4.21.1)(vue@3.4.38(typescript@5.5.4))
+        version: 0.27.4(@babel/parser@7.25.6)(rollup@4.21.2)(vue@3.4.38(typescript@5.5.4))
 
   apps/web-ele:
     dependencies:
@@ -4333,31 +4336,20 @@ packages:
   '@volar/language-core@2.4.0':
     resolution: {integrity: sha512-FTla+khE+sYK0qJP+6hwPAAUwiNHVMph4RUXpxf/FIPKUP61NFrVZorml4mjFShnueR2y9/j8/vnh09YwVdH7A==}
 
-  '@volar/source-map@2.4.0':
-    resolution: {integrity: sha512-2ceY8/NEZvN6F44TXw2qRP6AQsvCYhV2bxaBPWxV9HqIfkbRydSksTFObCF1DBDNBfKiZTS8G/4vqV6cvjdOIQ==}
-
-<<<<<<< HEAD
-  '@volar/typescript@2.4.0':
-    resolution: {integrity: sha512-9zx3lQWgHmVd+JRRAHUSRiEhe4TlzL7U7e6ulWXOxHH/WNYxzKwCvZD7WYWEZFdw4dHfTD9vUR0yPQO6GilCaQ==}
-=======
   '@volar/language-core@2.4.1':
     resolution: {integrity: sha512-9AKhC7Qn2mQYxj7Dz3bVxeOk7gGJladhWixUYKef/o0o7Bm4an+A3XvmcTHVqZ8stE6lBVH++g050tBtJ4TZPQ==}
 
-  '@volar/source-map@2.3.4':
+  '@volar/source-map@2.4.0':
-    resolution: {integrity: sha512-C+t63nwcblqLIVTYXaVi/+gC8NukDaDIQI72J3R7aXGvtgaVB16c+J8Iz7/VfOy7kjYv7lf5GhBny6ACw9fTGQ==}
+    resolution: {integrity: sha512-2ceY8/NEZvN6F44TXw2qRP6AQsvCYhV2bxaBPWxV9HqIfkbRydSksTFObCF1DBDNBfKiZTS8G/4vqV6cvjdOIQ==}
-
-  '@volar/source-map@2.4.0-alpha.18':
-    resolution: {integrity: sha512-MTeCV9MUwwsH0sNFiZwKtFrrVZUK6p8ioZs3xFzHc2cvDXHWlYN3bChdQtwKX+FY2HG6H3CfAu1pKijolzIQ8g==}
 
   '@volar/source-map@2.4.1':
     resolution: {integrity: sha512-Xq6ep3OZg9xUqN90jEgB9ztX5SsTz1yiV8wiQbcYNjWkek+Ie3dc8l7AVt3EhDm9mSIR58oWczHkzM2H6HIsmQ==}
 
-  '@volar/typescript@2.3.4':
+  '@volar/typescript@2.4.0':
-    resolution: {integrity: sha512-acCvt7dZECyKcvO5geNybmrqOsu9u8n5XP1rfiYsOLYGPxvHRav9BVmEdRyZ3vvY6mNyQ1wLL5Hday4IShe17w==}
+    resolution: {integrity: sha512-9zx3lQWgHmVd+JRRAHUSRiEhe4TlzL7U7e6ulWXOxHH/WNYxzKwCvZD7WYWEZFdw4dHfTD9vUR0yPQO6GilCaQ==}
 
   '@volar/typescript@2.4.1':
     resolution: {integrity: sha512-UoRzC0PXcwajFQTu8XxKSYNsWNBtVja6Y9gC8eLv7kYm+UEKJCcZ8g7dialsOYA0HKs3Vpg57MeCsawFLC6m9Q==}
->>>>>>> 2b0aedbabaedc487e852331b38b00dcf3a738ce9
 
   '@vue/babel-helper-vue-transform-on@1.2.2':
     resolution: {integrity: sha512-nOttamHUR3YzdEqdM/XXDyCSdxMA9VizUKoroLX6yTyRtggzQMHXcmwh8a7ZErcJttIBIc9s68a1B8GZ+Dmvsw==}
@@ -5182,6 +5174,9 @@ packages:
     resolution: {integrity: sha512-1VdUuRnQP4drdFkS8NKvDR1NBgevm8TOuflcaZEKsxw42CxonjW/2vkj1AKlinJb4ZLwBcuWF9GiPr7FQc6AQA==}
     engines: {node: '>=18.0'}
 
+  cropperjs@1.6.2:
+    resolution: {integrity: sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA==}
+
   cross-env@7.0.3:
     resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
     engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
@@ -13398,35 +13393,23 @@ snapshots:
     dependencies:
       '@volar/source-map': 2.4.0
 
-  '@volar/source-map@2.4.0': {}
-
-  '@volar/typescript@2.4.0':
-    dependencies:
-<<<<<<< HEAD
-      '@volar/language-core': 2.4.0
-=======
-      '@volar/source-map': 2.4.0-alpha.18
-
   '@volar/language-core@2.4.1':
     dependencies:
       '@volar/source-map': 2.4.1
 
-  '@volar/source-map@2.3.4': {}
+  '@volar/source-map@2.4.0': {}
-
-  '@volar/source-map@2.4.0-alpha.18': {}
 
   '@volar/source-map@2.4.1': {}
 
-  '@volar/typescript@2.3.4':
+  '@volar/typescript@2.4.0':
     dependencies:
-      '@volar/language-core': 2.3.4
+      '@volar/language-core': 2.4.0
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
   '@volar/typescript@2.4.1':
     dependencies:
       '@volar/language-core': 2.4.1
->>>>>>> 2b0aedbabaedc487e852331b38b00dcf3a738ce9
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
@@ -14413,6 +14396,8 @@ snapshots:
 
   croner@8.1.1: {}
 
+  cropperjs@1.6.2: {}
+
   cross-env@7.0.3:
     dependencies:
       cross-spawn: 7.0.3
@@ -19160,10 +19145,10 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  unplugin-vue-components@0.27.4(@babel/parser@7.25.4)(rollup@4.21.1)(vue@3.4.38(typescript@5.5.4)):
+  unplugin-vue-components@0.27.4(@babel/parser@7.25.6)(rollup@4.21.2)(vue@3.4.38(typescript@5.5.4)):
     dependencies:
       '@antfu/utils': 0.7.10
-      '@rollup/pluginutils': 5.1.0(rollup@4.21.1)
+      '@rollup/pluginutils': 5.1.0(rollup@4.21.2)
       chokidar: 3.6.0
       debug: 4.3.6
       fast-glob: 3.3.2
@@ -19174,7 +19159,7 @@ snapshots:
       unplugin: 1.12.2
       vue: 3.4.38(typescript@5.5.4)
     optionalDependencies:
-      '@babel/parser': 7.25.4
+      '@babel/parser': 7.25.6
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -19312,13 +19297,8 @@ snapshots:
   vite-plugin-dts@4.0.3(@types/node@22.5.1)(rollup@4.21.2)(typescript@5.5.4)(vite@5.4.2(@types/node@22.5.1)(less@4.2.0)(sass@1.77.8)(terser@5.31.6)):
     dependencies:
       '@microsoft/api-extractor': 7.47.4(@types/node@22.5.1)
-<<<<<<< HEAD
-      '@rollup/pluginutils': 5.1.0(rollup@4.21.1)
-      '@volar/typescript': 2.4.0
-=======
       '@rollup/pluginutils': 5.1.0(rollup@4.21.2)
-      '@volar/typescript': 2.3.4
+      '@volar/typescript': 2.4.0
->>>>>>> 2b0aedbabaedc487e852331b38b00dcf3a738ce9
       '@vue/language-core': 2.0.29(typescript@5.5.4)
       compare-versions: 6.1.1
       debug: 4.3.6
@@ -19551,11 +19531,7 @@ snapshots:
 
   vue-tsc@2.0.29(typescript@5.5.4):
     dependencies:
-<<<<<<< HEAD
-      '@volar/typescript': 2.4.0
-=======
       '@volar/typescript': 2.4.1
->>>>>>> 2b0aedbabaedc487e852331b38b00dcf3a738ce9
       '@vue/language-core': 2.0.29(typescript@5.5.4)
       semver: 7.6.3
       typescript: 5.5.4