vue-element-ui-x 0.1.7-beta → 0.1.9-beta

package/lib/components/Attachments/index.js

@@ -199,7 +199,7 @@ function normalizeComponent(
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
-// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Attachments/src/main.vue?vue&type=template&id=4f88f26a&scoped=true
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Attachments/src/main.vue?vue&type=template&id=4c699dac&scoped=true
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -220,12 +220,10 @@ var render = function render() {
       attrs: {
         action: _vm.uploadAction,
         "http-request": _vm.customUpload,
-        "show-file-list": false
-      },
-      on: {
-        change: _vm.handleUploadChange,
-        success: _vm.handleUploadSuccess,
-        error: _vm.handleUploadError
+        "show-file-list": false,
+        "on-change": _vm.handleUploadChange,
+        "on-success": _vm.handleUploadSuccess,
+        "on-error": _vm.handleUploadError
       }
     }, "el-upload", _vm.$attrs, false), [_c("i", {
       staticClass: "el-icon-plus uploader-icon"
@@ -295,12 +293,10 @@ var render = function render() {
       attrs: {
         action: _vm.uploadAction,
         "http-request": _vm.customUpload,
-        "show-file-list": false
-      },
-      on: {
-        change: _vm.handleUploadChange,
-        success: _vm.handleUploadSuccess,
-        error: _vm.handleUploadError
+        "show-file-list": false,
+        "on-change": _vm.handleUploadChange,
+        "on-success": _vm.handleUploadSuccess,
+        "on-error": _vm.handleUploadError
       }
     }, "el-upload", _vm.$attrs, false), [_c("i", {
       staticClass: "el-icon-plus uploader-icon"
@@ -354,7 +350,7 @@ var render = function render() {
 var staticRenderFns = [];
 render._withStripped = true;
 
-// CONCATENATED MODULE: ./src/components/Attachments/src/main.vue?vue&type=template&id=4f88f26a&scoped=true
+// CONCATENATED MODULE: ./src/components/Attachments/src/main.vue?vue&type=template&id=4c699dac&scoped=true
 
 // EXTERNAL MODULE: ./src/components/FilesCard/index.js + 58 modules
 var FilesCard = __webpack_require__(27);
@@ -540,7 +536,7 @@ var FilesCard = __webpack_require__(27);
       const {
         file
       } = options;
-      this.$emit('uploadChange', {
+      this.$emit('upload-change', {
         file
       }, [file]);
 
@@ -553,13 +549,13 @@ var FilesCard = __webpack_require__(27);
       return Promise.resolve();
     },
     handleUploadChange(file, fileList) {
-      this.$emit('uploadChange', file, fileList);
+      this.$emit('upload-change', file, fileList);
     },
     handleUploadSuccess(response, file, fileList) {
-      this.$emit('uploadSuccess', response, file, fileList);
+      this.$emit('upload-success', response, file, fileList);
     },
     handleUploadError(error, file, fileList) {
-      this.$emit('uploadError', error, file, fileList);
+      this.$emit('upload-error', error, file, fileList);
     },
     getTargetElement() {
       if (!this.dragTarget) return this.$refs.wrapperRef;
@@ -710,10 +706,10 @@ var FilesCard = __webpack_require__(27);
 var injectStylesIntoStyleTag = __webpack_require__(3);
 var injectStylesIntoStyleTag_default = /*#__PURE__*/__webpack_require__.n(injectStylesIntoStyleTag);
 
-// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Attachments/src/main.vue?vue&type=style&index=0&id=4f88f26a&prod&lang=scss&scoped=true
-var mainvue_type_style_index_0_id_4f88f26a_prod_lang_scss_scoped_true = __webpack_require__(85);
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Attachments/src/main.vue?vue&type=style&index=0&id=4c699dac&prod&lang=scss&scoped=true
+var mainvue_type_style_index_0_id_4c699dac_prod_lang_scss_scoped_true = __webpack_require__(85);
 
-// CONCATENATED MODULE: ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Attachments/src/main.vue?vue&type=style&index=0&id=4f88f26a&prod&lang=scss&scoped=true
+// CONCATENATED MODULE: ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Attachments/src/main.vue?vue&type=style&index=0&id=4c699dac&prod&lang=scss&scoped=true
 
             
 
@@ -722,12 +718,12 @@ var options = {};
 options.insert = "head";
 options.singleton = false;
 
-var update = injectStylesIntoStyleTag_default()(mainvue_type_style_index_0_id_4f88f26a_prod_lang_scss_scoped_true["a" /* default */], options);
+var update = injectStylesIntoStyleTag_default()(mainvue_type_style_index_0_id_4c699dac_prod_lang_scss_scoped_true["a" /* default */], options);
 
 
 
-/* harmony default export */ var src_mainvue_type_style_index_0_id_4f88f26a_prod_lang_scss_scoped_true = (mainvue_type_style_index_0_id_4f88f26a_prod_lang_scss_scoped_true["a" /* default */].locals || {});
-// CONCATENATED MODULE: ./src/components/Attachments/src/main.vue?vue&type=style&index=0&id=4f88f26a&prod&lang=scss&scoped=true
+/* harmony default export */ var src_mainvue_type_style_index_0_id_4c699dac_prod_lang_scss_scoped_true = (mainvue_type_style_index_0_id_4c699dac_prod_lang_scss_scoped_true["a" /* default */].locals || {});
+// CONCATENATED MODULE: ./src/components/Attachments/src/main.vue?vue&type=style&index=0&id=4c699dac&prod&lang=scss&scoped=true
 
 // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 var componentNormalizer = __webpack_require__(0);
@@ -747,7 +743,7 @@ var component = Object(componentNormalizer["a" /* default */])(
   staticRenderFns,
   false,
   null,
-  "4f88f26a",
+  "4c699dac",
   null
   
 )
@@ -847,7 +843,7 @@ module.exports = function (cssWithMappingToString) {
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
 // Module
-___CSS_LOADER_EXPORT___.push([module.i, ".el-x-filescard[data-v-10b2c201]{width:fit-content;padding:12px;display:flex;flex-wrap:nowrap;gap:8px;align-items:center;border-radius:8px;position:relative;background:rgba(0,0,0,.06);max-width:var(--elx-files-card-max-width)}.el-x-filescard .el-x-filescard-progress[data-v-10b2c201]{position:absolute;top:0;left:0;bottom:0;background:rgba(0,0,0,.08);border-radius:8px;transition:width .2s ease}.el-x-filescard .el-x-filescard-delete-icon[data-v-10b2c201]{position:absolute;top:-8px;right:-6px;cursor:pointer;color:rgba(0,0,0,.4);display:none}.el-x-filescard .el-x-filescard-delete-icon[data-v-10b2c201]:hover{color:#ff4d4f}.el-x-filescard:hover .el-x-filescard-delete-icon[data-v-10b2c201]{display:block}.el-x-filescard-square[data-v-10b2c201]{padding:0;margin:0}.el-x-filescard-icon[data-v-10b2c201]{flex:none;font-size:var(--elx-files-card-icon-size)}.el-x-filescard-img[data-v-10b2c201]{flex:none;width:var(--elx-files-card-icon-size);height:var(--elx-files-card-icon-size);border-radius:8px;object-fit:cover}.el-x-filescard-content[data-v-10b2c201]{flex:auto;min-width:0;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;height:100%}.el-x-filescard-content .el-x-filescard-name[data-v-10b2c201]{display:flex;flex-wrap:nowrap;max-width:100%;font-size:14px}.el-x-filescard-content .el-x-filescard-name .el-x-filescard-name-prefix[data-v-10b2c201]{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.el-x-filescard-content .el-x-filescard-name .el-x-filescard-name-suffix[data-v-10b2c201]{flex:none}.el-x-filescard-content .el-x-filescard-description[data-v-10b2c201]{flex:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(0,0,0,.4);font-size:12px}.el-x-filescard-content .el-x-filescard-description-error[data-v-10b2c201]{color:#ff4d4f}.image-preview-container[data-v-10b2c201]{position:relative;padding:0px;width:var(--elx-files-card-icon-size);height:var(--elx-files-card-icon-size);display:inline-block;border-radius:8px;overflow:hidden;transition:all .3s}.image-preview-container .preview-mask[data-v-10b2c201]{position:absolute;inset:0;width:100%;display:flex;justify-content:center;align-items:center;opacity:0;background:rgba(0,0,0,.65);color:#fff;font-size:10px;transition:opacity .3s}.image-preview-container .preview-mask .el-icon-view[data-v-10b2c201]{font-size:10px;margin-right:2px;display:flex;align-items:center;height:100%;margin-top:2px}.image-preview-container .preview-mask[data-v-10b2c201]:hover{opacity:1;transition:opacity .3s;cursor:pointer}.image-preview-container-square .preview-mask[data-v-10b2c201]{font-size:14px}.image-preview-container-square .preview-mask .el-icon-view[data-v-10b2c201]{font-size:12px}.preview-mask-loading[data-v-10b2c201]{position:absolute;inset:0;width:100%;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,.65);color:#fff;transition:all .3s}.preview-mask-loading .circle-progress[data-v-10b2c201]{width:100% !important;height:100% !important;display:flex;justify-content:center;align-items:center}.preview-mask-loading .circle-progress .el-progress-circle[data-v-10b2c201]{width:calc(100% - 12px) !important;height:calc(100% - 12px) !important}.preview-mask-loading .circle-progress .el-progress-circle svg>path[data-v-10b2c201]:nth-child(1){stroke:hsla(0,0%,100%,.2);stroke-width:8px}.preview-mask-loading .circle-progress .el-progress__text[data-v-10b2c201]{color:#fff;font-size:14px}.preview-mask-error[data-v-10b2c201]{position:absolute;inset:0;width:100%;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,.5);font-size:12px;transition:all .3s;color:#ff4d4f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.el-image-viewer__progress[data-v-10b2c201]{display:none}.fade-enter-active[data-v-10b2c201],.fade-leave-active[data-v-10b2c201]{transition:opacity .3s}.fade-enter-from[data-v-10b2c201],.fade-leave-to[data-v-10b2c201]{opacity:0}", ""]);
+___CSS_LOADER_EXPORT___.push([module.i, ".el-x-filescard[data-v-28b3b638]{width:fit-content;padding:12px;display:flex;flex-wrap:nowrap;gap:8px;align-items:center;border-radius:8px;position:relative;background:rgba(0,0,0,.06);max-width:var(--elx-files-card-max-width)}.el-x-filescard .el-x-filescard-progress[data-v-28b3b638]{position:absolute;top:0;left:0;bottom:0;background:rgba(0,0,0,.08);border-radius:8px;transition:width .2s ease}.el-x-filescard .el-x-filescard-delete-icon[data-v-28b3b638]{position:absolute;top:-8px;right:-6px;cursor:pointer;color:rgba(0,0,0,.4);display:none}.el-x-filescard .el-x-filescard-delete-icon[data-v-28b3b638]:hover{color:#ff4d4f}.el-x-filescard:hover .el-x-filescard-delete-icon[data-v-28b3b638]{display:block}.el-x-filescard-square[data-v-28b3b638]{padding:0;margin:0}.el-x-filescard-icon[data-v-28b3b638]{flex:none;font-size:var(--elx-files-card-icon-size)}.el-x-filescard-img[data-v-28b3b638]{flex:none;width:var(--elx-files-card-icon-size);height:var(--elx-files-card-icon-size);border-radius:8px;object-fit:cover}.el-x-filescard-content[data-v-28b3b638]{flex:auto;min-width:0;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;height:100%}.el-x-filescard-content .el-x-filescard-name[data-v-28b3b638]{display:flex;flex-wrap:nowrap;max-width:100%;font-size:14px}.el-x-filescard-content .el-x-filescard-name .el-x-filescard-name-prefix[data-v-28b3b638]{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.el-x-filescard-content .el-x-filescard-name .el-x-filescard-name-suffix[data-v-28b3b638]{flex:none}.el-x-filescard-content .el-x-filescard-description[data-v-28b3b638]{flex:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(0,0,0,.4);font-size:12px}.el-x-filescard-content .el-x-filescard-description-error[data-v-28b3b638]{color:#ff4d4f}.image-preview-container[data-v-28b3b638]{position:relative;padding:0px;width:var(--elx-files-card-icon-size);height:var(--elx-files-card-icon-size);display:inline-block;border-radius:8px;overflow:hidden;transition:all .3s}.image-preview-container .preview-mask[data-v-28b3b638]{position:absolute;inset:0;width:100%;display:flex;justify-content:center;align-items:center;opacity:0;background:rgba(0,0,0,.65);color:#fff;font-size:10px;transition:opacity .3s}.image-preview-container .preview-mask .el-icon-view[data-v-28b3b638]{font-size:10px;margin-right:2px;display:flex;align-items:center;height:100%;margin-top:2px}.image-preview-container .preview-mask[data-v-28b3b638]:hover{opacity:1;transition:opacity .3s;cursor:pointer}.image-preview-container-square .preview-mask[data-v-28b3b638]{font-size:14px}.image-preview-container-square .preview-mask .el-icon-view[data-v-28b3b638]{font-size:12px}.preview-mask-loading[data-v-28b3b638]{position:absolute;inset:0;width:100%;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,.65);color:#fff;transition:all .3s}.preview-mask-loading .circle-progress[data-v-28b3b638]{width:100% !important;height:100% !important;display:flex;justify-content:center;align-items:center}.preview-mask-loading .circle-progress .el-progress-circle[data-v-28b3b638]{width:calc(100% - 12px) !important;height:calc(100% - 12px) !important}.preview-mask-loading .circle-progress .el-progress-circle svg>path[data-v-28b3b638]:nth-child(1){stroke:hsla(0,0%,100%,.2);stroke-width:8px}.preview-mask-loading .circle-progress .el-progress__text[data-v-28b3b638]{color:#fff;font-size:14px}.preview-mask-error[data-v-28b3b638]{position:absolute;inset:0;width:100%;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,.5);font-size:12px;transition:all .3s;color:#ff4d4f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.el-image-viewer__progress[data-v-28b3b638]{display:none}.fade-enter-active[data-v-28b3b638],.fade-leave-active[data-v-28b3b638]{transition:opacity .3s}.fade-enter-from[data-v-28b3b638],.fade-leave-to[data-v-28b3b638]{opacity:0}", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["a"] = (___CSS_LOADER_EXPORT___);
 
@@ -861,7 +857,7 @@ ___CSS_LOADER_EXPORT___.push([module.i, ".el-x-filescard[data-v-10b2c201]{width:
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
-// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FilesCard/src/main.vue?vue&type=template&id=10b2c201&scoped=true
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FilesCard/src/main.vue?vue&type=template&id=28b3b638&scoped=true
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -918,13 +914,11 @@ var render = function render() {
       staticClass: "el-x-filescard-img",
       attrs: {
         src: _vm._previewImgUrl,
-        "preview-src-list": _vm.imgPreview ? [_vm._previewImgUrl] : [],
-        fit: "cover",
-        "show-progress": false,
-        "hide-on-click-modal": ""
+        "preview-src-list": _vm._previewImgUrl ? [_vm._previewImgUrl] : [],
+        fit: "cover"
       },
       on: {
-        show: function ($event) {
+        click: function ($event) {
           return _vm.handlePreviewAction("self");
         }
       }
@@ -1030,8 +1024,201 @@ var render = function render() {
 var staticRenderFns = [];
 render._withStripped = true;
 
-// CONCATENATED MODULE: ./src/components/FilesCard/src/main.vue?vue&type=template&id=10b2c201&scoped=true
+// CONCATENATED MODULE: ./src/components/FilesCard/src/main.vue?vue&type=template&id=28b3b638&scoped=true
+
+// CONCATENATED MODULE: ./src/utils/index.js
+/**
+ * 判断文件类型是否为图片
+ * @param {string} type 文件类型
+ * @returns {boolean} 是否为图片类型
+ */
+const isImageFileType = type => type.indexOf('image/') === 0;
+const MEASURE_SIZE = 200;
+
+/**
+ * 预览图片文件并生成预览URL
+ * @param {File|Blob} file 图片文件对象
+ * @returns {Promise<string>} 返回图片预览URL的Promise
+ */
+function previewImage(file) {
+  return new Promise(resolve => {
+    if (!file || !file.type || !isImageFileType(file.type)) {
+      resolve('');
+      return;
+    }
+    const img = new Image();
+    img.onload = () => {
+      const {
+        width,
+        height
+      } = img;
+      const ratio = width / height;
+      const MEASURE_SIZE_WIDTH = ratio > 1 ? MEASURE_SIZE : MEASURE_SIZE * ratio;
+      const MEASURE_SIZE_HEIGHT = ratio > 1 ? MEASURE_SIZE / ratio : MEASURE_SIZE;
+      const canvas = document.createElement('canvas');
+      canvas.width = MEASURE_SIZE_WIDTH;
+      canvas.height = MEASURE_SIZE_HEIGHT;
+      canvas.style.cssText = `position: fixed; left: 0; top: 0; width: ${MEASURE_SIZE_WIDTH}px; height: ${MEASURE_SIZE_HEIGHT}px; z-index: 9999; display: none;`;
+      document.body.appendChild(canvas);
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(img, 0, 0, MEASURE_SIZE_WIDTH, MEASURE_SIZE_HEIGHT);
+      const dataURL = canvas.toDataURL();
+      document.body.removeChild(canvas);
+      window.URL.revokeObjectURL(img.src);
+      resolve(dataURL);
+    };
+    img.crossOrigin = 'anonymous';
+    if (file.type.startsWith('image/svg+xml')) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        if (reader.result && typeof reader.result === 'string') {
+          img.src = reader.result;
+        }
+      };
+      reader.readAsDataURL(file);
+    } else if (file.type.startsWith('image/gif')) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        if (reader.result) {
+          resolve(reader.result);
+        }
+      };
+      reader.readAsDataURL(file);
+    } else {
+      img.src = window.URL.createObjectURL(file);
+    }
+  });
+}
 
+/**
+ * 根据文件后缀名获取文件类型
+ * @param {string} fileExtension 文件后缀名
+ * @returns {{lowerCase: string, upperCase: string}} 返回文件类型对象
+ */
+function getFileType(fileExtension) {
+  // 去除后缀名开头的点，并转换为小写
+  const cleanExtension = fileExtension.replace('.', '').toLowerCase();
+  if (!cleanExtension) {
+    return {
+      lowerCase: 'unknown',
+      upperCase: 'Unknown'
+    };
+  }
+  const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp'];
+  const wordExtensions = ['doc', 'docx'];
+  const excelExtensions = ['xls', 'xlsx'];
+  const pptExtensions = ['ppt', 'pptx'];
+  const audioExtensions = ['mp3', 'wav', 'ogg', 'flac'];
+  const videoExtensions = ['mp4', 'avi', 'mov', 'mkv'];
+  const codeExtensions = ['js', 'ts', 'html', 'css', 'py', 'java', 'c', 'cpp', 'json', 'php'];
+  const databaseExtensions = ['sql', 'db', 'sqlite'];
+  const zipExtensions = ['zip', 'rar', '7z'];
+  const markExtensions = ['md', 'mdx'];
+  if (imageExtensions.includes(cleanExtension)) {
+    return {
+      lowerCase: 'image',
+      upperCase: 'Image'
+    };
+  }
+  if (wordExtensions.includes(cleanExtension)) {
+    return {
+      lowerCase: 'word',
+      upperCase: 'Word'
+    };
+  }
+  if (excelExtensions.includes(cleanExtension)) {
+    return {
+      lowerCase: 'excel',
+      upperCase: 'Excel'
+    };
+  }
+  if (pptExtensions.includes(cleanExtension)) {
+    return {
+      lowerCase: 'ppt',
+      upperCase: 'Ppt'
+    };
+  }
+  if (cleanExtension === 'pdf') {
+    return {
+      lowerCase: 'pdf',
+      upperCase: 'Pdf'
+    };
+  }
+  if (cleanExtension === 'txt') {
+    return {
+      lowerCase: 'txt',
+      upperCase: 'Txt'
+    };
+  }
+  if (markExtensions.includes(cleanExtension)) {
+    return {
+      lowerCase: 'mark',
+      upperCase: 'Markdown'
+    };
+  }
+  if (audioExtensions.includes(cleanExtension)) {
+    return {
+      lowerCase: 'audio',
+      upperCase: 'Audio'
+    };
+  }
+  if (videoExtensions.includes(cleanExtension)) {
+    return {
+      lowerCase: 'video',
+      upperCase: 'Video'
+    };
+  }
+  if (codeExtensions.includes(cleanExtension)) {
+    return {
+      lowerCase: 'code',
+      upperCase: 'Code'
+    };
+  }
+  if (databaseExtensions.includes(cleanExtension)) {
+    return {
+      lowerCase: 'database',
+      upperCase: 'Database'
+    };
+  }
+  if (cleanExtension === 'lnk') {
+    return {
+      lowerCase: 'link',
+      upperCase: 'Link'
+    };
+  }
+  if (zipExtensions.includes(cleanExtension)) {
+    return {
+      lowerCase: 'zip',
+      upperCase: 'Zip'
+    };
+  }
+  if (cleanExtension === 'obj' || cleanExtension === 'fbx' || cleanExtension === 'glb') {
+    return {
+      lowerCase: 'three',
+      upperCase: '3D'
+    };
+  }
+  return {
+    lowerCase: 'file',
+    upperCase: 'File'
+  };
+}
+
+/**
+ * 获取文件大小
+ * @param {number} size 文件大小
+ * @returns {string} 返回文件大小
+ */
+function getSize(size) {
+  let retSize = size;
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
+  let unitIndex = 0;
+  while (retSize >= 1024 && unitIndex < units.length - 1) {
+    retSize /= 1024;
+    unitIndex++;
+  }
+  return `${retSize.toFixed(0)} ${units[unitIndex]}`;
+}
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FilesCard/src/fileSvg/audio.vue?vue&type=template&id=70981d96
 var audiovue_type_template_id_70981d96_render = function render() {
   var _vm = this,
@@ -2270,199 +2457,6 @@ const colorMap = {
   file: '#FFC757',
   unknown: '#6E9DA4'
 };
-// CONCATENATED MODULE: ./src/utils/index.js
-/**
- * 判断文件类型是否为图片
- * @param {string} type 文件类型
- * @returns {boolean} 是否为图片类型
- */
-const isImageFileType = type => type.indexOf('image/') === 0;
-const MEASURE_SIZE = 200;
-
-/**
- * 预览图片文件并生成预览URL
- * @param {File|Blob} file 图片文件对象
- * @returns {Promise<string>} 返回图片预览URL的Promise
- */
-function previewImage(file) {
-  return new Promise(resolve => {
-    if (!file || !file.type || !isImageFileType(file.type)) {
-      resolve('');
-      return;
-    }
-    const img = new Image();
-    img.onload = () => {
-      const {
-        width,
-        height
-      } = img;
-      const ratio = width / height;
-      const MEASURE_SIZE_WIDTH = ratio > 1 ? MEASURE_SIZE : MEASURE_SIZE * ratio;
-      const MEASURE_SIZE_HEIGHT = ratio > 1 ? MEASURE_SIZE / ratio : MEASURE_SIZE;
-      const canvas = document.createElement('canvas');
-      canvas.width = MEASURE_SIZE_WIDTH;
-      canvas.height = MEASURE_SIZE_HEIGHT;
-      canvas.style.cssText = `position: fixed; left: 0; top: 0; width: ${MEASURE_SIZE_WIDTH}px; height: ${MEASURE_SIZE_HEIGHT}px; z-index: 9999; display: none;`;
-      document.body.appendChild(canvas);
-      const ctx = canvas.getContext('2d');
-      ctx.drawImage(img, 0, 0, MEASURE_SIZE_WIDTH, MEASURE_SIZE_HEIGHT);
-      const dataURL = canvas.toDataURL();
-      document.body.removeChild(canvas);
-      window.URL.revokeObjectURL(img.src);
-      resolve(dataURL);
-    };
-    img.crossOrigin = 'anonymous';
-    if (file.type.startsWith('image/svg+xml')) {
-      const reader = new FileReader();
-      reader.onload = () => {
-        if (reader.result && typeof reader.result === 'string') {
-          img.src = reader.result;
-        }
-      };
-      reader.readAsDataURL(file);
-    } else if (file.type.startsWith('image/gif')) {
-      const reader = new FileReader();
-      reader.onload = () => {
-        if (reader.result) {
-          resolve(reader.result);
-        }
-      };
-      reader.readAsDataURL(file);
-    } else {
-      img.src = window.URL.createObjectURL(file);
-    }
-  });
-}
-
-/**
- * 根据文件后缀名获取文件类型
- * @param {string} fileExtension 文件后缀名
- * @returns {{lowerCase: string, upperCase: string}} 返回文件类型对象
- */
-function getFileType(fileExtension) {
-  // 去除后缀名开头的点，并转换为小写
-  const cleanExtension = fileExtension.replace('.', '').toLowerCase();
-  if (!cleanExtension) {
-    return {
-      lowerCase: 'unknown',
-      upperCase: 'Unknown'
-    };
-  }
-  const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp'];
-  const wordExtensions = ['doc', 'docx'];
-  const excelExtensions = ['xls', 'xlsx'];
-  const pptExtensions = ['ppt', 'pptx'];
-  const audioExtensions = ['mp3', 'wav', 'ogg', 'flac'];
-  const videoExtensions = ['mp4', 'avi', 'mov', 'mkv'];
-  const codeExtensions = ['js', 'ts', 'html', 'css', 'py', 'java', 'c', 'cpp', 'json', 'php'];
-  const databaseExtensions = ['sql', 'db', 'sqlite'];
-  const zipExtensions = ['zip', 'rar', '7z'];
-  const markExtensions = ['md', 'mdx'];
-  if (imageExtensions.includes(cleanExtension)) {
-    return {
-      lowerCase: 'image',
-      upperCase: 'Image'
-    };
-  }
-  if (wordExtensions.includes(cleanExtension)) {
-    return {
-      lowerCase: 'word',
-      upperCase: 'Word'
-    };
-  }
-  if (excelExtensions.includes(cleanExtension)) {
-    return {
-      lowerCase: 'excel',
-      upperCase: 'Excel'
-    };
-  }
-  if (pptExtensions.includes(cleanExtension)) {
-    return {
-      lowerCase: 'ppt',
-      upperCase: 'Ppt'
-    };
-  }
-  if (cleanExtension === 'pdf') {
-    return {
-      lowerCase: 'pdf',
-      upperCase: 'Pdf'
-    };
-  }
-  if (cleanExtension === 'txt') {
-    return {
-      lowerCase: 'txt',
-      upperCase: 'Txt'
-    };
-  }
-  if (markExtensions.includes(cleanExtension)) {
-    return {
-      lowerCase: 'mark',
-      upperCase: 'Markdown'
-    };
-  }
-  if (audioExtensions.includes(cleanExtension)) {
-    return {
-      lowerCase: 'audio',
-      upperCase: 'Audio'
-    };
-  }
-  if (videoExtensions.includes(cleanExtension)) {
-    return {
-      lowerCase: 'video',
-      upperCase: 'Video'
-    };
-  }
-  if (codeExtensions.includes(cleanExtension)) {
-    return {
-      lowerCase: 'code',
-      upperCase: 'Code'
-    };
-  }
-  if (databaseExtensions.includes(cleanExtension)) {
-    return {
-      lowerCase: 'database',
-      upperCase: 'Database'
-    };
-  }
-  if (cleanExtension === 'lnk') {
-    return {
-      lowerCase: 'link',
-      upperCase: 'Link'
-    };
-  }
-  if (zipExtensions.includes(cleanExtension)) {
-    return {
-      lowerCase: 'zip',
-      upperCase: 'Zip'
-    };
-  }
-  if (cleanExtension === 'obj' || cleanExtension === 'fbx' || cleanExtension === 'glb') {
-    return {
-      lowerCase: 'three',
-      upperCase: '3D'
-    };
-  }
-  return {
-    lowerCase: 'file',
-    upperCase: 'File'
-  };
-}
-
-/**
- * 获取文件大小
- * @param {number} size 文件大小
- * @returns {string} 返回文件大小
- */
-function getSize(size) {
-  let retSize = size;
-  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
-  let unitIndex = 0;
-  while (retSize >= 1024 && unitIndex < units.length - 1) {
-    retSize /= 1024;
-    unitIndex++;
-  }
-  return `${retSize.toFixed(0)} ${units[unitIndex]}`;
-}
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FilesCard/src/main.vue?vue&type=script&lang=js
 
 
@@ -2666,12 +2660,10 @@ function getSize(size) {
     },
     handlePreviewAction(type) {
       if (this.imgPreview && this.$refs.imgRef && this._previewImgUrl && type === 'mask') {
-        console.log(this.$refs.imgRef);
         this.$refs.imgRef.clickHandler();
-        // this.$refs.imgRef.showPreview()
       }
       if (type === 'self') {
-        this.$emit('imagePreview', {
+        this.$emit('image-preview', {
           ...this.propsData
         });
       }
@@ -2699,10 +2691,10 @@ function getSize(size) {
 var injectStylesIntoStyleTag = __webpack_require__(3);
 var injectStylesIntoStyleTag_default = /*#__PURE__*/__webpack_require__.n(injectStylesIntoStyleTag);
 
-// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FilesCard/src/main.vue?vue&type=style&index=0&id=10b2c201&prod&lang=scss&scoped=true
-var mainvue_type_style_index_0_id_10b2c201_prod_lang_scss_scoped_true = __webpack_require__(25);
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FilesCard/src/main.vue?vue&type=style&index=0&id=28b3b638&prod&lang=scss&scoped=true
+var mainvue_type_style_index_0_id_28b3b638_prod_lang_scss_scoped_true = __webpack_require__(25);
 
-// CONCATENATED MODULE: ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FilesCard/src/main.vue?vue&type=style&index=0&id=10b2c201&prod&lang=scss&scoped=true
+// CONCATENATED MODULE: ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FilesCard/src/main.vue?vue&type=style&index=0&id=28b3b638&prod&lang=scss&scoped=true
 
             
 
@@ -2711,12 +2703,12 @@ var options = {};
 options.insert = "head";
 options.singleton = false;
 
-var update = injectStylesIntoStyleTag_default()(mainvue_type_style_index_0_id_10b2c201_prod_lang_scss_scoped_true["a" /* default */], options);
+var update = injectStylesIntoStyleTag_default()(mainvue_type_style_index_0_id_28b3b638_prod_lang_scss_scoped_true["a" /* default */], options);
 
 
 
-/* harmony default export */ var src_mainvue_type_style_index_0_id_10b2c201_prod_lang_scss_scoped_true = (mainvue_type_style_index_0_id_10b2c201_prod_lang_scss_scoped_true["a" /* default */].locals || {});
-// CONCATENATED MODULE: ./src/components/FilesCard/src/main.vue?vue&type=style&index=0&id=10b2c201&prod&lang=scss&scoped=true
+/* harmony default export */ var src_mainvue_type_style_index_0_id_28b3b638_prod_lang_scss_scoped_true = (mainvue_type_style_index_0_id_28b3b638_prod_lang_scss_scoped_true["a" /* default */].locals || {});
+// CONCATENATED MODULE: ./src/components/FilesCard/src/main.vue?vue&type=style&index=0&id=28b3b638&prod&lang=scss&scoped=true
 
 // CONCATENATED MODULE: ./src/components/FilesCard/src/main.vue
 
@@ -2733,7 +2725,7 @@ var main_component = Object(componentNormalizer["a" /* default */])(
   staticRenderFns,
   false,
   null,
-  "10b2c201",
+  "28b3b638",
   null
   
 )
@@ -3036,7 +3028,7 @@ module.exports = function (list, options) {
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
 // Module
-___CSS_LOADER_EXPORT___.push([module.i, "[data-v-4f88f26a]:root{--color-primary: #409EFF;--color-success: #67C23A;--color-warning: #E6A23C;--color-danger: #F56C6C;--color-info: #909399}.card-motion-enter-active[data-v-4f88f26a],.card-motion-move[data-v-4f88f26a],.card-motion-leave-active[data-v-4f88f26a]{transition:all .3s ease;opacity:1;transform:translateX(0)}.card-motion-enter[data-v-4f88f26a],.card-motion-leave-to[data-v-4f88f26a]{opacity:0;transform:translateX(-100%)}.card-motion-leave-active[data-v-4f88f26a]{transform:translateX(100%);opacity:0}.el-x-attachments-file-card-wrap[data-v-4f88f26a]{display:flex;height:100%;align-items:center}.el-x-attachments-upload-placeholder[data-v-4f88f26a]{display:inline-block;width:fit-content;align-self:center;margin:6px}.el-x-attachments-card[data-v-4f88f26a]{display:inline-block;vertical-align:top}.el-x-attachments-card-item[data-v-4f88f26a]{margin:6px}.el-x-attachments-prev-btn[data-v-4f88f26a],.el-x-attachments-next-btn[data-v-4f88f26a]{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background-color:rgba(0,0,0,.3);color:#fff;border:none;padding:4px 0px;border-radius:3px;transition:background-color .3s ease}.el-x-attachments-prev-btn[data-v-4f88f26a]:hover,.el-x-attachments-next-btn[data-v-4f88f26a]:hover{background-color:rgba(0,0,0,.5)}.el-x-attachments-prev-btn[data-v-4f88f26a]:active,.el-x-attachments-next-btn[data-v-4f88f26a]:active{background-color:rgba(0,0,0,.7)}.el-x-attachments-prev-btn[data-v-4f88f26a]{left:8px;border-top-left-radius:0px;border-bottom-left-radius:0px}.el-x-attachments-next-btn[data-v-4f88f26a]{right:8px;border-top-right-radius:0px;border-bottom-right-radius:0px}.el-x-attachments-background[data-v-4f88f26a]{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;pointer-events:none}.el-x-attachments-background-start[data-v-4f88f26a]{position:absolute;top:0;left:0;bottom:0;width:50px;background:linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));z-index:5}.el-x-attachments-background-end[data-v-4f88f26a]{position:absolute;top:0;right:0;bottom:0;width:50px;background:linear-gradient(to left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));z-index:5}.el-x-attachments-overflow-scrollX[data-v-4f88f26a]{height:100%;scrollbar-width:none}.el-x-attachments-overflow-scrollX[data-v-4f88f26a]::-webkit-scrollbar{display:none}.el-x-attachments-overflow-scrollY[data-v-4f88f26a]{width:100%;height:100%}.el-x-attachments-wrapper[data-v-4f88f26a]{position:relative;display:block}.el-x-attachments-upload-btn[data-v-4f88f26a]{display:flex}.el-x-attachments-upload-btn[data-v-4f88f26a] .el-upload{border:1px dashed #dcdfe6;border-radius:6px;cursor:pointer;position:relative;overflow:hidden;transition:all .3s cubic-bezier(0.645, 0.045, 0.355, 1);box-sizing:border-box;text-align:center}.el-x-attachments-upload-btn[data-v-4f88f26a] .el-upload:hover{border-color:#409eff}.el-x-attachments-upload-btn[data-v-4f88f26a] .el-upload:hover .uploader-icon{color:#409eff}.el-x-attachments-upload-btn .uploader-icon[data-v-4f88f26a]{font-size:28px;color:#8c939d;text-align:center;width:var(--el-x-attachments-upload-icon-size);height:var(--el-x-attachments-upload-icon-size);line-height:var(--el-x-attachments-upload-icon-size)}.el-x-attachments-upload-btn[data-v-4f88f26a] .el-upload-dragger{padding:0;width:auto !important;height:auto !important;background-color:rgba(0,0,0,0)}.el-x-attachments-upload-btn[data-v-4f88f26a] .el-upload-dragger:hover .el-icon{color:#409eff}.el-x-attachments-drop-area[data-v-4f88f26a]{position:absolute !important;top:0 !important;left:0 !important;width:calc(100% - 4px) !important;height:calc(100% - 4px) !important;border-radius:15px !important;border:2px dashed #409eff !important;z-index:9999 !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-direction:column !important;background:rgba(225,225,225,.8) !important;backdrop-filter:blur(4px) !important;animation:dragAreaShow-4f88f26a .3s ease-in-out !important;pointer-events:none !important}.el-x-attachments-drop-area-icon[data-v-4f88f26a]{font-size:50px !important;color:#409eff !important;animation:bounce-4f88f26a 1s infinite alternate !important}.el-x-attachments-drop-area-text[data-v-4f88f26a]{font-size:16px !important;color:#409eff !important;margin-top:10px !important;text-align:center !important;width:100% !important;max-width:300px !important;font-weight:bold !important}@keyframes dragAreaShow-4f88f26a{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}@keyframes bounce-4f88f26a{from{transform:translateY(0)}to{transform:translateY(-10px)}}", ""]);
+___CSS_LOADER_EXPORT___.push([module.i, "[data-v-4c699dac]:root{--color-primary: #409EFF;--color-success: #67C23A;--color-warning: #E6A23C;--color-danger: #F56C6C;--color-info: #909399}.card-motion-enter-active[data-v-4c699dac],.card-motion-move[data-v-4c699dac],.card-motion-leave-active[data-v-4c699dac]{transition:all .3s ease;opacity:1;transform:translateX(0)}.card-motion-enter[data-v-4c699dac],.card-motion-leave-to[data-v-4c699dac]{opacity:0;transform:translateX(-100%)}.card-motion-leave-active[data-v-4c699dac]{transform:translateX(100%);opacity:0}.el-x-attachments-file-card-wrap[data-v-4c699dac]{display:flex;height:100%;align-items:center}.el-x-attachments-upload-placeholder[data-v-4c699dac]{display:inline-block;width:fit-content;align-self:center;margin:6px}.el-x-attachments-card[data-v-4c699dac]{display:inline-block;vertical-align:top}.el-x-attachments-card-item[data-v-4c699dac]{margin:6px}.el-x-attachments-prev-btn[data-v-4c699dac],.el-x-attachments-next-btn[data-v-4c699dac]{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background-color:rgba(0,0,0,.3);color:#fff;border:none;padding:4px 0px;border-radius:3px;transition:background-color .3s ease}.el-x-attachments-prev-btn[data-v-4c699dac]:hover,.el-x-attachments-next-btn[data-v-4c699dac]:hover{background-color:rgba(0,0,0,.5)}.el-x-attachments-prev-btn[data-v-4c699dac]:active,.el-x-attachments-next-btn[data-v-4c699dac]:active{background-color:rgba(0,0,0,.7)}.el-x-attachments-prev-btn[data-v-4c699dac]{left:8px;border-top-left-radius:0px;border-bottom-left-radius:0px}.el-x-attachments-next-btn[data-v-4c699dac]{right:8px;border-top-right-radius:0px;border-bottom-right-radius:0px}.el-x-attachments-background[data-v-4c699dac]{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;pointer-events:none}.el-x-attachments-background-start[data-v-4c699dac]{position:absolute;top:0;left:0;bottom:0;width:50px;background:linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));z-index:5}.el-x-attachments-background-end[data-v-4c699dac]{position:absolute;top:0;right:0;bottom:0;width:50px;background:linear-gradient(to left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));z-index:5}.el-x-attachments-overflow-scrollX[data-v-4c699dac]{height:100%;scrollbar-width:none}.el-x-attachments-overflow-scrollX[data-v-4c699dac]::-webkit-scrollbar{display:none}.el-x-attachments-overflow-scrollY[data-v-4c699dac]{width:100%;height:100%}.el-x-attachments-wrapper[data-v-4c699dac]{position:relative;display:block}.el-x-attachments-upload-btn[data-v-4c699dac]{display:flex}.el-x-attachments-upload-btn[data-v-4c699dac] .el-upload{border:1px dashed #dcdfe6;border-radius:6px;cursor:pointer;position:relative;overflow:hidden;transition:all .3s cubic-bezier(0.645, 0.045, 0.355, 1);box-sizing:border-box;text-align:center}.el-x-attachments-upload-btn[data-v-4c699dac] .el-upload:hover{border-color:#409eff}.el-x-attachments-upload-btn[data-v-4c699dac] .el-upload:hover .uploader-icon{color:#409eff}.el-x-attachments-upload-btn .uploader-icon[data-v-4c699dac]{font-size:28px;color:#8c939d;text-align:center;width:var(--el-x-attachments-upload-icon-size);height:var(--el-x-attachments-upload-icon-size);line-height:var(--el-x-attachments-upload-icon-size)}.el-x-attachments-upload-btn[data-v-4c699dac] .el-upload-dragger{padding:0;width:auto !important;height:auto !important;background-color:rgba(0,0,0,0)}.el-x-attachments-upload-btn[data-v-4c699dac] .el-upload-dragger:hover .el-icon{color:#409eff}.el-x-attachments-drop-area[data-v-4c699dac]{position:absolute !important;top:0 !important;left:0 !important;width:calc(100% - 4px) !important;height:calc(100% - 4px) !important;border-radius:15px !important;border:2px dashed #409eff !important;z-index:9999 !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-direction:column !important;background:rgba(225,225,225,.8) !important;backdrop-filter:blur(4px) !important;animation:dragAreaShow-4c699dac .3s ease-in-out !important;pointer-events:none !important}.el-x-attachments-drop-area-icon[data-v-4c699dac]{font-size:50px !important;color:#409eff !important;animation:bounce-4c699dac 1s infinite alternate !important}.el-x-attachments-drop-area-text[data-v-4c699dac]{font-size:16px !important;color:#409eff !important;margin-top:10px !important;text-align:center !important;width:100% !important;max-width:300px !important;font-weight:bold !important}@keyframes dragAreaShow-4c699dac{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}@keyframes bounce-4c699dac{from{transform:translateY(0)}to{transform:translateY(-10px)}}", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["a"] = (___CSS_LOADER_EXPORT___);