fangguo-component 1.2.4 → 1.2.6

package/dist/{ViewImgPopover-D-1b2nEa.js → ViewImgPopover-koNFPgjR.js}

@@ -30,32 +30,14 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { ElWatermark } from "element-plus/es";
-import { defineComponent, useAttrs, ref, computed, watch, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createVNode, withCtx, Fragment, renderSlot, createBlock, createElementVNode, createSlots, normalizeProps, guardReactiveProps, createCommentVNode, mergeProps, withModifiers } from "vue";
+import { defineComponent, useAttrs, ref, computed, watch, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createVNode, withCtx, Fragment, renderSlot, normalizeProps, mergeProps, createBlock, createElementVNode, createSlots, guardReactiveProps, createCommentVNode, withModifiers } from "vue";
 import { L as LazyPopover } from "./LazyPopover-CcvilJ6U.js";
-import { V as ViewImgErrorFallback, F as FgViewImg, u as useViewImgDefaults } from "./ViewImg-CD4QJK4R.js";
-import { m as montageImgUrl } from "./montageImgUrl-DP5jMHCX.js";
+import { V as ViewImgErrorFallback, F as FgViewImg, u as useViewImgDefaults } from "./ViewImg-CLRjYOUN.js";
+import { h as hasPlatformImageResizeParams, m as montageImgUrl } from "./montageImgUrl-B9ZmJ7TF.js";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = {
-  key: 1,
-  class: "fg-view-img-popover__loading-icon",
-  viewBox: "0 0 1280 1024"
-};
-const _hoisted_2 = ["fill"];
-const _hoisted_3 = {
-  key: 1,
-  class: "fg-view-img-popover__loading-icon",
-  viewBox: "0 0 1280 1024"
-};
-const _hoisted_4 = ["fill"];
-const _hoisted_5 = {
-  key: 1,
-  class: "fg-view-img-popover__loading-icon",
-  viewBox: "0 0 1280 1024"
-};
-const _hoisted_6 = ["fill"];
 const HOVER_POPOVER_PADDING = 10;
-const HOVER_POPOVER_MAX_HEIGHT = 400;
-const DEFAULT_LOADING_ICON_COLOR = "#cfd2d7";
+const DEFAULT_HOVER_BOX_WIDTH = 400;
+const DEFAULT_HOVER_BOX_HEIGHT = 380;
 const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
   inheritAttrs: false
 }), {
@@ -81,18 +63,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     maxScale: {},
     showProgress: { type: Boolean },
     toolbarBgColor: {},
-    backgroundColor: {},
+    hoverBackgroundColor: {},
+    hoverBoxWidth: {},
+    hoverBoxHeight: {},
     toolbarIconColor: {},
     simpleExtraTools: {},
     renderExtraTools: {},
     originalToolbar: {},
-    errorColor: {},
-    errorOffset: {},
+    fallbackColor: {},
     errorText: {},
     ossProcess: { type: Boolean, default: true },
     ossLinks: {},
     imgSize: {},
     previewStripQuery: { type: Boolean, default: true },
+    previewSideNav: { type: [Boolean, String] },
+    scrollContainer: { default: null },
     hoverSrc: { default: "" },
     previewSrc: { default: "" },
     hoverImgSize: { default: void 0 },
@@ -126,6 +111,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         return () => props2.render(props2.payload);
       }
     });
