fangguo-component 1.2.3 → 1.2.5

package/dist/ViewImg-CLRjYOUN.js

@@ -0,0 +1,556 @@
+import './ViewImg.css';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, Fragment, normalizeStyle, toDisplayString, reactive, useAttrs, ref, watch, nextTick, onMounted, onUnmounted, unref, normalizeClass, withDirectives, mergeProps, vShow, renderSlot, normalizeProps, guardReactiveProps, createBlock, resolveDynamicComponent, createCommentVNode } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
+import { I as ImgViewerStore } from "./imgViewerStore-Ajm-L7R5.js";
+import { h as DEFAULT_PREVIEW_SIDE_NAV, D as DEFAULT_ORIGINAL_TOOLBAR, l as DEFAULT_TOOLBAR_ICON_COLOR, k as DEFAULT_TOOLBAR_BG_COLOR, g as DEFAULT_PREVIEW_SHOW_PROGRESS, d as DEFAULT_PREVIEW_MAX_SCALE, e as DEFAULT_PREVIEW_MIN_SCALE, f as DEFAULT_PREVIEW_SCALE, j as DEFAULT_PREVIEW_ZOOM_RATE, a as DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE, b as DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL, c as DEFAULT_PREVIEW_INFINITE, i as DEFAULT_PREVIEW_TELEPORTED } from "./types-Ccn_sb6f.js";
+import { n as networkKey, i as imgUrlConfigKey, m as montageImgUrl } from "./montageImgUrl-B9ZmJ7TF.js";
+const _hoisted_1$1 = { class: "fg-view-img__error-default" };
+const _hoisted_2$1 = { class: "fg-view-img__error-default-body" };
+const _hoisted_3$1 = {
+  class: "fg-view-img__error-icon",
+  viewBox: "0 0 1280 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_4 = ["fill"];
+const _hoisted_5 = {
+  class: "fg-view-img__error-icon",
+  viewBox: "0 0 1131 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_6 = ["fill"];
+const _hoisted_7 = ["fill"];
+const _hoisted_8 = {
+  class: "fg-view-img__error-icon",
+  viewBox: "0 0 1088 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_9 = ["fill"];
+const DEFAULT_PRIMARY = "#D4DADC";
+const DEFAULT_SECONDARY = "#E1E4E5";
+const DEFAULT_ICON_COLOR = "#c3c6ca";
+const DEFAULT_LOADING_COLOR = "#cfd2d7";
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "ViewImgErrorFallback",
+  props: {
+    loading: { type: Boolean, default: false },
+    src: { default: "" },
+    errorText: { default: "" },
+    fallbackColor: { default: "" }
+  },
+  setup(__props) {
+    const props = __props;
+    const isEmptySrc = computed(() => !props.src.trim());
+    const resolvedLabel = computed(() => props.errorText || "加载失败");
+    const customColor = computed(() => {
+      var _a;
+      return ((_a = props.fallbackColor) == null ? void 0 : _a.trim()) || "";
+    });
+    function parseHexColor(input) {
+      const hex = input.startsWith("#") ? input.slice(1) : input;
+      if (/^[0-9a-fA-F]{3}$/.test(hex)) {
+        return [0, 1, 2].map((i) => parseInt(hex[i] + hex[i], 16));
+      }
+      if (/^[0-9a-fA-F]{6}$/.test(hex)) {
+        return [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16));
+      }
+      return null;
+    }
+    function parseRgbCss(input) {
+      const m = input.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i);
+      if (!m) return null;
+      return [Number(m[1]), Number(m[2]), Number(m[3])];
+    }
+    function resolveCssColor(input) {
+      const fromHex = parseHexColor(input);
+      if (fromHex) return fromHex;
+      const fromRgb = parseRgbCss(input);
+      if (fromRgb) return fromRgb;
+      if (typeof document === "undefined") return null;
+      const ctx = document.createElement("canvas").getContext("2d");
+      if (!ctx) return null;
+      ctx.fillStyle = "#000000";
+      ctx.fillStyle = input;
+      const afterDark = String(ctx.fillStyle);
+      ctx.fillStyle = "#ffffff";
+      ctx.fillStyle = input;
+      const afterLight = String(ctx.fillStyle);
+      if (afterDark === "#000000" && afterLight === "#ffffff") return null;
+      return parseHexColor(afterDark !== "#000000" ? afterDark : afterLight) || parseRgbCss(afterDark);
+    }
+    function toHex([r, g, b]) {
+      return `#${[r, g, b].map((n) => Math.round(n).toString(16).padStart(2, "0")).join("")}`;
+    }
+    function tint(rgb, amount) {
+      return toHex(rgb.map((c) => c + (255 - c) * amount));
+    }
+    const colorPalette = computed(() => {
+      const base = customColor.value;
+      const rgb = base ? resolveCssColor(base) : null;
+      if (!rgb) {
+        return {
+          primary: DEFAULT_PRIMARY,
+          secondary: DEFAULT_SECONDARY,
+          icon: DEFAULT_ICON_COLOR,
+          loading: DEFAULT_LOADING_COLOR,
+          label: ""
+        };
+      }
+      return {
+        primary: tint(rgb, 0.28),
+        secondary: tint(rgb, 0.52),
+        icon: tint(rgb, 0.36),
+        loading: tint(rgb, 0.32),
+        label: tint(rgb, 0.45)
+      };
+    });
+    const resolvedPrimary = computed(() => colorPalette.value.primary);
+    const resolvedSecondary = computed(() => colorPalette.value.secondary);
+    const resolvedIconColor = computed(() => colorPalette.value.icon);
+    const resolvedLoadingColor = computed(() => colorPalette.value.loading);
+    const labelStyle = computed(() => {
+      if (!colorPalette.value.label) return {};
+      return { color: colorPalette.value.label };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createElementVNode("div", _hoisted_2$1, [
+          __props.loading ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            (openBlock(), createElementBlock("svg", _hoisted_3$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: resolvedLoadingColor.value
+              }, null, 8, _hoisted_4)
+            ])),
+            createElementVNode("span", {
+              class: "fg-view-img__error-label",
+              style: normalizeStyle(labelStyle.value)
+            }, "加载中", 4)
+          ], 64)) : isEmptySrc.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            (openBlock(), createElementBlock("svg", _hoisted_5, [
+              createElementVNode("path", {
+                d: "M764.191528 125.736421a125.844211 125.844211 0 0 0 125.898106 125.763368 125.844211 125.844211 0 0 0 125.898105-125.763368A125.844211 125.844211 0 0 0 890.089634 0a125.844211 125.844211 0 0 0-125.898106 125.736421zM317.269423 317.493895L18.261423 807.909053c-50.364632 84.884211 9.431579 191.757474 107.008 191.757473h601.168842c97.549474 0 157.372632-106.873263 106.981053-191.757473L534.465213 317.493895c-50.364632-78.578526-166.804211-78.578526-217.19579 0z",
+                fill: resolvedPrimary.value
+              }, null, 8, _hoisted_6),
+              createElementVNode("path", {
+                d: "M742.148581 556.409263l-157.372632 257.778526c-50.337684 84.884211 9.458526 191.784421 107.034948 191.784422h314.745263c97.549474 0 157.372632-106.900211 107.008-191.784422l-157.372632-257.778526c-47.211789-81.731368-166.804211-81.731368-214.016 0z",
+                fill: resolvedSecondary.value
+              }, null, 8, _hoisted_7)
+            ])),
+            createElementVNode("span", {
+              class: "fg-view-img__error-label",
+              style: normalizeStyle(labelStyle.value)
+            }, "无图", 4)
+          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+            (openBlock(), createElementBlock("svg", _hoisted_8, [
+              createElementVNode("path", {
+                d: "M640 138.688a32 32 0 0 1 27.456 48.448L613.76 276.416l31.488 47.232a32 32 0 0 1-12.288 46.336L482.944 444.928l18.112 126.592a32.064 32.064 0 0 1-22.912 35.264l-118.976 33.92 55.68 204.224a32 32 0 0 1-30.848 40.448H149.376a74.688 74.688 0 0 1-74.688-74.688V213.376c0-41.216 33.472-74.688 74.688-74.688H640z m234.624 0c41.216 0 74.688 33.472 74.688 74.688v597.312c0 41.216-33.472 74.688-74.688 74.688H512a32.064 32.064 0 0 1-30.784-23.232l-42.624-149.312a32 32 0 0 1 21.888-39.552l122.944-35.2-17.92-143.36a32 32 0 0 1 18.816-33.28l158.912-70.72-45.376-75.584a32 32 0 0 1 0.832-34.176l85.312-128a32 32 0 0 1 26.624-14.272h64z m-725.248 64a10.688 10.688 0 0 0-10.688 10.688v597.312c0 5.888 4.8 10.688 10.688 10.688h192.768l-52.992-194.24a32 32 0 0 1 22.08-39.168l122.432-35.072-17.344-121.728a32 32 0 0 1 17.344-33.088l138.24-69.12-22.528-33.856a32.064 32.064 0 0 1-0.832-34.24l34.944-58.176H149.376z m613.76 96.896l53.632 89.28a32 32 0 0 1-14.464 45.76L632 510.272l18.368 147.072a32 32 0 0 1-22.912 34.752l-118.656 33.92 27.328 95.36h338.496a10.688 10.688 0 0 0 10.688-10.688V213.376a10.688 10.688 0 0 0-10.688-10.688h-46.848l-64.64 96.896zM309.312 288a64 64 0 1 1 0 128 64 64 0 0 1 0-128z",
+                fill: resolvedIconColor.value
+              }, null, 8, _hoisted_9)
+            ])),
+            createElementVNode("span", {
+              class: "fg-view-img__error-label",
+              style: normalizeStyle(labelStyle.value)
+            }, toDisplayString(resolvedLabel.value), 5)
+          ], 64))
+        ])
+      ]);
+    };
+  }
+});
+const ViewImgErrorFallback = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4588a25e"]]);
+const viewImgDefaults = reactive({});
+function configureViewImgDefaults(defaults) {
+  resetViewImgDefaults();
+  Object.assign(viewImgDefaults, defaults);
+}
+function resetViewImgDefaults() {
+  delete viewImgDefaults.placeholder;
+  delete viewImgDefaults.error;
+  delete viewImgDefaults.waterMarkTitle;
+  delete viewImgDefaults.loadingIconColor;
+}
+function useViewImgDefaults() {
+  return viewImgDefaults;
+}
+const _hoisted_1 = ["src"];
+const _hoisted_2 = {
+  key: 0,
+  class: "fg-view-img__placeholder"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "fg-view-img__error"
+};
+const LAZY_ROOT_MARGIN = "200px";
+const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
+  inheritAttrs: false
+}), {
+  __name: "ViewImg",
+  props: {
+    src: { default: "" },
+    fit: { default: "" },
+    lazy: { type: Boolean, default: false },
+    scrollContainer: { default: null },
+    loading: { type: Boolean, default: false },
+    preview: { type: Boolean, default: false },
+    previewSrcList: { default: () => [] },
+    initialIndex: { default: void 0 },
+    defImgPreviewIndex: { default: void 0 },
+    infinite: { type: Boolean, default: DEFAULT_PREVIEW_INFINITE },
+    zIndex: { default: void 0 },
+    hideOnClickModal: { type: Boolean, default: DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL },
+    closeOnPressEscape: { type: Boolean, default: DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE },
+    previewTeleported: { type: Boolean, default: void 0 },
+    teleported: { type: Boolean, default: void 0 },
+    zoomRate: { default: DEFAULT_PREVIEW_ZOOM_RATE },
+    scale: { default: DEFAULT_PREVIEW_SCALE },
+    minScale: { default: DEFAULT_PREVIEW_MIN_SCALE },
+    maxScale: { default: DEFAULT_PREVIEW_MAX_SCALE },
+    showProgress: { type: Boolean, default: DEFAULT_PREVIEW_SHOW_PROGRESS },
+    toolbarBgColor: { default: DEFAULT_TOOLBAR_BG_COLOR },
+    backgroundColor: { default: "" },
+    toolbarIconColor: { default: DEFAULT_TOOLBAR_ICON_COLOR },
+    simpleExtraTools: { default: () => [] },
+    renderExtraTools: { default: null },
+    originalToolbar: { default: () => [...DEFAULT_ORIGINAL_TOOLBAR] },
+    fallbackColor: { default: "" },
+    errorText: { default: "" },
+    ossProcess: { type: Boolean, default: true },
+    ossLinks: { default: void 0 },
+    imgSize: { default: () => ({}) },
+    previewStripQuery: { type: Boolean, default: true },
+    previewSideNav: { type: [Boolean, String], default: DEFAULT_PREVIEW_SIDE_NAV }
+  },
+  emits: ["load", "error", "retry", "show", "close", "switch"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const rootRef = ref(null);
+    const displaySrc = ref("");
+    const retried = ref(false);
+    const internalLoading = ref(false);
+    const loadError = ref(false);
+    const lazyActivated = ref(!props.lazy);
+    const viewImgDefaults2 = useViewImgDefaults();
+    let lazyObserver = null;
+    const imgAttrs = computed(() => {
+      const _a = attrs, { class: _, style: __ } = _a, rest = __objRest(_a, ["class", "style"]);
+      return rest;
+    });
+    const imgStyle = computed(() => {
+      if (!props.fit) return {};
+      return { objectFit: props.fit };
+    });
+    const showPlaceholder = computed(
+      () => !!props.src.trim() && (props.loading || internalLoading.value) && !loadError.value
+    );
+    const defaultSlotPayload = computed(() => ({
+      src: props.src,
+      displaySrc: displaySrc.value,
+      loading: props.loading || internalLoading.value,
+      loadError: loadError.value,
+      errorText: props.errorText,
+      fallbackColor: props.fallbackColor
+    }));
+    const globalPlaceholderComponent = computed(() => {
+      const renderPlaceholder = viewImgDefaults2.placeholder;
+      if (!renderPlaceholder) return null;
+      return {
+        render: () => renderPlaceholder(defaultSlotPayload.value)
+      };
+    });
+    const globalErrorComponent = computed(() => {
+      const renderError = viewImgDefaults2.error;
+      if (!renderError) return null;
+      return {
+        render: () => renderError(defaultSlotPayload.value)
+      };
+    });
+    const previewEnabled = computed(() => (props.preview || props.previewSrcList.length > 0) && !!displaySrc.value && !loadError.value);
+    const previewUrlList = computed(() => {
+      const rawList = props.previewSrcList.length ? props.previewSrcList : props.src.trim() ? [props.src] : [];
+      return rawList.map((url) => applyPreviewUrlFallback(url));
+    });
+    const previewInitialIndex = computed(() => resolvePreviewInitialIndex(previewUrlList.value));
+    function resolvePreviewInitialIndex(previewList) {
+      if (props.defImgPreviewIndex != null) return props.defImgPreviewIndex;
+      if (props.initialIndex != null) return props.initialIndex;
+      const index = previewList.indexOf(applyPreviewUrlFallback(props.src));
+      return index >= 0 ? index : 0;
+    }
+    const resolvedToolbarBgColor = computed(() => props.toolbarBgColor || props.backgroundColor || DEFAULT_TOOLBAR_BG_COLOR);
+    const resolvedPreviewTeleported = computed(
+      () => {
+        var _a, _b;
+        return (_b = (_a = props.previewTeleported) != null ? _a : props.teleported) != null ? _b : DEFAULT_PREVIEW_TELEPORTED;
+      }
+    );
+    function stripQueryParams(url) {
+      const index = url.indexOf("?");
+      return index === -1 ? url : url.slice(0, index);
+    }
+    function resolveImgUrl(url, imgSize) {
+      if (!props.ossProcess) return url;
+      return montageImgUrl(url, imgSize, props.ossLinks ? { ossLinks: props.ossLinks } : void 0);
+    }
+    function applyPreviewUrlFallback(url) {
+      if (!props.previewStripQuery || !url) return url;
+      return stripQueryParams(url);
+    }
+    function resetState(src) {
+      retried.value = false;
+      internalLoading.value = false;
+      if (!src.trim()) {
+        displaySrc.value = "";
+        loadError.value = true;
+        return;
+      }
+      loadError.value = false;
+      internalLoading.value = true;
+      displaySrc.value = resolveImgUrl(src, props.imgSize);
+    }
+    function setLazyPending(src) {
+      retried.value = false;
+      displaySrc.value = "";
+      if (!src.trim()) {
+        loadError.value = true;
+        internalLoading.value = false;
+        return;
+      }
+      loadError.value = false;
+      internalLoading.value = true;
+    }
+    function resolveScrollRoot() {
+      const container = props.scrollContainer;
+      if (!container) return null;
+      if (typeof container === "string") {
+        return document.querySelector(container);
+      }
+      return container;
+    }
+    function stopLazyObserver() {
+      if (lazyObserver) {
+        lazyObserver.disconnect();
+        lazyObserver = null;
+      }
+    }
+    function activateLazyLoad() {
+      if (lazyActivated.value) return;
+      lazyActivated.value = true;
+      stopLazyObserver();
+      resetState(props.src);
+    }
+    function startLazyObserver() {
+      stopLazyObserver();
+      if (!props.lazy || lazyActivated.value) return;
+      if (typeof window === "undefined" || !("IntersectionObserver" in window)) {
+        activateLazyLoad();
+        return;
+      }
+      const el = rootRef.value;
+      if (!el) return;
+      lazyObserver = new IntersectionObserver(
+        (entries) => {
+          if (entries.some((entry) => entry.isIntersecting)) {
+            activateLazyLoad();
+          }
+        },
+        {
+          root: resolveScrollRoot(),
+          rootMargin: LAZY_ROOT_MARGIN,
+          threshold: 0
+        }
+      );
+      lazyObserver.observe(el);
+    }
+    function applySrc(src) {
+      if (props.lazy && !lazyActivated.value) {
+        setLazyPending(src);
+        return;
+      }
+      resetState(src);
+    }
+    function handleLoad(event) {
+      internalLoading.value = false;
+      loadError.value = false;
+      emit("load", event);
+    }
+    function markLoadFailed(event) {
+      internalLoading.value = false;
+      loadError.value = true;
+      emit("error", event);
+    }
+    function handleError(event) {
+      if (retried.value) {
+        markLoadFailed(event);
+        return;
+      }
+      const stripped = stripQueryParams(displaySrc.value);
+      if (stripped === displaySrc.value) {
+        markLoadFailed(event);
+        return;
+      }
+      const urlBefore = displaySrc.value;
+      retried.value = true;
+      internalLoading.value = true;
+      displaySrc.value = stripped;
+      emit("retry", { from: urlBefore, to: stripped });
+    }
+    function openPreview(previewList) {
+      const previewImgList = previewList ? previewList.map((url) => applyPreviewUrlFallback(url)) : previewUrlList.value;
+      if (!previewImgList.length) return;
+      ImgViewerStore().showImgViewer({
+        previewImgList,
+        defImgPreviewIndex: previewList ? resolvePreviewInitialIndex(previewImgList) : previewInitialIndex.value,
+        toolbarBgColor: resolvedToolbarBgColor.value,
+        toolbarIconColor: props.toolbarIconColor,
+        infinite: props.infinite,
+        zIndex: props.zIndex,
+        hideOnClickModal: props.hideOnClickModal,
+        closeOnPressEscape: props.closeOnPressEscape,
+        teleported: resolvedPreviewTeleported.value,
+        zoomRate: props.zoomRate,
+        scale: props.scale,
+        minScale: props.minScale,
+        maxScale: props.maxScale,
+        showProgress: props.showProgress,
+        simpleExtraTools: props.simpleExtraTools,
+        renderExtraTools: props.renderExtraTools,
+        originalToolbar: props.originalToolbar,
+        previewSideNav: props.previewSideNav,
+        onShow: (payload) => emit("show", payload),
+        onClose: () => emit("close"),
+        onSwitch: (index) => emit("switch", index)
+      });
+    }
+    function handlePreviewClick() {
+      if (!previewEnabled.value) return;
+      openPreview();
+    }
+    watch(
+      [() => props.src, () => props.ossProcess, () => props.ossLinks, () => props.imgSize, networkKey, imgUrlConfigKey],
+      ([src]) => {
+        applySrc(src);
+      },
+      { immediate: true, deep: true }
+    );
+    watch(
+      () => props.lazy,
+      (lazy) => {
+        if (!lazy) {
+          if (!lazyActivated.value) {
+            activateLazyLoad();
+          }
+          return;
+        }
+        if (!lazyActivated.value) {
+          nextTick(() => startLazyObserver());
+        }
+      }
+    );
+    watch(
+      () => props.scrollContainer,
+      () => {
+        if (props.lazy && !lazyActivated.value) {
+          nextTick(() => startLazyObserver());
+        }
+      }
+    );
+    onMounted(() => {
+      if (props.lazy && !lazyActivated.value) {
+        startLazyObserver();
+      }
+    });
+    onUnmounted(() => {
+      stopLazyObserver();
+    });
+    __expose({
+      displaySrc,
+      retried,
+      openPreview
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        ref_key: "rootRef",
+        ref: rootRef,
+        class: normalizeClass(["fg-view-img", unref(attrs).class]),
+        style: normalizeStyle(unref(attrs).style)
+      }, [
+        withDirectives(createElementVNode("img", mergeProps({
+          class: ["fg-view-img__inner", {
+            "fg-view-img__inner--preview": previewEnabled.value,
+            "fg-view-img__inner--loading": showPlaceholder.value
+          }]
+        }, imgAttrs.value, {
+          src: displaySrc.value || void 0,
+          loading: "eager",
+          style: imgStyle.value,
+          onLoad: handleLoad,
+          onError: handleError,
+          onClick: handlePreviewClick
+        }), null, 16, _hoisted_1), [
+          [vShow, !loadError.value && !!displaySrc.value]
+        ]),
+        showPlaceholder.value ? (openBlock(), createElementBlock("span", _hoisted_2, [
+          renderSlot(_ctx.$slots, "placeholder", normalizeProps(guardReactiveProps(defaultSlotPayload.value)), () => [
+            globalPlaceholderComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(globalPlaceholderComponent.value), { key: 0 })) : (openBlock(), createBlock(ViewImgErrorFallback, {
+              key: 1,
+              loading: "",
+              src: __props.src,
+              "fallback-color": __props.fallbackColor
+            }, null, 8, ["src", "fallback-color"]))
+          ], true)
+        ])) : createCommentVNode("", true),
+        loadError.value ? (openBlock(), createElementBlock("span", _hoisted_3, [
+          renderSlot(_ctx.$slots, "error", normalizeProps(guardReactiveProps(defaultSlotPayload.value)), () => [
+            globalErrorComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(globalErrorComponent.value), { key: 0 })) : (openBlock(), createBlock(ViewImgErrorFallback, {
+              key: 1,
+              src: __props.src,
+              "error-text": __props.errorText,
+              "fallback-color": __props.fallbackColor
+            }, null, 8, ["src", "error-text", "fallback-color"]))
+          ], true)
+        ])) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+}));
+const FgViewImg = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b5064f2e"]]);
+export {
+  FgViewImg as F,
+  ViewImgErrorFallback as V,
+  configureViewImgDefaults as c,
+  resetViewImgDefaults as r,
+  useViewImgDefaults as u
+};

