fangguo-component 1.2.0 → 1.2.1

package/dist/{FgCascader.vue_vue_type_style_index_0_lang-Bm4HR37D.js → FgCascader.vue_vue_type_style_index_0_lang-CstlYwHs.js}

@@ -56,7 +56,7 @@ import { fromPairs, isEqual, flattenDeep, cloneDeep, debounce } from "lodash-uni
 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-Bg1AQ0T6.js";
+import { F as FgViewImg } from "./ViewImg-DXhF20SL.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({}) : {};

package/dist/{ImgViewerHost.vue_vue_type_script_setup_true_lang-CMoh7eWo.js → ImgViewerHost.vue_vue_type_script_setup_true_lang-DBs42WOq.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createBlock, unref } from "vue";
-import { _ as _sfc_main$1 } from "./ViewImgPreview.vue_vue_type_style_index_0_lang-CYuLovBR.js";
-import { u as useImgViewerState, I as ImgViewerStore } from "./imgViewerStore-C5n16uYa.js";
+import { _ as _sfc_main$1 } from "./ViewImgPreview.vue_vue_type_style_index_0_lang-C2i0p5IK.js";
+import { u as useImgViewerState, I as ImgViewerStore } from "./imgViewerStore-DK3zvGf4.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ImgViewerHost",
   setup(__props) {
@@ -40,10 +40,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "simple-extra-tools": unref(state).simpleExtraTools,
         "render-extra-tools": unref(state).renderExtraTools,
         "original-toolbar": unref(state).originalToolbar,
+        "preview-side-nav": unref(state).previewSideNav,
         onClose: handlePreviewClose,
         onSwitch: handlePreviewSwitch,
         onShow: handlePreviewShow
-      }, null, 8, ["visible", "url-list", "initial-index", "infinite", "z-index", "toolbar-bg-color", "toolbar-icon-color", "hide-on-click-modal", "close-on-press-escape", "teleported", "zoom-rate", "scale", "min-scale", "max-scale", "show-progress", "simple-extra-tools", "render-extra-tools", "original-toolbar"]);
+      }, null, 8, ["visible", "url-list", "initial-index", "infinite", "z-index", "toolbar-bg-color", "toolbar-icon-color", "hide-on-click-modal", "close-on-press-escape", "teleported", "zoom-rate", "scale", "min-scale", "max-scale", "show-progress", "simple-extra-tools", "render-extra-tools", "original-toolbar", "preview-side-nav"]);
     };
   }
 });

package/dist/{ViewImg-Bg1AQ0T6.js → ViewImg-DXhF20SL.js}

@@ -30,8 +30,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { defineComponent, useAttrs, ref, computed, watch, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, withDirectives, createElementVNode, mergeProps, vShow, renderSlot, createCommentVNode, createBlock, toDisplayString } from "vue";
-import { I as ImgViewerStore } from "./imgViewerStore-C5n16uYa.js";
-import { D as DEFAULT_ORIGINAL_TOOLBAR, k as DEFAULT_TOOLBAR_ICON_COLOR, j 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, i 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, h as DEFAULT_PREVIEW_TELEPORTED } from "./types-BNFeGRer.js";
+import { I as ImgViewerStore } from "./imgViewerStore-DK3zvGf4.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-CwgYnB2h.js";
 import { F as FgErrorImage } from "./ErrorImage-CFVt1ht_.js";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
@@ -85,7 +85,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     ossProcess: { type: Boolean, default: true },
     ossLinks: { default: void 0 },
     imgSize: { default: () => ({}) },
-    previewStripQuery: { type: Boolean, default: true }
+    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 }) {
@@ -169,8 +170,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
       displaySrc.value = stripped;
       emit("retry", { from: urlBefore, to: stripped });
     }