+    const resolvedWaterMarkTitle = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.waterMarkTitle) != null ? _a : viewImgDefaults.waterMarkTitle) != null ? _b : "";
+    });
+    const resolvedFallbackColor = computed(
+      () => {
+        var _a, _b;
+        return ((_a = props.fallbackColor) == null ? void 0 : _a.trim()) || ((_b = props.loadingIconColor) == null ? void 0 : _b.trim()) || viewImgDefaults.loadingIconColor || "";
+      }
+    );
+    const resolvedHoverBackgroundColor = computed(() => {
+      var _a;
+      return ((_a = props.hoverBackgroundColor) == null ? void 0 : _a.trim()) || "";
+    });
+    const shouldEnableReferencePreview = computed(() => {
+      var _a;
+      return props.preview || !!((_a = props.previewSrcList) == null ? void 0 : _a.length);
+    });
     const viewImgProps = computed(() => {
       const _a = props, {
         hoverSrc: _h,
@@ -136,7 +139,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         waterMarkTitle: _wt,
         showPreviewIcon: _spi,
         showHoverOnError: _shoe,
-        loadingIconColor: _lic
+        loadingIconColor: _lic,
+        fallbackColor: _fc,
+        hoverBackgroundColor: _hbc,
+        hoverBoxWidth: _hbw,
+        hoverBoxHeight: _hbh
       } = _a, rest = __objRest(_a, [
         "hoverSrc",
         "previewSrc",
@@ -146,14 +153,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         "waterMarkTitle",
         "showPreviewIcon",
         "showHoverOnError",
-        "loadingIconColor"
+        "loadingIconColor",
+        "fallbackColor",
+        "hoverBackgroundColor",
+        "hoverBoxWidth",
+        "hoverBoxHeight"
       ]);
       return __spreadProps(__spreadValues({}, rest), {
+        fallbackColor: resolvedFallbackColor.value,
         previewSrcList: shouldEnableReferencePreview.value ? resolvePopoverPreviewSrcList() : []
       });
     });
     const referenceViewImgBind = computed(() => {
-      const _a = attrs, { class: _class, style: _style } = _a, rest = __objRest(_a, ["class", "style"]);
+      const _a = attrs, {
+        class: _class,
+        style: _style,
+        backgroundColor: _backgroundColor,
+        "background-color": _backgroundColorKebab
+      } = _a, rest = __objRest(_a, [
+        "class",
+        "style",
+        "backgroundColor",
+        "background-color"
+      ]);
       return __spreadValues(__spreadValues({}, rest), viewImgProps.value);
     });
     const handlePreviewIconClick = () => {
@@ -166,29 +188,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
       if (typeof extra === "string") return extra;
       return __spreadValues(__spreadValues({}, base), extra);
     };
-    const HOVER_POPOVER_MAX_HEIGHT_CSS = `${HOVER_POPOVER_MAX_HEIGHT}px`;
-    const HOVER_IMAGE_MAX_HEIGHT_CSS = `${HOVER_POPOVER_MAX_HEIGHT - HOVER_POPOVER_PADDING * 2}px`;
     const DEFAULT_HOVER_IMG_SIZE = { h: 420 };
