@ibiz-template-plugin/ibiz-file-previewer 0.0.7 → 0.0.9

package/dist/index.es.js

@@ -2,7 +2,7 @@ import './style.css';
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var n$1, l$3, u$3, t$2, i$2, o$2, r$1, e$2, f$3, c$2, s$3, a$2, p$3 = {}, v$3 = [], y$2 = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i, d$2 = Array.isArray;
+var n$1, l$3, u$3, t$2, i$2, o$2, r$1, e$2, f$3, c$2, s$3, a$2, p$3 = {}, v$3 = [], y$2 = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i, d$3 = Array.isArray;
 function w$2(n2, l2) {
   for (var u2 in l2) n2[u2] = l2[u2];
   return n2;
@@ -55,8 +55,8 @@ function I(n2, l2, u2, t2, i2, o2, r2, e2, f2, c2, s2) {
 }
 function P$1(n2, l2, u2, t2, i2) {
   var o2, r2, e2, f2, c2, s2 = u2.length, a2 = s2, h2 = 0;
-  for (n2.__k = new Array(i2), o2 = 0; o2 < i2; o2++) null != (r2 = l2[o2]) && "boolean" != typeof r2 && "function" != typeof r2 ? ("string" == typeof r2 || "number" == typeof r2 || "bigint" == typeof r2 || r2.constructor == String ? r2 = n2.__k[o2] = m$1(null, r2, null, null, null) : d$2(r2) ? r2 = n2.__k[o2] = m$1(k$1, { children: r2 }, null, null, null) : void 0 === r2.constructor && r2.__b > 0 ? r2 = n2.__k[o2] = m$1(r2.type, r2.props, r2.key, r2.ref ? r2.ref : null, r2.__v) : n2.__k[o2] = r2, f2 = o2 + h2, r2.__ = n2, r2.__b = n2.__b + 1, e2 = null, -1 != (c2 = r2.__i = L(r2, u2, f2, a2)) && (a2--, (e2 = u2[c2]) && (e2.__u |= 2)), null == e2 || null == e2.__v ? (-1 == c2 && (i2 > s2 ? h2-- : i2 < s2 && h2++), "function" != typeof r2.type && (r2.__u |= 4)) : c2 != f2 && (c2 == f2 - 1 ? h2-- : c2 == f2 + 1 ? h2++ : (c2 > f2 ? h2-- : h2++, r2.__u |= 4))) : n2.__k[o2] = null;
-  if (a2) for (o2 = 0; o2 < s2; o2++) null != (e2 = u2[o2]) && 0 == (2 & e2.__u) && (e2.__e == t2 && (t2 = S(e2)), D(e2, e2));
+  for (n2.__k = new Array(i2), o2 = 0; o2 < i2; o2++) null != (r2 = l2[o2]) && "boolean" != typeof r2 && "function" != typeof r2 ? ("string" == typeof r2 || "number" == typeof r2 || "bigint" == typeof r2 || r2.constructor == String ? r2 = n2.__k[o2] = m$1(null, r2, null, null, null) : d$3(r2) ? r2 = n2.__k[o2] = m$1(k$1, { children: r2 }, null, null, null) : void 0 === r2.constructor && r2.__b > 0 ? r2 = n2.__k[o2] = m$1(r2.type, r2.props, r2.key, r2.ref ? r2.ref : null, r2.__v) : n2.__k[o2] = r2, f2 = o2 + h2, r2.__ = n2, r2.__b = n2.__b + 1, e2 = null, -1 != (c2 = r2.__i = L(r2, u2, f2, a2)) && (a2--, (e2 = u2[c2]) && (e2.__u |= 2)), null == e2 || null == e2.__v ? (-1 == c2 && (i2 > s2 ? h2-- : i2 < s2 && h2++), "function" != typeof r2.type && (r2.__u |= 4)) : c2 != f2 && (c2 == f2 - 1 ? h2-- : c2 == f2 + 1 ? h2++ : (c2 > f2 ? h2-- : h2++, r2.__u |= 4))) : n2.__k[o2] = null;
+  if (a2) for (o2 = 0; o2 < s2; o2++) null != (e2 = u2[o2]) && 0 == (2 & e2.__u) && (e2.__e == t2 && (t2 = S(e2)), D$1(e2, e2));
   return t2;
 }
 function A$1(n2, l2, u2, t2) {
@@ -72,7 +72,7 @@ function A$1(n2, l2, u2, t2) {
   return l2;
 }
 function H$1(n2, l2) {
-  return l2 = l2 || [], null == n2 || "boolean" == typeof n2 || (d$2(n2) ? n2.some(function(n3) {
+  return l2 = l2 || [], null == n2 || "boolean" == typeof n2 || (d$3(n2) ? n2.some(function(n3) {
     H$1(n3, l2);
   }) : l2.push(n2)), l2;
 }
@@ -139,7 +139,7 @@ function O(n2, u2, t2, i2, o2, r2, e2, f2, c2, s2) {
     } else do {
       h2.__d = false, P2 && P2(u2), a2 = h2.render(h2.props, h2.state, h2.context), h2.state = h2.__s;
     } while (h2.__d && ++A2 < 25);
-    h2.state = h2.__s, null != h2.getChildContext && (i2 = w$2(w$2({}, i2), h2.getChildContext())), S2 && !p2 && null != h2.getSnapshotBeforeUpdate && (_2 = h2.getSnapshotBeforeUpdate(v2, y2)), L2 = a2, null != a2 && a2.type === k$1 && null == a2.key && (L2 = V$1(a2.props.children)), f2 = I(n2, d$2(L2) ? L2 : [L2], u2, t2, i2, o2, r2, e2, f2, c2, s2), h2.base = u2.__e, u2.__u &= -161, h2.__h.length && e2.push(h2), m2 && (h2.__E = h2.__ = null);
+    h2.state = h2.__s, null != h2.getChildContext && (i2 = w$2(w$2({}, i2), h2.getChildContext())), S2 && !p2 && null != h2.getSnapshotBeforeUpdate && (_2 = h2.getSnapshotBeforeUpdate(v2, y2)), L2 = a2, null != a2 && a2.type === k$1 && null == a2.key && (L2 = V$1(a2.props.children)), f2 = I(n2, d$3(L2) ? L2 : [L2], u2, t2, i2, o2, r2, e2, f2, c2, s2), h2.base = u2.__e, u2.__u &= -161, h2.__h.length && e2.push(h2), m2 && (h2.__E = h2.__ = null);
   } catch (n3) {
     if (u2.__v = null, c2 || null != r2) if (n3.then) {
       for (u2.__u |= c2 ? 160 : 128; f2 && 8 == f2.nodeType && f2.nextSibling; ) f2 = f2.nextSibling;
@@ -151,7 +151,7 @@ function O(n2, u2, t2, i2, o2, r2, e2, f2, c2, s2) {
     else u2.__e = t2.__e, u2.__k = t2.__k, n3.then || z$1(u2);
     l$3.__e(n3, u2, t2);
   }
-  else null == r2 && u2.__v == t2.__v ? (u2.__k = t2.__k, u2.__e = t2.__e) : f2 = u2.__e = q$1(t2.__e, u2, t2, i2, o2, r2, e2, c2, s2);
+  else null == r2 && u2.__v == t2.__v ? (u2.__k = t2.__k, u2.__e = t2.__e) : f2 = u2.__e = q$2(t2.__e, u2, t2, i2, o2, r2, e2, c2, s2);
   return (a2 = l$3.diffed) && a2(u2), 128 & u2.__u ? void 0 : f2;
 }
 function z$1(n2) {
@@ -170,9 +170,9 @@ function N$1(n2, u2, t2) {
   });
 }
 function V$1(n2) {
-  return "object" != typeof n2 || null == n2 || n2.__b && n2.__b > 0 ? n2 : d$2(n2) ? n2.map(V$1) : w$2({}, n2);
+  return "object" != typeof n2 || null == n2 || n2.__b && n2.__b > 0 ? n2 : d$3(n2) ? n2.map(V$1) : w$2({}, n2);
 }
-function q$1(u2, t2, i2, o2, r2, e2, f2, c2, s2) {
+function q$2(u2, t2, i2, o2, r2, e2, f2, c2, s2) {
   var a2, h2, v2, y2, w2, _2, m2, b2 = i2.props || p$3, k2 = t2.props, x2 = t2.type;
   if ("svg" == x2 ? r2 = "http://www.w3.org/2000/svg" : "math" == x2 ? r2 = "http://www.w3.org/1998/Math/MathML" : r2 || (r2 = "http://www.w3.org/1999/xhtml"), null != e2) {
     for (a2 = 0; a2 < e2.length; a2++) if ((w2 = e2[a2]) && "setAttribute" in w2 == !!x2 && (x2 ? w2.localName == x2 : 3 == w2.nodeType)) {
@@ -195,7 +195,7 @@ function q$1(u2, t2, i2, o2, r2, e2, f2, c2, s2) {
     }
     for (a2 in k2) w2 = k2[a2], "children" == a2 ? y2 = w2 : "dangerouslySetInnerHTML" == a2 ? h2 = w2 : "value" == a2 ? _2 = w2 : "checked" == a2 ? m2 = w2 : c2 && "function" != typeof w2 || b2[a2] === w2 || j$2(u2, a2, w2, b2[a2], r2);
     if (h2) c2 || v2 && (h2.__html == v2.__html || h2.__html == u2.innerHTML) || (u2.innerHTML = h2.__html), t2.__k = [];
-    else if (v2 && (u2.innerHTML = ""), I("template" == t2.type ? u2.content : u2, d$2(y2) ? y2 : [y2], t2, i2, o2, "foreignObject" == x2 ? "http://www.w3.org/1999/xhtml" : r2, e2, f2, e2 ? e2[0] : i2.__k && S(i2, 0), c2, s2), null != e2) for (a2 = e2.length; a2--; ) g$2(e2[a2]);
+    else if (v2 && (u2.innerHTML = ""), I("template" == t2.type ? u2.content : u2, d$3(y2) ? y2 : [y2], t2, i2, o2, "foreignObject" == x2 ? "http://www.w3.org/1999/xhtml" : r2, e2, f2, e2 ? e2[0] : i2.__k && S(i2, 0), c2, s2), null != e2) for (a2 = e2.length; a2--; ) g$2(e2[a2]);
     c2 || (a2 = "value", "progress" == x2 && null == _2 ? u2.removeAttribute("value") : null != _2 && (_2 !== u2[a2] || "progress" == x2 && !_2 || "option" == x2 && _2 != b2[a2]) && j$2(u2, a2, _2, b2[a2], r2), a2 = "checked", null != m2 && m2 != u2[a2] && j$2(u2, a2, m2, b2[a2], r2));
   }
   return u2;
@@ -210,7 +210,7 @@ function B$2(n2, u2, t2) {
     l$3.__e(n3, t2);
   }
 }
-function D(n2, u2, t2) {
+function D$1(n2, u2, t2) {
   var i2, o2;
   if (l$3.unmount && l$3.unmount(n2), (i2 = n2.ref) && (i2.current && i2.current != n2.__e || B$2(i2, null, u2)), null != (i2 = n2.__c)) {
     if (i2.componentWillUnmount) try {
@@ -220,7 +220,7 @@ function D(n2, u2, t2) {
     }
     i2.base = i2.__P = null;
   }
-  if (i2 = n2.__k) for (o2 = 0; o2 < i2.length; o2++) i2[o2] && D(i2[o2], u2, t2 || "function" != typeof n2.type);
+  if (i2 = n2.__k) for (o2 = 0; o2 < i2.length; o2++) i2[o2] && D$1(i2[o2], u2, t2 || "function" != typeof n2.type);
   t2 || g$2(n2.__e), n2.__c = n2.__ = n2.__e = void 0;
 }
 function E$2(n2, l2, u2) {
@@ -253,6 +253,43 @@ function p$2(n2, t2) {
   var u2 = r.__H || (r.__H = { __: [], __h: [] });
   return n2 >= u2.__.length && u2.__.push({}), u2.__[n2];
 }
+function d$2(n2) {
+  return o$1 = 1, h$1(D, n2);
+}
+function h$1(n2, u2, i2) {
+  var o2 = p$2(t$1++, 2);
+  if (o2.t = n2, !o2.__c && (o2.__ = [i2 ? i2(u2) : D(void 0, u2), function(n3) {
+    var t2 = o2.__N ? o2.__N[0] : o2.__[0], r2 = o2.t(t2, n3);
+    t2 !== r2 && (o2.__N = [r2, o2.__[1]], o2.__c.setState({}));
+  }], o2.__c = r, !r.__f)) {
+    var f2 = function(n3, t2, r2) {
+      if (!o2.__c.__H) return true;
+      var u3 = o2.__c.__H.__.filter(function(n4) {
+        return !!n4.__c;
+      });
+      if (u3.every(function(n4) {
+        return !n4.__N;
+      })) return !c2 || c2.call(this, n3, t2, r2);
+      var i3 = o2.__c.props !== n3;
+      return u3.forEach(function(n4) {
+        if (n4.__N) {
+          var t3 = n4.__[0];
+          n4.__ = n4.__N, n4.__N = void 0, t3 !== n4.__[0] && (i3 = true);
+        }
+      }), c2 && c2.call(this, n3, t2, r2) || i3;
+    };
+    r.__f = true;
+    var c2 = r.shouldComponentUpdate, e2 = r.componentWillUpdate;
+    r.componentWillUpdate = function(n3, t2, r2) {
+      if (this.__e) {
+        var u3 = c2;
+        c2 = void 0, f2(n3, t2, r2), c2 = u3;
+      }
+      e2 && e2.call(this, n3, t2, r2);
+    }, r.shouldComponentUpdate = f2;
+  }
+  return o2.__N || o2.__;
+}
 function y$1(n2, u2) {
   var i2 = p$2(t$1++, 3);
   !c$1.__s && C(i2.__H, u2) && (i2.__ = n2, i2.u = u2, r.__H.__h.push(i2));
@@ -266,6 +303,11 @@ function T$1(n2, r2) {
   var u2 = p$2(t$1++, 7);
   return C(u2.__H, r2) && (u2.__ = n2(), u2.__H = r2, u2.__h = n2), u2.__;
 }
+function q$1(n2, t2) {
+  return o$1 = 8, T$1(function() {
+    return n2;
+  }, t2);
+}
 function j$1() {
   for (var n2; n2 = f$2.shift(); ) if (n2.__P && n2.__H) try {
     n2.__H.__h.forEach(z), n2.__H.__h.forEach(B$1), n2.__H.__h = [];
@@ -332,6 +374,9 @@ function C(n2, t2) {
     return t3 !== n2[r2];
   });
 }
+function D(n2, t2) {
+  return "function" == typeof t2 ? t2(n2) : t2;
+}
 var i = Symbol.for("preact-signals");
 function t() {
   if (!(s$1 > 1)) {
@@ -913,8 +958,8 @@ var EngineType = /* @__PURE__ */ ((EngineType2) => {
 })(EngineType || {});
 const FileTypeEngineMap = /* @__PURE__ */ new Map([
   ["html", [
-    "MD"
-    /* MD */
+    "HTML"
+    /* HTML */
   ]],
   // HTML类型文件
   ["md", [
@@ -1145,18 +1190,16 @@ function u(e2, t2, n2, o2, i2, u2) {
   return l$3.vnode && l$3.vnode(l2), l2;
 }
 const FilePreviewHtml = (props) => {
+  const containerRef = A(null);
   y$1(() => {
+    if (containerRef.current) {
+      const shadowRoot = containerRef.current.attachShadow({ mode: "open" });
+      const content = '\n        <style>\n          .content-container {\n            height: 100%;\n            width: 100%;\n          }\n        </style>\n        <div class="content-container">\n          '.concat(props.controller.state.value.content, "\n        </div>\n      ");
+      shadowRoot.innerHTML = content;
+    }
     props.onInitialization();
   }, []);
-  return /* @__PURE__ */ u("div", { className: "file-preview-html ".concat(props.controller.state.value.theme), children: /* @__PURE__ */ u(
-    "div",
-    {
-      className: "container",
-      dangerouslySetInnerHTML: {
-        __html: props.controller.state.value.content
-      }
-    }
-  ) });
+  return /* @__PURE__ */ u("div", { className: "file-preview-html ".concat(props.controller.state.value.theme), children: /* @__PURE__ */ u("div", { ref: containerRef, className: "container" }) });
 };
 const ZoomOutSvg = () => {
   return /* @__PURE__ */ u(
@@ -18244,8 +18287,35 @@ const FilePreviewUnkown = (props) => {
     "类型预览"
   ] }) });
 };
+const Loading = ({ size = 24 }) => {
+  return /* @__PURE__ */ u("div", { className: "loading-mask", children: /* @__PURE__ */ u("div", { className: "loading-spinner", children: /* @__PURE__ */ u(LoaddingSvg, { size }) }) });
+};
 const ThumbnailPanel = (props) => {
   const contentRef = A(null);
+  const [loadStates, setLoadStates] = d$2({});
+  const ITEM_HEIGHT = 188;
+  const BUFFER_COUNT = 1;
+  const [cachedImages, setCachedImages] = d$2(/* @__PURE__ */ new Set());
+  const [visibleRange, setVisibleRange] = d$2({ start: 0, end: 0 });
+  const calculateVisibleRange = q$1(() => {
+    if (!contentRef.current) return { start: 0, end: 0 };
+    const container = contentRef.current;
+    const scrollTop = container.scrollTop;
+    const containerHeight = container.clientHeight;
+    const start = Math.max(
+      0,
+      Math.floor(scrollTop / ITEM_HEIGHT) - BUFFER_COUNT
+    );
+    const visibleCount = Math.ceil(containerHeight / ITEM_HEIGHT);
+    const end = Math.min(
+      props.pages.length,
+      start + visibleCount + BUFFER_COUNT
+    );
+    return { start, end };
+  }, [props.pages.length]);
+  const updateVisibleRange = q$1(() => {
+    setVisibleRange(calculateVisibleRange());
+  }, [calculateVisibleRange]);
   const handleClick = (index, _event) => {
     props.onPageClick(index);
   };
@@ -18262,12 +18332,42 @@ const ThumbnailPanel = (props) => {
       }
     }
   };
+  const handleImageLoad = (index) => {
+    setLoadStates((prevState) => ({
+      ...prevState,
+      [index]: true
+    }));
+    setCachedImages((prev) => new Set(prev).add(index));
+  };
+  const handleImageError = (index, error2) => {
+    setLoadStates((prevState) => ({
+      ...prevState,
+      [index]: true
+    }));
+    console.error("图片加载失败:", error2);
+  };
+  const getLoadState = (pageIndex) => {
+    return loadStates[pageIndex] || false;
+  };
+  y$1(() => {
+    const container = contentRef.current;
+    if (container) {
+      updateVisibleRange();
+      container.addEventListener("scroll", updateVisibleRange);
+      return () => {
+        container.removeEventListener("scroll", updateVisibleRange);
+      };
+    }
+  }, [updateVisibleRange]);
   y$1(() => {
     scrollToCurrentThumbnail();
   }, [props.currentPage]);
   return /* @__PURE__ */ u("div", { className: "thumbnail-panel", children: [
     /* @__PURE__ */ u("div", { className: "thumbnail-panel-header", children: /* @__PURE__ */ u("h3", { children: "缩略图" }) }),
     /* @__PURE__ */ u("div", { className: "thumbnail-panel-content", ref: contentRef, children: props.pages && props.pages.length > 0 && props.pages.map((page, index) => {
+      const isLoaded = getLoadState(index);
+      const isCached = cachedImages.has(index);
+      const isVisible = visibleRange.start <= index && index <= visibleRange.end;
       return /* @__PURE__ */ u(
         "div",
         {
@@ -18276,13 +18376,19 @@ const ThumbnailPanel = (props) => {
             handleClick(index);
           },
           children: [
-            /* @__PURE__ */ u(
+            !isLoaded && /* @__PURE__ */ u(Loading, {}),
+            (isVisible || isCached) && /* @__PURE__ */ u(
               "img",
               {
                 src: "".concat(imgBasePath).concat(page.image_url),
                 alt: page.description,
                 className: "thumbnail-image",
-                loading: "lazy"
+                onLoad: () => {
+                  handleImageLoad(index);
+                },
+                onError: (error2) => {
+                  handleImageError(index, error2);
+                }
               }
             ),
             /* @__PURE__ */ u("div", { className: "thumbnail-page-number", children: index + 1 })
@@ -18301,22 +18407,30 @@ const ImagePage = (props) => {
     height: 0
   });
   const imgStyle = useComputed(() => {
-    const result = {
-      transform: "rotate(".concat(props.state.value.rotateMap[props.index] || 0, "deg)"),
-      transition: "transform .3s"
-    };
-    if (props.state.value.mode === ImageMode.WIDTH) {
-      Object.assign(result, {
-        width: "".concat(parentStyle.value.width * props.state.value.scale, "px")
-      });
-    } else if (props.state.value.mode === ImageMode.PAGE) {
-      Object.assign(result, {
-        height: "".concat(parentStyle.value.height * props.state.value.scale, "px")
-      });
+    let result = {};
+    if (isLoading.value) {
+      result = {
+        height: "".concat(parentStyle.value.height * props.state.value.scale, "px"),
+        flexShrink: 0
+      };
     } else {
-      Object.assign(result, {
-        width: "".concat(contentWidth * props.state.value.scale, "px")
-      });
+      result = {
+        transform: "rotate(".concat(props.state.value.rotateMap[props.index] || 0, "deg)"),
+        transition: "transform .3s"
+      };
+      if (props.state.value.mode === ImageMode.WIDTH) {
+        Object.assign(result, {
+          width: "".concat(parentStyle.value.width * props.state.value.scale, "px")
+        });
+      } else if (props.state.value.mode === ImageMode.PAGE) {
+        Object.assign(result, {
+          height: "".concat(parentStyle.value.height * props.state.value.scale, "px")
+        });
+      } else {
+        Object.assign(result, {
+          width: "".concat(contentWidth * props.state.value.scale, "px")
+        });
+      }
     }
     return result;
   });
@@ -18337,11 +18451,13 @@ const ImagePage = (props) => {
     };
   };
   y$1(() => {
-    var _a;
     updateParentStyle();
     const observer = new ResizeObserver(updateParentStyle);
-    if ((_a = imgRef.current) == null ? void 0 : _a.parentElement)
-      observer.observe(imgRef.current.parentElement);
+    if (imgRef.current) {
+      if (imgRef.current.parentElement) {
+        observer.observe(imgRef.current.parentElement);
+      }
+    }
     return () => {
       observer.disconnect();
     };
@@ -18354,7 +18470,7 @@ const ImagePage = (props) => {
       style: imgStyle.value,
       "data-page-index": props.index,
       children: [
-        /* @__PURE__ */ u(
+        props.isShowImage ? /* @__PURE__ */ u(
           "img",
           {
             className: "image-content",
@@ -18368,7 +18484,7 @@ const ImagePage = (props) => {
             },
             loading: "lazy"
           }
-        ),
+        ) : /* @__PURE__ */ u(Loading, {}),
         isLoading.value && /* @__PURE__ */ u(Loading, {})
       ]
     }
@@ -18379,7 +18495,8 @@ const FilePreviewImageGroup = (props) => {
   const state = controller.state;
   const contentRef = A(null);
   const isScrolling = useSignal(false);
-  const handleScroll = throttle(() => {
+  const [loadedPages, setLoadedPages] = d$2(/* @__PURE__ */ new Set());
+  const computeClosestPage = () => {
     if (contentRef.current) {
       const containerRect = contentRef.current.getBoundingClientRect();
       let closestPage = state.value.currentPage;
@@ -18397,11 +18514,27 @@ const FilePreviewImageGroup = (props) => {
           }
         }
       });
+      return closestPage;
+    }
+  };
+  const handleScroll = throttle(() => {
+    if (contentRef.current) {
+      const closestPage = computeClosestPage();
       if (!isScrolling.value && closestPage !== state.value.currentPage) {
         controller.updateState({ currentPage: closestPage });
       }
     }
   }, 100);
+  const handleImageResize = () => {
+    if (contentRef.current) {
+      setTimeout(() => {
+        const closestPage = computeClosestPage();
+        if (closestPage !== state.value.currentPage) {
+          controller.updateState({ currentPage: closestPage });
+        }
+      }, 0);
+    }
+  };
   const scrollToPage = (pageIndex) => {
     if (contentRef.current) {
       const pageElement = contentRef.current.querySelector(
@@ -18421,14 +18554,17 @@ const FilePreviewImageGroup = (props) => {
       }
     });
   };
-  const handlePageClick = (pageIndex) => {
-    controller.updateState({ currentPage: pageIndex });
-    scrollToPage(pageIndex);
+  const updateIsScrolling = () => {
     isScrolling.value = true;
     setTimeout(() => {
       isScrolling.value = false;
     }, 1e3);
   };
+  const handlePageClick = (pageIndex) => {
+    controller.updateState({ currentPage: pageIndex });
+    scrollToPage(pageIndex);
+    updateIsScrolling();
+  };
   const handleInput = (e2) => {
     const target = e2.target;
     const newPage = parseInt(target.value) - 1;
@@ -18455,15 +18591,17 @@ const FilePreviewImageGroup = (props) => {
   const handleModeChange = (payload) => {
     const value = payload.target.value;
     controller.switchMode(value);
+    scrollToPage(state.value.currentPage);
   };
   y$1(() => {
-    var _a;
-    (_a = contentRef.current) == null ? void 0 : _a.addEventListener("scroll", handleScroll);
+    if (contentRef.current) {
+      contentRef.current.addEventListener("scroll", handleScroll);
+    }
     preloadImages();
     props.onInitialization();
     return () => {
-      var _a2;
-      (_a2 = contentRef.current) == null ? void 0 : _a2.removeEventListener("scroll", handleScroll);
+      var _a;
+      (_a = contentRef.current) == null ? void 0 : _a.removeEventListener("scroll", handleScroll);
     };
   }, []);
   return /* @__PURE__ */ u("div", { className: "file-preview-image-group", children: [
@@ -18471,7 +18609,9 @@ const FilePreviewImageGroup = (props) => {
       "div",
       {
         className: "image-group-left-container",
-        style: { display: state.value.showThumbnailPanel ? "block" : "none" },
+        style: {
+          visibility: state.value.showThumbnailPanel ? "visible" : "hidden"
+        },
         children: /* @__PURE__ */ u(
           ThumbnailPanel,
           {
@@ -18493,12 +18633,29 @@ const FilePreviewImageGroup = (props) => {
           handleScroll();
         },
         children: state.value.items && state.value.items.length > 0 && state.value.items.map((page, index) => {
+          const bufferRange = 1;
+          const startRange = Math.max(
+            0,
+            state.value.currentPage - bufferRange
+          );
+          const endRange = Math.min(
+            state.value.items.length - 1,
+            state.value.currentPage + bufferRange
+          );
+          const shouldRender = index >= startRange && index <= endRange;
+          const shouldKeepLoaded = loadedPages.has(index);
+          if (shouldRender) {
+            if (!loadedPages.has(index)) {
+              setLoadedPages((prev) => new Set(prev).add(index));
+            }
+          }
           return /* @__PURE__ */ u(
             ImagePage,
             {
               page,
               index,
-              state
+              state,
+              isShowImage: shouldRender || shouldKeepLoaded
             },
             index
           );
@@ -18566,8 +18723,13 @@ const FilePreviewImageGroup = (props) => {
             value: state.value.currentPage + 1,
             min: "1",
             max: state.value.total || 1,
-            onInput: (event) => {
+            onBlur: (event) => {
               handleInput(event);
+            },
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                handleInput(event);
+              }
             }
           }
         ),
@@ -18600,6 +18762,7 @@ const FilePreviewImageGroup = (props) => {
             className: "control-btn",
             onClick: (event) => {
               controller.zoomOutPreview(event);
+              handleImageResize();
             },
             children: /* @__PURE__ */ u("span", { className: "icon", children: /* @__PURE__ */ u(ZoomOutSvg, {}) })
           }
@@ -18615,6 +18778,7 @@ const FilePreviewImageGroup = (props) => {
             className: "control-btn",
             onClick: (event) => {
               controller.zoomInPreview(event);
+              handleImageResize();
             },
             children: /* @__PURE__ */ u("span", { className: "icon", children: /* @__PURE__ */ u(ZoomInSvg, {}) })
           }
@@ -18627,6 +18791,7 @@ const FilePreviewImageGroup = (props) => {
           className: "control-btn",
           onClick: () => {
             controller.reSet();
+            handleImageResize();
           },
           children: /* @__PURE__ */ u("span", { className: "icon", children: /* @__PURE__ */ u(ResetSvg, {}) })
         }
@@ -18634,9 +18799,6 @@ const FilePreviewImageGroup = (props) => {
     ] }) })
   ] });
 };
-const Loading = ({ size = 24 }) => {
-  return /* @__PURE__ */ u("div", { className: "loading-mask", children: /* @__PURE__ */ u("div", { className: "loading-spinner", children: /* @__PURE__ */ u(LoaddingSvg, { size }) }) });
-};
 const FilePreviewShell = (props) => {
   y$1(() => {
     document.addEventListener("click", handleClickOutside, true);
@@ -18882,7 +19044,7 @@ class FilePreviewImageController extends FilePreviewItemController {
   zoomOutPreview(_event) {
     const { scale } = this.state.value;
     this.updateState({
-      scale: Math.max(scale - 0.1, 0.1)
+      scale: Math.max(scale - 0.1, 0.5)
     });
   }
   /**
@@ -19765,6 +19927,19 @@ class FilePreviewMDController extends FilePreviewTextController {
   }
 }
 class FilePreviewHtmlController extends FilePreviewTextController {
+  /**
+   * 获取内容
+   */
+  async getContent() {
+    const options = this.filePreviewShell.getOptions();
+    const { fileId, fileCat } = this.filePreviewShell.getState();
+    try {
+      const content = await options.getContent(fileId, "html", fileCat);
+      return content || "";
+    } catch (error2) {
+      return error2.message || "";
+    }
+  }
 }
 class FilePreviewItemDispatcher {
   /**