-    function handlePreviewClick() {
-      if (!previewEnabled.value || !previewUrlList.value.length) return;
+    function openPreview() {
+      if (!previewUrlList.value.length) return;
       ImgViewerStore().showImgViewer({
         previewImgList: previewUrlList.value,
         defImgPreviewIndex: previewInitialIndex.value,
@@ -189,11 +190,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         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]) => {
@@ -203,7 +209,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     );
     __expose({
       displaySrc,
-      retried
+      retried,
+      openPreview
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("span", {
@@ -241,7 +248,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     };
   }
 }));
-const FgViewImg = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-498a112d"]]);
+const FgViewImg = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c6ff5d38"]]);
 export {
   FgViewImg as F
 };

package/dist/ViewImg.css

@@ -1,4 +1,4 @@
-.fg-view-img[data-v-498a112d] {
+.fg-view-img[data-v-c6ff5d38] {
   display: block;
   position: relative;
   overflow: hidden;
@@ -7,16 +7,16 @@
   vertical-align: top;
   line-height: 0;
 }
-.fg-view-img__inner[data-v-498a112d] {
+.fg-view-img__inner[data-v-c6ff5d38] {
   display: block;
   width: 100%;
   height: 100%;
 }
-.fg-view-img__inner--preview[data-v-498a112d] {
+.fg-view-img__inner--preview[data-v-c6ff5d38] {
   cursor: zoom-in;
 }
-.fg-view-img__placeholder[data-v-498a112d],
-.fg-view-img__error[data-v-498a112d] {
+.fg-view-img__placeholder[data-v-c6ff5d38],
+.fg-view-img__error[data-v-c6ff5d38] {
   position: absolute;
   inset: 0;
   display: flex;
@@ -24,11 +24,11 @@
   justify-content: center;
   background: #f5f7fa;
 }
-.fg-view-img__error[data-v-498a112d] .error-image {
+.fg-view-img__error[data-v-c6ff5d38] .error-image {
   width: 100%;
   height: 100%;
 }
-.fg-view-img__error-default[data-v-498a112d] {
+.fg-view-img__error-default[data-v-c6ff5d38] {
   position: relative;
   width: 100%;
   height: 100%;
@@ -40,14 +40,14 @@
   padding: 8px;
   box-sizing: border-box;
 }
-.fg-view-img__error-icon[data-v-498a112d] {
+.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-498a112d] {
+.fg-view-img__error-text[data-v-c6ff5d38] {
   font-size: 13px;
   line-height: 1.4;
   color: #909399;

package/dist/ViewImgPopover-QblZG0z5.js

@@ -0,0 +1,343 @@
+import './ViewImgPopover.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 { ElWatermark, ElIcon } from "element-plus/es";
+import { defineComponent, useAttrs, ref, computed, watch, openBlock, createElementBlock, createVNode, withCtx, Fragment, normalizeStyle, renderSlot, toDisplayString, createBlock, createElementVNode, createSlots, createCommentVNode, mergeProps, unref, withModifiers } from "vue";
+import { CirclePlus } from "@element-plus/icons-vue";
+import { L as LazyPopover } from "./LazyPopover-7ebuh-QG.js";
+import { F as FgViewImg } from "./ViewImg-DXhF20SL.js";
+import { m as montageImgUrl } from "./montageImgUrl-CwgYnB2h.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "fg-view-img-popover__reference" };
+const _hoisted_2 = {
+  key: 1,
+  class: "fg-view-img-popover__hover-error-text"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "fg-view-img-popover__hover-error-text"
+};
+const HOVER_POPOVER_PADDING = 10;
+const HOVER_POPOVER_MAX_HEIGHT = 400;
+const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
+  inheritAttrs: false
+}), {
+  __name: "ViewImgPopover",
+  props: {
+    src: { default: "" },
+    fit: {},
+    lazy: { type: Boolean },
+    loading: { type: Boolean },
+    preview: { type: Boolean },
+    previewSrcList: {},
+    initialIndex: {},
+    defImgPreviewIndex: {},
+    infinite: { type: Boolean },
+    zIndex: {},
+    hideOnClickModal: { type: Boolean },
+    closeOnPressEscape: { type: Boolean },
+    previewTeleported: { type: Boolean },
+    teleported: { type: Boolean },
+    zoomRate: {},
+    scale: {},
+    minScale: {},
+    maxScale: {},
+    showProgress: { type: Boolean },
+    toolbarBgColor: {},
+    backgroundColor: {},
+    toolbarIconColor: {},
+    simpleExtraTools: {},
+    renderExtraTools: {},
+    originalToolbar: {},
+    errorColor: {},
+    errorOffset: {},
+    errorText: {},
+    ossProcess: { type: Boolean },
+    ossLinks: {},
+    imgSize: {},
+    previewStripQuery: { type: Boolean },
+    hoverSrc: { default: "" },
+    hoverImgSize: { default: void 0 },
+    hoverPopoverProps: { default: () => ({}) },
+    isShowWatermark: { type: Boolean, default: false },
+    waterMarkTitle: { default: "" },
+    showPreviewIcon: { type: Boolean, default: false }
+  },
+  emits: ["load", "error", "retry", "show", "close", "switch"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const viewImgRef = ref(null);
+    const referenceLoadError = ref(false);
+    const viewImgProps = computed(() => {
+      const _a = props, {
+        hoverSrc: _h,
+        hoverImgSize: _hi,
+        hoverPopoverProps: _hp,
+        isShowWatermark: _w,
+        waterMarkTitle: _wt,
+        showPreviewIcon: _spi
+      } = _a, rest = __objRest(_a, [
+        "hoverSrc",
+        "hoverImgSize",
+        "hoverPopoverProps",
+        "isShowWatermark",
+        "waterMarkTitle",
+        "showPreviewIcon"
+      ]);
+      return rest;
+    });
+    function handlePreviewIconClick() {
+      var _a;
+      (_a = viewImgRef.value) == null ? void 0 : _a.openPreview();
+    }
+    function mergePopperStyle(base, extra) {
+      if (!extra) return base;
+      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 hoverPopoverPropsMerged = computed(() => {
+      var _a;
+      const _b = (_a = props.hoverPopoverProps) != null ? _a : {}, { popperStyle: userPopperStyle, popperClass: userPopperClass } = _b, restHoverPopoverProps = __objRest(_b, ["popperStyle", "popperClass"]);
+      const popperClass = [userPopperClass, "fg-view-img-popover"].filter(Boolean).join(" ");
+      return __spreadValues({
+        placement: "right",
+        trigger: "hover",
+        width: 400,
+        teleported: true,
+        popperClass,
+        popperStyle: mergePopperStyle(
+          {
+            maxHeight: HOVER_POPOVER_MAX_HEIGHT_CSS,
+            overflow: "hidden",
+            padding: `${HOVER_POPOVER_PADDING}px`,
+            boxSizing: "border-box"
+          },
+          userPopperStyle
+        )
+      }, restHoverPopoverProps);
+    });
+    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 resolvePreviewImgUrl(url, imgSize) {
+      return applyPreviewUrlFallback(resolveImgUrl(url, imgSize));
+    }
+    function handleReferenceLoad(event) {
+      referenceLoadError.value = false;
+      emit("load", event);
+    }
+    function handleReferenceError(event) {
+      referenceLoadError.value = true;
+      emit("error", event);
+    }
+    function handleReferenceRetry(payload) {
+      referenceLoadError.value = false;
+      emit("retry", payload);
+    }
+    watch(
+      () => props.src,
+      () => {
+        referenceLoadError.value = false;
+      }
+    );
+    function resolveViewImgDisplaySrc() {
+      var _a;
+      const fromRef = (_a = viewImgRef.value) == null ? void 0 : _a.displaySrc;
+      if (fromRef) return fromRef;
+      if (!props.src) return "";
+      return resolveImgUrl(props.src, props.imgSize);
+    }
+    const hoverPreviewSrc = computed(() => {
+      var _a, _b, _c;
+      const displaySrc = resolveViewImgDisplaySrc();
+      const retried = (_b = (_a = viewImgRef.value) == null ? void 0 : _a.retried) != null ? _b : false;
+      if (props.hoverSrc) {
+        return resolvePreviewImgUrl(props.hoverSrc, (_c = props.hoverImgSize) != null ? _c : props.imgSize);
+      }
+      if (!props.src) return displaySrc || "";
+      if (!props.hoverImgSize) return displaySrc || "";
+      let url = resolveImgUrl(props.src, props.hoverImgSize);
+      if (retried) url = stripQueryParams(url);
+      return applyPreviewUrlFallback(url);
+    });
+    const hoverImgStyle = computed(() => ({
+      width: "100%",
+      height: HOVER_IMAGE_MAX_HEIGHT_CSS
+    }));
+    return (_ctx, _cache) => {
+      const _component_el_watermark = ElWatermark;
+      const _component_el_icon = ElIcon;
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(LazyPopover, {
+          class: "fg-view-img-popover__trigger",
+          props: hoverPopoverPropsMerged.value
+        }, {
+          reference: withCtx(() => [
+            createVNode(FgViewImg, mergeProps({
+              ref_key: "viewImgRef",
+              ref: viewImgRef,
+              class: unref(attrs).class,
+              style: unref(attrs).style
+            }, viewImgProps.value, {
+              onLoad: handleReferenceLoad,
+              onError: handleReferenceError,
+              onRetry: handleReferenceRetry,
+              onShow: _cache[0] || (_cache[0] = (p) => emit("show", p)),
+              onClose: _cache[1] || (_cache[1] = ($event) => emit("close")),
+              onSwitch: _cache[2] || (_cache[2] = (i) => emit("switch", i))
+            }), createSlots({ _: 2 }, [
+              _ctx.$slots.placeholder ? {
+                name: "placeholder",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "placeholder", {}, void 0, true)
+                ]),
+                key: "0"
+              } : void 0,
+              _ctx.$slots.error ? {
+                name: "error",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "error", {}, void 0, true)
+                ]),
+                key: "1"
+              } : void 0
+            ]), 1040, ["class", "style"])
+          ]),
+          default: withCtx(() => [
+            hoverPreviewSrc.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              referenceLoadError.value ? (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) : (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.errorText || "加载失败"), 1))
+                ], 4)) : (openBlock(), createBlock(_component_el_watermark, {
+                  key: 1,
+                  class: "fg-view-img-popover__watermark",
+                  content: [__props.waterMarkTitle],
+                  gap: [10, 10],
+                  font: { fontSize: 16, color: "rgba(0, 0, 0, 0.3)" }
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", {
+                      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) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.errorText || "加载失败"), 1))
+                    ], 4)
+                  ]),
+                  _: 3
+                }, 8, ["content"]))
+              ], 64)) : !__props.isShowWatermark ? (openBlock(), createBlock(FgViewImg, {
+                key: 1,
+                class: "fg-view-img-popover__hover-image",
+                src: hoverPreviewSrc.value,
+                style: normalizeStyle(hoverImgStyle.value),
+                preview: false,
+                "oss-process": false,
+                "error-color": __props.errorColor,
+                "error-offset": __props.errorOffset,
+                "error-text": __props.errorText,
+                fit: "contain"
+              }, createSlots({ _: 2 }, [
+                _ctx.$slots.error ? {
+                  name: "error",
+                  fn: withCtx(() => [
+                    renderSlot(_ctx.$slots, "error", {}, void 0, true)
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1032, ["src", "style", "error-color", "error-offset", "error-text"])) : (openBlock(), createBlock(_component_el_watermark, {
+                key: 2,
+                class: "fg-view-img-popover__watermark",
+                content: [__props.waterMarkTitle],
+                gap: [10, 10],
+                font: { fontSize: 16, color: "rgba(0, 0, 0, 0.3)" }
+              }, {
+                default: withCtx(() => [
+                  createVNode(FgViewImg, {
+                    class: "fg-view-img-popover__hover-image",
+                    src: hoverPreviewSrc.value,
+                    style: normalizeStyle(hoverImgStyle.value),
+                    preview: false,
+                    "oss-process": false,
+                    "error-color": __props.errorColor,
+                    "error-offset": __props.errorOffset,
+                    "error-text": __props.errorText,
+                    fit: "contain"
+                  }, createSlots({ _: 2 }, [
+                    _ctx.$slots.error ? {
+                      name: "error",
+                      fn: withCtx(() => [
+                        renderSlot(_ctx.$slots, "error", {}, void 0, true)
+                      ]),
+                      key: "0"
+                    } : void 0
+                  ]), 1032, ["src", "style", "error-color", "error-offset", "error-text"])
+                ]),
+                _: 3
+              }, 8, ["content"]))
+            ], 64)) : createCommentVNode("", true)
+          ]),
+          _: 3
+        }, 8, ["props"]),
+        __props.showPreviewIcon ? (openBlock(), createBlock(_component_el_icon, {
+          key: 0,
+          class: "fg-view-img-popover__preview-icon",
+          size: 14,
+          onClick: withModifiers(handlePreviewIconClick, ["stop"])
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(CirclePlus))
+          ]),
+          _: 1
+        })) : createCommentVNode("", true)
+      ]);
+    };
+  }
+}));
+const ViewImgPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-868c46fb"]]);
+export {
+  ViewImgPopover as V
+};