package/dist/ViewImg.css

@@ -1,4 +1,54 @@
-.fg-view-img[data-v-c6ff5d38] {
+@charset "UTF-8";
+/* 外层建立尺寸容器，内层用 cqmin 随格子缩放 */
+.fg-view-img__error-default[data-v-4588a25e] {
+  container-type: size;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.fg-view-img__error-default-body[data-v-4588a25e] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(2px, 4cqmin, 6px);
+  box-sizing: border-box;
+  padding: clamp(2px, 6cqmin, 8px);
+}
+.fg-view-img__error-icon[data-v-4588a25e] {
+  display: block;
+  flex: none;
+  width: clamp(16px, 36cqmin, 56px);
+  height: auto;
+  max-width: 56px;
+  max-height: 48px;
+  aspect-ratio: 1;
+}
+.fg-view-img__error-label[data-v-4588a25e] {
+  flex: none;
+  color: #a8abb2;
+  font-size: clamp(8px, 10cqmin, 12px);
+  line-height: 1.2;
+  text-align: center;
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 极小格子隐藏文案，只留图标 */
+@container (max-width: 56px) or (max-height: 48px) {
+.fg-view-img__error-label[data-v-4588a25e] {
+    display: none;
+}
+.fg-view-img__error-default-body[data-v-4588a25e] {
+    gap: 0;
+    padding: 2px;
+}
+}
+.fg-view-img[data-v-b5064f2e] {
   display: block;
   position: relative;
   overflow: hidden;
@@ -7,50 +57,25 @@
   vertical-align: top;
   line-height: 0;
 }
-.fg-view-img__inner[data-v-c6ff5d38] {
+.fg-view-img__inner[data-v-b5064f2e] {
   display: block;
   width: 100%;
   height: 100%;
 }
-.fg-view-img__inner--preview[data-v-c6ff5d38] {
+
+/* 加载中仍占位渲染，避免 display:none + 原生 lazy 导致永不请求 */
+.fg-view-img__inner--loading[data-v-b5064f2e] {
+  opacity: 0;
+}
+.fg-view-img__inner--preview[data-v-b5064f2e] {
   cursor: zoom-in;
 }
-.fg-view-img__placeholder[data-v-c6ff5d38],
-.fg-view-img__error[data-v-c6ff5d38] {
+.fg-view-img__placeholder[data-v-b5064f2e],
+.fg-view-img__error[data-v-b5064f2e] {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #f5f7fa;
-}
-.fg-view-img__error[data-v-c6ff5d38] .error-image {
-  width: 100%;
-  height: 100%;
-}
-.fg-view-img__error-default[data-v-c6ff5d38] {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 8px;
-  box-sizing: border-box;
-}
-.fg-view-img__error-icon[data-v-c6ff5d38] {
-  flex: none;
-  width: 56%;
-  height: 56%;
-  max-width: 80px;
-  max-height: 80px;
-}
-.fg-view-img__error-text[data-v-c6ff5d38] {
-  font-size: 13px;
-  line-height: 1.4;
-  color: #909399;
-  text-align: center;
-  word-break: break-all;
 }