-    const resolvedWaterMarkTitle = computed(() => {
+    const formatCssSize = (size) => typeof size === "number" ? `${size}px` : size;
+    const resolvedHoverBoxWidth = computed(() => {
       var _a, _b;
-      return (_b = (_a = props.waterMarkTitle) != null ? _a : viewImgDefaults.waterMarkTitle) != null ? _b : "";
+      const width = (_b = props.hoverBoxWidth) != null ? _b : (_a = props.hoverPopoverProps) == null ? void 0 : _a.width;
+      return width != null ? width : DEFAULT_HOVER_BOX_WIDTH;
     });
-    const resolvedLoadingIconColor = computed(
+    const resolvedHoverBoxHeightCss = computed(
       () => {
-        var _a, _b;
-        return (_b = (_a = props.loadingIconColor) != null ? _a : viewImgDefaults.loadingIconColor) != null ? _b : DEFAULT_LOADING_ICON_COLOR;
+        var _a;
+        return formatCssSize((_a = props.hoverBoxHeight) != null ? _a : DEFAULT_HOVER_BOX_HEIGHT);
       }
     );
+    const resolvedHoverPopoverMaxHeight = computed(
+      () => `calc(${resolvedHoverBoxHeightCss.value} + ${HOVER_POPOVER_PADDING * 2}px)`
+    );
     const defaultSlotPayload = computed(() => {
-      var _a, _b, _c, _d;
+      var _a, _b;
       return {
         src: props.src,
         displaySrc: ((_a = viewImgRef.value) == null ? void 0 : _a.displaySrc) || props.src,
         loading: !!props.loading,
         loadError: referenceLoadError.value,
         errorText: (_b = props.errorText) != null ? _b : "",
-        errorColor: (_c = props.errorColor) != null ? _c : "#f5f5f5",
-        errorOffset: (_d = props.errorOffset) != null ? _d : 0
+        fallbackColor: resolvedFallbackColor.value
       };
     });
     const isReferenceInvalid = computed(() => !props.src.trim() || referenceLoadError.value);
@@ -198,23 +222,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     const canShowPreviewIcon = computed(
       () => props.showPreviewIcon && !isReferenceInvalid.value
     );
-    const shouldEnableReferencePreview = computed(() => {
-      var _a;
-      return props.preview || !!((_a = props.previewSrcList) == null ? void 0 : _a.length);
-    });
     const hoverPopoverPropsMerged = computed(() => {
       var _a;
-      const _b = (_a = props.hoverPopoverProps) != null ? _a : {}, { popperStyle: userPopperStyle, popperClass: userPopperClass } = _b, restHoverPopoverProps = __objRest(_b, ["popperStyle", "popperClass"]);
+      const _b = (_a = props.hoverPopoverProps) != null ? _a : {}, {
+        width: _userWidth,
+        popperStyle: userPopperStyle,
+        popperClass: userPopperClass
+      } = _b, restHoverPopoverProps = __objRest(_b, [
+        "width",
+        "popperStyle",
+        "popperClass"
+      ]);
       const popperClass = [userPopperClass, "fg-view-img-popover"].filter(Boolean).join(" ");
       return __spreadValues({
         placement: "right",
         trigger: "hover",
-        width: 400,
+        width: resolvedHoverBoxWidth.value,
         teleported: true,
         popperClass,
         popperStyle: mergePopperStyle(
           {
-            maxHeight: HOVER_POPOVER_MAX_HEIGHT_CSS,
+            maxHeight: resolvedHoverPopoverMaxHeight.value,
             overflow: "hidden",
             padding: `${HOVER_POPOVER_PADDING}px`,
             boxSizing: "border-box"
@@ -223,10 +251,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         )
       }, restHoverPopoverProps);
     });
-    const resolveImgUrl = (url, imgSize) => {
-      if (!props.ossProcess) return url;
-      return montageImgUrl(url, imgSize, props.ossLinks ? { ossLinks: props.ossLinks } : void 0);
-    };
     const stripQueryParams = (url) => {
       const index = url.indexOf("?");
       return index === -1 ? url : url.slice(0, index);
@@ -244,30 +268,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
       if (!props.src.trim()) return [];
       return [applyPreviewUrlFallback(props.src)];
     };
-    const resolveResizeProcess = (imgSize) => {
-      const { w, h, s, l } = imgSize != null ? imgSize : {};
-      if (w) return `resize,w_${w}`;
-      if (h) return `resize,h_${h}`;
-      if (s) return `resize,s_${s}`;
-      if (l) return `resize,l_${l}`;
-      return "resize,h_420";
-    };
-    const replaceOssResizeProcess = (url, imgSize) => {
-      const resizeProcess = resolveResizeProcess(imgSize);
-      if (url.includes("x-oss-process=image/resize,")) {
-        return url.replace(/image\/resize,[^/?&#]+/, `image/${resizeProcess}`);
-      }
-      if (url.includes("x-oss-process=image/")) {
-        return url.replace("x-oss-process=image/", `x-oss-process=image/${resizeProcess}/`);
-      }
-      return "";
-    };
     const resolveHoverImgUrl = (url, imgSize) => {
       if (!url.trim()) return "";
-      if (!props.ossProcess) return url;
-      const replaced = replaceOssResizeProcess(url, imgSize);
-      if (replaced) return replaced;
-      return resolveImgUrl(url, imgSize);
+      const options = props.ossLinks ? { ossLinks: props.ossLinks } : void 0;
+      const hasResizeParams = hasPlatformImageResizeParams(url);
+      if (hasResizeParams) {
+        return montageImgUrl(url, imgSize, options);
+      }
+      if (props.ossProcess) {
+        return montageImgUrl(url, imgSize, options);
+      }
+      return url;
     };
     const handleReferenceLoad = (event) => {
       referenceLoadError.value = false;
@@ -289,13 +300,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     );
     const hoverPreviewSrc = computed(() => {
       var _a;
-      const hoverSource = props.hoverSrc || props.src;
-      if (props.hoverSrc && !props.hoverImgSize) return props.hoverSrc;
+      const hoverSource = (props.hoverSrc || props.src).trim();
+      if (!hoverSource) return "";
+      if (props.hoverSrc && props.hoverImgSize == null) return props.hoverSrc;
       return resolveHoverImgUrl(hoverSource, (_a = props.hoverImgSize) != null ? _a : DEFAULT_HOVER_IMG_SIZE);
     });
     const hoverImgStyle = computed(() => ({
       width: "100%",
-      height: HOVER_IMAGE_MAX_HEIGHT_CSS
+      height: resolvedHoverBoxHeightCss.value,
+      backgroundColor: resolvedHoverBackgroundColor.value || void 0
+    }));
+    const hoverWatermarkStyle = computed(() => ({
+      width: "100%",
+      height: resolvedHoverBoxHeightCss.value,
+      maxHeight: resolvedHoverBoxHeightCss.value
     }));
     return (_ctx, _cache) => {
       const _component_el_watermark = ElWatermark;
@@ -326,12 +344,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                     key: 0,
                     render: unref(viewImgDefaults).placeholder,
                     payload: slotProps
-                  }, null, 8, ["render", "payload"])) : (openBlock(), createElementBlock("svg", _hoisted_1, [
-                    createElementVNode("path", {
-                      d: "M1174.826667 0H105.216A105.258667 105.258667 0 0 0-0.042667 105.258667V918.613333a105.258667 105.258667 0 0 0 105.258667 105.258667h1069.653333A105.258667 105.258667 0 0 0 1280.085333 918.613333V105.258667A105.344 105.344 0 0 0 1174.826667 0z m-402.773334 181.461333a105.386667 105.386667 0 1 1-0.042666 210.773334 105.386667 105.386667 0 0 1 0-210.773334zM104.746667 883.882667S191.018667 381.098667 391.509333 381.098667c196.48 0 246.528 351.616 384.810667 351.616 87.210667 0 78.08-158.72 216.490667-158.72 99.242667 0 162.304 309.888 162.304 309.888H104.789333z",
-                      fill: resolvedLoadingIconColor.value
-                    }, null, 8, _hoisted_2)
-                  ]))
+                  }, null, 8, ["render", "payload"])) : (openBlock(), createBlock(ViewImgErrorFallback, {
+                    key: 1,
+                    loading: "",
+                    src: slotProps.src,
+                    "fallback-color": resolvedFallbackColor.value
+                  }, null, 8, ["src", "fallback-color"]))
                 ], true)
               ]),
               _: 2
