knt-shared 1.10.6 → 1.10.8

package/dist/index.cjs.js

@@ -2460,7 +2460,7 @@ const _hoisted_4$4 = {
 const _hoisted_5$4 = { class: "progress-bar" };
 const _hoisted_6$3 = { class: "controls-bottom" };
 const _hoisted_7$2 = { class: "controls-left" };
-const _hoisted_8$1 = { class: "volume-slider-container" };
+const _hoisted_8$2 = { class: "volume-slider-container" };
 const _hoisted_9 = { class: "time-display" };
 const _hoisted_10 = { class: "controls-right" };
 const _hoisted_11 = { class: "control-button" };
@@ -2485,6 +2485,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const emit = __emit;
     const videoRef = vue.ref();
+    const progressBarRef = vue.ref();
     const isPlaying = vue.ref(false);
     const isLoading = vue.ref(true);
     const currentTime = vue.ref(0);
@@ -2513,7 +2514,11 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
         videoRef.value.pause();
         emit("pause");
       } else {
-        videoRef.value.play();
+        videoRef.value.play().catch((err) => {
+          if (err.name !== "AbortError") {
+            console.error("[VideoPreview] play() 失败:", err);
+          }
+        });
         emit("play");
       }
     };
@@ -2581,11 +2586,8 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       document.addEventListener("mouseup", handleProgressMouseUp);
     };
     const handleProgressMouseMove = (event) => {
-      var _a2, _b;
-      if (!isDraggingProgress.value || !videoRef.value) return;
-      const container = (_b = (_a2 = videoRef.value.parentElement) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b.querySelector(".progress-bar-container");
-      if (!container) return;
-      const rect = container.getBoundingClientRect();
+      if (!isDraggingProgress.value || !videoRef.value || !progressBarRef.value) return;
+      const rect = progressBarRef.value.getBoundingClientRect();
       let percent = (event.clientX - rect.left) / rect.width;
       percent = Math.max(0, Math.min(1, percent));
       videoRef.value.currentTime = percent * duration.value;
@@ -2698,6 +2700,8 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
           }, ["stop"]))
         }, [
           vue.createElementVNode("div", {
+            ref_key: "progressBarRef",
+            ref: progressBarRef,
             class: "progress-bar-container",
             onClick: handleProgressClick
           }, [
@@ -2716,7 +2720,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                 onMousedown: handleProgressMouseDown
               }, null, 36)
             ])
