@neatui/vue 2.6.2 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "2.6.2",
+  "version": "2.7.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",

package/src/components/display/Image.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div :class="`mc-img b-solid bk-case b-xs ${imgClass}`" :style="imgStyle">
+    <div :class="`mc-img ${imgClass}`" :style="imgStyle">
       <img :src="src[srcName]" :style="`object-fit: ${fit}`" @click.stop="showPreview" />
       <div v-if="tools" class="mc-img-tools">
         <slot name="tools">
@@ -19,7 +19,7 @@
 
   const props: any = defineProps({
     tools: { type: Boolean, default: true },
-    srcName: { type: String, default: 'imgUrl' },
+    srcName: { type: String, default: 'url' },
     theme: { type: String, default: '@a' },
     co: { type: String, default: 'note' },
     imgClass: { type: String, default: '' },

package/src/components/display/PhotoViewer.vue

@@ -12,7 +12,7 @@
       }"
       :navigation="true"
       :modules="[Keyboard, Pagination, Navigation]"
-      class="mySwiper"
+      class="full"
     >
       <SwiperSlide v-for="item in files" :key="item.id" class="ac" ui-flex="col cm">
         <img :src="item[srcName]" class="vc" />
@@ -32,7 +32,7 @@
   const props: any = defineProps({
     srcName: {
       type: String,
-      default: 'imgUrl'
+      default: 'url'
     },
     id: {
       type: String,

package/src/components/form/Upload.vue

@@ -1,7 +1,18 @@
 <template>
-  <ul ui-flex="row lm :wrap" class="mb-ss-sub mr-ss-sub" v-bind="{ ...attrs }">
-    <li v-for="(file, idx) in state.files" :key="idx" ui-flex="col cm" class="flex-fixed bg-fore n-sl w-ms h-ms b-solid bk-line b-xs">
-      <img v-if="file.type === 'image'" :src="file.path" alt="" />
+  <div ui-flex="row lm :wrap" class="neatui-upload mb-sm-sub mr-sm-sub" v-bind="{ ...attrs }">
+    <div v-for="(file, idx) in state.files" :key="idx" ui-flex="col cm" class="flex-fixed bg-fore n-sl w-ms h-ms b-solid bk-line b-xs r-sm pr">
+      <!-- 删除按钮 -->
+      <div class="pa ot-ss or-ss bg-fore co-risk lh-xs r-xl parent-hover:show" @click="remove(idx)">
+        <svg class="block" viewBox="0 0 1024 1024" style="width: 1em; height: 1em">
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66 0.3L512 563.4l-99.3 118.4-66.1-0.3c-4.4 0-8-3.5-8-8 0-1.9 0.7-3.7 1.9-5.2l130.1-155L340.5 359c-1.2-1.5-1.9-3.3-1.9-5.2 0-4.4 3.6-8 8-8l66.1 0.3L512 464.6l99.3-118.4 66-0.3c4.4 0 8 3.5 8 8 0 1.9-0.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+
+      <!-- 文件预览 -->
+      <img v-if="file.type === 'image'" :src="getImageUrl(file)" alt="" />
       <template v-else-if="file.type === 'pdf'">
         <svg t="1705645350800" class="w-ss h-ss" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1913">
           <path
@@ -66,7 +77,7 @@
             p-id="2068"
           ></path>
           <path
-            d="M242.569116 353.23904l89.224866 84.502478c4.337764 4.107988 4.523582 10.954302 0.415595 15.291067-4.107988 4.337764-10.954302 4.523582-15.291068 0.415595l-89.224866-84.502479-84.502478 89.224867c-4.107988 4.337764-10.954302 4.523582-15.291067 0.415594-4.337764-4.107988-4.523582-10.954302-0.415595-15.291067l84.502478-89.224867-89.224866-84.502478c-4.337764-4.107988-4.523582-10.954302-0.415594-15.291067 4.107988-4.337764 10.954302-4.523582 15.291067-0.415594l89.224867 84.502478 84.502478-89.224867c4.107988-4.337764 10.954302-4.523582 15.291067-0.415594 4.337764 4.107988 4.523582 10.954302 0.415594 15.291068l-84.502478 89.224866z"
+            d="M242.569116 353.23904l89.224866 84.502478c4.337764 4.107988 4.523582 10.954302 0.415595 15.291067-4.107988 4.337764-10.954302 4.523582-15.291067 0.415595l-89.224866-84.502479-84.502478 89.224867c-4.107988 4.337764-10.954302 4.523582-15.291067 0.415594-4.337764-4.107988-4.523582-10.954302-0.415595-15.291067l84.502478-89.224867-89.224866-84.502478c-4.337764-4.107988-4.523582-10.954302-0.415594-15.291067 4.107988-4.337764 10.954302-4.523582 15.291067-0.415594l89.224867 84.502478 84.502478-89.224867c4.107988-4.337764 10.954302-4.523582 15.291067-0.415594 4.337764 4.107988 4.523582 10.954302 0.415594 15.291068l-84.502478 89.224866z"
             fill="#FFFFFF"
             p-id="2069"
           ></path>
@@ -135,15 +146,28 @@
           ></path>
         </svg>
       </template>
-      <p ui-omit="1" class="fs-ss ac">{{ file.name }}</p>
-    </li>
-    <li v-if="(!multiple && state.files && state.files.length === 0) || (multiple && (!limit || (limit && state.files && state.files.length < limit)))">
+
+      <!-- 上传状态显示 -->
+      <div v-if="file.status === 'uploading'" class="upload-status">
+        <div class="loading-spinner"></div>
+        <span class="status-text">上传中...</span>
+      </div>
+      <div v-else-if="file.status === 'error'" class="upload-status error">
+        <span class="status-text">上传失败</span>
+      </div>
+
+      <!-- 文件名 -->
+      <!-- <p ui-omit="1" class="fs-ss ac">{{ file.name }}</p> -->
+    </div>
+
+    <!-- 上传按钮 -->
+    <div v-if="showUploadButton">
       <slot>
-        <label ui-flex="row cm" ui-form="@a type:upload tips:hover" :class="`upload w-ms h-ms n-sl bg-fore b-solid bk-line b-xs ${uploadClass}`" :style="uploadStyle">
+        <label ui-flex="row cm" ui-form="@a type:upload tips:hover" :class="`upload w-ms h-ms n-sl bg-fore b-solid bk-line b-xs r-sm ${uploadClass}`" :style="uploadStyle">
           <div v-if="tips" ui-form-tips>
             {{ tips }}
           </div>
-          <input style="display: none" type="file" class="pa input" :multiple="multiple" @change="change" />
+          <input style="display: none" type="file" class="pa input" :multiple="!max || max > 1" :accept="accept" @change="change" />
           <div class="co-note ac input-icon">
             <svg t="1705642180833" style="width: 1em; height: 1em" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4215">
               <path
@@ -154,12 +178,12 @@
           </div>
         </label>
       </slot>
-    </li>
-  </ul>
-  <Layer :id="layerId" am="as"></Layer>
+    </div>
+    <Layer :id="layerId" am="as"></Layer>
+  </div>
 </template>
 <script setup lang="ts">
-  import { reactive, ref, watch } from 'vue';
+  import { reactive, ref, watch, onUnmounted, computed } from 'vue';
   import { Image } from '../display';
   import draggable from 'vuedraggable';
   import Compressor from 'compressorjs';
@@ -170,176 +194,398 @@
 
   interface Props {
     modelValue?: string | any[];
-    // 文件限制数量
-    limit?: number;
+    // 文件数量限制
+    max?: number;
     attrs?: object;
     uploadClass?: string;
     uploadStyle?: string;
     id?: string;
     tips?: string; // 提示文案
     // 文件类型
-    accept?: string;
-    // 是否可以上传多个文件
-    multiple?: boolean;
+    accept?: string | 'image/*' | 'video/*' | 'audio/*';
     // 是否需要抠图处理
     crop?: boolean;
-    // 上传路径
-    action?: string;
     // 请求上传接口
     upload?: (formData: FormData) => Promise<any>;
+    // 文件大小限制（MB）
+    maxSize?: number;
+    // 是否启用图片压缩
+    compress?: boolean;
   }
 
   const props = withDefaults(defineProps<Props>(), {
+    modelValue: '',
     uploadClass: '',
     uploadStyle: '',
     id: '',
     attrs: () => ({}),
     tips: '',
-    modelValue: '',
-    accept: 'image/*',
-    multiple: false,
+    accept: '*',
     crop: false,
-    action: '/common/updateFile',
-    upload: async () => null
+    upload: async () => null,
+    maxSize: 10, // 默认10MB
+    compress: true,
+    max: 0
+  });
+
+  interface UploadFile {
+    name: string;
+    type: string;
+    path: string;
+    status: 'uploading' | 'success' | 'error';
+    size?: number;
+    progress?: number;
+    result?: any; // 直接保存上传函数的返回值
+  }
+
+  const state = reactive<{
+    files: UploadFile[];
+    isInternalUpdate: boolean; // 标记是否为内部更新
+  }>({
+    files: [],
+    isInternalUpdate: false
   });
 
-  const state: any = reactive({
-    files: []
+  const emit = defineEmits(['update:modelValue', 'change', 'error']);
+
+  // 获取图片URL
+  const getImageUrl = (file: UploadFile): string => {
+    if (file.status === 'success' && file.result) {
+      // 如果上传成功，优先使用上传返回的URL
+      if (typeof file.result === 'string') {
+        return file.result;
+      }
+      // 如果是对象，尝试获取url或path
+      return file.result.url || file.result.path || file.path;
+    }
+    // 否则使用预览URL
+    return file.path;
+  };
+
+  // 计算属性
+  const showUploadButton = computed(() => {
+    const currentCount = state.files.length;
+
+    if (!props.max) {
+      return true; // 无限制
+    }
+
+    return currentCount < props.max;
   });
 
-  const emit = defineEmits(['update:modelValue', 'change']);
-
-  // const files = ref<any>(isArray(props.modelValue) ? props.modelValue : props.modelValue ? [{ imgUrl: props.modelValue }] : []);
-
-  // 删除图片
-  // const delImg = (src: any) => {
-  //   files.value = files.value.filter((item: any) => {
-  //     return item.imgUrl !== src.imgUrl;
-  //   });
-  // };
-
-  // const uploadClick = () => {
-  //   LayerById(layerId).show();
-  // };
-
-  // const update = () => {
-  //   emit('update:modelValue', isArray(props.modelValue) ? files.value : files.value.length > 0 ? files.value[0].imgUrl : '');
-  // };
-
-  const change = async (e: any = {}) => {
-    const files = e?.target?.files || [];
-    for (let i = 0; i < files.length; i++) {
-      const _file: any = files[i];
-
-      // 文件类型
-      let type = '';
-      if (_file.type === 'application/msword' || _file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
-        type = 'docx';
-      } else if (_file.type === 'application/vnd.ms-excel' || _file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
-        type = 'xlsx';
-      } else if (_file.type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation') {
-        type = 'pptx';
-      } else if (_file.type === 'application/pdf') {
-        type = 'pdf';
-      } else if (_file.type === 'text/html') {
-        type = 'html';
-      } else if (_file.type.startsWith('image/') && _file.type !== 'image/vnd.adobe.photoshop') {
-        type = 'image';
+  // 获取文件类型
+  const getFileType = (file: File): string => {
+    if (file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
+      return 'docx';
+    } else if (file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
+      return 'xlsx';
+    } else if (file.type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation') {
+      return 'pptx';
+    } else if (file.type === 'application/pdf') {
+      return 'pdf';
+    } else if (file.type === 'text/html') {
+      return 'html';
+    } else if (file.type.startsWith('image/') && file.type !== 'image/vnd.adobe.photoshop') {
+      return 'image';
+    }
+    return 'file';
+  };
+
+  // 验证文件
+  const validateFile = (file: File): string | null => {
+    // 检查文件大小
+    if (props.maxSize && file.size > props.maxSize * 1024 * 1024) {
+      return `文件大小不能超过 ${props.maxSize}MB`;
+    }
+
+    // 检查文件类型
+    if (props.accept && props.accept !== '*') {
+      const acceptTypes = props.accept.split(',').map((type) => type.trim());
+      const isValidType = acceptTypes.some((type) => {
+        if (type.endsWith('/*')) {
+          return file.type.startsWith(type.replace('/*', ''));
+        }
+        return file.type === type;
+      });
+
+      if (!isValidType) {
+        return `不支持的文件类型: ${file.type}`;
       }
-      const file: any = { name: _file.name, type, path: URL.createObjectURL(_file), url: await props.upload(_file) };
-      // 上传文件
-      state.files.push(file);
-
-      // if (isFunction(props.upload)) {
-      //   const src: any = await props.upload(_file);
-      //   if (src) {
-      //     file.src = src;
-      //   }
-      // }
     }
 
-    // const _files = [];
-    // for (let i = 0; i < files.length; i++) {
-    //   const file = files[i];
-    //   const blob = URL.createObjectURL(file);
-    //   _files.push({ blob, file });
-    // }
-    // console.log(98, _files);
-    // for (let i = 0; i < _files.length; i++) {
-    //   let { file = '' } = _files[i];
-    //   // 若为图片,则进行压缩处理
-    //   if (/image/.test(file.type)) {
-    //     const _blob: any = await new Promise((resolve, reject) => {
-    //       new Compressor(file, {
-    //         quality: 1,
-    //         checkOrientation: false,
-    //         success: resolve,
-    //         maxWidth: 1000,
-    //         maxHeight: 700,
-    //         error: reject
-    //       });
-    //     });
-    //     const { name = '' }: any = _blob || {};
-    //     file = new File([_blob], name);
-    //   }
-    //   const formData = new FormData();
-    //   formData.append('file', file);
-    //   if (isFunction(props.upload)) {
-    //     const url: any = await props.upload(formData);
-    //     console.log(126, url);
-    //     if (url) {
-    //       files.value = [...files.value, { url }];
-    //     }
-    //   }
-    // }
+    return null;
+  };
+
+  // 压缩图片
+  const compressImage = async (file: File): Promise<File> => {
+    if (!props.compress || !file.type.startsWith('image/')) {
+      return file;
+    }
+
+    return new Promise((resolve, reject) => {
+      new Compressor(file, {
+        quality: 0.8,
+        maxWidth: 1920,
+        maxHeight: 1080,
+        checkOrientation: true,
+        success: (result) => {
+          resolve(new File([result], file.name, { type: result.type }));
+        },
+        error: reject
+      });
+    });
   };
 
-  // watch(
-  //   () => [props.modelValue, state.files],
-  //   (n: any, o: any) => {
-  //     if (n[0] !== o[0]) {
-  //       files.value = isArray(props.modelValue) ? props.modelValue : props.modelValue ? [{ imgUrl: props.modelValue }] : [];
-  //     }
-  //     if (n[1] !== o[1]) {
-  //       emit('update:modelValue', isArray(props.modelValue) ? files.value : files.value.length > 0 ? files.value[0].imgUrl : '');
-  //     }
-  //   },
-  //   { deep: true }
-  // );
-
-  // defineExpose({ change, uploadClick });
+  // 删除文件函数
+  const remove = (index: number) => {
+    // 释放对象URL，防止内存泄漏
+    if (state.files[index] && state.files[index].path) {
+      URL.revokeObjectURL(state.files[index].path);
+    }
+
+    // 从数组中移除文件
+    state.files.splice(index, 1);
+
+    // 发射更新事件
+    emitUpdateEvents();
+  };
+
+  // 发射更新事件
+  const emitUpdateEvents = () => {
+    // 设置内部更新标志
+    state.isInternalUpdate = true;
+
+    const successFiles = state.files.filter((file) => file.status === 'success');
+
+    // 如果没有成功文件，返回空值
+    if (successFiles.length === 0) {
+      const emptyValue = props.max === 1 ? '' : [];
+      emit('update:modelValue', emptyValue);
+      emit('change', emptyValue);
+    } else {
+      // 直接使用上传函数的返回值
+      const filesForModel = successFiles.map((file) => file.result);
+      const modelValue = props.max === 1 ? filesForModel[0] || '' : filesForModel;
+
+      emit('update:modelValue', modelValue);
+      emit('change', modelValue);
+    }
+
+    // 重置标志
+    setTimeout(() => {
+      state.isInternalUpdate = false;
+    }, 0);
+  };
+
+  // 文件上传处理
+  const change = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    const selectedFiles = target.files || [];
+
+    // 检查文件数量限制
+    if (props.max && state.files.length + selectedFiles.length > props.max) {
+      const errorMsg = `文件数量超过限制: ${props.max}`;
+      console.warn(errorMsg);
+      emit('error', errorMsg);
+      return;
+    }
+
+    // 步骤1：立即添加所有文件到UI，显示占位图
+    const validFiles: { file: File; uploadFile: UploadFile }[] = [];
+
+    for (let i = 0; i < selectedFiles.length; i++) {
+      const file = selectedFiles[i];
+
+      // 验证文件
+      const validationError = validateFile(file);
+      if (validationError) {
+        emit('error', validationError);
+        continue;
+      }
+
+      // 创建预览URL
+      const previewUrl = URL.createObjectURL(file);
+
+      // 添加到文件列表
+      const uploadFile: UploadFile = {
+        name: file.name,
+        type: getFileType(file),
+        path: previewUrl,
+        status: 'uploading',
+        size: file.size
+      };
+      state.files.push(uploadFile);
+      validFiles.push({ file, uploadFile });
+    }
+
+    // 步骤2：异步上传所有文件
+    validFiles.forEach(({ file, uploadFile }) => {
+      uploadSingleFile(file, uploadFile);
+    });
+
+    // 清空input值，允许重复选择同一文件
+    target.value = '';
+  };
+
+  // 单个文件上传函数
+  const uploadSingleFile = async (file: File, uploadFile: UploadFile) => {
+    try {
+      // 压缩图片（如果需要）
+      let processedFile = file;
+      if (props.compress && file.type.startsWith('image/')) {
+        try {
+          processedFile = await compressImage(file);
+        } catch (error) {
+          console.warn('图片压缩失败，使用原文件:', error);
+        }
+      }
+
+      // 上传到服务器
+      if (typeof props.upload !== 'function') {
+        throw new Error('upload 函数未定义');
+      }
+
+      const formData = new FormData();
+      formData.append('file', processedFile);
+      const result = await props.upload(formData);
+
+      // 更新文件状态
+      const fileIndex = state.files.findIndex((f) => f.path === uploadFile.path);
+      if (fileIndex !== -1) {
+        if (result) {
+          // 直接保存上传函数的返回值
+          state.files[fileIndex].result = result;
+          state.files[fileIndex].status = 'success';
+        } else {
+          state.files[fileIndex].status = 'error';
+        }
+        // 每个文件完成后更新外部数据源
+        emitUpdateEvents();
+      }
+    } catch (error) {
+      console.error('文件处理失败:', error);
+
+      // 更新失败文件状态
+      const fileIndex = state.files.findIndex((f) => f.path === uploadFile.path);
+      if (fileIndex !== -1) {
+        state.files[fileIndex].status = 'error';
+      }
+
+      emit('error', `文件 ${file.name} 上传失败: ${error}`);
+    }
+  };
+
+  // 监听外部传入的modelValue变化，同步到内部状态
+  watch(
+    () => props.modelValue,
+    (newValue) => {
+      // 如果是内部更新，跳过处理
+      if (state.isInternalUpdate) {
+        return;
+      }
+      if (newValue && Array.isArray(newValue)) {
+        state.files = newValue.map((item) => {
+          if (typeof item === 'string') {
+            // 如果是字符串URL
+            return {
+              name: 'file',
+              type: 'image',
+              path: item,
+              status: 'success' as const,
+              result: item
+            };
+          } else {
+            // 如果是对象
+            return {
+              name: item.name || 'file',
+              type: item.type || 'file',
+              path: item.url || item.path || '',
+              status: 'success' as const,
+              result: item
+            };
+          }
+        });
+      } else if (newValue && typeof newValue === 'string') {
+        state.files = [
+          {
+            name: 'file',
+            type: 'image',
+            path: newValue,
+            status: 'success',
+            result: newValue
+          }
+        ];
+      } else if (newValue && typeof newValue === 'object') {
+        const objValue = newValue as any;
+        state.files = [
+          {
+            name: objValue.name || 'file',
+            type: objValue.type || 'file',
+            path: objValue.url || objValue.path || '',
+            status: 'success',
+            result: newValue
+          }
+        ];
+      } else {
+        state.files = [];
+      }
+    },
+    { immediate: true, deep: true }
+  );
+
+  // 组件销毁时清理资源
+  onUnmounted(() => {
+    state.files.forEach((file) => {
+      if (file.path && file.path.startsWith('blob:')) {
+        URL.revokeObjectURL(file.path);
+      }
+    });
+  });
 </script>
 <style lang="scss">
-  .mc-upload {
+  .neatui-upload {
     flex-wrap: wrap;
-
-    .upload {
-      width: 8em;
-      height: 8em;
+    // 上传状态样式
+    .upload-status {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.6);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 0.75em;
       border-radius: 0.25em;
-      transition:
-        all 0.35s,
-        background-color 0s;
-      // background-color: #ffffff;
-      position: relative;
-
-      .input {
-        opacity: 0;
-        height: 100%;
-        width: 100%;
+
+      &.error {
+        background: rgba(255, 0, 0, 0.6);
       }
-      .input-icon {
-        line-height: 1.3;
+
+      .status-text {
+        margin-top: 0.5em;
       }
     }
 
-    &-img {
-      display: flex;
-      flex-direction: row;
+    // 加载动画
+    .loading-spinner {
+      width: 1.5em;
+      height: 1.5em;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      border-top: 2px solid white;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
 
-      &-item {
-        margin-right: 0.75rem;
-        margin-bottom: 0.75rem;
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
       }
     }
   }