@@ -346,14 +364,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
             ]), 1040)
           ]),
           default: withCtx(() => [
-            hoverPreviewSrc.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-              referenceLoadError.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            hoverPreviewSrc.value || __props.showHoverOnError && isReferenceInvalid.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              referenceLoadError.value || !__props.src.trim() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                 !__props.isShowWatermark ? (openBlock(), createElementBlock("div", {
                   key: 0,
                   class: "fg-view-img-popover__hover-image fg-view-img-popover__hover-error",
                   style: normalizeStyle(hoverImgStyle.value)
                 }, [
-                  _ctx.$slots.error ? renderSlot(_ctx.$slots, "error", { key: 0 }, void 0, true) : unref(viewImgDefaults).error ? (openBlock(), createBlock(unref(ViewImgDefaultRenderer), {
+                  _ctx.$slots.error ? renderSlot(_ctx.$slots, "error", normalizeProps(mergeProps({ key: 0 }, defaultSlotPayload.value)), void 0, true) : unref(viewImgDefaults).error ? (openBlock(), createBlock(unref(ViewImgDefaultRenderer), {
                     key: 1,
                     render: unref(viewImgDefaults).error,
                     payload: defaultSlotPayload.value
@@ -361,11 +379,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                     key: 2,
                     src: defaultSlotPayload.value.src,
                     "error-text": defaultSlotPayload.value.errorText,
-                    "error-color": defaultSlotPayload.value.errorColor
-                  }, null, 8, ["src", "error-text", "error-color"]))
+                    "fallback-color": resolvedFallbackColor.value
+                  }, null, 8, ["src", "error-text", "fallback-color"]))
                 ], 4)) : (openBlock(), createBlock(_component_el_watermark, {
                   key: 1,
                   class: "fg-view-img-popover__watermark",
+                  style: normalizeStyle(hoverWatermarkStyle.value),
                   content: [resolvedWaterMarkTitle.value],
                   gap: [10, 10],
                   font: { fontSize: 16, color: "rgba(0, 0, 0, 0.3)" }
@@ -375,7 +394,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                       class: "fg-view-img-popover__hover-image fg-view-img-popover__hover-error",
                       style: normalizeStyle(hoverImgStyle.value)
                     }, [
-                      _ctx.$slots.error ? renderSlot(_ctx.$slots, "error", { key: 0 }, void 0, true) : unref(viewImgDefaults).error ? (openBlock(), createBlock(unref(ViewImgDefaultRenderer), {
+                      _ctx.$slots.error ? renderSlot(_ctx.$slots, "error", normalizeProps(mergeProps({ key: 0 }, defaultSlotPayload.value)), void 0, true) : unref(viewImgDefaults).error ? (openBlock(), createBlock(unref(ViewImgDefaultRenderer), {
                         key: 1,
                         render: unref(viewImgDefaults).error,
                         payload: defaultSlotPayload.value
@@ -383,12 +402,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                         key: 2,
                         src: defaultSlotPayload.value.src,
                         "error-text": defaultSlotPayload.value.errorText,
-                        "error-color": defaultSlotPayload.value.errorColor
-                      }, null, 8, ["src", "error-text", "error-color"]))
+                        "fallback-color": resolvedFallbackColor.value
+                      }, null, 8, ["src", "error-text", "fallback-color"]))
                     ], 4)
                   ]),
                   _: 3
-                }, 8, ["content"]))
+                }, 8, ["style", "content"]))
               ], 64)) : !__props.isShowWatermark ? (openBlock(), createBlock(FgViewImg, {
                 key: 1,
                 class: "fg-view-img-popover__hover-image",
@@ -396,8 +415,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                 style: normalizeStyle(hoverImgStyle.value),
                 preview: false,
                 "oss-process": false,
-                "error-color": __props.errorColor,
-                "error-offset": __props.errorOffset,
+                "fallback-color": resolvedFallbackColor.value,
                 "error-text": __props.errorText,
                 loading: __props.loading,
                 fit: "contain"
@@ -408,12 +426,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                       key: 0,
                       render: unref(viewImgDefaults).placeholder,
                       payload: slotProps
-                    }, null, 8, ["render", "payload"])) : (openBlock(), createElementBlock("svg", _hoisted_3, [
-                      createElementVNode("path", {
-                        d: "M1174.826667 0H105.216A105.258667 105.258667 0 0 0-0.042667 105.258667V918.613333a105.258667 105.258667 0 0 0 105.258667 105.258667h1069.653333A105.258667 105.258667 0 0 0 1280.085333 918.613333V105.258667A105.344 105.344 0 0 0 1174.826667 0z m-402.773334 181.461333a105.386667 105.386667 0 1 1-0.042666 210.773334 105.386667 105.386667 0 0 1 0-210.773334zM104.746667 883.882667S191.018667 381.098667 391.509333 381.098667c196.48 0 246.528 351.616 384.810667 351.616 87.210667 0 78.08-158.72 216.490667-158.72 99.242667 0 162.304 309.888 162.304 309.888H104.789333z",
-                        fill: resolvedLoadingIconColor.value
-                      }, null, 8, _hoisted_4)
-                    ]))
+                    }, null, 8, ["render", "payload"])) : (openBlock(), createBlock(ViewImgErrorFallback, {
+                      key: 1,
+                      loading: "",
+                      src: slotProps.src,
+                      "fallback-color": resolvedFallbackColor.value
+                    }, null, 8, ["src", "fallback-color"]))
                   ], true)
                 ]),
                 _: 2
