fangguo-component 1.2.4 → 1.2.6

package/dist/FgCascader.css

@@ -1,18 +1,14 @@
 
-.fg-doc-view-img-loading__box[data-v-b5803c68] {
+.fg-doc-view-img-loading__box[data-v-436c9599] {
     width: 200px;
     height: 120px;
     background: #fafafa;
     border: 1px dashed var(--el-border-color);
     border-radius: 8px;
 }
-.fg-doc-view-img-loading__box[data-v-b5803c68] .fg-view-img {
+.fg-doc-view-img-loading__box[data-v-436c9599] .fg-view-img {
     width: 100%;
     height: 100%;
-}
-.fg-doc-view-img-loading__ph[data-v-b5803c68] {
-    font-size: 13px;
-    color: var(--el-color-primary);
 }
 .cascader-virtual-list[data-v-a251fab9] {
   height: 100%;

package/dist/{FgCascader.vue_vue_type_style_index_0_lang-DzvTfHp4.js → FgCascader.vue_vue_type_style_index_0_lang-CtUPO8fk.js}

@@ -50,13 +50,13 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { getCurrentScope, onScopeDispose, watch, computed, toValue, shallowRef, getCurrentInstance, onMounted, warn, defineComponent, ref, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, h, inject, resolveComponent, normalizeClass, createBlock, withModifiers, createCommentVNode, Fragment, normalizeStyle, createTextVNode, toDisplayString, provide, reactive, onBeforeUpdate, nextTick, renderList, useAttrs, withDirectives, vShow, renderSlot, withKeys, vModelText, useSlots, useModel, onBeforeUnmount, mergeProps, mergeModels, render } from "vue";
+import { getCurrentScope, onScopeDispose, watch, computed, toValue, shallowRef, getCurrentInstance, onMounted, warn, defineComponent, ref, openBlock, createElementBlock, createVNode, withCtx, createTextVNode, toDisplayString, createElementVNode, unref, h, inject, resolveComponent, normalizeClass, createBlock, withModifiers, createCommentVNode, Fragment, normalizeStyle, provide, reactive, onBeforeUpdate, nextTick, renderList, useAttrs, withDirectives, vShow, renderSlot, withKeys, vModelText, useSlots, useModel, onBeforeUnmount, mergeProps, mergeModels, render } from "vue";
 import { p as process$1 } from "./index-C9zyi90j.js";
 import { fromPairs, isEqual, flattenDeep, cloneDeep, debounce } from "lodash-unified";
 import { ArrowRight, Loading, Check, CircleClose, ArrowDown } from "@element-plus/icons-vue";
 import { useNamespace, ElIcon, ElRadio, ElCheckbox, ElScrollbar, useLocale, UPDATE_MODEL_EVENT, CHANGE_EVENT, EVENT_CODE, tagProps, useTooltipContentProps, CommonProps as CommonProps$1, useSizeProp, useFormItem, useFormSize, ElConfigProvider, ElTooltip, ElInput, ElTag, ClickOutside } from "element-plus";
-import { ElCheckbox as ElCheckbox$1, ElRadio as ElRadio$1, ElIcon as ElIcon$1 } from "element-plus/es";
-import { F as FgViewImg } from "./ViewImg-CD4QJK4R.js";
+import { ElButton, ElCheckbox as ElCheckbox$1, ElRadio as ElRadio$1, ElIcon as ElIcon$1 } from "element-plus/es";
+import { F as FgViewImg } from "./ViewImg-CLRjYOUN.js";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
 import { b as script$2 } from "./vue-virtual-scroller.esm-ZgBoGAjX.js";
 !!(process$1.env.NODE_ENV !== "production") ? Object.freeze({}) : {};
@@ -316,37 +316,40 @@ const castArray = (arr) => {
 };
 const isKorean = (text) => /([\uAC00-\uD7AF\u3130-\u318F])+/gi.test(text);
 const generateId = () => Math.floor(Math.random() * 1e4);
-const _hoisted_1$2 = { class: "fg-doc-view-img-loading pt-1" };
+const _hoisted_1$2 = { class: "fg-doc-view-img-loading flex flex-col items-start gap-3 pt-1" };
 const _hoisted_2$1 = { class: "fg-doc-view-img-loading__box" };
 const src = "https://element-plus.org/images/element-plus-logo.svg";
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "Loading",
   setup(__props) {
     const loading = ref(true);
-    onMounted(() => {
-      window.setTimeout(() => {
-        loading.value = false;
-      }, 2e3);
-    });
+    function toggleLoading() {
+      loading.value = !loading.value;
+    }
     return (_ctx, _cache) => {
+      const _component_el_button = ElButton;
       return openBlock(), createElementBlock("div", _hoisted_1$2, [
+        createVNode(_component_el_button, {
+          size: "small",
+          onClick: toggleLoading
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(loading.value ? "关闭加载中" : "开启加载中"), 1)
+          ]),
+          _: 1
+        }),
         createElementVNode("div", _hoisted_2$1, [
           createVNode(unref(FgViewImg), {
             src,
             loading: loading.value,
             "oss-process": false
-          }, {
-            placeholder: withCtx(() => [..._cache[0] || (_cache[0] = [
-              createElementVNode("span", { class: "fg-doc-view-img-loading__ph" }, "加载中…", -1)
-            ])]),
-            _: 1
-          }, 8, ["loading"])
+          }, null, 8, ["loading"])
         ])
       ]);
     };
   }
 });
