@gx-design-vue/image 0.2.0-beta.27 → 0.2.0-beta.28

package/dist/image.js

@@ -1,38 +1,38 @@
-import { ref as L, defineComponent as pe, createVNode as u, Teleport as Ee, Transition as ge, withDirectives as me, Fragment as re, cloneVNode as ot, vShow as he, toRef as F, reactive as it, computed as b, watch as K, onMounted as Te, onUnmounted as at, mergeProps as ae, watchEffect as lt, createTextVNode as rt, nextTick as st } from "vue";
-import { getTransitionProps as we, Keyframe as ue, useStyle as ut, mergeToken as ct, useProStyle as dt, unit as be } from "@gx-design-vue/pro-provider";
-import { classNames as Q, getPrefixCls as De, isNumber as Re, getSlotVNode as H, isArray as ft, getSlot as vt, getSlotsProps as gt, isInContainer as mt, isString as ht, getScrollContainer as wt } from "@gx-design-vue/pro-utils";
-import { useWindowSize as Ne, isClient as q, useThrottleFn as pt, useEventListener as $e } from "@vueuse/core";
-import { isEqual as yt, cloneDeep as St, omit as Pe, fromPairs as Ct, pick as xt } from "lodash-es";
-import { CloseOutlined as It, LeftOutlined as bt, RightOutlined as $t, SwapOutlined as ze, ZoomOutOutlined as zt, ZoomInOutlined as Lt, RotateRightOutlined as Mt, RotateLeftOutlined as Ot } from "@ant-design/icons-vue";
-import { useState as ee, useEffect as ye, useMergedState as At } from "@gx-design-vue/pro-hooks";
+import { ref as L, defineComponent as Se, createVNode as u, Teleport as Te, Transition as he, withDirectives as we, Fragment as se, cloneVNode as it, vShow as pe, toRef as k, reactive as at, computed as b, watch as J, onMounted as De, onUnmounted as lt, mergeProps as le, watchEffect as rt, nextTick as st } from "vue";
+import { CloseOutlined as ut, LeftOutlined as ct, RightOutlined as dt, SwapOutlined as ze, ZoomOutOutlined as ft, ZoomInOutlined as vt, RotateRightOutlined as gt, RotateLeftOutlined as mt, EyeOutlined as ht } from "@ant-design/icons-vue";
+import { getTransitionProps as ye, Keyframe as ce, useStyle as wt, mergeToken as pt, unit as ee, FastColor as yt, useProStyle as St } from "@gx-design-vue/pro-provider";
+import { classNames as X, getPrefixCls as Re, isNumber as Ne, getSlotVNode as H, isArray as Ct, getSlot as Pe, getSlotsProps as xt, isInContainer as It, isString as bt, getScrollContainer as $t } from "@gx-design-vue/pro-utils";
+import { useWindowSize as Xe, isClient as Q, useThrottleFn as zt, useEventListener as Le } from "@vueuse/core";
+import { isEqual as Lt, cloneDeep as Ot, omit as Ye, fromPairs as Mt, pick as At } from "lodash-es";
+import { useState as ne, useEffect as Ce, useMergedState as Et } from "@gx-design-vue/pro-hooks";
 import { TinyColor as Z } from "@ctrl/tinycolor";