@@ -425,9 +443,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                   ]),
                   key: "0"
                 } : void 0
-              ]), 1032, ["src", "style", "error-color", "error-offset", "error-text", "loading"])) : (openBlock(), createBlock(_component_el_watermark, {
+              ]), 1032, ["src", "style", "fallback-color", "error-text", "loading"])) : (openBlock(), createBlock(_component_el_watermark, {
                 key: 2,
                 class: "fg-view-img-popover__watermark",
+                style: normalizeStyle(hoverWatermarkStyle.value),
                 content: [resolvedWaterMarkTitle.value],
                 gap: [10, 10],
                 font: { fontSize: 16, color: "rgba(0, 0, 0, 0.3)" }
@@ -439,8 +458,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                     style: normalizeStyle(hoverImgStyle.value),
                     preview: false,
                     "oss-process": false,
-                    "error-color": __props.errorColor,
-                    "error-offset": __props.errorOffset,
+                    "fallback-color": resolvedFallbackColor.value,
                     "error-text": __props.errorText,
                     loading: __props.loading,
                     fit: "contain"
@@ -451,12 +469,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                           key: 0,
                           render: unref(viewImgDefaults).placeholder,
                           payload: slotProps
-                        }, null, 8, ["render", "payload"])) : (openBlock(), createElementBlock("svg", _hoisted_5, [
-                          createElementVNode("path", {
-                            d: "M1174.826667 0H105.216A105.258667 105.258667 0 0 0-0.042667 105.258667V918.613333a105.258667 105.258667 0 0 0 105.258667 105.258667h1069.653333A105.258667 105.258667 0 0 0 1280.085333 918.613333V105.258667A105.344 105.344 0 0 0 1174.826667 0z m-402.773334 181.461333a105.386667 105.386667 0 1 1-0.042666 210.773334 105.386667 105.386667 0 0 1 0-210.773334zM104.746667 883.882667S191.018667 381.098667 391.509333 381.098667c196.48 0 246.528 351.616 384.810667 351.616 87.210667 0 78.08-158.72 216.490667-158.72 99.242667 0 162.304 309.888 162.304 309.888H104.789333z",
-                            fill: resolvedLoadingIconColor.value
-                          }, null, 8, _hoisted_6)
-                        ]))
+                        }, null, 8, ["render", "payload"])) : (openBlock(), createBlock(ViewImgErrorFallback, {
+                          key: 1,
+                          loading: "",
+                          src: slotProps.src,
+                          "fallback-color": resolvedFallbackColor.value
+                        }, null, 8, ["src", "fallback-color"]))
                       ], true)
                     ]),
                     _: 2