-          ]),
+          ], 512),
           vue.createElementVNode("div", _hoisted_6$3, [
             vue.createElementVNode("div", _hoisted_7$2, [
               vue.createElementVNode("button", {
@@ -2748,7 +2752,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                     size: 20
                   }))
                 ]),
-                vue.withDirectives(vue.createElementVNode("div", _hoisted_8$1, [
+                vue.withDirectives(vue.createElementVNode("div", _hoisted_8$2, [
                   vue.withDirectives(vue.createElementVNode("input", {
                     "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => volume.value = $event),
                     type: "range",
@@ -2810,7 +2814,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const VideoPreview = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-b982f870"]]);
+const VideoPreview = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-d4fd2c00"]]);
 const _hoisted_1$a = { class: "video-modal-title" };
 const _hoisted_2$7 = { class: "file-name" };
 const _hoisted_3$5 = { class: "video-modal-content" };
@@ -2833,7 +2837,6 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
   },
   emits: ["update:visible", "play", "pause", "ended"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
     const emit = __emit;
     const handleClose = () => {
       emit("update:visible", false);
@@ -2847,11 +2850,6 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     const handleEnded = () => {
       emit("ended");
     };
-    vue.watch(
-      () => props.visible,
-      (newVisible) => {
-      }
-    );
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(ArcoVue.Modal), {
         visible: __props.visible,
@@ -2885,7 +2883,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const VideoPreviewModal = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-cac8e63e"]]);
+const VideoPreviewModal = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-db151e2d"]]);
 const _hoisted_1$9 = { class: "basic-upload" };
 const _hoisted_2$6 = {
   key: 0,
@@ -2908,7 +2906,7 @@ const _hoisted_7$1 = {
   key: 1,
   class: "upload-tip sortable-tip"
 };
-const _hoisted_8 = {
+const _hoisted_8$1 = {
   key: 5,
   class: "inline-video-preview"
 };
@@ -2973,10 +2971,10 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     showErrorMessage: { type: Boolean, default: true },
     showSuccessMessage: { type: Boolean, default: true }
   },
-  emits: ["register", "update:modelValue", "change", "success", "handleSuccess", "error", "handlError", "progress", "remove", "preview", "exceed", "sortChange"],
+  emits: ["register", "update:modelValue", "change", "handleSuccess", "handleError", "progress", "remove", "preview", "exceed", "sortChange"],
   setup(__props, { expose: __expose, emit: __emit }) {
     vue.useCssVars((_ctx) => ({
-      "eb56f194": cardSizeValue.value
+      "v0a277aea": cardSizeValue.value
     }));
     const MAX_SIZE_UNIT_BYTES = {
       B: 1,
@@ -3146,6 +3144,11 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
       }
       return defaultUpload(options);
     };
+    const isSafeUrl = (url) => {
+      if (!url || typeof url !== "string") return false;
+      const lower = url.trim().toLowerCase();
+      return !lower.startsWith("javascript:") && !lower.startsWith("data:");
+    };
     const extractUrlFromResponse = (response) => {
       const urlPaths = [
         "url",
@@ -3157,11 +3160,11 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
       ];
       for (const path of urlPaths) {
         const value = path.split(".").reduce((obj, key) => obj == null ? void 0 : obj[key], response);
-        if (value && typeof value === "string") {
+        if (value && typeof value === "string" && isSafeUrl(value)) {
           return value;
         }
       }
-      if (response.data && typeof response.data === "string") {
+      if (response.data && typeof response.data === "string" && isSafeUrl(response.data)) {
         return response.data;
       }
       return null;
@@ -3184,11 +3187,8 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
           }, 3e3);
         }
         onError(new Error("上传地址未配置"));
-        return {
-          abort() {
-            xhr.abort();
-          }
-        };
+        return { abort() {
+        } };
       }
       const formData = new FormData();
       formData.append(propsData.name || "file", fileItem.file);
@@ -3254,23 +3254,17 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
         }
       };
     };
+    const VIDEO_EXTENSIONS = [".mp4", ".avi", ".mov", ".wmv", ".flv", ".webm", ".mkv", ".m4v"];
     const addVideoFileClass = () => {
       vue.nextTick(() => {
-        const uploadItems = document.querySelectorAll(".arco-upload-list-picture");
+        var _a;
+        const root = ((_a = uploadRef.value) == null ? void 0 : _a.$el) ?? null;
+        const scope = root ?? document;
+        const uploadItems = scope.querySelectorAll(".arco-upload-list-picture");
         uploadItems.forEach((item) => {
           const img = item.querySelector("img");
           if (img && img.src) {
-            const videoExtensions = [
-              ".mp4",
-              ".avi",
-              ".mov",
-              ".wmv",
-              ".flv",
-              ".webm",
-              ".mkv",
-              ".m4v"
-            ];
-            const isVideo = videoExtensions.some(
+            const isVideo = VIDEO_EXTENSIONS.some(
               (ext) => img.src.toLowerCase().includes(ext)
             );
             if (isVideo) {
@@ -3284,14 +3278,15 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     };
     const handleChange = (fileList, currentFile) => {
       const oldLength = fileListRef.value.length;
-      const newLength = fileList.length;
+      const newFileList = currentFile.status === "error" ? fileList.filter((f) => f.uid !== currentFile.uid) : fileList;
+      const newLength = newFileList.length;
       if (newLength > oldLength) {
         const added = newLength - oldLength;
         pendingCount.value = Math.max(0, pendingCount.value - added);
       }
-      fileListRef.value = fileList;
+      fileListRef.value = newFileList;
       addVideoFileClass();
-      emit("change", fileList);
+      emit("change", newFileList);
       const isRemove = newLength < oldLength;
       const fileKey = currentFile.uid || `file-${Date.now()}-${Math.random()}`;
       const lastStatus = processedFiles.value.get(fileKey);
@@ -3299,19 +3294,18 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
         processedFiles.value.set(fileKey, "done");
         emit("handleSuccess", currentFile.response, currentFile);
       } else if (currentFile.status === "error" && lastStatus !== "error") {
-        processedFiles.value.set(fileKey, "error");
         const error = new Error("上传失败");
-        emit("handlError", error, currentFile);
+        emit("handleError", error, currentFile);
       }
       if (isRemove) {
-        const fileUids = new Set(fileList.map((f) => f.uid));
+        const fileUids = new Set(newFileList.map((f) => f.uid));
         processedFiles.value.forEach((_value, uid) => {
           if (!fileUids.has(uid)) {
             processedFiles.value.delete(uid);
           }
         });
       }
-      updateModelValue(fileList);
+      updateModelValue(newFileList);
     };
     const handleProgress = (currentFile) => {
       const percent = currentFile.percent || 0;
@@ -3382,14 +3376,17 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
         (item) => item.url === fileItem.url && item.path === fileItem.path
       );
     };
+    const stableUid = (url, index) => `url-${index}-${url.replace(/[^a-zA-Z0-9.\-_]/g, "_")}`;
     const parseModelValue = (value) => {
       if (!value) return [];
-      if (Array.isArray(value) && value.length > 0 && typeof value[0] === "object") {
-        return value.map(normalizeFileItem);
-      }
       if (Array.isArray(value)) {
-        return value.map((url, index) => ({
-          uid: `${Date.now()}-${index}`,
+        if (value.length === 0) return [];
+        const first = value[0];
+        if (first !== null && first !== void 0 && typeof first === "object") {
+          return value.filter((item) => item !== null && item !== void 0).map(normalizeFileItem);
+        }
+        return value.filter((url) => url && typeof url === "string").map((url, index) => ({
+          uid: stableUid(url.trim(), index),
           name: url.split("/").pop() || `file-${index}`,
           url,
           status: "done"
@@ -3398,8 +3395,8 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
       if (typeof value === "string") {
         const urls = value.split(",").filter(Boolean);
         return urls.map((url, index) => ({
-          uid: `${Date.now()}-${index}`,
-          name: url.split("/").pop() || `file-${index}`,
+          uid: stableUid(url.trim(), index),
+          name: url.trim().split("/").pop() || `file-${index}`,
           url: url.trim(),
           status: "done"
         }));
@@ -3483,10 +3480,23 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     vue.watch(
       () => getProps.value.modelValue,
       (val) => {
-        fileListRef.value = parseModelValue(val);
+        const parsed = parseModelValue(val);
+        const isExternalClear = !val || Array.isArray(val) && val.length === 0 || typeof val === "string" && val.trim() === "";
+        if (!isExternalClear) {
+          const hasUploading = fileListRef.value.some(
+            (f) => f.status === "uploading" || f.status === "init"
+          );
+          if (hasUploading) return;
+        }
+        const isSame = parsed.length === fileListRef.value.length && parsed.every((newItem, i) => {
+          const oldItem = fileListRef.value[i];
+          return newItem.uid === (oldItem == null ? void 0 : oldItem.uid) && newItem.url === (oldItem == null ? void 0 : oldItem.url);
+        });
+        if (isSame) return;
+        fileListRef.value = parsed;
         addVideoFileClass();
       },
-      { immediate: true }
+      { immediate: true, deep: true }
     );
     vue.onMounted(() => {
       vue.nextTick(() => {
@@ -3634,7 +3644,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
           "file-name": previewFileName.value,
           "player-options": getProps.value.videoPlayerOptions
         }, null, 8, ["visible", "video-url", "file-name", "player-options"])) : vue.createCommentVNode("", true),
-        getProps.value.videoPreviewMode === "inline" && previewVideoVisible.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+        getProps.value.videoPreviewMode === "inline" && previewVideoVisible.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$1, [
           vue.createVNode(VideoPreview, {
             "video-url": previewVideoUrl.value,
             "player-options": getProps.value.videoPlayerOptions
@@ -3653,7 +3663,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const BasicUpload = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-3a5bef91"]]);
+const BasicUpload = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-d256c7da"]]);
 function useUpload(props) {
   const uploadRef = vue.ref(null);
   const fileListRef = vue.ref((props == null ? void 0 : props.defaultFileList) || []);
@@ -3663,7 +3673,7 @@ function useUpload(props) {
       uploadInstance.setFileList(props.defaultFileList);
     }
     if (props && Object.keys(props).length > 0) {
-      const { defaultFileList, ...restProps } = props;
+      const { defaultFileList: _, ...restProps } = props;
       if (Object.keys(restProps).length > 0) {
         setProps(restProps);
       }
@@ -3687,48 +3697,36 @@ function useUpload(props) {
     fileListRef.value = [];
   };
   const getFileList = () => {
-    return getUpload().getFileList();
+    const list = getUpload().getFileList();
+    fileListRef.value = list;
+    return list;
   };
   const upload = (fileItem) => {
     getUpload().upload(fileItem);
   };
   const setFileList = (files) => {
-    fileListRef.value = files;
+    var _a;
     const upload2 = getUpload();
-    if (upload2.setFileList) {
-      upload2.setFileList(files);
-    }
+    (_a = upload2.setFileList) == null ? void 0 : _a.call(upload2, files);
+    fileListRef.value = upload2.getFileList();
   };
   const addFile = (file) => {
-    fileListRef.value.push(file);
+    var _a;
     const upload2 = getUpload();
-    if (upload2.addFile) {
-      upload2.addFile(file);
-    }
+    (_a = upload2.addFile) == null ? void 0 : _a.call(upload2, file);
+    fileListRef.value = upload2.getFileList();
   };
   const removeFile = (fileItem) => {
-    const index = fileListRef.value.findIndex(
-      (item) => item.uid === fileItem.uid
-    );
-    if (index !== -1) {
-      fileListRef.value.splice(index, 1);
-    }
+    var _a;
     const upload2 = getUpload();
-    if (upload2.removeFile) {
-      upload2.removeFile(fileItem);
-    }
+    (_a = upload2.removeFile) == null ? void 0 : _a.call(upload2, fileItem);
+    fileListRef.value = upload2.getFileList();
   };
   const updateFile = (fileItem) => {
-    const index = fileListRef.value.findIndex(
-      (item) => item.uid === fileItem.uid
-    );
-    if (index !== -1) {
-      fileListRef.value[index] = { ...fileListRef.value[index], ...fileItem };
-    }
+    var _a;
     const upload2 = getUpload();
-    if (upload2.updateFile) {
-      upload2.updateFile(fileItem);
-    }
+    (_a = upload2.updateFile) == null ? void 0 : _a.call(upload2, fileItem);
+    fileListRef.value = upload2.getFileList();
   };
   const setProps = (uploadProps) => {
     getUpload().setProps(uploadProps);
@@ -10199,17 +10197,17 @@ function useDescription(props) {
     }
   ];
 }
-const _hoisted_1$2 = { class: "basic-image" };
-const _hoisted_2$1 = {
+const _hoisted_1$2 = {
   key: 0,
   class: "basic-image-empty"
 };
-const _hoisted_3$1 = { class: "empty-text" };
-const _hoisted_4 = {
+const _hoisted_2$1 = { class: "empty-text" };
+const _hoisted_3$1 = {
   key: 0,
   class: "basic-image-simple"
 };
-const _hoisted_5 = { class: "image-wrapper" };
+const _hoisted_4 = { class: "image-wrapper" };
+const _hoisted_5 = ["src", "width", "height", "alt"];
 const _hoisted_6 = {
   key: 0,
   class: "image-count-badge"
@@ -10218,6 +10216,7 @@ const _hoisted_7 = {
   key: 0,
   style: { "display": "none" }
 };
+const _hoisted_8 = ["src", "width", "height", "alt"];
 const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "BasicImage"
@@ -10245,21 +10244,45 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     const getProps = vue.computed(() => {
       return { ...props, ...innerPropsRef.value };
     });
+    function isSafeImageUrl(url) {
+      if (!url || typeof url !== "string") return false;
+      const trimmed = url.trim();
+      if (trimmed.startsWith("/") || trimmed.startsWith("./") || trimmed.startsWith("../")) {
+        return true;
+      }
+      if (/^data:/i.test(trimmed)) {
+        return /^data:image\/(?!svg\+xml)/i.test(trimmed);
+      }
+      try {
+        const { protocol } = new URL(trimmed);
+        return protocol === "http:" || protocol === "https:" || protocol === "blob:";
+      } catch {
+        return false;
+      }
+    }
     const normalizedImages = vue.computed(() => {
       const images = getProps.value.images || [];
       if (!Array.isArray(images) || images.length === 0) {
         return [];
       }
       return images.map((item) => {
-        if (typeof item === "string") {
-          return { url: item };
+        const normalized = typeof item === "string" ? { url: item } : item;
+        if (!isSafeImageUrl(normalized.url)) {
+          return { ...normalized, url: "" };
         }
-        return item;
+        return normalized;
       });
     });
+    const safeErrorImage = vue.computed(() => {
+      const url = getProps.value.errorImage;
+      if (!url || !isSafeImageUrl(url)) return void 0;
+      return url;
+    });
     const gridStyle = vue.computed(() => {
+      const rawGap = getProps.value.gap ?? 8;
+      const gap = Number.isFinite(rawGap) ? Math.max(0, rawGap) : 8;
       return {
-        gap: `${getProps.value.gap}px`
+        gap: `${gap}px`
       };
     });
     const handleImageClick = (item, index) => {
@@ -10267,6 +10290,9 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
         return;
       }
       emit("click", item, index);
+      if (getProps.value.preview) {
+        emit("preview", item, index);
+      }
     };
     const getImages = () => {
       return normalizedImages.value;
@@ -10286,41 +10312,52 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
       getProps: getPropsValue,
       setProps
     };
-    vue.watch(
-      () => props,
-      () => {
-      },
-      { deep: true }
-    );
     vue.onMounted(() => {
       emit("register", methods);
     });
     __expose(methods);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
-        normalizedImages.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, [
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["basic-image", { "basic-image--disabled": getProps.value.disabled }])
+      }, [
+        normalizedImages.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
           vue.renderSlot(_ctx.$slots, "empty", {}, () => [
-            vue.createElementVNode("span", _hoisted_3$1, vue.toDisplayString(getProps.value.emptyText), 1)
+            vue.createElementVNode("span", _hoisted_2$1, vue.toDisplayString(getProps.value.emptyText), 1)
           ], true)
         ])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getProps.value.preview ? vue.unref(ArcoVue.ImagePreviewGroup) : "div"), { key: 1 }, {
           default: vue.withCtx(() => [
-            !getProps.value.showAll ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
-              vue.createElementVNode("div", _hoisted_5, [
+            !getProps.value.showAll ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
+              vue.createElementVNode("div", _hoisted_4, [
                 vue.createVNode(vue.unref(ArcoVue.Image), {
                   src: normalizedImages.value[0].url,
                   width: getProps.value.width,
                   height: getProps.value.height,
                   fit: getProps.value.fit,
                   preview: getProps.value.preview,
+                  "show-loader": getProps.value.loading,
                   alt: normalizedImages.value[0].name || "图片",
                   onClick: _cache[0] || (_cache[0] = ($event) => handleImageClick(normalizedImages.value[0], 0))
-                }, null, 8, ["src", "width", "height", "fit", "preview", "alt"]),
-                normalizedImages.value.length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, " +" + vue.toDisplayString(normalizedImages.value.length - 1), 1)) : vue.createCommentVNode("", true)
+                }, vue.createSlots({ _: 2 }, [
+                  safeErrorImage.value ? {
+                    name: "error",
+                    fn: vue.withCtx(() => [
+                      vue.createElementVNode("img", {
+                        src: safeErrorImage.value,
+                        width: getProps.value.width,
+                        height: getProps.value.height,
+                        style: vue.normalizeStyle({ display: "block", objectFit: getProps.value.fit }),
+                        alt: normalizedImages.value[0].name || "图片"
+                      }, null, 12, _hoisted_5)
+                    ]),
+                    key: "0"
+                  } : void 0
+                ]), 1032, ["src", "width", "height", "fit", "preview", "show-loader", "alt"]),
+                normalizedImages.value.length > (getProps.value.maxCount ?? 1) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, " +" + vue.toDisplayString(normalizedImages.value.length - (getProps.value.maxCount ?? 1)), 1)) : vue.createCommentVNode("", true)
               ]),
-              getProps.value.preview && normalizedImages.value.length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(normalizedImages.value.slice(1), (item, index) => {
+              getProps.value.preview && normalizedImages.value.length > (getProps.value.maxCount ?? 1) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(normalizedImages.value.slice(getProps.value.maxCount ?? 1), (item, index) => {
                   return vue.openBlock(), vue.createBlock(vue.unref(ArcoVue.Image), {
-                    key: index,
+                    key: `${item.url}-${index}`,
                     src: item.url,
                     alt: item.name || "图片"
                   }, null, 8, ["src", "alt"]);
@@ -10333,7 +10370,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(normalizedImages.value, (item, index) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
-                  key: index,
+                  key: `${item.url}-${index}`,
                   class: "image-item"
                 }, [
                   vue.createVNode(vue.unref(ArcoVue.Image), {
@@ -10342,33 +10379,46 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
                     height: getProps.value.height,
                     fit: getProps.value.fit,
                     preview: getProps.value.preview,
+                    "show-loader": getProps.value.loading,
                     alt: item.name || "图片",
                     onClick: ($event) => handleImageClick(item, index)
-                  }, null, 8, ["src", "width", "height", "fit", "preview", "alt", "onClick"])
+                  }, vue.createSlots({ _: 2 }, [
+                    safeErrorImage.value ? {
+                      name: "error",
+                      fn: vue.withCtx(() => [
+                        vue.createElementVNode("img", {
+                          src: safeErrorImage.value,
+                          width: getProps.value.width,
+                          height: getProps.value.height,
+                          style: vue.normalizeStyle({ display: "block", objectFit: getProps.value.fit }),
+                          alt: item.name || "图片"
+                        }, null, 12, _hoisted_8)
+                      ]),
+                      key: "0"
+                    } : void 0
+                  ]), 1032, ["src", "width", "height", "fit", "preview", "show-loader", "alt", "onClick"])
                 ]);
               }), 128))
             ], 4))
           ]),
           _: 1
         }))
-      ]);
+      ], 2);
     };
   }
 });
-const BasicImage = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-04c54d5a"]]);
+const BasicImage = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-71d2eff3"]]);
 function useImage(options) {
   const imageRef = vue.ref(null);
   const loadedRef = vue.ref(false);
   const register = (instance) => {
-    if (vue.unref(imageRef) && instance === vue.unref(imageRef)) {
+    if (instance === vue.unref(imageRef)) {
       return;
     }
     imageRef.value = instance;
     loadedRef.value = true;
     if (options) {
-      vue.nextTick(() => {
-        instance.setProps(options);
-      });
+      instance.setProps(options);
     }
   };
   const getInstance = () => {