package/dist/ViewImgPopover.css

@@ -1,12 +1,74 @@
-.fg-view-img-popover__hover-image[data-v-6955cede] {
+.fg-view-img-popover__reference[data-v-868c46fb] {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.fg-view-img-popover__preview-icon[data-v-868c46fb] {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 1;
+  line-height: 1;
+  color: var(--el-text-color-primary);
+  cursor: pointer;
+}
+.fg-view-img-popover__preview-icon[data-v-868c46fb]:hover {
+  color: var(--el-color-primary);
+}
+.fg-view-img-popover__hover-image[data-v-868c46fb] {
+  display: block;
   vertical-align: top;
+  background: #7f7f7f;
+}
+.fg-view-img-popover__hover-image[data-v-868c46fb] .fg-view-img__inner {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.fg-view-img-popover__hover-image[data-v-868c46fb] .fg-view-img__placeholder,
+.fg-view-img-popover__hover-image[data-v-868c46fb] .fg-view-img__error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f7fa;
+  line-height: 1.4;
+}
+.fg-view-img-popover__hover-image[data-v-868c46fb] .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-6955cede] .fg-view-img__inner {
-  width: auto;
-  height: auto;
+.fg-view-img-popover__hover-image[data-v-868c46fb] .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-868c46fb] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background: #f5f7fa;
+  color: #909399;
+  font-size: 13px;
+  line-height: 1.4;
+  text-align: center;
+}.fg-view-img-popover__reference {
+  display: block;
+  width: 100%;
+  height: 100%;
   max-width: 100%;
-  max-height: 100%;
-}.fg-view-img-popover__trigger {
+}
+.fg-view-img-popover__trigger {
   display: block;
   width: 100%;
   height: 100%;
@@ -23,11 +85,22 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 100%;
   max-width: 100%;
+  max-height: 100%;
   line-height: 0;
 }
 .fg-view-img-popover.el-popper .fg-view-img-popover__watermark {
   display: block;
+  width: 100%;
+  height: 380px;
   max-width: 100%;
   max-height: 380px;
+}
+.fg-view-img-popover.el-popper .fg-view-img-popover__watermark .el-watermark__content {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
 }