@@ -468,10 +486,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                       ]),
                       key: "0"
                     } : void 0
-                  ]), 1032, ["src", "style", "error-color", "error-offset", "error-text", "loading"])
+                  ]), 1032, ["src", "style", "fallback-color", "error-text", "loading"])
                 ]),
                 _: 3
-              }, 8, ["content"]))
+              }, 8, ["style", "content"]))
             ], 64)) : createCommentVNode("", true)
           ]),
           _: 3
@@ -491,7 +509,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     };
   }
 }));
-const ViewImgPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a3f15571"]]);
+const ViewImgPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0c64a317"]]);
 export {
   ViewImgPopover as V
 };

package/dist/ViewImgPopover.css

@@ -1,12 +1,12 @@
 @charset "UTF-8";
 /* :where 降低默认宽高优先级，避免压过外部 Tailwind 等工具类（如 w-[200px]） */
-:where(.fg-view-img-popover__reference[data-v-a3f15571]) {
+:where(.fg-view-img-popover__reference[data-v-0c64a317]) {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
 }
-.fg-view-img-popover__preview-icon[data-v-a3f15571] {
+.fg-view-img-popover__preview-icon[data-v-0c64a317] {
   position: absolute;
   top: 4px;
   right: 4px;
@@ -18,26 +18,21 @@
   color: var(--el-text-color-primary);
   cursor: pointer;
 }
-.fg-view-img-popover__preview-icon[data-v-a3f15571]:hover {
+.fg-view-img-popover__preview-icon[data-v-0c64a317]:hover {
   color: var(--el-color-primary);
 }
-.fg-view-img-popover__loading-icon[data-v-a3f15571] {
-  display: block;
-  width: 40%;
-  height: 40%;
-}
-.fg-view-img-popover__hover-image[data-v-a3f15571] {
+.fg-view-img-popover__hover-image[data-v-0c64a317] {
   display: block;
   vertical-align: top;
   background: #7f7f7f;
 }
-.fg-view-img-popover__hover-image[data-v-a3f15571] .fg-view-img__inner {
+.fg-view-img-popover__hover-image[data-v-0c64a317] .fg-view-img__inner {
   width: 100%;
   height: 100%;
   object-fit: contain;
 }
-.fg-view-img-popover__hover-image[data-v-a3f15571] .fg-view-img__placeholder,
-.fg-view-img-popover__hover-image[data-v-a3f15571] .fg-view-img__error {
+.fg-view-img-popover__hover-image[data-v-0c64a317] .fg-view-img__placeholder,
+.fg-view-img-popover__hover-image[data-v-0c64a317] .fg-view-img__error {
   position: absolute;
   inset: 0;
   display: flex;
@@ -46,23 +41,7 @@
   background: #f5f7fa;
   line-height: 1.4;
 }
-.fg-view-img-popover__hover-image[data-v-a3f15571] .fg-view-img__error-default {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #909399;
-  font-size: 13px;
-  text-align: center;
-}
-.fg-view-img-popover__hover-image[data-v-a3f15571] .fg-view-img__error-text {
-  color: #909399;
-  font-size: 13px;
-  line-height: 1.4;
-  text-align: center;
-}
-.fg-view-img-popover__hover-error[data-v-a3f15571] {
+.fg-view-img-popover__hover-error[data-v-0c64a317] {
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/components/cascader/index.js

@@ -1,4 +1,4 @@
-import { _ } from "../../FgCascader.vue_vue_type_style_index_0_lang-DzvTfHp4.js";
+import { _ } from "../../FgCascader.vue_vue_type_style_index_0_lang-CtUPO8fk.js";
 export {
   _ as FgCascader
 };

package/dist/components/index.js

@@ -1,5 +1,5 @@
 import { _ } from "../ArgHover.vue_vue_type_style_index_0_lang-CSymSDRl.js";
-import { _ as _2 } from "../FgCascader.vue_vue_type_style_index_0_lang-DzvTfHp4.js";
+import { _ as _2 } from "../FgCascader.vue_vue_type_style_index_0_lang-CtUPO8fk.js";
 import { _ as _3 } from "../CitySelect.vue_vue_type_script_setup_true_lang-DZp6834K.js";
 import { _ as _4 } from "../DragResizable.vue_vue_type_style_index_0_lang-BePpQHve.js";
 import { _ as _5 } from "../HSelectAll.vue_vue_type_script_setup_true_lang-xHFbYs59.js";
@@ -31,8 +31,8 @@ import { S } from "../SelectAddress-CCepDxu8.js";
 import { S as S2 } from "../SelectTree-BHvvkiQi.js";
 import { S as S3 } from "../SvgIcon-DIg0upEk.js";
 import { T } from "../TextCopy-lpbeqOUI.js";
-import { F, V, c as c2, r as r2, u } from "../ViewImg-CD4QJK4R.js";
-import { V as V2 } from "../ViewImgPopover-D-1b2nEa.js";
+import { F, V, c as c2, r as r2, u } from "../ViewImg-CLRjYOUN.js";
+import { V as V2 } from "../ViewImgPopover-koNFPgjR.js";
 import { I, P, g as g2, u as u2, a as a2 } from "../imgViewerStore-Ajm-L7R5.js";
 import { V as V3 } from "../VirtualTable-Cm_L7q9W.js";
 export {

package/dist/components/viewImg/ViewImg.vue.d.ts

@@ -5,7 +5,16 @@ type ObjectFit = "fill" | "contain" | "cover" | "none" | "scale-down" | "";
 type __VLS_Props = {
     src?: string;
     fit?: ObjectFit;
+    /**
+     * 是否懒加载：为 true 时进入视口（或 scrollContainer）后再请求图片
+     * （IntersectionObserver；非仅原生 loading="lazy"）
+     */
     lazy?: boolean;
+    /**
+     * 懒加载滚动根；未传时相对浏览器视口。
+     * 自定义 overflow 容器需传入选择器或 HTMLElement，否则可能判定为“已在视口内”而立刻加载。
+     */
+    scrollContainer?: string | HTMLElement | null;
     /** 外部 loading 状态，为 true 时展示 placeholder */
     loading?: boolean;
     /** 是否开启点击预览大图 */
@@ -50,12 +59,8 @@ type __VLS_Props = {
     renderExtraTools?: VNode | null;
     /** 内置工具栏按钮配置 */
     originalToolbar?: OriginalToolbarItem[];
-    /** 加载失败图标填充色（「无图」态不受影响） */
-    errorColor?: string;
-    /**
-     * @deprecated 旧版 FgErrorImage 参数，内置双态占位不再使用；保留以兼容业务传参
-     */
-    errorOffset?: number;
+    /** 内置占位图标 / 文案色；作用于加载中 / 无图 / 加载失败；未传用设计默认色 */
+    fallbackColor?: string;
     /** 加载失败文案；未传默认「加载失败」。空 / 仅空白 src 固定显示「无图」 */
     errorText?: string;
     /** 是否对 src 做 OSS / TEMU 缩略图处理，需先在应用入口 configureImgUrl 注入 ossLinks */
@@ -82,8 +87,7 @@ declare function __VLS_template(): {
             loading: boolean;
             loadError: boolean;
             errorText: string;
-            errorColor: string;
-            errorOffset: number;
+            fallbackColor: string;
         }): any;
         error?(_: {
             src: string;
@@ -91,11 +95,12 @@ declare function __VLS_template(): {
             loading: boolean;
             loadError: boolean;
             errorText: string;
-            errorColor: string;
-            errorOffset: number;
+            fallbackColor: string;
         }): any;
     };
-    refs: {};
+    refs: {
+        rootRef: HTMLSpanElement;
+    };
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -139,7 +144,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
     previewTeleported: boolean;
     fit: ObjectFit;
     errorText: string;
-    errorColor: string;
+    fallbackColor: string;
     initialIndex: number;
     toolbarBgColor: string;
     toolbarIconColor: string;
@@ -152,12 +157,14 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
     originalToolbar: OriginalToolbarItem[];
     previewSideNav: PreviewSideNav;
     defImgPreviewIndex: number;
-    errorOffset: number;
+    scrollContainer: string | HTMLElement | null;
     ossProcess: boolean;
     ossLinks: string[];
     imgSize: ImgSizeOptions;
     previewStripQuery: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    rootRef: HTMLSpanElement;
+}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/viewImg/ViewImgErrorFallback.vue.d.ts

@@ -1,14 +1,17 @@
 type __VLS_Props = {
+    /** 为 true 时展示「加载中」（优先于无图 / 失败） */
+    loading?: boolean;
     /** 原始图片地址；空或仅空白走「无图」态 */
     src?: string;
     /** 加载失败文案；未传时默认「加载失败」 */
     errorText?: string;
-    /** 加载失败图标填充色；「无图」态仍用设计双色 */
-    errorColor?: string;
+    /** 内置占位主色；未传用设计默认色；传入后按主色派生浅淡色 */
+    fallbackColor?: string;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    loading: boolean;
     src: string;
     errorText: string;
-    errorColor: string;
+    fallbackColor: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;