@ibiz-template-plugin/ibiz-file-previewer 0.0.4 → 0.0.5

package/dist/index.es.js

@@ -1,4 +1,17 @@
-import { createVNode, defineComponent, createTextVNode, h, ref, onMounted, onUnmounted, nextTick, Teleport, computed, watch, reactive, createApp } from "vue";
+import { defineComponent, createVNode, onMounted, ref, nextTick, Teleport, createTextVNode, computed, watch, reactive, onUnmounted, h, createApp } from "vue";
+var ActionType = /* @__PURE__ */ ((ActionType2) => {
+  ActionType2["DOWNORIGINAL"] = "DOWNORIGINAL";
+  ActionType2["COPYTEXTCONTENT"] = "COPYTEXTCONTENT";
+  ActionType2["DOWNPDF"] = "DOWNPDF";
+  ActionType2["DOWNMD"] = "DOWNMD";
+  return ActionType2;
+})(ActionType || {});
+var ImageMode = /* @__PURE__ */ ((ImageMode2) => {
+  ImageMode2["AUTO"] = "auto";
+  ImageMode2["WIDTH"] = "width";
+  ImageMode2["PAGE"] = "page";
+  return ImageMode2;
+})(ImageMode || {});
 var FileType = /* @__PURE__ */ ((FileType2) => {
   FileType2["HTML"] = "html";
   FileType2["MD"] = "md";
@@ -20,7 +33,11 @@ var FileType = /* @__PURE__ */ ((FileType2) => {
   FileType2["PNG"] = "png";
   FileType2["GIF"] = "gif";
   FileType2["SVG"] = "svg";
-  FileType2["UNKNOWN"] = "unknown";
+  FileType2["BMP"] = "bmp";
+  FileType2["WEBP"] = "webp";
+  FileType2["JPEG"] = "jpeg";
+  FileType2["ICO"] = "ico";
+  FileType2["UNKNOWN"] = "UNKNOWN";
   return FileType2;
 })(FileType || {});
 var EngineType = /* @__PURE__ */ ((EngineType2) => {
@@ -32,6 +49,137 @@ var EngineType = /* @__PURE__ */ ((EngineType2) => {
   EngineType2["UNKNOWN"] = "UNKNOWN";
   return EngineType2;
 })(EngineType || {});
+const FileTypeEngineMap = /* @__PURE__ */ new Map([
+  ["html", [
+    "MD"
+    /* MD */
+  ]],
+  // HTML类型文件
+  ["md", [
+    "MD"
+    /* MD */
+  ]],
+  // MD类型文件
+  ["xls", [
+    "HTML"
+    /* HTML */
+  ]],
+  // XLS类型文件
+  ["xlsx", [
+    "HTML"
+    /* HTML */
+  ]],
+  // XLSX类型文件
+  ["et", [
+    "HTML"
+    /* HTML */
+  ]],
+  // ET类型文件
+  ["txt", [
+    "TXT"
+    /* TXT */
+  ]],
+  // TXT类型文件
+  ["json", [
+    "TXT"
+    /* TXT */
+  ]],
+  // JSON类型文件
+  ["xml", [
+    "TXT"
+    /* TXT */
+  ]],
+  // XML类型文件
+  ["pdf", [
+    "PDF"
+    /* PDF */
+  ]],
+  // PDF类型文件
+  ["doc", [
+    "PDF",
+    "HTML"
+    /* HTML */
+  ]],
+  // DOC类型文件
+  ["docx", [
+    "PDF",
+    "HTML"
+    /* HTML */
+  ]],
+  // DOCX类型文件
+  ["wps", [
+    "PDF",
+    "HTML"
+    /* HTML */
+  ]],
+  // WPS类型文件
+  ["ppt", [
+    "PDF"
+    /* PDF */
+  ]],
+  // PPT类型文件
+  ["pptx", [
+    "PDF"
+    /* PDF */
+  ]],
+  // PPTX类型文件
+  ["jpg", [
+    "IMG"
+    /* IMG */
+  ]],
+  // JPG类型文件
+  ["png", [
+    "IMG"
+    /* IMG */
+  ]],
+  // PNG类型文件
+  ["gif", [
+    "IMG"
+    /* IMG */
+  ]],
+  // GIF类型文件
+  ["svg", [
+    "IMG"
+    /* IMG */
+  ]],
+  // SVG类型文件
+  ["bmp", [
+    "IMG"
+    /* IMG */
+  ]],
+  // BMP类型文件
+  ["jpeg", [
+    "IMG"
+    /* IMG */
+  ]],
+  // JPEG类型文件
+  ["webp", [
+    "IMG"
+    /* IMG */
+  ]],
+  // WEBP类型文件
+  ["ico", [
+    "IMG"
+    /* IMG */
+  ]]
+  // ICO类型文件
+]);
+const contentWidth = 800;
+const imgModes = [
+  {
+    lable: "自动缩放",
+    value: ImageMode.AUTO
+  },
+  {
+    lable: "适合页宽",
+    value: ImageMode.WIDTH
+  },
+  {
+    lable: "适合页面",
+    value: ImageMode.PAGE
+  }
+];
+const imgBasePath = "";
 const fileNameToFileType = (fileName) => {
   var _a;
   const extension = (_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase();
@@ -97,6 +245,18 @@ const fileNameToFileType = (fileName) => {
     case "svg":
       fileType = FileType.SVG;
       break;
+    case "bmp":
+      fileType = FileType.BMP;
+      break;
+    case "jpeg":
+      fileType = FileType.JPEG;
+      break;
+    case "webp":
+      fileType = FileType.WEBP;
+      break;
+    case "ico":
+      fileType = FileType.ICO;
+      break;
     default:
       fileType = FileType.UNKNOWN;
   }
@@ -113,6 +273,36 @@ const throttle = (func, wait) => {
     }
   };
 };
+const FilePreviewHtml = /* @__PURE__ */ defineComponent({
+  props: {
+    controller: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: {
+    initialization: () => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const c = props.controller;
+    onMounted(() => {
+      emit("initialization");
+    });
+    return {
+      c
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": ["file-preview-html", this.c.state.theme]
+    }, [createVNode("div", {
+      "class": "container",
+      "innerHTML": this.c.state.content
+    }, null)]);
+  }
+});
 const ZoomOutSvg = () => {
   return createVNode("svg", {
     "class": "icon",
@@ -177,150 +367,273 @@ const CounterClockwiseSvg = () => createVNode("svg", {
   "d": "M621.691007 930.837137l0 93.162863C896.942803 1015.340184 1117.395653 789.486587 1117.395653 512.139674c0-282.840775-229.2989-512.139674-512.139674-512.139674C346.113304 0 131.899245 192.517959 97.818678 442.302446L0 442.302446 139.674457 605.255979l139.674457-162.953533L192.00582 442.302446C225.294899 244.104392 397.60662 93.116304 605.255979 93.116304c231.440575 0 419.02337 187.582795 419.02337 419.02337C1024.279349 738.039829 845.496044 922.223879 621.691007 930.837137z",
   "fill": "currentColor"
 }, null)]);
-const ThumbnailSvg = () => {
+const ThumbnailSvg = () => createVNode("svg", {
+  "class": "icon",
+  "viewBox": "0 0 1024 1024",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "width": "16",
+  "height": "16"
+}, [createVNode("path", {
+  "d": "M112 912h368V544H112v368z m80-288h208v208H192V624zM544 112v368h368V112H544z m288 288H624V192h208v208zM112 480h368V112H112v368z m80-288h208v208H192V192z m352 720h368V544H544v368z m80-288h208v208H624V624z",
+  "fill": "currentColor"
+}, null)]);
+const UpPageSvg = () => createVNode("svg", {
+  "class": "icon",
+  "viewBox": "0 0 1025 1024",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "width": "16.015625",
+  "height": "16"
+}, [createVNode("path", {
+  "d": "M131.339914 423.017198c-9.52111 9.670597-9.400291 25.229558 0.270306 34.750668 9.670597 9.522134 25.229558 9.401315 34.750668-0.269282l320.722863-325.740925 0 798.397108c0 13.5716 11.001648 24.573248 24.573248 24.573248 13.5716 0 24.573248-11.001648 24.573248-24.573248L536.230246 135.522485l315.80719 320.551874c9.523157 9.667525 25.084167 9.783224 34.750668 0.259043 9.667525-9.524181 9.784248-25.083143 0.259043-34.750668L552.305246 81.813557c-11.058985-11.331339-25.865391-17.688643-41.702849-17.905707-0.277473-0.004096-0.554946-0.005119-0.832419-0.005119-15.559985 0-30.237381 5.957989-41.412066 16.831651-0.124914 0.121842-0.249828 0.245732-0.372694 0.370646L131.339914 423.017198z",
+  "fill": "currentColor"
+}, null)]);
+const DownPageSvg = () => createVNode("svg", {
+  "class": "icon",
+  "viewBox": "0 0 1025 1024",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "width": "16.015625",
+  "height": "16"
+}, [createVNode("path", {
+  "d": "M467.985218 937.525717c0.122866 0.124914 0.24778 0.248804 0.372694 0.370646 11.174684 10.873662 25.852081 16.831651 41.412066 16.831651 0.277473 0 0.554946-0.001024 0.832419-0.005119 15.837458-0.217064 30.643864-6.574368 41.702849-17.905707l334.741901-339.769178c9.525205-9.667525 9.408482-25.226487-0.259043-34.750668-9.666501-9.524181-25.227511-9.408482-34.750668 0.259043l-315.80719 320.551874L536.230246 88.475979c0-13.5716-11.001648-24.573248-24.573248-24.573248-13.5716 0-24.573248 11.001648-24.573248 24.573248l0 798.397108L166.360888 561.132161c-9.52111-9.670597-25.080071-9.791415-34.750668-0.269282-9.670597 9.52111-9.791415 25.080071-0.270306 34.750668L467.985218 937.525717z",
+  "fill": "currentColor"
+}, null)]);
+const DownSvg = () => {
   return createVNode("svg", {
     "class": "icon",
     "viewBox": "0 0 1024 1024",
     "version": "1.1",
     "xmlns": "http://www.w3.org/2000/svg",
-    "width": "16",
-    "height": "16"
+    "width": "24",
+    "height": "24"
   }, [createVNode("path", {
-    "d": "M112 912h368V544H112v368z m80-288h208v208H192V624zM544 112v368h368V112H544z m288 288H624V192h208v208zM112 480h368V112H112v368z m80-288h208v208H192V192z m352 720h368V544H544v368z m80-288h208v208H624V624z",
+    "d": "M512 608c-6.4 0-19.2 0-25.6-6.4l-128-128c-12.8-12.8-12.8-32 0-44.8s32-12.8 44.8 0L512 531.2l102.4-102.4c12.8-12.8 32-12.8 44.8 0s12.8 32 0 44.8l-128 128C531.2 608 518.4 608 512 608z",
     "fill": "currentColor"
   }, null)]);
 };
-const UpPageSvg = () => {
+const ResetSvg = () => {
   return createVNode("svg", {
     "class": "icon",
-    "viewBox": "0 0 1025 1024",
+    "viewBox": "0 0 1024 1024",
     "version": "1.1",
     "xmlns": "http://www.w3.org/2000/svg",
-    "width": "16.015625",
+    "width": "16",
     "height": "16"
   }, [createVNode("path", {
-    "d": "M131.339914 423.017198c-9.52111 9.670597-9.400291 25.229558 0.270306 34.750668 9.670597 9.522134 25.229558 9.401315 34.750668-0.269282l320.722863-325.740925 0 798.397108c0 13.5716 11.001648 24.573248 24.573248 24.573248 13.5716 0 24.573248-11.001648 24.573248-24.573248L536.230246 135.522485l315.80719 320.551874c9.523157 9.667525 25.084167 9.783224 34.750668 0.259043 9.667525-9.524181 9.784248-25.083143 0.259043-34.750668L552.305246 81.813557c-11.058985-11.331339-25.865391-17.688643-41.702849-17.905707-0.277473-0.004096-0.554946-0.005119-0.832419-0.005119-15.559985 0-30.237381 5.957989-41.412066 16.831651-0.124914 0.121842-0.249828 0.245732-0.372694 0.370646L131.339914 423.017198z",
+    "d": "M512 950.86c-210.65 0-386.92-149.21-429.35-347.43H190.9L74.61 486.4 8.78 420.57C2.92 449.83 0 480.55 0 512s2.92 62.17 8.78 91.43C51.2 842.6 260.39 1024 512 1024c208.46 0 386.92-123.61 466.65-302.08l-55.59-55.59C860.16 832.37 699.98 950.86 512 950.86zM1015.22 420.57C972.8 181.39 763.61 0 512 0 303.54 0 125.08 123.61 45.35 302.08l55.59 56.32C163.11 192.37 324.02 73.14 512 73.14c210.65 0 386.92 149.21 429.35 347.43H833.1l116.29 116.29 65.83 65.83c5.85-29.26 8.78-59.25 8.78-90.7s-2.92-62.16-8.78-91.42z",
     "fill": "currentColor"
   }, null)]);
 };
-const DownPageSvg = () => {
+const LoaddingSvg = (props) => {
   return createVNode("svg", {
     "class": "icon",
-    "viewBox": "0 0 1025 1024",
+    "viewBox": "0 0 1024 1024",
     "version": "1.1",
     "xmlns": "http://www.w3.org/2000/svg",
-    "width": "16.015625",
-    "height": "16"
+    "width": props.size,
+    "height": props.size
   }, [createVNode("path", {
-    "d": "M467.985218 937.525717c0.122866 0.124914 0.24778 0.248804 0.372694 0.370646 11.174684 10.873662 25.852081 16.831651 41.412066 16.831651 0.277473 0 0.554946-0.001024 0.832419-0.005119 15.837458-0.217064 30.643864-6.574368 41.702849-17.905707l334.741901-339.769178c9.525205-9.667525 9.408482-25.226487-0.259043-34.750668-9.666501-9.524181-25.227511-9.408482-34.750668 0.259043l-315.80719 320.551874L536.230246 88.475979c0-13.5716-11.001648-24.573248-24.573248-24.573248-13.5716 0-24.573248 11.001648-24.573248 24.573248l0 798.397108L166.360888 561.132161c-9.52111-9.670597-25.080071-9.791415-34.750668-0.269282-9.670597 9.52111-9.791415 25.080071-0.270306 34.750668L467.985218 937.525717z",
-    "fill": "currentColor"
+    "d": "M512 61.44a40.96 40.96 0 0 1 40.96 40.96v122.88a40.96 40.96 0 1 1-81.92 0V102.4A40.96 40.96 0 0 1 512 61.44z",
+    "fill": "currentColor",
+    "opacity": ".9"
+  }, null), createVNode("path", {
+    "d": "M737.28 121.792a40.96 40.96 0 0 1 14.992 55.952l-61.44 106.432a40.96 40.96 0 1 1-70.944-40.96l61.44-106.432a40.96 40.96 0 0 1 55.952-14.992z",
+    "fill": "currentColor",
+    "opacity": ".8"
+  }, null), createVNode("path", {
+    "d": "M902.208 286.72a40.96 40.96 0 0 1-14.992 55.952l-106.432 61.44a40.96 40.96 0 0 1-40.96-70.944l106.432-61.44a40.96 40.96 0 0 1 55.952 14.992z",
+    "fill": "currentColor",
+    "opacity": ".76"
+  }, null), createVNode("path", {
+    "d": "M962.56 512a40.96 40.96 0 0 1-40.96 40.96h-122.88a40.96 40.96 0 1 1 0-81.92h122.88A40.96 40.96 0 0 1 962.56 512z",
+    "fill": "currentColor",
+    "opacity": ".7"
+  }, null), createVNode("path", {
+    "d": "M902.208 737.28a40.96 40.96 0 0 1-55.952 14.992l-106.432-61.44a40.96 40.96 0 1 1 40.96-70.944l106.432 61.44a40.96 40.96 0 0 1 14.992 55.952z",
+    "fill": "currentColor",
+    "opacity": ".6",
+    "p-id": "4720"
+  }, null), createVNode("path", {
+    "d": "M737.28 902.208a40.96 40.96 0 0 1-55.952-14.992l-61.44-106.432a40.96 40.96 0 0 1 70.944-40.96l61.44 106.432a40.96 40.96 0 0 1-14.992 55.952z",
+    "fill": "currentColor",
+    "opacity": ".5",
+    "p-id": "4721"
+  }, null), createVNode("path", {
+    "d": "M512 962.56a40.96 40.96 0 0 1-40.96-40.96v-122.88a40.96 40.96 0 1 1 81.92 0v122.88A40.96 40.96 0 0 1 512 962.56z",
+    "fill": "currentColor",
+    "opacity": ".4",
+    "p-id": "4722"
+  }, null), createVNode("path", {
+    "d": "M286.72 902.208a40.96 40.96 0 0 1-14.992-55.952l61.44-106.432a40.96 40.96 0 1 1 70.944 40.96l-61.44 106.432a40.96 40.96 0 0 1-55.952 14.992z",
+    "fill": "currentColor",
+    "opacity": ".3",
+    "p-id": "4723"
+  }, null), createVNode("path", {
+    "d": "M121.792 737.28a40.96 40.96 0 0 1 14.992-55.952l106.432-61.44a40.96 40.96 0 0 1 40.96 70.944l-106.432 61.44a40.96 40.96 0 0 1-55.952-14.992z",
+    "fill": "currentColor",
+    "opacity": ".2",
+    "p-id": "4724"
+  }, null), createVNode("path", {
+    "d": "M61.44 512a40.96 40.96 0 0 1 40.96-40.96h122.88a40.96 40.96 0 1 1 0 81.92H102.4A40.96 40.96 0 0 1 61.44 512z",
+    "fill": "currentColor",
+    "opacity": ".1",
+    "p-id": "4725"
+  }, null), createVNode("path", {
+    "d": "M121.792 286.72a40.96 40.96 0 0 1 55.952-14.992l106.432 61.44a40.96 40.96 0 1 1-40.96 70.944l-106.432-61.44a40.96 40.96 0 0 1-14.992-55.952z",
+    "fill": "currentColor",
+    "opacity": ".04",
+    "p-id": "4726"
+  }, null), createVNode("path", {
+    "d": "M286.72 121.792a40.96 40.96 0 0 1 55.952 14.992l61.44 106.432a40.96 40.96 0 0 1-70.944 40.96l-61.44-106.432a40.96 40.96 0 0 1 14.992-55.952z",
+    "fill": "currentColor",
+    "p-id": "4727"
   }, null)]);
 };
-var ActionType = /* @__PURE__ */ ((ActionType2) => {
-  ActionType2["DOWNORIGINAL"] = "DOWNORIGINAL";
-  ActionType2["COPYTEXTCONTENT"] = "COPYTEXTCONTENT";
-  ActionType2["DOWNPDF"] = "DOWNPDF";
-  ActionType2["DOWNMD"] = "DOWNMD";
-  return ActionType2;
-})(ActionType || {});
-const FilePreviewShell = /* @__PURE__ */ defineComponent({
+const useTeleportWithDelay = () => {
+  const shouldRender = ref(false);
+  onMounted(() => {
+    nextTick(() => {
+      shouldRender.value = true;
+    });
+  });
+  return {
+    shouldRender
+  };
+};
+const FilePreviewImage = /* @__PURE__ */ defineComponent({
   props: {
     controller: {
       type: Object,
       required: true
     }
   },
-  setup(props) {
+  emits: {
+    initialization: () => true
+  },
+  setup(props, {
+    emit
+  }) {
     const controller = props.controller;
-    const state = controller.state;
-    const showDownloadMenu = ref(false);
-    const showDownloadOptions = () => {
-      showDownloadMenu.value = !showDownloadMenu.value;
-    };
-    const handleClickOutside = (event) => {
-      const downloadBtn = document.querySelector(".download-btn");
-      const downloadOptions = document.querySelector(".download-options");
-      if (downloadBtn && !downloadBtn.contains(event.target) && downloadOptions && !downloadOptions.contains(event.target)) {
-        showDownloadMenu.value = false;
-      }
-    };
-    const handDownLoad = (actionType, event) => {
-      showDownloadMenu.value = false;
-      switch (actionType) {
-        case ActionType.DOWNORIGINAL:
-          controller.downloadOriginal(event);
-          break;
-        case ActionType.COPYTEXTCONTENT:
-          controller.copyTextContent(event);
-          break;
-        case ActionType.DOWNPDF:
-          controller.exportToPdf(event);
+    const {
+      shouldRender
+    } = useTeleportWithDelay();
+    const imgStyle = computed(() => {
+      const {
+        scale,
+        rotate,
+        offsetX,
+        offsetY,
+        enableTransition
+      } = controller.state;
+      let translateX = offsetX / scale;
+      let translateY = offsetY / scale;
+      switch (rotate % 360) {
+        case 90:
+        case -270:
+          [translateX, translateY] = [translateY, -translateX];
           break;
-        case ActionType.DOWNMD:
-          controller.exportToMd(event);
+        case 180:
+        case -180:
+          [translateX, translateY] = [-translateX, -translateY];
           break;
-        default:
-          console.error("Invalid action type:", actionType);
+        case 270:
+        case -90:
+          [translateX, translateY] = [-translateY, translateX];
           break;
       }
+      const style = {
+        transform: `scale(${scale}) rotate(${rotate}deg) translate(${translateX}px, ${translateY}px)`,
+        transition: enableTransition ? "transform .3s" : ""
+      };
+      if (controller.state.mode === ImageMode.WIDTH) style.width = "100%";
+      if (controller.state.mode === ImageMode.PAGE) style.height = "100%";
+      return style;
+    });
+    const handleModeChange = (payload) => {
+      const value = payload.target.value;
+      controller.switchMode(value);
     };
     onMounted(() => {
-      document.addEventListener("click", handleClickOutside);
-    });
-    onUnmounted(() => {
-      document.removeEventListener("click", handleClickOutside);
+      if (controller.state.fileType === FileType.SVG) emit("initialization");
     });
     return {
-      controller,
-      state,
-      showDownloadMenu,
-      showDownloadOptions,
-      handDownLoad
+      imgStyle,
+      shouldRender,
+      handleModeChange
     };
   },
   render() {
     return createVNode("div", {
-      "class": ["file-preview-shell", this.state.theme]
-    }, [createVNode("div", {
-      "class": "preview-header"
-    }, [createVNode("div", {
-      "class": "file-info"
-    }, [createVNode("h3", {
-      "class": "file-name"
-    }, [this.state.fileName]), createVNode("span", {
-      "class": "file-type"
-    }, [this.state.engineType])]), createVNode("div", {
-      "class": "preview-controls"
-    }, [createVNode("div", {
-      "class": "custom-controls",
-      "id": "custom-controls"
-    }, null), createVNode("button", {
-      "class": "control-btn download-btn",
-      "title": "下载选项",
-      "onClick": () => {
-        this.showDownloadOptions();
-      }
-    }, [createVNode("span", {
-      "class": "icon"
-    }, [createVNode(DownLoadSvg, null, null)])])])]), this.showDownloadMenu && createVNode("div", {
-      "class": "download-options"
-    }, [createVNode("button", {
-      "class": "download-option",
-      "onClick": (event) => {
-        this.handDownLoad(ActionType.DOWNORIGINAL, event);
-      }
-    }, [createTextVNode("下载原文件")]), this.state.engineType !== EngineType.PDF && this.state.engineType !== EngineType.UNKNOWN && createVNode("button", {
-      "class": "download-option",
-      "onClick": (event) => {
-        this.handDownLoad(ActionType.COPYTEXTCONTENT, event);
-      }
-    }, [createTextVNode("复制文本内容")])]), createVNode("div", {
-      "class": "preview-content"
-    }, [createVNode("div", {
-      "class": "preview-inner"
-    }, [this.state.preViewComp && this.state.preViewController ? h(this.state.preViewComp, {
-      controller: this.state.preViewController
-    }) : null])])]);
+      "class": ["file-preview-image", this.controller.state.theme]
+    }, [this.controller.state.fileType === FileType.SVG ? createVNode("div", {
+      "class": "svg-container",
+      "style": this.imgStyle,
+      "innerHTML": this.controller.state.content,
+      "onMousedown": (evt) => this.controller.handleMouseDown(evt)
+    }, null) : createVNode("img", {
+      "style": this.imgStyle,
+      "src": this.controller.state.content,
+      "onLoad": () => this.$emit("initialization"),
+      "onError": () => this.$emit("initialization"),
+      "onMousedown": (evt) => this.controller.handleMouseDown(evt)
+    }, null), this.shouldRender && createVNode(Teleport, {
+      "to": "#custom-controls"
+    }, {
+      default: () => [createVNode("div", {
+        "class": "image-toolbar-container"
+      }, [createVNode("button", {
+        "title": "逆时针",
+        "class": "control-btn",
+        "onClick": () => this.controller.handleRotateChange(-90)
+      }, [createVNode("span", {
+        "class": "icon"
+      }, [createVNode(CounterClockwiseSvg, null, null)])]), createVNode("button", {
+        "title": "顺时针",
+        "class": "control-btn",
+        "onClick": () => this.controller.handleRotateChange(90)
+      }, [createVNode("span", {
+        "class": "icon"
+      }, [createVNode(ClockwiseSvg, null, null)])]), createVNode("select", {
+        "class": "img-mode",
+        "value": this.controller.state.mode,
+        "onChange": this.handleModeChange
+      }, [imgModes.map((mode) => {
+        return createVNode("option", {
+          "label": mode.lable,
+          "value": mode.value
+        }, null);
+      })]), createVNode("div", {
+        "class": "zoom"
+      }, [createVNode("button", {
+        "title": "缩小",
+        "class": "control-btn",
+        "onClick": (event) => {
+          this.controller.zoomOutPreview(event);
+        }
+      }, [createVNode("span", {
+        "class": "icon"
+      }, [createVNode(ZoomOutSvg, null, null)])]), createVNode("span", {
+        "class": "zoom-level"
+      }, [Math.round(this.controller.state.scale * 100), createTextVNode("%")]), createVNode("button", {
+        "title": "放大",
+        "class": "control-btn",
+        "onClick": (event) => {
+          this.controller.zoomInPreview(event);
+        }
+      }, [createVNode("span", {
+        "class": "icon"
+      }, [createVNode(ZoomInSvg, null, null)])])]), createVNode("button", {
+        "title": "重置",
+        "class": "control-btn",
+        "onClick": () => {
+          this.controller.reSet();
+        }
+      }, [createVNode("span", {
+        "class": "icon"
+      }, [createVNode(ResetSvg, null, null)])])])]
+    })]);
   }
 });
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -14878,17 +15191,6 @@ window.addEventListener("message", (e) => {
 })(dist);
 var distExports = dist.exports;
 const Vditor = /* @__PURE__ */ getDefaultExportFromCjs(distExports);
-const useTeleportWithDelay = () => {
-  const shouldRender = ref(false);
-  onMounted(() => {
-    nextTick(() => {
-      shouldRender.value = true;
-    });
-  });
-  return {
-    shouldRender
-  };
-};
 const FilePreviewMD = /* @__PURE__ */ defineComponent({
   props: {
     controller: {
@@ -14896,7 +15198,12 @@ const FilePreviewMD = /* @__PURE__ */ defineComponent({
       required: true
     }
   },
-  setup(props) {
+  emits: {
+    initialization: () => true
+  },
+  setup(props, {
+    emit
+  }) {
     const c = props.controller;
     let vditorEditor;
     const {
@@ -14938,7 +15245,7 @@ const FilePreviewMD = /* @__PURE__ */ defineComponent({
           actions: []
         },
         outline: {
-          enable: true,
+          enable: false,
           position: "left"
         },
         toolbarConfig: {
@@ -14947,6 +15254,7 @@ const FilePreviewMD = /* @__PURE__ */ defineComponent({
         value: c.state.content,
         after: () => {
           onPreview();
+          emit("initialization");
         }
       });
     });
@@ -14975,54 +15283,6 @@ const FilePreviewMD = /* @__PURE__ */ defineComponent({
     })]);
   }
 });
-const FilePreviewUnkown = /* @__PURE__ */ defineComponent({
-  props: {
-    controller: {
-      type: Object,
-      required: true
-    }
-  },
-  setup(props) {
-    const c = props.controller;
-    const fileType = c.filePreviewShell.getState().fileType;
-    return {
-      c,
-      fileType
-    };
-  },
-  render() {
-    return createVNode("div", {
-      "class": ["file-preview-unkown", this.c.state.theme]
-    }, [createVNode("div", null, [createTextVNode("暂未支持"), this.fileType, createTextVNode("类型预览")])]);
-  }
-});
-const FilePreviewText = /* @__PURE__ */ defineComponent({
-  props: {
-    controller: {
-      type: Object,
-      required: true
-    }
-  },
-  setup(props) {
-    const c = props.controller;
-    const previewRef = ref();
-    const {
-      shouldRender
-    } = useTeleportWithDelay();
-    return {
-      c,
-      previewRef,
-      shouldRender
-    };
-  },
-  render() {
-    return createVNode("div", {
-      "class": ["file-preview-text", this.c.state.theme]
-    }, [createVNode("div", {
-      "ref": "previewRef"
-    }, [this.c.state.content])]);
-  }
-});
 function deepFreeze(obj) {
   if (obj instanceof Map) {
     obj.clear = obj.delete = obj.set = function() {
@@ -16594,44 +16854,6 @@ function json(hljs) {
     illegal: "\\S"
   };
 }
-HighlightJS.registerLanguage("json", json);
-const FilePreviewJson = /* @__PURE__ */ defineComponent({
-  props: {
-    controller: {
-      type: Object,
-      required: true
-    }
-  },
-  setup(props) {
-    const c = props.controller;
-    const {
-      shouldRender
-    } = useTeleportWithDelay();
-    const previewRef = ref();
-    onMounted(() => {
-      try {
-        const obj = JSON.parse(c.state.content);
-        previewRef.value.textContent = JSON.stringify(obj, null, 2);
-        HighlightJS.highlightElement(previewRef.value);
-      } catch (error2) {
-        console.error(error2);
-      }
-    });
-    return {
-      c,
-      previewRef,
-      shouldRender
-    };
-  },
-  render() {
-    return createVNode("pre", {
-      "class": ["file-preview-json", this.c.state.theme]
-    }, [createVNode("code", {
-      "ref": "previewRef",
-      "class": "language-json"
-    }, null)]);
-  }
-});
 function xml(hljs) {
   const regex = hljs.regex;
   const TAG_NAME_RE = regex.concat(/[\p{L}_]/u, regex.optional(/[\p{L}0-9_.-]*:/u), /[\p{L}0-9_.-]*/u);
@@ -16857,25 +17079,33 @@ function xml(hljs) {
   };
 }
 HighlightJS.registerLanguage("xml", xml);
-const FilePreviewXml = /* @__PURE__ */ defineComponent({
+HighlightJS.registerLanguage("json", json);
+const FilePreviewText = /* @__PURE__ */ defineComponent({
   props: {
     controller: {
       type: Object,
       required: true
     }
   },
-  setup(props) {
+  emits: {
+    initialization: () => true
+  },
+  setup(props, {
+    emit
+  }) {
     const c = props.controller;
+    const previewRef = ref();
     const {
       shouldRender
     } = useTeleportWithDelay();
-    const previewRef = ref();
     onMounted(() => {
       try {
         previewRef.value.textContent = c.state.content;
         HighlightJS.highlightElement(previewRef.value);
       } catch (error2) {
         console.error(error2);
+      } finally {
+        emit("initialization");
       }
     });
     return {
@@ -16886,82 +17116,40 @@ const FilePreviewXml = /* @__PURE__ */ defineComponent({
   },
   render() {
     return createVNode("pre", {
-      "class": ["file-preview-xml", this.c.state.theme]
+      "class": ["file-preview-text", this.c.state.theme]
     }, [createVNode("code", {
       "ref": "previewRef",
-      "class": "language-xml"
+      "class": `language-${this.c.state.fileType}`
     }, null)]);
   }
 });
-const FilePreviewImg = /* @__PURE__ */ defineComponent({
+const FilePreviewUnkown = /* @__PURE__ */ defineComponent({
   props: {
     controller: {
       type: Object,
       required: true
     }
   },
-  setup(props) {
+  emits: {
+    initialization: () => true
+  },
+  setup(props, {
+    emit
+  }) {
     const c = props.controller;
-    const {
-      shouldRender
-    } = useTeleportWithDelay();
-    const previewRef = ref();
-    const style = computed(() => {
-      return {
-        transform: `scale(${c.state.scale}) rotate(${c.state.rotate}deg) translate(0px, 0px)`
-      };
+    const fileType = c.filePreviewShell.getState().fileType;
+    onMounted(() => {
+      emit("initialization");
     });
     return {
       c,
-      style,
-      previewRef,
-      shouldRender
+      fileType
     };
   },
   render() {
     return createVNode("div", {
-      "class": ["file-preview-img", this.c.state.theme]
-    }, [createVNode("img", {
-      "style": this.style,
-      "src": this.c.state.content
-    }, null), this.shouldRender && createVNode(Teleport, {
-      "to": "#custom-controls"
-    }, {
-      default: () => [createVNode("div", {
-        "class": "file-preview-img__toolbar"
-      }, [createVNode("button", {
-        "title": "逆时针",
-        "class": "control-btn",
-        "onClick": () => this.c.onRotateChange(-90)
-      }, [createVNode("span", {
-        "class": "icon"
-      }, [createVNode(CounterClockwiseSvg, null, null)])]), createVNode("button", {
-        "title": "顺时针",
-        "class": "control-btn",
-        "onClick": () => this.c.onRotateChange(90)
-      }, [createVNode("span", {
-        "class": "icon"
-      }, [createVNode(ClockwiseSvg, null, null)])]), createVNode("button", {
-        "class": "control-btn",
-        "title": "缩小",
-        "onClick": (event) => {
-          console.log("缩小");
-          this.controller.zoomOutPreview(event);
-        }
-      }, [createVNode("span", {
-        "class": "icon"
-      }, [createVNode(ZoomOutSvg, null, null)])]), createVNode("span", {
-        "class": "zoom-level"
-      }, [Math.round(this.c.state.scale * 100), createTextVNode("%")]), createVNode("button", {
-        "class": "control-btn",
-        "title": "放大",
-        "onClick": (event) => {
-          this.controller.zoomInPreview(event);
-        }
-      }, [createVNode("span", {
-        "class": "icon"
-      }, [createVNode(ZoomInSvg, null, null)])])])]
-    })]);
+      "class": ["file-preview-unkown", this.c.state.theme]
+    }, [createVNode("div", null, [createTextVNode("暂未支持"), this.fileType, createTextVNode("类型预览")])]);
   }
 });
 const ThumbnailPanel = /* @__PURE__ */ defineComponent({
@@ -17027,7 +17215,7 @@ const ThumbnailPanel = /* @__PURE__ */ defineComponent({
           this.handleClick(index, event);
         }
       }, [createVNode("img", {
-        "src": `http://172.16.86.77:30450${page.image_url}`,
+        "src": `${imgBasePath}${page.image_url}`,
         "alt": page.description,
         "class": "thumbnail-image",
         "loading": "lazy"
@@ -17037,33 +17225,6 @@ const ThumbnailPanel = /* @__PURE__ */ defineComponent({
     })])]);
   }
 });
-const contentWidth = 800;
-const mdEngineTypes = [FileType.HTML, FileType.MD];
-const htmlEngineTypes = [
-  FileType.XLS,
-  FileType.XLSX,
-  FileType.ET
-];
-const txtEngineTypes = [
-  FileType.TXT,
-  FileType.JSON,
-  FileType.XML,
-  FileType.UNKNOWN
-];
-const pdfEngineTypes = [
-  FileType.PDF,
-  FileType.DOC,
-  FileType.DOCX,
-  FileType.WPS,
-  FileType.PPT,
-  FileType.PPTX
-];
-const imgEngineTypes = [
-  FileType.JPG,
-  FileType.PNG,
-  FileType.GIF,
-  FileType.SVG
-];
 const ImagePage = /* @__PURE__ */ defineComponent({
   props: {
     index: {
@@ -17074,13 +17235,47 @@ const ImagePage = /* @__PURE__ */ defineComponent({
       type: Object,
       required: true
     },
+    mode: {
+      type: String,
+      required: true
+    },
     scale: {
       type: Number,
       required: true
+    },
+    rotate: {
+      type: Number,
+      required: true
     }
   },
   setup(props) {
     const isLoading = ref(true);
+    let observer;
+    const imgRef = ref();
+    const parentStyle = reactive({
+      width: 0,
+      height: 0
+    });
+    const imgStyle = computed(() => {
+      const result = {
+        transform: `rotate(${props.rotate}deg)`,
+        transition: "transform .3s"
+      };
+      if (props.mode === ImageMode.WIDTH) {
+        Object.assign(result, {
+          width: `${parentStyle.width * props.scale}px`
+        });
+      } else if (props.mode === ImageMode.PAGE) {
+        Object.assign(result, {
+          height: `${parentStyle.height * props.scale}px`
+        });
+      } else {
+        Object.assign(result, {
+          width: `${contentWidth * props.scale}px`
+        });
+      }
+      return result;
+    });
     const handleImageLoad = () => {
       isLoading.value = false;
     };
@@ -17088,26 +17283,39 @@ const ImagePage = /* @__PURE__ */ defineComponent({
       console.error("图片加载失败:", error2);
       isLoading.value = false;
     };
-    const widthStyle = computed(() => {
-      return {
-        width: `${contentWidth * props.scale}px`
-      };
+    const updateParentStyle = () => {
+      var _a, _b;
+      const rect = (_b = (_a = imgRef.value) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.getBoundingClientRect();
+      if (!rect) return;
+      Object.assign(parentStyle, {
+        height: rect.height,
+        width: rect.width
+      });
+    };
+    onMounted(() => {
+      var _a;
+      updateParentStyle();
+      observer = new ResizeObserver(updateParentStyle);
+      if ((_a = imgRef.value) == null ? void 0 : _a.parentElement) observer.observe(imgRef.value.parentElement);
     });
     return {
-      widthStyle,
+      imgRef,
+      imgStyle,
+      isLoading,
       handleImageLoad,
       handleImageError
     };
   },
   render() {
     return createVNode("div", {
+      "ref": "imgRef",
       "class": "image-page",
-      "data-page-index": this.index,
-      "style": this.widthStyle
+      "style": this.imgStyle,
+      "data-page-index": this.index
     }, [createVNode("img", {
-      "src": `http://172.16.86.77:30450${this.page.image_url}`,
-      "alt": this.page.description,
       "class": "image-content",
+      "src": `${imgBasePath}${this.page.image_url}`,
+      "alt": this.page.description,
       "onLoad": () => {
         this.handleImageLoad();
       },
@@ -17115,7 +17323,7 @@ const ImagePage = /* @__PURE__ */ defineComponent({
         this.handleImageError(error2);
       },
       "loading": "lazy"
-    }, null)]);
+    }, null), this.isLoading && createVNode(Loading, null, null)]);
   }
 });
 const FilePreviewImageGroup = /* @__PURE__ */ defineComponent({
@@ -17125,7 +17333,12 @@ const FilePreviewImageGroup = /* @__PURE__ */ defineComponent({
       required: true
     }
   },
-  setup(props) {
+  emits: {
+    initialization: () => true
+  },
+  setup(props, {
+    emit
+  }) {
     const controller = props.controller;
     const state = controller.state;
     const contentRef = ref(null);
@@ -17170,7 +17383,7 @@ const FilePreviewImageGroup = /* @__PURE__ */ defineComponent({
       visiblePages.forEach((page) => {
         if (page) {
           const img = new Image();
-          img.src = `http://172.16.86.77:30450${page.image_url}`;
+          img.src = `${imgBasePath}${page.image_url}`;
         }
       });
     };
@@ -17205,11 +17418,16 @@ const FilePreviewImageGroup = /* @__PURE__ */ defineComponent({
         }
       }
     };
+    const handleModeChange = (payload) => {
+      const value = payload.target.value;
+      controller.switchMode(value);
+    };
     onMounted(() => {
       if (contentRef.value) {
         contentRef.value.addEventListener("scroll", handleScroll);
       }
       preloadImages();
+      emit("initialization");
     });
     onUnmounted(() => {
       if (contentRef.value) {
@@ -17220,9 +17438,10 @@ const FilePreviewImageGroup = /* @__PURE__ */ defineComponent({
       state,
       contentRef,
       shouldRender,
-      handlePageClick,
-      handleScroll,
       handleInput,
+      handleScroll,
+      handlePageClick,
+      handleModeChange,
       updatePageChange
     };
   },
@@ -17241,8 +17460,8 @@ const FilePreviewImageGroup = /* @__PURE__ */ defineComponent({
         this.handlePageClick(index);
       }
     }, null)]), createVNode("div", {
-      "class": "image-group-main-container",
       "ref": "contentRef",
+      "class": "image-group-main-container",
       "onScroll": () => {
         this.handleScroll();
       }
@@ -17250,13 +17469,15 @@ const FilePreviewImageGroup = /* @__PURE__ */ defineComponent({
       return createVNode(ImagePage, {
         "page": page,
         "index": index,
-        "scale": this.state.scale
+        "mode": this.state.mode,
+        "scale": this.state.scale,
+        "rotate": this.state.rotateMap[index] || 0
       }, null);
     })]), this.shouldRender && createVNode(Teleport, {
       "to": "#custom-controls"
     }, {
       default: () => [createVNode("div", {
-        "class": "image-group-toolbar-container"
+        "class": "image-toolbar-container"
       }, [createVNode("button", {
         "class": "control-btn",
         "title": "缩略图",
@@ -17264,6 +17485,18 @@ const FilePreviewImageGroup = /* @__PURE__ */ defineComponent({
           this.controller.switchThumbnailPanel();
         }
       }, [createVNode(ThumbnailSvg, null, null)]), createVNode("button", {
+        "title": "逆时针",
+        "class": "control-btn",
+        "onClick": () => this.controller.handleRotateChange(-90)
+      }, [createVNode("span", {
+        "class": "icon"
+      }, [createVNode(CounterClockwiseSvg, null, null)])]), createVNode("button", {
+        "title": "顺时针",
+        "class": "control-btn",
+        "onClick": () => this.controller.handleRotateChange(90)
+      }, [createVNode("span", {
+        "class": "icon"
+      }, [createVNode(ClockwiseSvg, null, null)])]), createVNode("button", {
         "class": "control-btn",
         "title": "上一页",
         "onClick": () => {
@@ -17275,7 +17508,9 @@ const FilePreviewImageGroup = /* @__PURE__ */ defineComponent({
         "onClick": () => {
           this.updatePageChange("UP");
         }
-      }, [createVNode(DownPageSvg, null, null)]), createVNode("input", {
+      }, [createVNode(DownPageSvg, null, null)]), createVNode("div", {
+        "class": "pagination"
+      }, [createVNode("input", {
         "type": "number",
         "class": "page-input",
         "value": this.state.currentPage + 1,
@@ -17284,9 +17519,20 @@ const FilePreviewImageGroup = /* @__PURE__ */ defineComponent({
         "onInput": (event) => {
           this.handleInput(event);
         }
-      }, null), createVNode("div", null, [createTextVNode("/")]), createVNode("div", null, [this.state.total]), createVNode("button", {
-        "class": "control-btn",
+      }, null), createVNode("div", null, [createTextVNode("/")]), createVNode("div", null, [this.state.total])]), createVNode("select", {
+        "class": "img-mode",
+        "value": this.state.mode,
+        "onChange": this.handleModeChange
+      }, [imgModes.map((mode) => {
+        return createVNode("option", {
+          "label": mode.lable,
+          "value": mode.value
+        }, null);
+      })]), createVNode("div", {
+        "class": "zoom"
+      }, [createVNode("button", {
         "title": "缩小",
+        "class": "control-btn",
         "onClick": (event) => {
           this.controller.zoomOutPreview(event);
         }
@@ -17295,17 +17541,182 @@ const FilePreviewImageGroup = /* @__PURE__ */ defineComponent({
       }, [createVNode(ZoomOutSvg, null, null)])]), createVNode("span", {
         "class": "zoom-level"
       }, [Math.round(this.state.scale * 100), createTextVNode("%")]), createVNode("button", {
-        "class": "control-btn",
         "title": "放大",
+        "class": "control-btn",
         "onClick": (event) => {
           this.controller.zoomInPreview(event);
         }
       }, [createVNode("span", {
         "class": "icon"
-      }, [createVNode(ZoomInSvg, null, null)])])])]
+      }, [createVNode(ZoomInSvg, null, null)])])]), createVNode("button", {
+        "title": "重置",
+        "class": "control-btn",
+        "onClick": () => {
+          this.controller.reSet();
+        }
+      }, [createVNode("span", {
+        "class": "icon"
+      }, [createVNode(ResetSvg, null, null)])])])]
     })]);
   }
 });
+const Loading = /* @__PURE__ */ defineComponent({
+  props: {
+    size: {
+      type: Number,
+      default: 24
+    }
+  },
+  setup() {
+    return {};
+  },
+  render() {
+    return createVNode("div", {
+      "class": "loading-mask"
+    }, [createVNode("div", {
+      "class": "loading-spinner"
+    }, [createVNode(LoaddingSvg, {
+      "size": this.size
+    }, null)])]);
+  }
+});
+const FilePreviewShell = /* @__PURE__ */ defineComponent({
+  props: {
+    controller: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const controller = props.controller;
+    const state = controller.state;
+    const showDownloadMenu = ref(false);
+    const showEngineMenu = ref(false);
+    const showDownloadOptions = () => {
+      showDownloadMenu.value = !showDownloadMenu.value;
+    };
+    const showwEngineOptions = () => {
+      if (state.value.engineOptions && state.value.engineOptions.length > 1) {
+        showEngineMenu.value = !showEngineMenu.value;
+      }
+    };
+    const handleClickOutside = () => {
+      showEngineMenu.value = false;
+      showDownloadMenu.value = false;
+    };
+    const handleEngineOptionSelect = (value) => {
+      controller.switchEngineType(value);
+      showEngineMenu.value = false;
+    };
+    const handDownLoad = (actionType, event) => {
+      showDownloadMenu.value = false;
+      switch (actionType) {
+        case ActionType.DOWNORIGINAL:
+          controller.downloadOriginal(event);
+          break;
+        case ActionType.COPYTEXTCONTENT:
+          controller.copyTextContent(event);
+          break;
+        case ActionType.DOWNPDF:
+          controller.exportToPdf(event);
+          break;
+        case ActionType.DOWNMD:
+          controller.exportToMd(event);
+          break;
+        default:
+          console.error("Invalid action type:", actionType);
+          break;
+      }
+    };
+    onMounted(() => {
+      document.addEventListener("click", handleClickOutside, true);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("click", handleClickOutside, true);
+    });
+    return {
+      state,
+      controller,
+      showEngineMenu,
+      showDownloadMenu,
+      handDownLoad,
+      showwEngineOptions,
+      showDownloadOptions,
+      handleEngineOptionSelect
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": ["file-preview-shell", this.state.theme]
+    }, [createVNode("div", {
+      "class": "preview-header"
+    }, [createVNode("div", {
+      "class": "file-info"
+    }, [createVNode("h3", {
+      "class": "file-name"
+    }, [this.state.fileName]), createVNode("div", {
+      "class": "engine-container"
+    }, [createVNode("div", {
+      "class": "engine-content"
+    }, [createVNode("div", {
+      "class": {
+        "engine-type": true,
+        "is-multiple": this.state.engineOptions.length > 1
+      }
+    }, [this.state.engineType]), this.state.engineOptions.length > 1 && createVNode("div", {
+      "class": "engine-icon",
+      "onClick": () => {
+        this.showwEngineOptions();
+      }
+    }, [createVNode(DownSvg, null, null)])]), this.showEngineMenu && this.state.engineOptions.length > 1 && createVNode("ul", {
+      "class": "engine-options"
+    }, [this.state.engineOptions.map((type) => createVNode("li", {
+      "class": {
+        "engine-option-item": true,
+        "is-active": type === this.state.engineType
+      },
+      "onClick": () => {
+        this.handleEngineOptionSelect(type);
+      }
+    }, [type]))])])]), createVNode("div", {
+      "class": "preview-controls"
+    }, [createVNode("div", {
+      "class": "custom-controls",
+      "id": "custom-controls"
+    }, null), createVNode("button", {
+      "class": "control-btn download-btn",
+      "title": "下载选项",
+      "onClick": () => {
+        this.showDownloadOptions();
+      }
+    }, [createVNode("span", {
+      "class": "icon"
+    }, [createVNode(DownLoadSvg, null, null)])])])]), this.showDownloadMenu && createVNode("div", {
+      "class": "download-options"
+    }, [createVNode("button", {
+      "class": "download-option",
+      "onClick": (event) => {
+        this.handDownLoad(ActionType.DOWNORIGINAL, event);
+      }
+    }, [createTextVNode("下载原文件")]), this.state.engineType !== EngineType.PDF && this.state.engineType !== EngineType.UNKNOWN && createVNode("button", {
+      "class": "download-option",
+      "onClick": (event) => {
+        this.handDownLoad(ActionType.COPYTEXTCONTENT, event);
+      }
+    }, [createTextVNode("复制文本内容")])]), createVNode("div", {
+      "class": "preview-content"
+    }, [createVNode("div", {
+      "class": "preview-inner"
+    }, [this.state.isCreated && this.controller.preViewComp && this.controller.preViewController ? h(this.controller.preViewComp, {
+      controller: this.controller.preViewController,
+      onInitialization: () => {
+        this.state.isLoading = false;
+      }
+    }) : null]), this.state.isLoading && createVNode(Loading, {
+      "size": 48
+    }, null)])]);
+  }
+});
 class FilePreviewItemController {
   /**
    * 构造函数
@@ -17320,17 +17731,15 @@ class FilePreviewItemController {
    * 初始化状态
    */
   initState() {
+    const { fileType, theme } = this.filePreviewShell.getState();
     this.state.content = "";
-    this.state.scale = 1;
-    this.state.theme = "dark";
+    this.state.theme = theme;
+    this.state.fileType = fileType;
   }
   /**
    * 初始化
-   * @param param 初始化参数
    */
-  async initialize(param) {
-    const { theme } = param;
-    this.state.theme = theme;
+  async initialize() {
     this.state.content = await this.getContent();
   }
   /**
@@ -17339,29 +17748,146 @@ class FilePreviewItemController {
   async getContent() {
     return "";
   }
+}
+class FilePreviewImageController extends FilePreviewItemController {
+  initState() {
+    super.initState();
+    this.state.rotate = 0;
+    this.state.offsetX = 0;
+    this.state.offsetY = 0;
+    this.state.scale = 1;
+    this.state.mode = ImageMode.PAGE;
+    this.state.enableTransition = true;
+  }
+  /**
+   * 获取内容
+   */
+  async getContent() {
+    const options = this.filePreviewShell.getOptions();
+    const { fileId, fileCat, fileType } = this.filePreviewShell.getState();
+    try {
+      const content = await options.getImgContent(fileId, fileType, fileCat);
+      return content;
+    } catch (error2) {
+      return "";
+    }
+  }
+  /**
+   * 处理旋转角度改变
+   *
+   * @param value
+   */
+  handleRotateChange(value) {
+    this.state.rotate += value;
+  }
+  /**
+   * 处理鼠标按下
+   * @param e
+   * @returns
+   */
+  handleMouseDown(e) {
+    const { offsetX, offsetY } = this.state;
+    e.preventDefault();
+    this.state.enableTransition = false;
+    const startX = e.pageX;
+    const startY = e.pageY;
+    const dragHandler = (ev) => {
+      this.state.offsetX = offsetX + ev.pageX - startX;
+      this.state.offsetY = offsetY + ev.pageY - startY;
+    };
+    document.addEventListener("mousemove", dragHandler);
+    const removeListeners = () => {
+      document.removeEventListener("mousemove", dragHandler);
+      this.state.enableTransition = true;
+    };
+    document.addEventListener("mouseup", removeListeners, {
+      once: true
+    });
+  }
   /**
    * 缩小预览
    */
-  zoomOutPreview(event) {
+  zoomOutPreview(_event) {
     this.state.scale = Math.max(this.state.scale - 0.1, 0.1);
   }
   /**
    * 放大预览
    */
-  zoomInPreview(event) {
+  zoomInPreview(_event) {
     this.state.scale = Math.min(this.state.scale + 0.1, 2);
   }
+  /**
+   * 重置
+   */
+  reSet() {
+    this.state.rotate = 0;
+    this.state.offsetX = 0;
+    this.state.offsetY = 0;
+    this.state.scale = 1;
+    this.state.mode = ImageMode.PAGE;
+    this.state.enableTransition = true;
+  }
+  /**
+   * 切换模式
+   * @param mode 模式
+   */
+  switchMode(mode) {
+    this.state.scale = 1;
+    this.state.rotate = 0;
+    this.state.offsetX = 0;
+    this.state.offsetY = 0;
+    this.state.mode = mode;
+  }
 }
-class FilePreviewTextController extends FilePreviewItemController {
+class FilePreviewImageGroupController extends FilePreviewImageController {
+  initState() {
+    super.initState();
+    this.state.items = [];
+    this.state.currentPage = 0;
+    this.state.total = 0;
+    this.state.showThumbnailPanel = false;
+    this.state.rotateMap = {};
+  }
   /**
    * 获取内容
    */
   async getContent() {
-    if (!this.filePreviewShell) return "";
     const options = this.filePreviewShell.getOptions();
-    const { fileId, fileType, fileCat } = this.filePreviewShell.getState();
-    const content = await options.getContent(fileId, fileType, fileCat);
-    return content || "";
+    const { fileId, fileCat } = this.filePreviewShell.getState();
+    try {
+      const content = await options.getContent(fileId, "pageindex", fileCat);
+      if (content && content.pages && content.pages.length > 0) {
+        this.state.items = content.pages;
+      }
+      this.state.total = this.state.items.length;
+      return content || {};
+    } catch (error2) {
+      return {};
+    }
+  }
+  /**
+   * 切换缩略图面板
+   */
+  switchThumbnailPanel() {
+    this.state.showThumbnailPanel = !this.state.showThumbnailPanel;
+  }
+  /**
+   * 处理旋转角度改变
+   * @param value
+   */
+  handleRotateChange(value) {
+    const indexStr = this.state.currentPage.toString();
+    if (!this.state.rotateMap[indexStr]) {
+      this.state.rotateMap[indexStr] = 0;
+    }
+    this.state.rotateMap[indexStr] += value;
+  }
+  /**
+   * 重置
+   */
+  reSet() {
+    super.reSet();
+    this.state.rotateMap = {};
   }
 }
 function extend(destination) {
@@ -18104,81 +18630,50 @@ function join(output, replacement) {
 function canConvert(input) {
   return input != null && (typeof input === "string" || input.nodeType && (input.nodeType === 1 || input.nodeType === 9 || input.nodeType === 11));
 }
-class FilePreviewMDController extends FilePreviewTextController {
-  /**
-   * 获取内容
-   */
-  async getContent() {
-    if (!this.filePreviewShell) return "";
-    const html = await super.getContent();
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, "text/html");
-    const scripts = doc.body.querySelectorAll("script");
-    scripts.forEach((script) => script.remove());
-    const styles = doc.body.querySelectorAll("style");
-    styles.forEach((style) => style.remove());
-    const cleanBodyHTML = doc.body.innerHTML;
-    const turndown = new TurndownService({
-      headingStyle: "atx",
-      codeBlockStyle: "fenced"
-    });
-    const content = turndown.turndown(cleanBodyHTML);
-    return content;
-  }
-}
-class FilePreviewImageController extends FilePreviewItemController {
-  initState() {
-    super.initState();
-    this.state.rotate = 0;
-  }
+class FilePreviewTextController extends FilePreviewItemController {
   /**
    * 获取内容
    */
   async getContent() {
-    if (!this.filePreviewShell) return "";
     const options = this.filePreviewShell.getOptions();
-    const { fileId, fileCat } = this.filePreviewShell.getState();
-    const content = await options.getUrl(fileId, fileCat);
-    return content || "";
-  }
-  /**
-   * 改变旋转角度
-   *
-   * @param value
-   */
-  onRotateChange(value) {
-    this.state.rotate += value;
+    const { fileId, fileType, fileCat } = this.filePreviewShell.getState();
+    try {
+      const content = await options.getContent(fileId, fileType, fileCat);
+      return content || "";
+    } catch (error2) {
+      return error2.message || "";
+    }
   }
 }
-class FilePreviewImageGroupController extends FilePreviewItemController {
-  initState() {
-    super.initState();
-    this.state.items = [];
-    this.state.currentPage = 0;
-    this.state.total = 0;
-    this.state.showThumbnailPanel = false;
-  }
+class FilePreviewMDController extends FilePreviewTextController {
   /**
    * 获取内容
    */
   async getContent() {
-    if (!this.filePreviewShell) return "";
-    const options = this.filePreviewShell.getOptions();
-    const { fileId, fileCat } = this.filePreviewShell.getState();
-    const content = await options.getContent(fileId, "pageindex", fileCat);
-    if (content && content.pages && content.pages.length > 0) {
-      this.state.items = content.pages;
+    try {
+      let content = await super.getContent();
+      if (this.state.fileType === FileType.HTML) {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(content, "text/html");
+        const scripts = doc.body.querySelectorAll("script");
+        scripts.forEach((script) => script.remove());
+        const styles = doc.body.querySelectorAll("style");
+        styles.forEach((style) => style.remove());
+        const cleanBodyHTML = doc.body.innerHTML;
+        const turndown = new TurndownService({
+          headingStyle: "atx",
+          codeBlockStyle: "fenced"
+        });
+        content = turndown.turndown(cleanBodyHTML);
+      }
+      return content;
+    } catch (error2) {
+      return error2.message || "";
     }
-    this.state.total = this.state.items.length;
-    return content || {};
-  }
-  /**
-   * 切换缩略图面板
-   */
-  switchThumbnailPanel() {
-    this.state.showThumbnailPanel = !this.state.showThumbnailPanel;
   }
 }
+class FilePreviewHtmlController extends FilePreviewTextController {
+}
 const _FilePreviewItemDispatcher = class _FilePreviewItemDispatcher {
   /**
    * 注册文件预览项
@@ -18187,7 +18682,7 @@ const _FilePreviewItemDispatcher = class _FilePreviewItemDispatcher {
    * @param controller 控制器
    */
   static registerItem(type, component, controller) {
-    this.filePreviewMap.set(type, {
+    this.enginePreviewMap.set(type, {
       component,
       controller
     });
@@ -18197,112 +18692,42 @@ const _FilePreviewItemDispatcher = class _FilePreviewItemDispatcher {
    */
   static initialize() {
     this.registerItem(
-      "html",
-      FilePreviewMD,
+      EngineType.HTML,
+      FilePreviewHtml,
       (filePreviewShell) => {
-        return new FilePreviewMDController(filePreviewShell);
+        return new FilePreviewHtmlController(filePreviewShell);
       }
     );
     this.registerItem(
-      "md",
+      EngineType.MD,
       FilePreviewMD,
       (filePreviewShell) => {
-        return new FilePreviewTextController(filePreviewShell);
-      }
-    );
-    this.registerItem(
-      "json",
-      FilePreviewJson,
-      (filePreviewShell) => {
-        return new FilePreviewTextController(filePreviewShell);
-      }
-    );
-    this.registerItem(
-      "xml",
-      FilePreviewXml,
-      (filePreviewShell) => {
-        return new FilePreviewTextController(filePreviewShell);
+        return new FilePreviewMDController(filePreviewShell);
       }
     );
     this.registerItem(
-      "txt",
+      EngineType.TXT,
       FilePreviewText,
       (filePreviewShell) => {
         return new FilePreviewTextController(filePreviewShell);
       }
     );
     this.registerItem(
-      "pdf",
-      FilePreviewImageGroup,
-      (filePreviewShell) => {
-        return new FilePreviewImageGroupController(filePreviewShell);
-      }
-    );
-    this.registerItem(
-      "doc",
+      EngineType.PDF,
       FilePreviewImageGroup,
       (filePreviewShell) => {
         return new FilePreviewImageGroupController(filePreviewShell);
       }
     );
     this.registerItem(
-      "docx",
-      FilePreviewImageGroup,
-      (filePreviewShell) => {
-        return new FilePreviewImageGroupController(filePreviewShell);
-      }
-    );
-    this.registerItem(
-      "wps",
-      FilePreviewImageGroup,
-      (filePreviewShell) => {
-        return new FilePreviewImageGroupController(filePreviewShell);
-      }
-    );
-    this.registerItem(
-      "ppt",
-      FilePreviewImageGroup,
-      (filePreviewShell) => {
-        return new FilePreviewImageGroupController(filePreviewShell);
-      }
-    );
-    this.registerItem(
-      "pptx",
-      FilePreviewImageGroup,
-      (filePreviewShell) => {
-        return new FilePreviewImageGroupController(filePreviewShell);
-      }
-    );
-    this.registerItem(
-      "jpg",
-      FilePreviewImg,
+      EngineType.IMG,
+      FilePreviewImage,
       (filePreviewShell) => {
         return new FilePreviewImageController(filePreviewShell);
       }
     );
     this.registerItem(
-      "png",
-      FilePreviewImg,
-      (filePreviewShell) => {
-        return new FilePreviewImageController(filePreviewShell);
-      }
-    );
-    this.registerItem(
-      "gif",
-      FilePreviewImg,
-      (filePreviewShell) => {
-        return new FilePreviewImageController(filePreviewShell);
-      }
-    );
-    this.registerItem(
-      "svg",
-      FilePreviewImg,
-      (filePreviewShell) => {
-        return new FilePreviewImageController(filePreviewShell);
-      }
-    );
-    this.registerItem(
-      "unknown",
+      EngineType.UNKNOWN,
       FilePreviewUnkown,
       (filePreviewShell) => {
         return new FilePreviewItemController(filePreviewShell);
@@ -18315,10 +18740,10 @@ const _FilePreviewItemDispatcher = class _FilePreviewItemDispatcher {
    * @returns
    */
   static getItem(type) {
-    return this.filePreviewMap.get(type) || null;
+    return this.enginePreviewMap.get(type) || null;
   }
 };
-_FilePreviewItemDispatcher.filePreviewMap = /* @__PURE__ */ new Map();
+_FilePreviewItemDispatcher.enginePreviewMap = /* @__PURE__ */ new Map();
 let FilePreviewItemDispatcher = _FilePreviewItemDispatcher;
 class FilePreviewShellController {
   /**
@@ -18328,15 +18753,17 @@ class FilePreviewShellController {
   constructor(options) {
     this.options = options;
     this.currentApp = null;
+    this.preViewComp = void 0;
     this.state = ref({
       fileName: "",
       fileId: "",
       fileCat: "",
       theme: "dark",
+      isLoading: false,
+      isCreated: false,
       fileType: FileType.UNKNOWN,
-      preViewComp: void 0,
-      preViewController: void 0,
-      engineType: EngineType.UNKNOWN
+      engineType: EngineType.UNKNOWN,
+      engineOptions: []
     });
     if (options.theme) {
       this.state.value.theme = options.theme;
@@ -18374,19 +18801,13 @@ class FilePreviewShellController {
    * 解析引擎类型
    */
   async parseEngineType() {
-    if (htmlEngineTypes.includes(this.state.value.fileType)) {
-      this.state.value.engineType = EngineType.HTML;
-    } else if (mdEngineTypes.includes(this.state.value.fileType)) {
-      this.state.value.engineType = EngineType.MD;
-    } else if (txtEngineTypes.includes(this.state.value.fileType)) {
-      this.state.value.engineType = EngineType.TXT;
-    } else if (pdfEngineTypes.includes(this.state.value.fileType)) {
-      this.state.value.engineType = EngineType.PDF;
-    } else if (imgEngineTypes.includes(this.state.value.fileType)) {
-      this.state.value.engineType = EngineType.IMG;
+    const engineOptions = FileTypeEngineMap.get(this.state.value.fileType);
+    if (engineOptions && engineOptions.length > 0) {
+      this.state.value.engineOptions = engineOptions;
     } else {
-      this.state.value.engineType = EngineType.UNKNOWN;
+      this.state.value.engineOptions = [EngineType.UNKNOWN];
     }
+    this.state.value.engineType = this.state.value.engineOptions[0];
   }
   /**
    * 解析预览项
@@ -18394,15 +18815,15 @@ class FilePreviewShellController {
    */
   async parsePreviewItem() {
     let previewItem = FilePreviewItemDispatcher.getItem(
-      this.state.value.fileType
+      this.state.value.engineType
     );
     if (!previewItem) {
-      previewItem = FilePreviewItemDispatcher.getItem("unknown");
+      previewItem = FilePreviewItemDispatcher.getItem(EngineType.UNKNOWN);
     }
-    this.state.value.preViewComp = previewItem.component;
+    this.preViewComp = previewItem.component;
     const preViewController = previewItem.controller(this);
-    await preViewController.initialize({ theme: this.state.value.theme });
-    this.state.value.preViewController = preViewController;
+    await preViewController.initialize();
+    this.preViewController = preViewController;
   }
   /**
    * 挂载组件实例
@@ -18434,9 +18855,12 @@ class FilePreviewShellController {
    * @param data
    */
   async updateView(data) {
+    this.state.value.isCreated = false;
+    this.state.value.isLoading = true;
     await this.parseParams(data);
     await this.parsePreviewItem();
     this.mountComponent();
+    this.state.value.isCreated = true;
   }
   /**
    * 获取内容
@@ -18473,6 +18897,7 @@ class FilePreviewShellController {
    */
   async copyTextContent(event) {
     if (!this.options.getContent) return;
+    await navigator.clipboard.writeText("");
     const content = await this.options.getContent(
       this.state.value.fileId,
       this.state.value.fileType,
@@ -18503,8 +18928,20 @@ class FilePreviewShellController {
       await this.options.actionSuccessCallBack(ActionType.DOWNMD);
     }
   }
+  /**
+   * 切换引擎类型
+   * @param engineType
+   */
+  async switchEngineType(engineType) {
+    this.state.value.isCreated = false;
+    this.state.value.engineType = engineType;
+    await this.parsePreviewItem();
+    this.mountComponent();
+    this.state.value.isCreated = true;
+  }
 }
 export {
   ActionType,
-  FilePreviewShellController
+  FilePreviewShellController,
+  FileType
 };