-let Xe = (e) => setTimeout(e, 16), Ye = (e) => clearTimeout(e);
-typeof window < "u" && "requestAnimationFrame" in window && (Xe = (e) => window.requestAnimationFrame(e), Ye = (e) => window.cancelAnimationFrame(e));
-let Le = 0;
-const Se = /* @__PURE__ */ new Map();
-function je(e) {
-  Se.delete(e);
+let je = (e) => setTimeout(e, 16), Be = (e) => clearTimeout(e);
+typeof window < "u" && "requestAnimationFrame" in window && (je = (e) => window.requestAnimationFrame(e), Be = (e) => window.cancelAnimationFrame(e));
+let Oe = 0;
+const xe = /* @__PURE__ */ new Map();
+function Fe(e) {
+  xe.delete(e);
 }
-function Be(e, n = 1) {
-  Le += 1;
-  const o = Le;
+function ke(e, n = 1) {
+  Oe += 1;
+  const o = Oe;
   function l(t) {
     if (t === 0)
-      je(o), e();
+      Fe(o), e();
     else {
-      const s = Xe(() => {
+      const r = je(() => {
         l(t - 1);
       });
-      Se.set(o, s);
+      xe.set(o, r);
     }
   }
   return l(n), o;
 }
-Be.cancel = (e) => {
-  const n = Se.get(e);
-  return je(n), Ye(n);
+ke.cancel = (e) => {
+  const n = xe.get(e);
+  return Fe(n), Be(n);
 };
-const oe = {
+const ae = {
   x: 0,
   y: 0,
   rotate: 0,
@@ -40,16 +40,16 @@ const oe = {
   flipX: !1,
   flipY: !1
 };
-function Et(e, n, o, l) {
-  const t = L(null), s = L([]), [c, h] = ee(oe), y = (m) => {
-    h(oe), yt(oe, c.value) || l == null || l({ transform: oe, action: m });
+function Tt(e, n, o, l) {
+  const t = L(null), r = L([]), [c, h] = ne(ae), y = (m) => {
+    h(ae), Lt(ae, c.value) || l == null || l({ transform: ae, action: m });
   }, d = (m, w) => {
-    t.value === null && (s.value = [], t.value = Be(() => {
-      let C = St(c.value);
-      s.value.forEach((a) => {
-        C = { ...C, ...a };
-      }), t.value = null, l == null || l({ transform: C, action: w }), h(C);
-    })), s.value.push({
+    t.value === null && (r.value = [], t.value = ke(() => {
+      let x = Ot(c.value);
+      r.value.forEach((a) => {
+        x = { ...x, ...a };
+      }), t.value = null, l == null || l({ transform: x, action: w }), h(x);
+    })), r.value.push({
       ...c.value,
       ...m
     });
@@ -58,41 +58,41 @@ function Et(e, n, o, l) {
     transform: c,
     resetTransform: y,
     updateTransform: d,
-    dispatchZoomChange: (m, w, C, a, i) => {
-      const { width: p, height: f, offsetWidth: S, offsetHeight: x, offsetLeft: $, offsetTop: T } = e.value;
-      let M = m, I = c.value.scale * m;
-      I > o.value ? (I = o.value, M = o.value / c.value.scale) : I < n.value && (I = i ? I : n.value, M = I / c.value.scale);
-      const B = C ?? innerWidth / 2, k = a ?? innerHeight / 2, N = M - 1, O = N * p * 0.5, P = N * f * 0.5, X = N * (B - c.value.x - $), W = N * (k - c.value.y - T);
-      let Y = c.value.x - (X - O), j = c.value.y - (W - P);
+    dispatchZoomChange: (m, w, x, a, i) => {
+      const { width: p, height: g, offsetWidth: S, offsetHeight: C, offsetLeft: $, offsetTop: T } = e.value;
+      let O = m, I = c.value.scale * m;
+      I > o.value ? (I = o.value, O = o.value / c.value.scale) : I < n.value && (I = i ? I : n.value, O = I / c.value.scale);
+      const F = x ?? innerWidth / 2, W = a ?? innerHeight / 2, N = O - 1, M = N * p * 0.5, P = N * g * 0.5, Y = N * (F - c.value.x - $), _ = N * (W - c.value.y - T);
+      let j = c.value.x - (Y - M), B = c.value.y - (_ - P);
       if (m < 1 && I === 1) {
-        const D = S * I, v = x * I, { width: A, height: E } = Ne();
-        D <= A.value && v <= E.value && (Y = 0, j = 0);
+        const D = S * I, f = C * I, { width: A, height: E } = Xe();
+        D <= A.value && f <= E.value && (j = 0, B = 0);
       }
       d({
-        x: Y,
-        y: j,
+        x: j,
+        y: B,
         scale: I
       }, w);
     }
   };
 }
-function Tt(e, n) {
+function Dt(e, n) {
   process.env.NODE_ENV !== "production" && console !== void 0 && console.error(`Warning: ${n}`);
 }
-let Fe = !1;
+let He = !1;
 try {
   const e = Object.defineProperty({}, "passive", {
     get() {
-      Fe = !0;
+      He = !0;
     }
   });
   window.addEventListener("testPassive", null, e), window.removeEventListener("testPassive", null, e);
 } catch {
 }
-function V(e, n, o, l) {
+function q(e, n, o, l) {
   if (e && e.addEventListener) {
     let t = l;
-    t === void 0 && Fe && (n === "touchstart" || n === "touchmove" || n === "wheel") && (t = { passive: !1 }), e.addEventListener(n, o, t);
+    t === void 0 && He && (n === "touchstart" || n === "touchmove" || n === "wheel") && (t = { passive: !1 }), e.addEventListener(n, o, t);
   }
   return {
     remove: () => {
@@ -100,42 +100,42 @@ function V(e, n, o, l) {
     }
   };
 }
-const U = 1, Dt = 1;
+const K = 1, Rt = 1;
 function Me(e, n, o, l) {
-  const t = n + o, s = (o - l) / 2;
+  const t = n + o, r = (o - l) / 2;
   if (o > l) {
     if (n > 0)
       return {
-        [e]: s
+        [e]: r
       };
     if (n < 0 && t < l)
       return {
-        [e]: -s
+        [e]: -r
       };
   } else if (n < 0 || t > l)
     return {
-      [e]: n < 0 ? s : -s
+      [e]: n < 0 ? r : -r
     };
   return {};
 }
-function He(e, n, o, l) {
-  const { width: t, height: s } = Ne();
+function Ze(e, n, o, l) {
+  const { width: t, height: r } = Xe();
   let c = null;
-  return e <= t.value && n <= s.value ? c = {
+  return e <= t.value && n <= r.value ? c = {
     x: 0,
     y: 0
-  } : (e > t.value || n > s.value) && (c = {
+  } : (e > t.value || n > r.value) && (c = {
     ...Me("x", o, e, t.value),
-    ...Me("y", l, n, s.value)
+    ...Me("y", l, n, r.value)
   }), c;
 }
-function Rt(e, n, o, l, t, s, c) {
-  const [h, y] = ee(!1), d = L({
+function Nt(e, n, o, l, t, r, c) {
+  const [h, y] = ne(!1), d = L({
     diffX: 0,
     diffY: 0,
     transformX: 0,
     transformY: 0
-  }), g = (a) => {
+  }), v = (a) => {
     !n || a.button !== 0 || (a.preventDefault(), a.stopPropagation(), d.value = {
       diffX: a.pageX - t.value.x,
       diffY: a.pageY - t.value.y,
@@ -143,7 +143,7 @@ function Rt(e, n, o, l, t, s, c) {
       transformY: t.value.y
     }, y(!0));
   }, m = (a) => {
-    o && h.value && s({
+    o && h.value && r({
       x: a.pageX - d.value.diffX,
       y: a.pageY - d.value.diffY
     }, "move");
@@ -153,54 +153,54 @@ function Rt(e, n, o, l, t, s, c) {
       const { transformX: a, transformY: i } = d.value;
       if (!(t.value.x !== a && t.value.y !== i))
         return;
-      const f = e.value.offsetWidth * t.value.scale, S = e.value.offsetHeight * t.value.scale, { left: x, top: $ } = e.value.getBoundingClientRect(), T = t.value.rotate % 180 !== 0, M = He(T ? S : f, T ? f : S, x, $);
-      M && s({ ...M }, "dragRebound");
+      const g = e.value.offsetWidth * t.value.scale, S = e.value.offsetHeight * t.value.scale, { left: C, top: $ } = e.value.getBoundingClientRect(), T = t.value.rotate % 180 !== 0, O = Ze(T ? S : g, T ? g : S, C, $);
+      O && r({ ...O }, "dragRebound");
     }
-  }, C = (a) => {
+  }, x = (a) => {
     if (!o || a.deltaY === 0)
       return;
-    const i = Math.abs(a.deltaY / 100), p = Math.min(i, Dt);
-    let f = U + p * l.value;
-    a.deltaY > 0 && (f = U / f), c(f, "wheel", a.clientX, a.clientY);
+    const i = Math.abs(a.deltaY / 100), p = Math.min(i, Rt);
+    let g = K + p * l.value;
+    a.deltaY > 0 && (g = K / g), c(g, "wheel", a.clientX, a.clientY);
   };
-  return ye(() => {
-    let a, i, p, f;
+  return Ce(() => {
+    let a, i, p, g;
     if (n) {
-      p = V(window, "mouseup", w, !1), f = V(window, "mousemove", m, !1);
+      p = q(window, "mouseup", w, !1), g = q(window, "mousemove", m, !1);
       try {
-        window.top !== window.self && (a = V(window.top, "mouseup", w, !1), i = V(window.top, "mousemove", m, !1));
+        window.top !== window.self && (a = q(window.top, "mouseup", w, !1), i = q(window.top, "mousemove", m, !1));
       } catch (S) {
-        Tt(!1, `[rc-image] ${S}`);
+        Dt(!1, `[rc-image] ${S}`);
       }
     }
     return () => {
-      p == null || p.remove(), f == null || f.remove(), a == null || a.remove(), i == null || i.remove();
+      p == null || p.remove(), g == null || g.remove(), a == null || a.remove(), i == null || i.remove();
     };
   }, [o, h, () => t.value.x, () => t.value.y, () => t.value.rotate, n]), {
     isMoving: h,
-    onMouseDown: g,
+    onMouseDown: v,
     onMouseMove: m,
     onMouseUp: w,
-    onWheel: C
+    onWheel: x
   };
 }
-function se(e, n) {
+function ue(e, n) {
   const o = e.x - n.x, l = e.y - n.y;
   return Math.hypot(o, l);
 }
-function Nt(e, n, o, l) {
-  const t = se(e, o), s = se(n, l);
-  if (t === 0 && s === 0)
+function Pt(e, n, o, l) {
+  const t = ue(e, o), r = ue(n, l);
+  if (t === 0 && r === 0)
     return [e.x, e.y];
-  const c = t / (t + s), h = e.x + c * (n.x - e.x), y = e.y + c * (n.y - e.y);
+  const c = t / (t + r), h = e.x + c * (n.x - e.x), y = e.y + c * (n.y - e.y);
   return [h, y];
 }
-function Pt(e, n, o, l, t, s, c) {
-  const [h, y] = ee(!1), d = L({
+function Xt(e, n, o, l, t, r, c) {
+  const [h, y] = ne(!1), d = L({
     point1: { x: 0, y: 0 },
     point2: { x: 0, y: 0 },
     eventType: "none"
-  }), g = (a) => {
+  }), v = (a) => {
     d.value = {
       ...d.value,
       ...a
@@ -210,11 +210,11 @@ function Pt(e, n, o, l, t, s, c) {
       return;
     a.stopPropagation(), y(!0);
     const { touches: i = [] } = a;
-    i.length > 1 ? g({
+    i.length > 1 ? v({
       point1: { x: i[0].clientX, y: i[0].clientY },
       point2: { x: i[1].clientX, y: i[1].clientY },
       eventType: "touchZoom"
-    }) : g({
+    }) : v({
       point1: {
         x: i[0].clientX - t.value.x,
         y: i[0].clientY - t.value.y
@@ -222,35 +222,35 @@ function Pt(e, n, o, l, t, s, c) {
       eventType: "move"
     });
   }, w = (a) => {
-    const { touches: i = [] } = a, { point1: p, point2: f, eventType: S } = d.value;
+    const { touches: i = [] } = a, { point1: p, point2: g, eventType: S } = d.value;
     if (i.length > 1 && S === "touchZoom") {
-      const x = {
+      const C = {
         x: i[0].clientX,
         y: i[0].clientY
       }, $ = {
         x: i[1].clientX,
         y: i[1].clientY
-      }, [T, M] = Nt(p, f, x, $), I = se(x, $) / se(p, f);
-      c(I, "touchZoom", T, M, !0), g({
-        point1: x,
+      }, [T, O] = Pt(p, g, C, $), I = ue(C, $) / ue(p, g);
+      c(I, "touchZoom", T, O, !0), v({
+        point1: C,
         point2: $,
         eventType: "touchZoom"
       });
-    } else S === "move" && (s({
+    } else S === "move" && (r({
       x: i[0].clientX - p.x,
       y: i[0].clientY - p.y
-    }, "move"), g({ eventType: "move" }));
-  }, C = () => {
+    }, "move"), v({ eventType: "move" }));
+  }, x = () => {
     if (!o.value)
       return;
-    if (h && y(!1), g({ eventType: "none" }), l.value > t.value.scale)
-      return s({ x: 0, y: 0, scale: l.value }, "touchZoom");
-    const a = e.value.offsetWidth * t.value.scale, i = e.value.offsetHeight * t.value.scale, { left: p, top: f } = e.value.getBoundingClientRect(), S = t.value.rotate % 180 !== 0, x = He(S ? i : a, S ? a : i, p, f);
-    x && s({ ...x }, "dragRebound");
+    if (h && y(!1), v({ eventType: "none" }), l.value > t.value.scale)
+      return r({ x: 0, y: 0, scale: l.value }, "touchZoom");
+    const a = e.value.offsetWidth * t.value.scale, i = e.value.offsetHeight * t.value.scale, { left: p, top: g } = e.value.getBoundingClientRect(), S = t.value.rotate % 180 !== 0, C = Ze(S ? i : a, S ? a : i, p, g);
+    C && r({ ...C }, "dragRebound");
   };
-  return ye(() => {
+  return Ce(() => {
     let a;
-    return o.value && n.value && (a = V(window, "touchmove", (i) => i.preventDefault(), {
+    return o.value && n.value && (a = q(window, "touchmove", (i) => i.preventDefault(), {
       passive: !1
     })), () => {
       a == null || a.remove();
@@ -259,10 +259,10 @@ function Pt(e, n, o, l, t, s, c) {
     isTouching: h,
     onTouchStart: m,
     onTouchMove: w,
-    onTouchEnd: C
+    onTouchEnd: x
   };
 }
-const J = {
+const te = {
   infinite: {
     type: Boolean,
     default: !0
@@ -278,7 +278,7 @@ const J = {
   getContainer: {
     type: String
   }
-}, Ze = {
+}, We = {
   preview: {
     type: [Object, Boolean],
     default: !0
@@ -298,7 +298,7 @@ const J = {
     type: String,
     default: "contain"
   },
-  crossorigin: {
+  crossOrigin: {
     type: String
   },
   lazy: Boolean,
@@ -324,16 +324,17 @@ const J = {
   onClick: {
     type: Function
   },
-  wrapperStyle: {
+  imageStyle: {
     type: Object,
     default: () => ({})
   },
-  wrapperClass: String,
+  imageClass: String,
+  size: Number,
   width: Number,
   height: Number,
-  zIndex: J.zIndex,
-  getContainer: J.getContainer
-}, G = {
+  zIndex: te.zIndex,
+  getContainer: te.getContainer
+}, V = {
   urls: {
     type: Array,
     default: () => []
@@ -359,10 +360,10 @@ const J = {
     default: !0
   },
   disabled: Boolean,
-  zIndex: J.zIndex,
-  current: J.current,
-  infinite: J.infinite,
-  getContainer: Ze.getContainer,
+  zIndex: te.zIndex,
+  current: te.current,
+  infinite: te.infinite,
+  getContainer: We.getContainer,
   onHideOnClickModal: {
     type: Boolean,
     default: !0
@@ -375,7 +376,7 @@ const J = {
   onTransform: Function,
   onOpenChange: Function,
   "onUpdate:open": Function
-}, Xt = /* @__PURE__ */ pe({
+}, Yt = /* @__PURE__ */ Se({
   name: "Operations",
   inheritAttrs: !1,
   props: {
@@ -392,11 +393,11 @@ const J = {
     showProgress: Boolean,
     prefixCls: String,
     hashId: String,
-    zIndex: G.zIndex,
-    icons: G.icons,
-    infinite: G.infinite,
-    getContainer: G.getContainer,
-    countRender: G.countRender,
+    zIndex: V.zIndex,
+    icons: V.icons,
+    infinite: V.infinite,
+    getContainer: V.getContainer,
+    countRender: V.countRender,
     tools: Array,
     onClose: Function,
     onActive: Function
@@ -411,32 +412,32 @@ const J = {
         prefixCls: o,
         hashId: l,
         tools: t
-      } = e, s = we(`${e.prefixCls}-fade`), c = `${o}-operations-operation`, h = `${o}-operations-icon`;
-      return u(Ee, {
+      } = e, r = ye(`${e.prefixCls}-fade`), c = `${o}-operations-operation`, h = `${o}-operations-icon`;
+      return u(Te, {
         to: e.getContainer || "body"
       }, {
-        default: () => [u(ge, s, {
+        default: () => [u(he, r, {
           default: () => {
-            var y, d, g, m;
-            return [me(u("div", {
-              class: Q(`${o}-operations-wrapper`, l),
+            var y, d, v, m;
+            return [we(u("div", {
+              class: X(`${o}-operations-wrapper`, l),
               style: {
                 zIndex: e.zIndex
               }
             }, [((y = e.icons) == null ? void 0 : y.close) === null ? null : u("button", {
               class: `${o}-close ${l}`,
               onClick: e.onClose
-            }, [((d = e.icons) == null ? void 0 : d.close) || u(It, null, null)]), e.showSwitch && u(re, null, [u("div", {
-              class: Q(`${o}-switch-left ${l}`, {
+            }, [((d = e.icons) == null ? void 0 : d.close) || u(ut, null, null)]), e.showSwitch && u(se, null, [u("div", {
+              class: X(`${o}-switch-left ${l}`, {
                 [`${o}-switch-left-disabled`]: e.infinite ? !1 : e.current === 0
               }),
               onClick: (w) => n(w, -1)
-            }, [((g = e.icons) == null ? void 0 : g.left) || u(bt, null, null)]), u("div", {
-              class: Q(`${o}-switch-right ${l}`, {
+            }, [((v = e.icons) == null ? void 0 : v.left) || u(ct, null, null)]), u("div", {
+              class: X(`${o}-switch-right ${l}`, {
                 [`${o}-switch-right-disabled`]: e.infinite ? !1 : e.current === e.count - 1
               }),
               onClick: (w) => n(w, 1)
-            }, [((m = e.icons) == null ? void 0 : m.right) || u($t, null, null)])]), u("div", {
+            }, [((m = e.icons) == null ? void 0 : m.right) || u(dt, null, null)])]), u("div", {
               class: `${o}-footer ${l}`
             }, [e.showProgress && u("div", {
               class: `${o}-progress`
@@ -444,38 +445,38 @@ const J = {
               class: `${e.prefixCls}-operations`
             }, [t == null ? void 0 : t.map(({
               icon: w,
-              onClick: C,
+              onClick: x,
               type: a,
               disabled: i
             }) => u("div", {
-              class: Q(c, {
+              class: X(c, {
                 [`${e.prefixCls}-operations-operation-disabled`]: i && (i == null ? void 0 : i.value)
               }),
-              onClick: C,
+              onClick: x,
               key: a
-            }, [ot(w, {
+            }, [it(w, {
               class: h
-            })]))])])]), [[he, e.open]])];
+            })]))])])]), [[pe, e.open]])];
           }
         })]
       });
     };
   }
-}), Yt = new ue("viewFadeIn", {
+}), jt = new ce("viewFadeIn", {
   "0%": {
     opacity: 0
   },
   "100%": {
     opacity: 1
   }
-}), jt = new ue("viewFadeOut", {
+}), Bt = new ce("viewFadeOut", {
   "0%": {
     opacity: 1
   },
   "100%": {
     opacity: 0
   }
-}), Bt = new ue("viewZoomBadgeIn", {
+}), Ft = new ce("viewZoomBadgeIn", {
   "0%": {
     transform: "scale(0)",
     opacity: 0
@@ -484,7 +485,7 @@ const J = {
     transform: "scale(1)",
     opacity: 1
   }
-}), Ft = new ue("viewZoomBadgeOut", {
+}), kt = new ce("viewZoomBadgeOut", {
   "0%": {
     transform: "scale(1)"
   },
@@ -492,11 +493,11 @@ const J = {
     transform: "scale(0)",
     opacity: 0
   }
-}), Oe = (e) => ({
+}), Ae = (e) => ({
   position: e || "absolute",
   inset: 0
 });
-function fe(e) {
+function ve(e) {
   return {
     position: e,
     top: 0,
@@ -506,7 +507,7 @@ function fe(e) {
   };
 }
 const Ht = (e) => {
-  const { previewCls: n, modalMaskBg: o, marginXL: l, margin: t, colorTextLightSolid: s, previewOperationColorDisabled: c, previewOperationHoverColor: h, motionDurationSlow: y, iconCls: d } = e, g = new Z(o).setAlpha(0.1), m = g.clone().setAlpha(0.2), w = new Z(o).setAlpha(0.06);
+  const { previewCls: n, modalMaskBg: o, marginXL: l, margin: t, colorTextLightSolid: r, previewOperationColorDisabled: c, previewOperationHoverColor: h, motionDurationSlow: y, iconCls: d } = e, v = new Z(o).setAlpha(0.1), m = v.clone().setAlpha(0.2), w = new Z(o).setAlpha(0.06);
   return {
     [`${n}-footer`]: {
       position: "fixed",
@@ -534,8 +535,8 @@ const Ht = (e) => {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      color: s,
-      backgroundColor: g.toRgbString(),
+      color: r,
+      backgroundColor: v.toRgbString(),
       borderRadius: e.borderRadiusLG,
       backdropFilter: "saturate(180%) blur(10px)",
       width: e.sizeXL,
@@ -556,7 +557,7 @@ const Ht = (e) => {
       alignItems: "center",
       gap: e.sizeXXS,
       padding: e.paddingXXS,
-      backgroundColor: g.toRgbString(),
+      backgroundColor: v.toRgbString(),
       borderRadius: e.borderRadiusLG,
       backdropFilter: "saturate(180%) blur(10px)",
       "&-operation": {
@@ -566,7 +567,7 @@ const Ht = (e) => {
         width: e.sizeXL + 4,
         height: e.sizeXL + 4,
         cursor: "pointer",
-        color: s,
+        color: r,
         borderRadius: e.borderRadiusSM,
         transition: `all ${y}`,
         userSelect: "none",
@@ -590,12 +591,12 @@ const Ht = (e) => {
     }
   };
 }, Zt = (e) => {
-  const { modalMaskBg: n, iconCls: o, previewOperationColorDisabled: l, previewCls: t, zIndexPopup: s, motionDurationSlow: c, colorTextLightSolid: h } = e, y = new Z(n).setAlpha(0.1), d = y.clone().setAlpha(0.2);
+  const { modalMaskBg: n, iconCls: o, previewOperationColorDisabled: l, previewCls: t, zIndexPopup: r, motionDurationSlow: c, colorTextLightSolid: h } = e, y = new Z(n).setAlpha(0.1), d = y.clone().setAlpha(0.2);
   return {
     [`${t}-switch-left, ${t}-switch-right`]: {
       position: "fixed",
       insetBlockStart: "50%",
-      zIndex: e.calc(s).add(1).equal(),
+      zIndex: e.calc(r).add(1).equal(),
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -634,7 +635,7 @@ const Ht = (e) => {
       insetInlineEnd: e.marginSM
     }
   };
-}, kt = (e) => {
+}, Wt = (e) => {
   const { motionEaseOut: n, motionDurationSlow: o } = e;
   return {
     [e.componentCls]: {
@@ -642,28 +643,28 @@ const Ht = (e) => {
       textAlign: "center",
       pointerEvents: "none",
       "&-root": {
-        ...fe("fixed"),
+        ...ve("fixed"),
         zIndex: e.zIndexPopup,
         overflow: "auto",
         outline: 0,
         WebkitOverflowScrolling: "touch"
       },
       "&-wrap": {
-        ...fe("fixed"),
+        ...ve("fixed"),
         zIndex: e.zIndexPopup,
         overflow: "auto",
         outline: 0,
         WebkitOverflowScrolling: "touch"
       },
       "&-mask": {
-        ...fe("fixed"),
+        ...ve("fixed"),
         zIndex: e.zIndexPopupBase,
         height: "100%",
         backgroundColor: e.colorBgMask,
         backdropFilter: "blur(2px)"
       },
       "&-body": {
-        ...Oe(),
+        ...Ae(),
         overflow: "hidden"
       },
       "&-img": {
@@ -675,7 +676,7 @@ const Ht = (e) => {
         transition: `transform ${o} ${n} 0s`,
         userSelect: "none",
         "&-wrapper": {
-          ...Oe(),
+          ...Ae(),
           transition: `transform ${o} ${n} 0s`,
           display: "flex",
           justifyContent: "center",
@@ -701,19 +702,19 @@ const Ht = (e) => {
         }
       },
       "&-mask-zoom-appear, &-mask-zoom-enter": {
-        animationName: Yt,
+        animationName: jt,
         animationDuration: e.motionDurationSlow,
         animationTimingFunction: "linear",
         userSelect: "none"
       },
       "&-mask-zoom-leave": {
-        animationName: jt,
+        animationName: Bt,
         animationDuration: e.motionDurationSlow,
         animationTimingFunction: "linear",
         pointerEvents: "none"
       },
       "&-zoom-appear, &-zoom-enter": {
-        animationName: Bt,
+        animationName: Ft,
         opacity: 0,
         animationTimingFunction: e.motionEaseOutCirc,
         animationFillMode: "both",
@@ -725,7 +726,7 @@ const Ht = (e) => {
         animationPlayState: "running"
       },
       "&-zoom-leave": {
-        animationName: Ft,
+        animationName: kt,
         animationDuration: e.motionDurationSlow,
         animationTimingFunction: e.motionEaseInOutCirc,
         animationFillMode: "both"
@@ -746,9 +747,9 @@ const Ht = (e) => {
     "&": [Ht(e), Zt(e)]
   };
 };
-function Wt(e) {
-  return ut("ImageViewer", (n) => {
-    const o = ct(n, {
+function _t(e) {
+  return wt("ImageViewer", (n) => {
+    const o = pt(n, {
       zIndexPopup: n.zIndexPopupBase + 80,
       previewOperationColor: new Z(n.colorTextLightSolid).setAlpha(0.65).toRgbString(),
       previewOperationHoverColor: new Z(n.colorTextLightSolid).setAlpha(0.85).toRgbString(),
@@ -761,10 +762,10 @@ function Wt(e) {
       iconCls: ".anticon",
       previewCls: n.componentCls
     });
-    return [kt(o)];
+    return [Wt(o)];
   }, e);
 }
-const ve = {
+const ge = {
   /**
    * ESC
    */
@@ -779,18 +780,18 @@ const ve = {
    * RIGHT
    */
   RIGHT: 39
-}, _ = {
-  rotateLeft: u(Ot, null, null),
-  rotateRight: u(Mt, null, null),
-  zoomIn: u(Lt, null, null),
-  zoomOut: u(zt, null, null),
+}, U = {
+  rotateLeft: u(mt, null, null),
+  rotateRight: u(gt, null, null),
+  zoomIn: u(vt, null, null),
+  zoomOut: u(ft, null, null),
   flipX: u(ze, null, null),
   flipY: u(ze, {
     rotate: 90
   }, null)
-}, ke = ["close", "left", "right", "rotateRight", "rotateRight", "zoomOut", "flipX", "flipY", "rotateLeft"], _t = /* @__PURE__ */ pe({
+}, _e = ["close", "left", "right", "rotateRight", "rotateRight", "zoomOut", "flipX", "flipY", "rotateLeft"], Gt = /* @__PURE__ */ Se({
   name: "GImagePreview",
-  props: G,
+  props: V,
   inheritAttrs: !1,
   slots: Object,
   emits: {
@@ -803,179 +804,179 @@ const ve = {
     expose: o,
     slots: l
   }) => {
-    const t = De({
+    const t = Re({
       suffixCls: "image-view"
     }), {
-      wrapSSR: s,
+      wrapSSR: r,
       hashId: c
-    } = Wt(t), [h, y, d] = At(e.open, {
-      value: F(e, "open"),
-      onChange: (r) => {
+    } = _t(t), [h, y, d] = Et(e.open, {
+      value: k(e, "open"),
+      onChange: (s) => {
         var z;
-        (z = e.onOpenChange) == null || z.call(e, r), n("update:open", r);
+        (z = e.onOpenChange) == null || z.call(e, s), n("update:open", s);
       }
-    }), [g, m] = ee(!1), [w, C] = ee(!0), a = L(), {
+    }), [v, m] = ne(!1), [w, x] = ne(!0), a = L(), {
       transform: i,
       resetTransform: p,
-      updateTransform: f,
+      updateTransform: g,
       dispatchZoomChange: S
-    } = Et(a, F(e, "minScale"), F(e, "maxScale"), e.onTransform), {
-      isMoving: x,
+    } = Tt(a, k(e, "minScale"), k(e, "maxScale"), e.onTransform), {
+      isMoving: C,
       onMouseDown: $,
       onWheel: T
-    } = Rt(a, F(e, "movable"), d, F(e, "scaleStep"), i, f, S), {
-      isTouching: M,
+    } = Nt(a, k(e, "movable"), d, k(e, "scaleStep"), i, g, S), {
+      isTouching: O,
       onTouchStart: I,
-      onTouchMove: B,
-      onTouchEnd: k
-    } = Pt(a, F(e, "movable"), d, F(e, "minScale"), i, f, S);
-    ye(() => {
-      w.value || C(!0);
+      onTouchMove: F,
+      onTouchEnd: W
+    } = Xt(a, k(e, "movable"), d, k(e, "minScale"), i, g, S);
+    Ce(() => {
+      w.value || x(!0);
     }, [w]);
-    const N = L(null), O = L(e.current), P = it(/* @__PURE__ */ new Map()), X = b(() => new Map(Array.from(P).map(([r, {
+    const N = L(null), M = L(e.current), P = at(/* @__PURE__ */ new Map()), Y = b(() => new Map(Array.from(P).map(([s, {
       url: z
-    }]) => [r, z]))), W = b(() => X.value.get(O.value)), Y = b(() => X.value.size), j = b(() => Array.from(X.value.keys())), D = b(() => j.value.indexOf(O.value)), v = b(() => Y.value > 1), A = b(() => Y.value >= 1);
-    K(d, (r) => {
-      r && (g.value = !0);
+    }]) => [s, z]))), _ = b(() => Y.value.get(M.value)), j = b(() => Y.value.size), B = b(() => Array.from(Y.value.keys())), D = b(() => B.value.indexOf(M.value)), f = b(() => j.value > 1), A = b(() => j.value >= 1);
+    J(d, (s) => {
+      s && (v.value = !0);
     });
-    const E = (r) => {
-      O.value = r;
+    const E = (s) => {
+      M.value = s;
     };
-    K(() => e.current, (r) => {
-      Re(r) && E(r);
+    J(() => e.current, (s) => {
+      Ne(s) && E(s);
     });
-    function te(r, z) {
-      P.set(r, {
+    function de(s, z) {
+      P.set(s, {
         url: z,
         loading: !0,
         canPreview: !1
       });
     }
-    const ce = () => {
+    const G = () => {
       m(!1);
-    }, We = () => {
+    }, oe = () => {
       p("close"), n("close");
-    }, _e = (r) => {
-      x.value || N.value === (r == null ? void 0 : r.target) && ce();
-    }, Ge = () => {
-      const r = P.get(O.value);
-      r && (r.loading = !1, r.canPreview = !0);
-    }, Ve = (r) => {
-      const z = P.get(O.value);
-      z && (z.loading = !1, z.canPreview = !1), r.target.alt = "加载失败";
-    }, Ce = () => {
+    }, Ge = (s) => {
+      C.value || N.value === (s == null ? void 0 : s.target) && G();
+    }, Ue = () => {
+      const s = P.get(M.value);
+      s && (s.loading = !1, s.canPreview = !0);
+    }, Ve = (s) => {
+      const z = P.get(M.value);
+      z && (z.loading = !1, z.canPreview = !1), s.target.alt = "加载失败";
+    }, Ie = () => {
       if (D.value > 0 || e.infinite) {
-        const r = D.value - 1 < 0 ? e.urls.length - 1 : D.value - 1;
-        E(j.value[r]), p("prev");
+        const s = D.value - 1 < 0 ? e.urls.length - 1 : D.value - 1;
+        E(B.value[s]), p("prev");
       }
-    }, xe = () => {
-      if (D.value < Y.value - 1 || e.infinite) {
-        const r = D.value + 1 > e.urls.length - 1 ? 0 : D.value + 1;
-        E(j.value[r]), p("next");
+    }, be = () => {
+      if (D.value < j.value - 1 || e.infinite) {
+        const s = D.value + 1 > e.urls.length - 1 ? 0 : D.value + 1;
+        E(B.value[s]), p("next");
       }
-    }, Ue = () => {
-      S(U + e.scaleStep, "zoomIn");
     }, qe = () => {
-      S(U / (U + e.scaleStep), "zoomOut");
+      S(K + e.scaleStep, "zoomIn");
     }, Ke = () => {
-      f({
+      S(K / (K + e.scaleStep), "zoomOut");
+    }, Qe = () => {
+      g({
         rotate: i.value.rotate + 90
       }, "rotateRight");
-    }, Qe = () => {
-      f({
+    }, Je = () => {
+      g({
         rotate: i.value.rotate - 90
       }, "rotateLeft");
-    }, Je = () => {
-      f({
+    }, et = () => {
+      g({
         flipX: !i.value.flipX
       }, "flipX");
-    }, et = () => {
-      f({
+    }, tt = () => {
+      g({
         flipY: !i.value.flipY
       }, "flipY");
-    }, Ie = [{
-      icon: H(l, e.icons, "flipY") || _.flipY,
-      onClick: et,
+    }, $e = [{
+      icon: H(l, e.icons, "flipY") || U.flipY,
+      onClick: tt,
       type: "flipY"
     }, {
-      icon: H(l, e.icons, "flipX") || _.flipX,
-      onClick: Je,
+      icon: H(l, e.icons, "flipX") || U.flipX,
+      onClick: et,
       type: "flipX"
     }, {
-      icon: H(l, e.icons, "rotateLeft") || _.rotateLeft,
-      onClick: Qe,
+      icon: H(l, e.icons, "rotateLeft") || U.rotateLeft,
+      onClick: Je,
       type: "rotateLeft"
     }, {
-      icon: H(l, e.icons, "rotateRight") || _.rotateRight,
-      onClick: Ke,
+      icon: H(l, e.icons, "rotateRight") || U.rotateRight,
+      onClick: Qe,
       type: "rotateRight"
     }, {
-      icon: H(l, e.icons, "zoomOut") || _.zoomOut,
-      onClick: () => qe(),
+      icon: H(l, e.icons, "zoomOut") || U.zoomOut,
+      onClick: () => Ke(),
       type: "zoomOut",
       disabled: b(() => i.value.scale <= e.minScale)
     }, {
-      icon: H(l, e.icons, "zoomIn") || _.zoomIn,
-      onClick: () => Ue(),
+      icon: H(l, e.icons, "zoomIn") || U.zoomIn,
+      onClick: () => qe(),
       type: "zoomIn",
       disabled: b(() => i.value.scale === e.maxScale)
-    }], tt = (r) => {
-      d.value && (i.value.scale !== 1 ? f({
+    }], nt = (s) => {
+      d.value && (i.value.scale !== 1 ? g({
         x: 0,
         y: 0,
         scale: 1
-      }, "doubleClick") : S(U + e.scaleStep, "doubleClick", r.clientX, r.clientY));
-    }, nt = (r) => {
-      r.keyCode === ve.ESC && ce(), !(!d.value || !v.value) && (r.keyCode === ve.LEFT ? Ce() : r.keyCode === ve.RIGHT && xe());
+      }, "doubleClick") : S(K + e.scaleStep, "doubleClick", s.clientX, s.clientY));
+    }, ot = (s) => {
+      s.keyCode === ge.ESC && G(), !(!d.value || !f.value) && (s.keyCode === ge.LEFT ? Ie() : s.keyCode === ge.RIGHT && be());
     };
-    let de = () => {
+    let fe = () => {
     };
-    return Te(() => {
-      K(() => e.urls, (r) => {
-        ft(r) && r.forEach((z, ne) => {
-          te(ne, z);
+    return De(() => {
+      J(() => e.urls, (s) => {
+        Ct(s) && s.forEach((z, ie) => {
+          de(ie, z);
         });
       }, {
         flush: "post",
         immediate: !0
-      }), K([() => d.value, () => x.value], () => {
-        de();
-        const r = V(window, "keydown", nt, !1);
-        de = () => {
-          r.remove();
+      }), J([() => d.value, () => C.value], () => {
+        fe();
+        const s = q(window, "keydown", ot, !1);
+        fe = () => {
+          s.remove();
         };
       }, {
         flush: "post",
         immediate: !0
       });
-    }), at(() => {
-      de();
+    }), lt(() => {
+      fe();
     }), o({
-      setOpen: (r) => {
-        y(r), O.value = e.current;
+      setOpen: (s) => {
+        y(s), M.value = e.current;
       }
     }), () => {
-      const r = we(`${t}-mask-zoom`), z = we(`${t}-zoom`), ne = {};
+      const s = ye(`${t}-mask-zoom`), z = ye(`${t}-zoom`), ie = {};
       for (const R in e.icons)
-        ne[R] = H(l, e.icons, R);
-      return s(u(re, null, [u(Ee, {
+        ie[R] = H(l, e.icons, R);
+      return r(u(se, null, [u(Te, {
         to: e.getContainer || "body"
       }, {
-        default: () => [d.value && u(re, null, [u("div", {
+        default: () => [d.value && u(se, null, [u("div", {
           class: `${t}-root ${c.value}`
-        }, [u(ge, r, {
-          default: () => [me(u("div", {
+        }, [u(he, s, {
+          default: () => [we(u("div", {
             class: `${t}-mask ${c.value}`
-          }, null), [[he, d.value && g.value]])]
+          }, null), [[pe, d.value && v.value]])]
         }), u("div", {
           ref: N,
           tabindex: -1,
-          class: [`${t}-wrap`, `${c.value}`, x.value && `${t}-moving`],
-          onClick: (R) => e.onHideOnClickModal && _e(R)
-        }, [u(ge, ae(z, {
-          onAfterLeave: () => We()
+          class: [`${t}-wrap`, `${c.value}`, C.value && `${t}-moving`],
+          onClick: (R) => e.onHideOnClickModal && Ge(R)
+        }, [u(he, le(z, {
+          onAfterLeave: () => oe()
         }), {
-          default: () => [me(u("div", {
+          default: () => [we(u("div", {
             role: "dialog",
             class: `${t} ${c.value}`
           }, [u("div", {
@@ -987,97 +988,119 @@ const ve = {
           }, [u("img", {
             ref: a,
             class: `${t}-img ${c.value}`,
-            src: W.value,
-            onLoad: () => Ge(),
+            src: _.value,
+            onLoad: () => Ue(),
             onError: (R) => Ve(R),
             style: {
               transform: `translate3d(${i.value.x}px, ${i.value.y}px, 0) scale3d(${i.value.flipX ? "-" : ""}${i.value.scale}, ${i.value.flipY ? "-" : ""}${i.value.scale}, 1) rotate(${i.value.rotate}deg)`,
-              transitionDuration: !w.value || M.value ? "0s" : void 0
+              transitionDuration: !w.value || O.value ? "0s" : void 0
             },
             onWheel: T,
             onMousedown: $,
-            onDblclick: tt,
+            onDblclick: nt,
             onTouchstart: I,
-            onTouchmove: B,
-            onTouchend: k,
-            onTouchcancel: k
-          }, null)])])])]), [[he, d.value && g.value]])]
+            onTouchmove: F,
+            onTouchend: W,
+            onTouchcancel: W
+          }, null)])])])]), [[pe, d.value && v.value]])]
         })])])])]
-      }), d.value && g.value && u(Xt, {
-        open: d.value && g.value,
+      }), d.value && v.value && u(Yt, {
+        open: d.value && v.value,
         hashId: c.value,
         count: e.urls.length,
-        current: O.value,
+        current: M.value,
         zIndex: e.zIndex + 1,
         getContainer: e.getContainer,
         prefixCls: t,
-        icons: Pe(ne, Ie.map(({
+        icons: Ye(ie, $e.map(({
           type: R
         }) => R)),
-        tools: Ie,
+        tools: $e,
         infinite: e.infinite,
-        countRender: vt(l, e, "countRenders"),
-        showSwitch: v.value,
+        countRender: Pe(l, e, "countRenders"),
+        showSwitch: f.value,
         showProgress: A.value,
-        onClose: ce,
-        onActive: (R) => R > 0 ? xe() : Ce()
+        onClose: G,
+        onActive: (R) => R > 0 ? be() : Ie()
       }, null)]));
     };
   }
-}), ie = {
+}), me = {
   width: "100%",
   height: "100%"
-}, Gt = () => ({
-  position: "absolute",
-  inset: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  cursor: "pointer",
-  opacity: 0
-}), Vt = (e) => ({
+}, Ut = {
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis"
+}, Vt = (e) => {
+  const { motionDurationSlow: n, paddingXXS: o, marginXXS: l, colorTextLightSolid: t } = e, r = ".anticon";
+  return {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: t,
+    background: new yt("#000").setA(0.5).toRgbString(),
+    cursor: "pointer",
+    opacity: 0,
+    transition: `opacity ${n}`,
+    [`.${e.componentCls}-mask-info`]: {
+      ...Ut,
+      padding: `0 ${ee(o)}`,
+      [r]: {
+        marginInlineEnd: l,
+        svg: {
+          verticalAlign: "baseline"
+        }
+      }
+    }
+  };
+}, qt = (e) => ({
   position: e || "absolute",
   inset: 0
-}), Ut = (e) => ({
+}), Kt = (e) => ({
   [e.componentCls]: {
     display: "inline-block",
     position: "relative",
     overflow: "hidden",
-    "&-inner": {
-      ...ie,
+    [`${e.componentCls}-img`]: {
+      ...me,
       verticalAlign: "top",
       opacity: 1,
-      [`&${e.componentCls}-inner-preview`]: {
+      [`&${e.componentCls}-img-preview`]: {
         userSelect: "none",
         cursor: "pointer"
+      },
+      "&-placeholder": {
+        ...me,
+        backgroundColor: e.colorBgContainerDisabled,
+        backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center center",
+        backgroundSize: "30%"
       }
     },
-    "&-wrapper": {
-      ...ie,
-      ...Vt()
-    },
-    "&-placeholder": {
-      ...ie,
-      backgroundColor: e.colorBgContainerDisabled,
-      backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
-      backgroundRepeat: "no-repeat",
-      backgroundPosition: "center center",
-      backgroundSize: "30%"
-    },
-    "&-error": {
-      ...ie,
+    [`${e.componentCls}-error`]: {
+      ...me,
       display: "flex",
       alignItems: "center",
-      justifyContent: "center",
-      color: e.colorText,
-      backgroundColor: e.colorBgContainerDisabled
+      justifyContent: "center"
     },
-    "&-preview": Gt()
+    [`${e.componentCls}-placeholder`]: {
+      ...qt()
+    },
+    [`${e.componentCls}-mask`]: {
+      ...Vt(e)
+    },
+    [`${e.componentCls}-mask:hover`]: {
+      opacity: 1
+    }
   }
-}), qt = (e) => typeof Element > "u" ? !1 : e instanceof Element;
-let Ae = "";
-const Kt = [...ke, "fallback", "placeholder"], le = /* @__PURE__ */ pe({
-  props: Ze,
+}), Qt = (e) => typeof Element > "u" ? !1 : e instanceof Element;
+let Ee = "";
+const Jt = [..._e, "placeholder", "fallback"], re = /* @__PURE__ */ Se({
+  props: We,
   name: "GImage",
   inheritAttrs: !1,
   emits: {
@@ -1091,120 +1114,128 @@ const Kt = [...ke, "fallback", "placeholder"], le = /* @__PURE__ */ pe({
     emit: o,
     attrs: l
   }) {
-    const t = q && "loading" in HTMLImageElement.prototype, s = De({
+    const t = Q && "loading" in HTMLImageElement.prototype, r = Re({
       suffixCls: "image"
     }), {
       wrapSSR: c,
       hashId: h
-    } = dt("Image", [Ut], s), y = L(), d = L(), g = L(!1), m = L(!0), w = L(!1), C = L(), a = L();
+    } = St("Image", [Kt], r), y = L(), d = L(), v = L(!1), m = L(!0), w = L(!1), x = L(), a = L();
     let i, p;
-    const f = b(() => e.loading === "eager" ? !1 : !t && e.loading === "lazy" || e.lazy), S = b(() => q && e.fit ? {
+    const g = b(() => e.loading === "eager" ? !1 : !t && e.loading === "lazy" || e.lazy), S = b(() => Q && e.fit ? {
+      ...e.imageStyle,
       objectFit: e.fit
-    } : {}), x = b(() => typeof e.preview == "object" ? e.preview : {}), $ = b(() => !!e.preview), T = b(() => {
+    } : e.imageStyle), C = b(() => typeof e.preview == "object" ? e.preview : {}), $ = b(() => !!e.preview), T = b(() => {
       const {
-        urls: v = [],
+        urls: f = [],
         current: A = 0
-      } = x.value;
-      if (Re(A)) return v.length >= A ? A : 0;
-      const E = v.indexOf(e.src);
+      } = C.value;
+      if (Ne(A)) return f.length >= A ? A : 0;
+      const E = f.indexOf(e.src);
       return E >= 0 ? E : 0;
-    }), M = b(() => be(e.width)), I = b(() => be(e.height)), B = () => {
-      q && (m.value = !0, g.value = !1, d.value = e.src);
+    }), O = b(() => ee(e.width)), I = b(() => ee(e.height)), F = () => {
+      Q && (m.value = !0, v.value = !1, d.value = e.src);
     };
-    function k(v) {
-      m.value = !1, g.value = !1, o("load", v);
+    function W(f) {
+      v.value || (m.value = !1, v.value = !1, o("load", f));
     }
-    function N(v) {
-      m.value = !1, g.value = !0, o("error", v);
+    function N(f) {
+      m.value = !1, v.value = !0, o("error", f);
     }
-    function O() {
-      mt(C.value, a.value) && (B(), W());
+    function M() {
+      It(x.value, a.value) && (F(), _());
     }
-    const P = pt(O, 200, !0);
-    async function X() {
-      if (!q) return;
+    const P = zt(M, 200, !0);
+    async function Y() {
+      if (!Q) return;
       await st();
       const {
-        scrollContainer: v
+        scrollContainer: f
       } = e;
-      qt(v) ? a.value = v : ht(v) && v !== "" ? a.value = document.querySelector(v) ?? void 0 : C.value && (a.value = wt(C.value)), a.value && (i = $e(a, "scroll", P), setTimeout(() => O(), 100));
+      Qt(f) ? a.value = f : bt(f) && f !== "" ? a.value = document.querySelector(f) ?? void 0 : x.value && (a.value = $t(x.value)), a.value && (i = Le(a, "scroll", P), setTimeout(() => M(), 100));
     }
-    function W() {
-      !q || !a.value || !P || (i == null || i(), a.value = void 0);
+    function _() {
+      !Q || !a.value || !P || (i == null || i(), a.value = void 0);
     }
-    function Y(v) {
-      if (v.ctrlKey) {
-        if (v.deltaY < 0)
-          return v.preventDefault(), !1;
-        if (v.deltaY > 0)
-          return v.preventDefault(), !1;
+    function j(f) {
+      if (f.ctrlKey) {
+        if (f.deltaY < 0)
+          return f.preventDefault(), !1;
+        if (f.deltaY > 0)
+          return f.preventDefault(), !1;
       }
     }
-    const j = () => {
-      o("click"), !(m.value || g.value) && $.value && (p = $e("wheel", Y, {
+    const B = () => {
+      o("click"), !(m.value || v.value) && $.value && (p = Le("wheel", j, {
         passive: !1
-      }), Ae = document.body.style.overflow, document.body.style.overflow = "hidden", w.value = !0);
+      }), Ee = document.body.style.overflow, document.body.style.overflow = "hidden", w.value = !0);
     }, D = () => {
-      p == null || p(), document.body.style.overflow = Ae, w.value = !1;
+      p == null || p(), document.body.style.overflow = Ee, w.value = !1;
     };
-    return K(() => e.src, () => {
-      f.value ? (m.value = !0, g.value = !1, W(), X()) : B();
-    }), lt(() => {
-      var v, A;
-      $.value && w.value ? (v = y.value) == null || v.setOpen(!0) : (A = y.value) == null || A.setOpen(!1);
-    }), Te(() => {
-      f.value ? X() : B();
+    return J(() => e.src, () => {
+      g.value ? (m.value = !0, v.value = !1, _(), Y()) : F();
+    }), rt(() => {
+      var f, A;
+      $.value && w.value ? (f = y.value) == null || f.setOpen(!0) : (A = y.value) == null || A.setOpen(!1);
+    }), De(() => {
+      g.value ? Y() : F();
     }), () => {
-      const v = Ct(Object.entries(l).filter(([te]) => /^(?:data-|on[A-Z])/i.test(te) || ["id", "style"].includes(te))), A = Pe(l, Object.keys(v)), E = gt(Kt, n, e, {
+      var G;
+      const f = Mt(Object.entries(l).filter(([oe]) => /^(?:data-|on[A-Z])/i.test(oe) || ["id", "style", "class"].includes(oe))), A = Ye(l, Object.keys(f)), E = xt(Jt, n, e, {
         render: !0
-      });
-      return c(u("div", ae({
+      }), de = Pe(n, e, ["preview", "mask"], !0);
+      return c(u("div", le({
         class: {
           [`${h.value}`]: !0,
-          [`${s}`]: !0,
-          [`${l.class}`]: !!l.class
+          [`${r}`]: !0
         },
-        ref: C
-      }, v), [g.value ? E.fallback || u("div", {
-        "aria-hidden": "true",
-        class: `${s}-error ${h.value}`
-      }, [rt("加载失败")]) : u(re, null, [d.value !== void 0 && u("img", ae(A, {
+        ref: x
+      }, f, {
+        style: {
+          width: ee(e.size) || O.value,
+          height: ee(e.size) || I.value,
+          ...f.style || {}
+        }
+      }), [v.value ? u("div", {
+        class: X(h.value, `${r}-error`)
+      }, [E.fallback]) : u(se, null, [u("img", le(A, {
         src: d.value,
         loading: e.loading,
         style: S.value,
-        class: {
-          [`${h.value}`]: !0,
-          [`${s}-placeholder`]: m.value,
-          [`${s}-inner`]: !0,
-          [`${s}-inner-preview`]: $.value
-        },
-        crossorigin: e.crossorigin,
-        width: M.value,
+        class: X(h.value, e.imageClass, `${r}-img`, {
+          [`${r}-img-placeholder`]: e.placeholder === !0,
+          [`${r}-img-preview`]: $.value
+        }),
+        crossorigin: e.crossOrigin,
+        width: O.value,
         height: I.value,
-        onClick: j,
-        onLoad: k,
+        onClick: B,
+        onLoad: W,
         onError: N
       }), null), m.value && u("div", {
-        class: Q(`${s}-wrapper`, h.value)
-      }, [E.placeholder || u("div", {
-        "aria-hidden": "true",
-        class: `${s}-placeholder ${h.value}`
-      }, null)])]), $.value && u(_t, ae({
+        class: X(`${r}-placeholder`, h.value)
+      }, [E.placeholder])]), C.value.mask && $.value && u("div", {
+        class: X(`${r}-mask`, C.value.maskClass, h.value),
+        style: {
+          display: ((G = f.style) == null ? void 0 : G.display) === "none" ? "none" : void 0
+        }
+      }, [de || u("div", {
+        class: X(`${r}-mask-info`, h.value)
+      }, [u(ht, null, null)])]), $.value && u(Gt, le({
         ref: y
-      }, x.value, xt(E, ke), {
-        urls: x.value.urls || [e.src],
+      }, C.value, At(E, _e), {
+        urls: C.value.urls || [e.src],
         current: T.value,
         onClose: () => D()
       }), null)]));
     };
   }
 });
-le.isGImage = !0;
-le.install = (e) => (e.component(le.name, le), e);
+re.isGImage = !0;
+re.install = (e) => (e.component(re.name, re), e);
 export {
-  le as GImage,
-  _t as GImagePreview,
-  J as baseProps,
-  le as default,
-  Ze as imageProps
+  re as GImage,
+  Gt as GImagePreview,
+  te as baseProps,
+  re as default,
+  We as imageProps
 };