-const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-b5803c68"]]);
+const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-436c9599"]]);
 const NodeContent = defineComponent({
   name: "NodeContent",
   setup() {

package/dist/{ViewImg-CD4QJK4R.js → ViewImg-CLRjYOUN.js}

@@ -29,70 +29,165 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { defineComponent, computed, openBlock, createElementBlock, Fragment, createElementVNode, toDisplayString, reactive, useAttrs, ref, watch, normalizeStyle, unref, normalizeClass, withDirectives, mergeProps, vShow, renderSlot, normalizeProps, guardReactiveProps, createBlock, resolveDynamicComponent, createCommentVNode } from "vue";
+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-DP5jMHCX.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 = {
+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_3$1 = ["fill"];
-const _hoisted_4 = { class: "fg-view-img__error-label" };
-const DEFAULT_FAIL_COLOR = "#c3c6ca";
-const LEGACY_ERROR_COLOR = "#f5f5f5";
+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: "" },
-    errorColor: { default: "" }
+    fallbackColor: { default: "" }
   },
   setup(__props) {
     const props = __props;
     const isEmptySrc = computed(() => !props.src.trim());
     const resolvedLabel = computed(() => props.errorText || "加载失败");
-    const resolvedFailColor = computed(() => {
+    const customColor = computed(() => {
       var _a;
-      const color = (_a = props.errorColor) == null ? void 0 : _a.trim();
-      if (!color || color === LEGACY_ERROR_COLOR) return DEFAULT_FAIL_COLOR;
-      return color;
+      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, [
-        isEmptySrc.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          _cache[0] || (_cache[0] = createElementVNode("svg", {
-            class: "fg-view-img__error-icon",
-            viewBox: "0 0 1131 1024",
-            xmlns: "http://www.w3.org/2000/svg"
-          }, [
-            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: "#D4DADC"
-            }),
-            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: "#E1E4E5"
-            })
-          ], -1)),
-          _cache[1] || (_cache[1] = createElementVNode("span", { class: "fg-view-img__error-label" }, "无图", -1))
-        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          (openBlock(), createElementBlock("svg", _hoisted_2$1, [
-            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: resolvedFailColor.value
-            }, null, 8, _hoisted_3$1)
-          ])),
-          createElementVNode("span", _hoisted_4, toDisplayString(resolvedLabel.value), 1)
-        ], 64))
+        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-454f216f"]]);
+const ViewImgErrorFallback = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4588a25e"]]);
 const viewImgDefaults = reactive({});
 function configureViewImgDefaults(defaults) {
   resetViewImgDefaults();
@@ -107,7 +202,7 @@ function resetViewImgDefaults() {
 function useViewImgDefaults() {
   return viewImgDefaults;
 }
-const _hoisted_1 = ["src", "loading"];
+const _hoisted_1 = ["src"];
 const _hoisted_2 = {
   key: 0,
   class: "fg-view-img__placeholder"
@@ -116,6 +211,7 @@ const _hoisted_3 = {
   key: 1,
   class: "fg-view-img__error"
 };
+const LAZY_ROOT_MARGIN = "200px";
 const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
   inheritAttrs: false
 }), {
@@ -124,6 +220,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     src: { default: "" },
     fit: { default: "" },
     lazy: { type: Boolean, default: false },
+    scrollContainer: { default: null },
     loading: { type: Boolean, default: false },
     preview: { type: Boolean, default: false },
     previewSrcList: { default: () => [] },
@@ -146,8 +243,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     simpleExtraTools: { default: () => [] },
     renderExtraTools: { default: null },
     originalToolbar: { default: () => [...DEFAULT_ORIGINAL_TOOLBAR] },
-    errorColor: { default: "#f5f5f5" },
-    errorOffset: { default: 0 },
+    fallbackColor: { default: "" },
     errorText: { default: "" },
     ossProcess: { type: Boolean, default: true },
     ossLinks: { default: void 0 },
@@ -160,11 +256,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     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;
@@ -182,8 +281,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
       loading: props.loading || internalLoading.value,
       loadError: loadError.value,
       errorText: props.errorText,
-      errorColor: props.errorColor,
-      errorOffset: props.errorOffset
+      fallbackColor: props.fallbackColor
     }));
     const globalPlaceholderComponent = computed(() => {
       const renderPlaceholder = viewImgDefaults2.placeholder;
@@ -242,6 +340,67 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
       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;
@@ -302,10 +461,40 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     watch(
       [() => props.src, () => props.ossProcess, () => props.ossLinks, () => props.imgSize, networkKey, imgUrlConfigKey],
       ([src]) => {
-        resetState(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,
@@ -313,24 +502,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     });
     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 }]
+          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: __props.lazy ? "lazy" : "eager",
+          loading: "eager",
           style: imgStyle.value,
           onLoad: handleLoad,
           onError: handleError,
           onClick: handlePreviewClick
         }), null, 16, _hoisted_1), [
-          [vShow, !loadError.value && !showPlaceholder.value]
+          [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 })) : createCommentVNode("", true)
+            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, [
@@ -339,15 +538,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
               key: 1,
               src: __props.src,
               "error-text": __props.errorText,
-              "error-color": __props.errorColor
-            }, null, 8, ["src", "error-text", "error-color"]))
+              "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-f968b8c2"]]);
+const FgViewImg = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b5064f2e"]]);
 export {
   FgViewImg as F,
   ViewImgErrorFallback as V,

package/dist/ViewImg.css

@@ -1,30 +1,54 @@
-.fg-view-img__error-default[data-v-454f216f] {
+@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: 6px;
+  gap: clamp(2px, 4cqmin, 6px);
   box-sizing: border-box;
-  padding: 8px;
+  padding: clamp(2px, 6cqmin, 8px);
 }
-.fg-view-img__error-icon[data-v-454f216f] {
+.fg-view-img__error-icon[data-v-4588a25e] {
   display: block;
   flex: none;
-  width: 40%;
+  width: clamp(16px, 36cqmin, 56px);
   height: auto;
   max-width: 56px;
   max-height: 48px;
   aspect-ratio: 1;
 }
-.fg-view-img__error-label[data-v-454f216f] {
+.fg-view-img__error-label[data-v-4588a25e] {
   flex: none;
   color: #a8abb2;
-  font-size: 12px;
+  font-size: clamp(8px, 10cqmin, 12px);
   line-height: 1.2;
   text-align: center;
-}.fg-view-img[data-v-f968b8c2] {
+  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;
@@ -33,16 +57,21 @@
   vertical-align: top;
   line-height: 0;
 }
-.fg-view-img__inner[data-v-f968b8c2] {
+.fg-view-img__inner[data-v-b5064f2e] {
   display: block;
   width: 100%;
   height: 100%;
 }
-.fg-view-img__inner--preview[data-v-f968b8c2] {
+
+/* 加载中仍占位渲染，避免 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-f968b8c2],
-.fg-view-img__error[data-v-f968b8c2] {
+.fg-view-img__placeholder[data-v-b5064f2e],
+.fg-view-img__error[data-v-b5064f2e] {
   position: absolute;
   inset: 0;
   display: flex;