package/dist/ViewImgPreview.css

@@ -22,6 +22,26 @@
   opacity: 1 !important;
 }
 
+/* 仅展示左侧箭头 */
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__prev {
+  display: inline-flex !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__next {
+  display: none !important;
+}
+
+/* 仅展示右侧箭头 */
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__next {
+  display: inline-flex !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__prev {
+  display: none !important;
+}
+
 /* 保证预览图在视口内居中适配（避免业务全局 img { width/height: 100% } 导致铺满） */
 .el-image-viewer__wrapper .el-image-viewer__canvas {
   display: flex;
@@ -38,16 +58,22 @@
 
 /* 画布置于蒙层之上 */
 .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__mask,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__mask,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__mask,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-nav .el-image-viewer__mask,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-toolbar .el-image-viewer__mask {
   z-index: 1;
 }
 .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__canvas,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__canvas,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__canvas,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-nav .el-image-viewer__canvas,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-toolbar .el-image-viewer__canvas {
   z-index: 2;
 }
 .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__img,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__img,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__img,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-nav .el-image-viewer__img,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-toolbar .el-image-viewer__img {
   z-index: 2;
@@ -55,6 +81,12 @@
 .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__btn,
 .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__close,
 .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__actions,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__btn,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__close,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__actions,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__btn,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__close,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__actions,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-nav .el-image-viewer__btn,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-nav .el-image-viewer__close,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-toolbar .el-image-viewer__btn,