Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev

apps/web-antd/src/adapter/component/index.ts

@@ -3,6 +3,8 @@
  * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
  */
 
+/* eslint-disable vue/one-component-per-file */
+
 import type {
   UploadChangeParam,
   UploadFile,
@@ -15,6 +17,7 @@ import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
 import {
+  computed,
   defineAsyncComponent,
   defineComponent,
   h,
@@ -24,12 +27,17 @@ import {
   watch,
 } from 'vue';
 
-import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
+import {
+  ApiComponent,
+  globalShareState,
+  IconPicker,
+  VCropper,
+} from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { isEmpty } from '@vben/utils';
 
-import { notification } from 'ant-design-vue';
+import { message, Modal, notification } from 'ant-design-vue';
 
 import { Tinymce as RichTextarea } from '#/components/tinymce';
 import { FileUpload, ImageUpload } from '#/components/upload';
@@ -125,9 +133,249 @@ const withDefaultPlaceholder = <T extends Component>(
 };
 
 const withPreviewUpload = () => {
+  // 检查是否为图片文件的辅助函数
+  const isImageFile = (file: UploadFile): boolean => {
+    const imageExtensions = new Set([
+      'bmp',
+      'gif',
+      'jpeg',
+      'jpg',
+      'png',
+      'svg',
+      'webp',
+    ]);
+    if (file.url) {
+      try {
+        const pathname = new URL(file.url, 'http://localhost').pathname;
+        const ext = pathname.split('.').pop()?.toLowerCase();
+        return ext ? imageExtensions.has(ext) : false;
+      } catch {
+        const ext = file.url?.split('.').pop()?.toLowerCase();
+        return ext ? imageExtensions.has(ext) : false;
+      }
+    }
+    if (!file.type) {
+      const ext = file.name?.split('.').pop()?.toLowerCase();
+      return ext ? imageExtensions.has(ext) : false;
+    }
+    return file.type.startsWith('image/');
+  };
+  // 创建默认的上传按钮插槽
+  const createDefaultSlotsWithUpload = (
+    listType: string,
+    placeholder: string,
+  ) => {
+    switch (listType) {
+      case 'picture-card': {
+        return {
+          default: () => placeholder,
+        };
+      }
+      default: {
+        return {
+          default: () =>
+            h(
+              Button,
+              {
+                icon: h(IconifyIcon, {
+                  icon: 'ant-design:upload-outlined',
+                  class: 'mb-1 size-4',
+                }),
+              },
+              () => placeholder,
+            ),
+        };
+      }
+    }
+  };
+  // 构建预览图片组
+  const previewImage = async (
+    file: UploadFile,
+    visible: Ref<boolean>,
+    fileList: Ref<UploadProps['fileList']>,
+  ) => {
+    // 如果当前文件不是图片，直接打开
+    if (!isImageFile(file)) {
+      if (file.url) {
+        window.open(file.url, '_blank');
+      } else if (file.preview) {
+        window.open(file.preview, '_blank');
+      } else {
+        message.error($t('ui.formRules.previewWarning'));
+      }
+      return;
+    }
+
+    // 对于图片文件，继续使用预览组
+    const [ImageComponent, PreviewGroupComponent] = await Promise.all([
+      Image,
+      PreviewGroup,
+    ]);
+
+    const getBase64 = (file: File) => {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.addEventListener('load', () => resolve(reader.result));
+        reader.addEventListener('error', (error) => reject(error));
+      });
+    };
+    // 从fileList中过滤出所有图片文件
+    const imageFiles = (unref(fileList) || []).filter((element) =>
+      isImageFile(element),
+    );
+
+    // 为所有没有预览地址的图片生成预览
+    for (const imgFile of imageFiles) {
+      if (!imgFile.url && !imgFile.preview && imgFile.originFileObj) {
+        imgFile.preview = (await getBase64(imgFile.originFileObj)) as string;
+      }
+    }
+    const container: HTMLElement | null = document.createElement('div');
+    document.body.append(container);
+
+    // 用于追踪组件是否已卸载
+    let isUnmounted = false;
+
+    const PreviewWrapper = {
+      setup() {
+        return () => {
+          if (isUnmounted) return null;
+          return h(
+            PreviewGroupComponent,
+            {
+              class: 'hidden',
+              preview: {
+                visible: visible.value,
+                // 设置初始显示的图片索引
+                current: imageFiles.findIndex((f) => f.uid === file.uid),
+                onVisibleChange: (value: boolean) => {
+                  visible.value = value;
+                  if (!value) {
+                    // 延迟清理，确保动画完成
+                    setTimeout(() => {
+                      if (!isUnmounted && container) {
+                        isUnmounted = true;
+                        render(null, container);
+                        container.remove();
+                      }
+                    }, 300);
+                  }
+                },
+              },
+            },
+            () =>
+              // 渲染所有图片文件
+              imageFiles.map((imgFile) =>
+                h(ImageComponent, {
+                  key: imgFile.uid,
+                  src: imgFile.url || imgFile.preview,
+                }),
+              ),
+          );
+        };
+      },
+    };
+
+    render(h(PreviewWrapper), container);
+  };
+
+  // 图片裁剪操作
+  const cropImage = (file: File, aspectRatio: string | undefined) => {
+    return new Promise((resolve, reject) => {
+      const container: HTMLElement | null = document.createElement('div');
+      document.body.append(container);
+
+      // 用于追踪组件是否已卸载
+      let isUnmounted = false;
+      let objectUrl: null | string = null;
+
+      const open = ref<boolean>(true);
+      const cropperRef = ref<InstanceType<typeof VCropper> | null>(null);
+
+      const closeModal = () => {
+        open.value = false;
+        // 延迟清理，确保动画完成
+        setTimeout(() => {
+          if (!isUnmounted && container) {
+            if (objectUrl) {
+              URL.revokeObjectURL(objectUrl);
+            }
+            isUnmounted = true;
+            render(null, container);
+            container.remove();
+          }
+        }, 300);
+      };
+
+      const CropperWrapper = {
+        setup() {
+          return () => {
+            if (isUnmounted) return null;
+            if (!objectUrl) {
+              objectUrl = URL.createObjectURL(file);
+            }
+            return h(
+              Modal,
+              {
+                open: open.value,
+                title: h('div', {}, [
+                  $t('ui.crop.title'),
+                  h(
+                    'span',
+                    {
+                      class: `${aspectRatio ? '' : 'hidden'} ml-2 text-sm text-gray-400 font-normal`,
+                    },
+                    $t('ui.crop.titleTip', [aspectRatio]),
+                  ),
+                ]),
+                centered: true,
+                width: 548,
+                keyboard: false,
+                maskClosable: false,
+                closable: false,
+                cancelText: $t('common.cancel'),
+                okText: $t('ui.crop.confirm'),
+                destroyOnClose: true,
+                onOk: async () => {
+                  const cropper = cropperRef.value;
+                  if (!cropper) {
+                    reject(new Error('Cropper not found'));
+                    closeModal();
+                    return;
+                  }
+                  try {
+                    const dataUrl = await cropper.getCropImage();
+                    resolve(dataUrl);
+                  } catch {
+                    reject(new Error($t('ui.crop.errorTip')));
+                  } finally {
+                    closeModal();
+                  }
+                },
+                onCancel() {
+                  resolve('');
+                  closeModal();
+                },
+              },
+              () =>
+                h(VCropper, {
+                  ref: (ref: any) => (cropperRef.value = ref),
+                  img: objectUrl as string,
+                  aspectRatio,
+                }),
+            );
+          };
+        },
+      };
+
+      render(h(CropperWrapper), container);
+    });
+  };
+
   return defineComponent({
     name: Upload.name,
-    emits: ['change', 'update:modelValue'],
+    emits: ['update:modelValue'],
     setup: (
       props: any,
       { attrs, slots, emit }: { attrs: any; emit: any; slots: any },
@@ -142,9 +390,54 @@ const withPreviewUpload = () => {
         attrs?.fileList || attrs?.['file-list'] || [],
       );
 
-      const handleChange = async (event: UploadChangeParam) => {
-        fileList.value = event.fileList;
-        emit('change', event);
+      const maxSize = computed(() => attrs?.maxSize ?? attrs?.['max-size']);
+      const aspectRatio = computed(
+        () => attrs?.aspectRatio ?? attrs?.['aspect-ratio'],
+      );
+
+      const handleBeforeUpload = async (
+        file: UploadFile,
+        originFileList: Array<File>,
+      ) => {
+        if (maxSize.value && (file.size || 0) / 1024 / 1024 > maxSize.value) {
+          message.error($t('ui.formRules.sizeLimit', [maxSize.value]));
+          file.status = 'removed';
+          return false;
+        }
+        // 多选或者非图片不唤起裁剪框
+        if (
+          attrs.crop &&
+          !attrs.multiple &&
+          originFileList[0] &&
+          isImageFile(file)
+        ) {
+          file.status = 'removed';
+          // antd Upload组件问题 file参数获取的是UploadFile类型对象无法取到File类型 所以通过originFileList[0]获取
+          const blob = await cropImage(originFileList[0], aspectRatio.value);
+          return new Promise((resolve, reject) => {
+            if (!blob) {
+              return reject(new Error($t('ui.crop.errorTip')));
+            }
+            resolve(blob);
+          });
+        }
+
+        return attrs.beforeUpload?.(file) ?? true;
+      };
+
+      const handleChange = (event: UploadChangeParam) => {
+        try {
+          // 行内写法 handleChange: (event) => {}
+          attrs.handleChange?.(event);
+          // template写法 @handle-change="(event) => {}"
+          attrs.onHandleChange?.(event);
+        } catch (error) {
+          // Avoid breaking internal v-model sync on user handler errors
+          console.error(error);
+        }
+        fileList.value = event.fileList.filter(
+          (file) => file.status !== 'removed',
+        );
         emit(
           'update:modelValue',
           event.fileList?.length ? fileList.value : undefined,
@@ -185,6 +478,7 @@ const withPreviewUpload = () => {
             ...props,
             ...attrs,
             fileList: fileList.value,
+            beforeUpload: handleBeforeUpload,
             onChange: handleChange,
             onPreview: handlePreview,
           },
@@ -194,146 +488,6 @@ const withPreviewUpload = () => {
   });
 };
 
-const createDefaultSlotsWithUpload = (
-  listType: string,
-  placeholder: string,
-) => {
-  switch (listType) {
-    case 'picture-card': {
-      return {
-        default: () => placeholder,
-      };
-    }
-    default: {
-      return {
-        default: () =>
-          h(
-            Button,
-            {
-              icon: h(IconifyIcon, {
-                icon: 'ant-design:upload-outlined',
-                class: 'mb-1 size-4',
-              }),
-            },
-            () => placeholder,
-          ),
-      };
-    }
-  }
-};
-
-const previewImage = async (
-  file: UploadFile,
-  visible: Ref<boolean>,
-  fileList: Ref<UploadProps['fileList']>,
-) => {
-  // 检查是否为图片文件的辅助函数
-  const isImageFile = (file: UploadFile): boolean => {
-    const imageExtensions = new Set([
-      'bmp',
-      'gif',
-      'jpeg',
-      'jpg',
-      'png',
-      'webp',
-    ]);
-    if (file.url) {
-      const ext = file.url?.split('.').pop()?.toLowerCase();
-      return ext ? imageExtensions.has(ext) : false;
-    }
-    if (!file.type) {
-      const ext = file.name?.split('.').pop()?.toLowerCase();
-      return ext ? imageExtensions.has(ext) : false;
-    }
-    return file.type.startsWith('image/');
-  };
-
-  // 如果当前文件不是图片，直接打开
-  if (!isImageFile(file)) {
-    if (file.url) {
-      window.open(file.url, '_blank');
-    } else if (file.preview) {
-      window.open(file.preview, '_blank');
-    } else {
-      console.warn('无法打开文件，没有可用的URL或预览地址');
-    }
-    return;
-  }
-
-  // 对于图片文件，继续使用预览组
-  const [ImageComponent, PreviewGroupComponent] = await Promise.all([
-    Image,
-    PreviewGroup,
-  ]);
-
-  const getBase64 = (file: File) => {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.addEventListener('load', () => resolve(reader.result));
-      reader.addEventListener('error', (error) => reject(error));
-    });
-  };
-  // 从fileList中过滤出所有图片文件
-  const imageFiles = (unref(fileList) || []).filter((element) =>
-    isImageFile(element),
-  );
-
-  // 为所有没有预览地址的图片生成预览
-  for (const imgFile of imageFiles) {
-    if (!imgFile.url && !imgFile.preview && imgFile.originFileObj) {
-      imgFile.preview = (await getBase64(imgFile.originFileObj)) as string;
-    }
-  }
-  const container: HTMLElement | null = document.createElement('div');
-  document.body.append(container);
-
-  // 用于追踪组件是否已卸载
-  let isUnmounted = false;
-
-  const PreviewWrapper = {
-    setup() {
-      return () => {
-        if (isUnmounted) return null;
-        return h(
-          PreviewGroupComponent,
-          {
-            class: 'hidden',
-            preview: {
-              visible: visible.value,
-              // 设置初始显示的图片索引
-              current: imageFiles.findIndex((f) => f.uid === file.uid),
-              onVisibleChange: (value: boolean) => {
-                visible.value = value;
-                if (!value) {
-                  // 延迟清理，确保动画完成
-                  setTimeout(() => {
-                    if (!isUnmounted && container) {
-                      isUnmounted = true;
-                      render(null, container);
-                      container.remove();
-                    }
-                  }, 300);
-                }
-              },
-            },
-          },
-          () =>
-            // 渲染所有图片文件
-            imageFiles.map((imgFile) =>
-              h(ImageComponent, {
-                key: imgFile.uid,
-                src: imgFile.url || imgFile.preview,
-              }),
-            ),
-        );
-      };
-    },
-  };
-
-  render(h(PreviewWrapper), container);
-};
-
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
   | 'ApiCascader'
@@ -374,6 +528,7 @@ async function initComponentAdapter() {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
+
     ApiCascader: withDefaultPlaceholder(ApiComponent, 'select', {
       component: Cascader,
       fieldNames: { label: 'label', value: 'value', children: 'children' },
@@ -381,34 +536,20 @@ async function initComponentAdapter() {
       modelPropName: 'value',
       visibleEvent: 'onVisibleChange',
     }),
-    ApiSelect: withDefaultPlaceholder(
-      {
-        ...ApiComponent,
-        name: 'ApiSelect',
-      },
-      'select',
-      {
-        component: Select,
-        loadingSlot: 'suffixIcon',
-        visibleEvent: 'onDropdownVisibleChange',
-        modelPropName: 'value',
-      },
-    ),
-    ApiTreeSelect: withDefaultPlaceholder(
-      {
-        ...ApiComponent,
-        name: 'ApiTreeSelect',
-      },
-      'select',
-      {
-        component: TreeSelect,
-        fieldNames: { label: 'label', value: 'value', children: 'children' },
-        loadingSlot: 'suffixIcon',
-        modelPropName: 'value',
-        optionsPropName: 'treeData',
-        visibleEvent: 'onVisibleChange',
-      },
-    ),
+    ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: Select,
+      loadingSlot: 'suffixIcon',
+      modelPropName: 'value',
+      visibleEvent: 'onVisibleChange',
+    }),
+    ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: TreeSelect,
+      fieldNames: { label: 'label', value: 'value', children: 'children' },
+      loadingSlot: 'suffixIcon',
+      modelPropName: 'value',
+      optionsPropName: 'treeData',
+      visibleEvent: 'onVisibleChange',
+    }),
     AutoComplete,
     Cascader,
     Checkbox,

apps/web-antd/src/views/_core/profile/password-setting.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import type { VbenFormSchema } from '#/adapter/form';
 
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
 import { ProfilePasswordSetting, z } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
-const profilePasswordSettingRef = ref();
-
 const formSchema = computed((): VbenFormSchema[] => {
   return [
     {
@@ -58,7 +56,6 @@ function handleSubmit() {
 </script>
 <template>
   <ProfilePasswordSetting
-    ref="profilePasswordSettingRef"
     class="w-1/3"
     :form-schema="formSchema"
     @submit="handleSubmit"

apps/web-ele/src/views/_core/profile/password-setting.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import type { VbenFormSchema } from '#/adapter/form';
 
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
 import { ProfilePasswordSetting, z } from '@vben/common-ui';
 
 import { ElMessage } from 'element-plus';
 
-const profilePasswordSettingRef = ref();
-
 const formSchema = computed((): VbenFormSchema[] => {
   return [
     {
@@ -58,7 +56,6 @@ function handleSubmit() {
 </script>
 <template>
   <ProfilePasswordSetting
-    ref="profilePasswordSettingRef"
     class="w-1/3"
     :form-schema="formSchema"
     @submit="handleSubmit"

apps/web-naive/src/views/_core/profile/password-setting.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import type { VbenFormSchema } from '#/adapter/form';
 
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
 import { ProfilePasswordSetting, z } from '@vben/common-ui';
 
 import { message } from '#/adapter/naive';
 
-const profilePasswordSettingRef = ref();
-
 const formSchema = computed((): VbenFormSchema[] => {
   return [
     {
@@ -58,7 +56,6 @@ function handleSubmit() {
 </script>
 <template>
   <ProfilePasswordSetting
-    ref="profilePasswordSettingRef"
     class="w-1/3"
     :form-schema="formSchema"
     @submit="handleSubmit"

apps/web-tdesign/src/app.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { GlobalConfigProvider } from 'tdesign-vue-next';
 
-import { onMounted } from 'vue';
+import { watch } from 'vue';
 
 import { usePreferences } from '@vben/preferences';
 
@@ -12,12 +12,13 @@ import zhConfig from 'tdesign-vue-next/es/locale/zh_CN';
 defineOptions({ name: 'App' });
 const { isDark } = usePreferences();
 
-onMounted(() => {
-  document.documentElement.setAttribute(
-    'theme-mode',
-    isDark.value ? 'dark' : '',
-  );
-});
+watch(
+  () => isDark.value,
+  (dark) => {
+    document.documentElement.setAttribute('theme-mode', dark ? 'dark' : '');
+  },
+  { immediate: true },
+);
 
 const customConfig: GlobalConfigProvider = {
   // 可以在此处定义更多自定义配置，具体可配置内容参看 API 文档

apps/web-tdesign/src/views/_core/profile/password-setting.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import type { VbenFormSchema } from '#/adapter/form';
 
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
 import { ProfilePasswordSetting, z } from '@vben/common-ui';
 
 import { message } from '#/adapter/tdesign';
 
-const profilePasswordSettingRef = ref();
-
 const formSchema = computed((): VbenFormSchema[] => {
   return [
     {
@@ -58,7 +56,6 @@ function handleSubmit() {
 </script>
 <template>
   <ProfilePasswordSetting
-    ref="profilePasswordSettingRef"
     class="w-1/3"
     :form-schema="formSchema"
     @submit="handleSubmit"