sakura-preview-file 1.0.0

package/dist/sakura-preview-file.es.js

@@ -0,0 +1,1075 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, Fragment, renderList, unref, ref, watchEffect, watch, mergeModels, useModel, renderSlot, normalizeClass, withDirectives, vModelText, toDisplayString, createCommentVNode, reactive, onMounted, toRefs, createVNode, createBlock, isRef, withCtx, nextTick, useTemplateRef, Teleport, provide, resolveDynamicComponent, normalizeProps, guardReactiveProps, vShow } from "vue";
+import { addUnit, isEmpty, FILE_TYPE, getFileType, base64ToFileUrl, blobToBase64, isBase64File, networkFileUrlToLocalFileUrl, numberToFixed, sleep, extend, base64ToFile, generateId, isPdfFile, isWordFile, isImageFile } from "sakura-utils";
+import VuePdfEmbed from "vue-pdf-embed";
+import "pdfjs-dist";
+import { useThrottleFn, useWindowSize } from "@vueuse/core";
+import { renderAsync } from "docx-preview";
+const _hoisted_1$7 = ["stroke"];
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "Circle",
+  props: {
+    size: { default: 50 },
+    color: { default: "#409eff" },
+    duration: { default: 2 }
+  },
+  setup(__props) {
+    const props = __props;
+    const circleStyle = computed(() => {
+      const { size, duration } = props;
+      const style = {
+        "--circle-size": addUnit(size),
+        "--circle-duration": `${duration}s`
+      };
+      return style;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        class: "circular",
+        viewBox: "0 0 50 50",
+        style: normalizeStyle([circleStyle.value])
+      }, [
+        createElementVNode("circle", {
+          class: "circular__path-inner",
+          cx: "25",
+          cy: "25",
+          r: "20",
+          fill: "none",
+          stroke: __props.color,
+          "stroke-width": "4",
+          "stroke-miterlimit": "10"
+        }, null, 8, _hoisted_1$7)
+      ], 4);
+    };
+  }
+});
+const Circle_vue_vue_type_style_index_0_scoped_51d1fa15_lang = "";
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const Circle = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-51d1fa15"]]);
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "Dot",
+  props: {
+    gap: { default: 6 },
+    color: { default: "var(--preview-file-primary-color)" },
+    size: { default: 10 },
+    duration: { default: 1.4 }
+  },
+  setup(__props) {
+    const props = __props;
+    const dotStyle = computed(() => {
+      const { size, gap, duration, color } = props;
+      const style = {
+        "--dot-size": addUnit(size),
+        "--dot-duration": `${duration}s`,
+        "--dot-gap": addUnit(gap),
+        "--dot-color": color
+      };
+      return style;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "dot",
+        style: normalizeStyle([dotStyle.value])
+      }, [..._cache[0] || (_cache[0] = [
+        createElementVNode("div", { class: "dot__item" }, null, -1),
+        createElementVNode("div", { class: "dot__item" }, null, -1),
+        createElementVNode("div", { class: "dot__item" }, null, -1)
+      ])], 4);
+    };
+  }
+});
+const Dot_vue_vue_type_style_index_0_scoped_2acd99b5_lang = "";
+const Dot = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-2acd99b5"]]);
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "Progress",
+  props: {
+    width: { default: 200 },
+    height: { default: 4 },
+    background: { default: "#ebeef5" },
+    radius: {},
+    color: { default: "var(--preview-file-primary-color)" },
+    duration: { default: 2 }
+  },
+  setup(__props) {
+    const props = __props;
+    const progressStyle = computed(() => {
+      const { width, height, color, duration, radius, background } = props;
+      const style = {
+        "--progress-width": addUnit(width),
+        "--progress-height": addUnit(height),
+        "--progress-border-radius": addUnit(radius ? radius : Number(height) / 2),
+        "--progress-background": background,
+        "--progress-duration": `${duration}s`,
+        "--progress-color": color
+      };
+      return style;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "progress",
+        style: normalizeStyle([progressStyle.value])
+      }, [..._cache[0] || (_cache[0] = [
+        createElementVNode("div", { class: "progress__bar" }, null, -1)
+      ])], 4);
+    };
+  }
+});
+const Progress_vue_vue_type_style_index_0_scoped_3a710001_lang = "";
+const Progress = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-3a710001"]]);
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "Cube",
+  props: {
+    size: { default: 40 },
+    color: { default: "var(--preview-file-primary-color)" },
+    duration: { default: 1.3 }
+  },
+  setup(__props) {
+    const props = __props;
+    const cubeStyle = computed(() => {
+      const { size, duration, color } = props;
+      const style = {
+        "--cube-size": addUnit(size),
+        "--cube-color": color,
+        "--cube-duration": `${duration}s`
+      };
+      return style;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "cube",
+        style: normalizeStyle([cubeStyle.value])
+      }, [
+        (openBlock(), createElementBlock(Fragment, null, renderList(9, (v) => {
+          return createElementVNode("div", {
+            key: v,
+            class: "cube__item"
+          });
+        }), 64))
+      ], 4);
+    };
+  }
+});
+const Cube_vue_vue_type_style_index_0_scoped_0e6bb9d0_lang = "";
+const Cube = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-0e6bb9d0"]]);
+const Loading = {
+  Circle,
+  Dot,
+  Progress,
+  Cube
+};
+const defaultNamespace = "sakura";
+const statePrefix = "is-";
+const _bem = (namespace, block, blockSuffix, element, modifier) => {
+  let className = namespace + `-${block}`;
+  if (blockSuffix) {
+    className += "-" + blockSuffix;
+  }
+  if (element) {
+    className += "__" + element;
+  }
+  if (modifier) {
+    className += "--" + modifier;
+  }
+  return className;
+};
+const useNamespace = (block, namespaceOverrides) => {
+  const namespace = unref(namespaceOverrides) ?? defaultNamespace ?? block;
+  const b = (blockSuffix = "") => {
+    return _bem(namespace, block, blockSuffix, "", "");
+  };
+  const e = (element = "") => {
+    return element ? _bem(namespace, block, "", element, "") : "";
+  };
+  const m = (modifier = "") => {
+    return modifier ? _bem(namespace, block, "", "", modifier) : "";
+  };
+  const be = (blockSuffix = "", element = "") => {
+    return blockSuffix && element ? _bem(namespace, block, blockSuffix, element, "") : "";
+  };
+  const em = (element = "", modifier = "") => {
+    return element && modifier ? _bem(namespace, block, "", element, modifier) : "";
+  };
+  const bm = (blockSuffix = "", modifier = "") => {
+    return blockSuffix && modifier ? _bem(namespace, block, blockSuffix, "", modifier) : "";
+  };
+  const bem = (blockSuffix = "", element = "", modifier = "") => {
+    return blockSuffix && element && modifier ? _bem(namespace, block, blockSuffix, element, modifier) : "";
+  };
+  const is = (name, ...args) => {
+    const state = args.length ? args[0] : true;
+    return state && name ? statePrefix + name : "";
+  };
+  const cssVar = (object) => {
+    const style = {};
+    for (const k in object) {
+      if (object[k]) {
+        style[`--${namespace}-${k} `] = object[k];
+      }
+    }
+    return style;
+  };
+  const cssBlockVar = (block2, object) => {
+    const style = {};
+    for (const k in object) {
+      if (object[k]) {
+        style[`--${namespace}-${block2}-${k}`] = object[k];
+      }
+    }
+    return style;
+  };
+  const cssVarName = (name) => `${namespace}-${name}`;
+  const cssBlockVarName = (block2, name) => `${namespace}-${block2}-${name}`;
+  const cssVarNameValue = (name) => `var(--${cssVarName(name)})`;
+  const cssBlockVarNameValue = (block2, name) => `var(--${cssBlockVarName(block2, name)})`;
+  return {
+    b,
+    e,
+    m,
+    be,
+    em,
+    bm,
+    bem,
+    is,
+    cssVar,
+    cssBlockVar,
+    cssVarName,
+    cssBlockVarName,
+    cssVarNameValue,
+    cssBlockVarNameValue
+  };
+};
+const isBlob = (value) => {
+  return value instanceof Blob;
+};
+const getConfigurePdfJs = () => {
+  return {
+    // 启用字体增强属性
+    fontExtraProperties: true,
+    // 标准字体数据URL
+    // standardFontDataUrl,
+    // CMap URL用于处理中文等非拉丁字符
+    cMapUrl: "./cmaps/",
+    cMapPacked: true,
+    // 禁用字体警告
+    disableFontFace: false,
+    // 启用文本选择
+    enableXfa: true,
+    // 设置字体加载超时时间
+    fontLoadTimeout: 3e4,
+    // 抑制控制台警告
+    verbosity: 0
+  };
+};
+const useFileState = (props) => {
+  const fileUrl = ref("");
+  const changeFileUrl = async () => {
+    const { src } = props;
+    fileUrl.value = "";
+    if (isBlob(src)) {
+      fileUrl.value = base64ToFileUrl(await blobToBase64(src));
+    } else if (isBase64File(src)) {
+      fileUrl.value = base64ToFileUrl(src);
+    } else {
+      fileUrl.value = props.convertToLocalFileUrl ? await networkFileUrlToLocalFileUrl(src) : src;
+    }
+  };
+  const fileType = computed(() => {
+    if (isEmpty(fileUrl.value)) {
+      return FILE_TYPE.IMAGE;
+    }
+    return getFileType(props.convertToLocalFileUrl ? props.src : fileUrl.value);
+  });
+  watchEffect(changeFileUrl);
+  return {
+    fileType,
+    fileUrl
+  };
+};
+const useMouseEvent = () => {
+  const isMouseDown = ref(false);
+  const startX = ref(0);
+  const startY = ref(0);
+  const translateX = ref(0);
+  const translateY = ref(0);
+  const onMouseStart = (e) => {
+    isMouseDown.value = true;
+    startX.value = e.clientX - translateX.value;
+    startY.value = e.clientY - translateY.value;
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseLeave);
+  };
+  const onMouseMove = (e) => {
+    if (!isMouseDown.value) {
+      return;
+    }
+    e.preventDefault();
+    const x = e.clientX;
+    const y = e.clientY;
+    translateX.value = x - startX.value;
+    translateY.value = y - startY.value;
+  };
+  const onMouseLeave = () => {
+    isMouseDown.value = false;
+    window.removeEventListener("mousemove", onMouseMove);
+    window.removeEventListener("mouseup", onMouseLeave);
+  };
+  const resetMouseState = () => {
+    startX.value = 0;
+    startY.value = 0;
+    translateX.value = 0;
+    translateY.value = 0;
+    isMouseDown.value = false;
+  };
+  return {
+    resetMouseState,
+    onMouseStart,
+    translateX,
+    translateY,
+    isMouseDown
+  };
+};
+const useWheelEvent = (state = {}) => {
+  const { maxScale = 3, minScale = 0.4, stepNum = 0.2, wheelNum = 0.3 } = state;
+  const scale = ref(1);
+  const scaleText = computed(() => {
+    return `${numberToFixed(scale.value * 100, 0)}%`;
+  });
+  const minusScale = (num = stepNum) => {
+    scale.value = Math.max(minScale, scale.value -= num);
+  };
+  const plusScale = (num = stepNum) => {
+    scale.value = (scale.value += num) > maxScale ? maxScale : scale.value;
+  };
+  const clickMinusScale = useThrottleFn(() => minusScale(), 300);
+  const clickPlusScale = useThrottleFn(() => plusScale(), 300);
+  const wheelMinusScale = () => {
+    minusScale(Math.random() * wheelNum);
+  };
+  const wheelPlusScale = () => {
+    plusScale(Math.random() * wheelNum);
+  };
+  const onWheel = (e) => {
+    if (!e.ctrlKey) {
+      return;
+    }
+    e.preventDefault();
+    e.deltaY > 0 ? wheelMinusScale() : wheelPlusScale();
+  };
+  const resetWheelState = () => {
+    scale.value = 1;
+  };
+  return {
+    clickMinusScale,
+    clickPlusScale,
+    scale,
+    scaleText,
+    onWheel,
+    resetWheelState
+  };
+};
+const usePreviewFileTools = (fileUrl, pageNum) => {
+  const { onWheel, clickMinusScale, clickPlusScale, resetWheelState, scale, scaleText } = useWheelEvent();
+  const { isMouseDown, onMouseStart, resetMouseState, translateX, translateY } = useMouseEvent();
+  const wrapperStyle = computed(() => {
+    return {
+      transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,
+      transformOrigin: "center center"
+    };
+  });
+  const resetPdfData = () => {
+    resetMouseState();
+    resetWheelState();
+  };
+  watch(() => pageNum == null ? void 0 : pageNum.value, resetPdfData);
+  const wrapperRef = ref(null);
+  watch(() => fileUrl.value, () => {
+    if (!wrapperRef.value) {
+      return;
+    }
+    wrapperRef.value.scrollTop = 0;
+    resetPdfData();
+  });
+  return {
+    wrapperRef,
+    onWheel,
+    clickMinusScale,
+    clickPlusScale,
+    resetWheelState,
+    scale,
+    scaleText,
+    isMouseDown,
+    onMouseStart,
+    resetMouseState,
+    translateX,
+    translateY,
+    wrapperStyle
+  };
+};
+var EVENT_NAME = /* @__PURE__ */ ((EVENT_NAME2) => {
+  EVENT_NAME2["完成"] = "loaded";
+  EVENT_NAME2["改变"] = "change";
+  EVENT_NAME2["下一页"] = "next";
+  EVENT_NAME2["上一页"] = "prev";
+  EVENT_NAME2["放大"] = "zoomIn";
+  EVENT_NAME2["缩小"] = "zoomOut";
+  return EVENT_NAME2;
+})(EVENT_NAME || {});
+const usePreviewPdf = (state) => {
+  const nextPageDisabled = computed(() => state.pageNum >= state.total);
+  const nextPage = useThrottleFn(() => {
+    if (nextPageDisabled.value) {
+      return;
+    }
+    state.pageNum++;
+  }, 500);
+  const prevPageDisabled = computed(() => state.pageNum <= 1);
+  const prevPage = useThrottleFn(() => {
+    if (prevPageDisabled.value) {
+      return;
+    }
+    state.pageNum--;
+  }, 500);
+  const _pageNum = ref(1);
+  const onPageNumChange = () => {
+    const { total } = state;
+    state.pageNum = Math.max(Math.min(_pageNum.value, total), 1);
+  };
+  watchEffect(() => {
+    _pageNum.value = state.pageNum;
+  });
+  return {
+    nextPage,
+    nextPageDisabled,
+    prevPage,
+    prevPageDisabled,
+    _pageNum,
+    onPageNumChange
+  };
+};
+const _hoisted_1$6 = { class: "file-data__tools" };
+const _hoisted_2$1 = { class: "file-data__page" };
+const _hoisted_3$1 = { class: "file-data__text" };
+const _hoisted_4$1 = {
+  key: 1,
+  class: "file-data__scale"
+};
+const _hoisted_5$1 = { class: "file-data__scale-text" };
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "Tools",
+  props: /* @__PURE__ */ mergeModels({
+    showTools: { type: Boolean },
+    total: {},
+    scaleText: {},
+    nextPageDisabled: { type: Boolean },
+    prevPageDisabled: { type: Boolean },
+    enablePagination: { type: Boolean },
+    enableMove: { type: Boolean },
+    enableScale: { type: Boolean }
+  }, {
+    "modelValue": {
+      type: Number,
+      default: 1
+    },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels([EVENT_NAME.改变, EVENT_NAME.下一页, EVENT_NAME.上一页, EVENT_NAME.放大, EVENT_NAME.缩小], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const _pageNum = useModel(__props, "modelValue");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+        renderSlot(_ctx.$slots, "default"),
+        __props.showTools ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          __props.enablePagination ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createElementVNode("div", {
+              class: normalizeClass(["file-data__arrow file-data__arrow-prev", [__props.prevPageDisabled ? "is-disabled" : ""]]),
+              onClick: _cache[0] || (_cache[0] = ($event) => emits(unref(EVENT_NAME).上一页))
+            }, null, 2),
+            createElementVNode("div", _hoisted_2$1, [
+              withDirectives(createElementVNode("input", {
+                class: "file-data__input",
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _pageNum.value = $event),
+                onBlur: _cache[2] || (_cache[2] = ($event) => emits(unref(EVENT_NAME).改变))
+              }, null, 544), [
+                [vModelText, _pageNum.value]
+              ]),
+              createElementVNode("span", _hoisted_3$1, " / " + toDisplayString(__props.total), 1)
+            ]),
+            createElementVNode("div", {
+              class: normalizeClass(["file-data__arrow file-data__arrow-next", [__props.nextPageDisabled ? "is-disabled" : ""]]),
+              onClick: _cache[3] || (_cache[3] = ($event) => emits(unref(EVENT_NAME).下一页))
+            }, null, 2)
+          ], 64)) : createCommentVNode("", true),
+          __props.enableScale ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+            createElementVNode("div", {
+              class: "file-data__icon file-data__minus",
+              onClick: _cache[4] || (_cache[4] = ($event) => emits(unref(EVENT_NAME).缩小))
+            }),
+            createElementVNode("span", _hoisted_5$1, toDisplayString(__props.scaleText), 1),
+            createElementVNode("div", {
+              class: "file-data__icon file-data__plus",
+              onClick: _cache[5] || (_cache[5] = ($event) => emits(unref(EVENT_NAME).放大))
+            })
+          ])) : createCommentVNode("", true)
+        ], 64)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _hoisted_1$5 = { class: "file-data" };
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "Pdf",
+  props: /* @__PURE__ */ mergeModels({
+    enablePagination: { type: Boolean, default: true },
+    enableScale: { type: Boolean, default: true },
+    enableMove: { type: Boolean, default: true },
+    fileUrl: {},
+    showTools: { type: Boolean, default: true }
+  }, {
+    "modelValue": {
+      type: Boolean,
+      default: false
+    },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels([EVENT_NAME.完成], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const pdfLoading = useModel(__props, "modelValue");
+    const pdfSource = computed(() => {
+      return {
+        url: props.fileUrl,
+        ...getConfigurePdfJs()
+      };
+    });
+    const getState = () => ({
+      pageNum: 1,
+      total: 0,
+      isError: false
+    });
+    const state = reactive(getState());
+    const pdfHeight = ref(0);
+    const onLoadFileSuccess = async (e) => {
+      var _a;
+      state.total = e._pdfInfo.numPages;
+      await nextTick();
+      await sleep(50);
+      pdfHeight.value = ((_a = document.querySelector(".vue-file-dataembed")) == null ? void 0 : _a.clientHeight) ?? 0;
+    };
+    const onPdfError = () => {
+      state.isError = true;
+    };
+    const onRendered = async () => {
+      await sleep(300);
+      pdfLoading.value = false;
+      emits(EVENT_NAME.完成);
+    };
+    const {
+      prevPageDisabled,
+      nextPageDisabled,
+      nextPage,
+      _pageNum,
+      onPageNumChange,
+      prevPage
+    } = usePreviewPdf(state);
+    const onFileUrlChange = () => {
+      pdfLoading.value = true;
+      _pageNum.value = 1;
+      extend(state, getState());
+    };
+    watch(() => props.fileUrl, onFileUrlChange);
+    onMounted(onFileUrlChange);
+    const { pageNum } = toRefs(state);
+    const { fileUrl } = toRefs(props);
+    const { onWheel, clickMinusScale, clickPlusScale, isMouseDown, scaleText, onMouseStart, wrapperStyle } = usePreviewFileTools(fileUrl, pageNum);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+        createElementVNode("div", {
+          ref: "wrapperRef",
+          class: normalizeClass(["file-data__wrapper", [unref(isMouseDown) ? "is-drag" : ""]]),
+          onMousedown: _cache[0] || (_cache[0] = ($event) => __props.enableMove && unref(onMouseStart)($event)),
+          onWheel: _cache[1] || (_cache[1] = ($event) => __props.enableScale && unref(onWheel)($event))
+        }, [
+          createElementVNode("div", {
+            style: normalizeStyle([unref(wrapperStyle)])
+          }, [
+            createVNode(unref(VuePdfEmbed), {
+              class: "pdf",
+              source: pdfSource.value,
+              page: __props.enablePagination ? state.pageNum : void 0,
+              scale: 1,
+              onLoaded: onLoadFileSuccess,
+              onRendered,
+              onError: onPdfError
+            }, null, 8, ["source", "page"])
+          ], 4)
+        ], 34),
+        __props.enablePagination || __props.enableScale || __props.showTools ? (openBlock(), createBlock(_sfc_main$7, {
+          key: 0,
+          modelValue: unref(_pageNum),
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(_pageNum) ? _pageNum.value = $event : null),
+          total: state.total,
+          "prev-page-disabled": unref(prevPageDisabled),
+          "next-page-disabled": unref(nextPageDisabled),
+          "scale-text": unref(scaleText),
+          "show-tools": __props.showTools,
+          "enable-pagination": __props.enablePagination,
+          "enable-scale": __props.enableScale,
+          "enable-move": __props.enableMove,
+          onChange: unref(onPageNumChange),
+          onNext: unref(nextPage),
+          onPrev: unref(prevPage),
+          onZoomIn: unref(clickPlusScale),
+          onZoomOut: unref(clickMinusScale)
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default", { fileDataState: state })
+          ]),
+          _: 3
+        }, 8, ["modelValue", "total", "prev-page-disabled", "next-page-disabled", "scale-text", "show-tools", "enable-pagination", "enable-scale", "enable-move", "onChange", "onNext", "onPrev", "onZoomIn", "onZoomOut"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _hoisted_1$4 = { class: "file-data" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "Word",
+  props: /* @__PURE__ */ mergeModels({
+    enablePagination: { type: Boolean },
+    enableScale: { type: Boolean },
+    enableMove: { type: Boolean },
+    fileUrl: {},
+    showTools: { type: Boolean, default: true },
+    isLocalFile: { type: Boolean, default: false },
+    enableWrapper: { type: Boolean, default: true }
+  }, {
+    "modelValue": {
+      type: Boolean,
+      default: false
+    },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels([EVENT_NAME.完成], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const wordLoading = useModel(__props, "modelValue");
+    const generateWordFile = async () => {
+      const response = await fetch(props.fileUrl);
+      const blob = await response.blob();
+      return base64ToFile(await blobToBase64(blob), `${generateId()}.docx`);
+    };
+    const wordFileRef = useTemplateRef("wordFileRef");
+    const loadWordFile = async () => {
+      try {
+        wordLoading.value = true;
+        if (wordFileRef.value) {
+          wordFileRef.value.innerHTML = "";
+        }
+        const wordFile = await generateWordFile();
+        await renderAsync(
+          wordFile,
+          wordFileRef.value,
+          void 0,
+          {
+            // 默认样式类
+            className: "docx",
+            // 启用包装器
+            inWrapper: props.enableWrapper,
+            // 不忽略宽度
+            ignoreWidth: true,
+            // 不忽略高度
+            ignoreHeight: false,
+            // 不忽略字体
+            ignoreFonts: true,
+            // ✅ 启用分页
+            breakPages: true,
+            // ✅ 不忽略最后的分页符
+            ignoreLastRenderedPageBreak: true,
+            // 启用实验性功能
+            experimental: false,
+            // 清理XML声明
+            trimXmlDeclaration: true
+          }
+        );
+        await nextTick();
+      } catch (e) {
+        console.log("fileUrl---", props.fileUrl);
+        console.log("加载word文件失败----", e);
+      } finally {
+        wordLoading.value = false;
+      }
+    };
+    onMounted(loadWordFile);
+    watch(() => props.fileUrl, loadWordFile);
+    const { fileUrl } = toRefs(props);
+    const { onWheel, clickMinusScale, clickPlusScale, isMouseDown, scaleText, onMouseStart, wrapperStyle } = usePreviewFileTools(fileUrl);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+        createElementVNode("div", {
+          ref: "wrapperRef",
+          class: normalizeClass(["file-data__wrapper", [unref(isMouseDown) ? "is-drag" : "", __props.enableWrapper ? "is-enable-wrapper" : ""]]),
+          onMousedown: _cache[0] || (_cache[0] = ($event) => __props.enableMove && unref(onMouseStart)($event)),
+          onWheel: _cache[1] || (_cache[1] = ($event) => __props.enableScale && unref(onWheel)($event))
+        }, [
+          createElementVNode("div", {
+            ref_key: "wordFileRef",
+            ref: wordFileRef,
+            style: normalizeStyle([unref(wrapperStyle)])
+          }, null, 4)
+        ], 34),
+        __props.enablePagination || __props.enableScale || __props.showTools ? (openBlock(), createBlock(_sfc_main$7, {
+          key: 0,
+          "scale-text": unref(scaleText),
+          "show-tools": __props.showTools,
+          "enable-scale": __props.enableScale,
+          "enable-move": __props.enableMove,
+          onZoomIn: unref(clickPlusScale),
+          onZoomOut: unref(clickMinusScale)
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["scale-text", "show-tools", "enable-scale", "enable-move", "onZoomIn", "onZoomOut"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _sfc_main$4 = {};
+const _hoisted_1$3 = {
+  width: "24",
+  height: "24",
+  fill: "none"
+};
+function _sfc_render$2(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$3, [..._cache[0] || (_cache[0] = [
+    createElementVNode("circle", {
+      cx: "10.5",
+      cy: "10.5",
+      r: "6.5",
+      stroke: "#fff",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1),
+    createElementVNode("path", {
+      d: "M15.5 15.5L20 20",
+      stroke: "#fff",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1)
+  ])]);
+}
+const ZoomIn = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$2]]);
+const _sfc_main$3 = {};
+const _hoisted_1$2 = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function _sfc_render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$2, [..._cache[0] || (_cache[0] = [
+    createElementVNode("circle", {
+      cx: "10.5",
+      cy: "10.5",
+      r: "6.5",
+      stroke: "#fff",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1),
+    createElementVNode("path", {
+      d: "M7.5 10.5H13.5",
+      stroke: "#fff",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1),
+    createElementVNode("path", {
+      d: "M15.5 15.5L20 20",
+      stroke: "#fff",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1)
+  ])]);
+}
+const ZoomOut = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$1]]);
+const _sfc_main$2 = {};
+const _hoisted_1$1 = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      d: "M7 7L17 17",
+      stroke: "#fff",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1),
+    createElementVNode("path", {
+      d: "M7 17L17 7",
+      stroke: "#fff",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1)
+  ])]);
+}
+const Close = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
+const _hoisted_1 = { class: "file-data" };
+const _hoisted_2 = { class: "file-data__wrapper is-image" };
+const _hoisted_3 = ["src"];
+const _hoisted_4 = { class: "sakura-preview__image--data" };
+const _hoisted_5 = ["src"];
+const _hoisted_6 = {
+  key: 0,
+  class: "sakura-preview__image--tools"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "Image",
+  props: /* @__PURE__ */ mergeModels({
+    enablePagination: { type: Boolean },
+    enableScale: { type: Boolean },
+    enableMove: { type: Boolean },
+    fileUrl: {},
+    showTools: { type: Boolean }
+  }, {
+    "modelValue": {
+      type: Boolean,
+      default: false
+    },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const pdfLoading = useModel(__props, "modelValue");
+    const onImageLoad = () => {
+      pdfLoading.value = false;
+    };
+    const { width, height } = useWindowSize();
+    const imageWidth = ref(0);
+    const imageHeight = ref(0);
+    const loadImageSize = async () => {
+      const fileUrl2 = props.fileUrl;
+      imageWidth.value = 0;
+      imageHeight.value = 0;
+      const image = new Image();
+      image.src = fileUrl2;
+      image.onload = () => {
+        imageWidth.value = image.width;
+        imageHeight.value = image.height;
+      };
+    };
+    onMounted(loadImageSize);
+    const dialogImageStyle = computed(() => {
+      if (imageWidth.value > width.value) {
+        return {
+          width: "auto",
+          height: addUnit(height.value)
+        };
+      }
+      return {
+        width: addUnit(imageWidth.value),
+        height: addUnit(imageHeight.value)
+      };
+    });
+    const { fileUrl } = toRefs(props);
+    const {
+      onWheel,
+      onMouseStart,
+      isMouseDown,
+      clickMinusScale,
+      clickPlusScale,
+      wrapperStyle
+    } = usePreviewFileTools(fileUrl);
+    const visible = ref(false);
+    const handleVisible = () => {
+      visible.value = !visible.value;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("img", {
+              class: "file-data__image",
+              src: unref(fileUrl),
+              alt: "",
+              onLoad: onImageLoad,
+              onClick: handleVisible
+            }, null, 40, _hoisted_3)
+          ])
+        ]),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          createElementVNode("div", {
+            class: normalizeClass(["sakura-preview-dialog", [visible.value ? "is-visible" : ""]])
+          }, [
+            _cache[2] || (_cache[2] = createElementVNode("div", { class: "sakura-preview__image--mark" }, null, -1)),
+            createElementVNode("div", {
+              ref: "wrapperRef",
+              class: normalizeClass(["sakura-preview__image", [unref(isMouseDown) ? "is-drag" : ""]]),
+              onMousedown: _cache[0] || (_cache[0] = ($event) => __props.enableMove && unref(onMouseStart)($event)),
+              onWheel: _cache[1] || (_cache[1] = ($event) => __props.enableScale && unref(onWheel)($event))
+            }, [
+              createElementVNode("div", _hoisted_4, [
+                createElementVNode("img", {
+                  class: "dot-move",
+                  src: unref(fileUrl),
+                  style: normalizeStyle([dialogImageStyle.value, unref(wrapperStyle)]),
+                  alt: ""
+                }, null, 12, _hoisted_5)
+              ]),
+              createElementVNode("div", {
+                class: "sakura-preview__image--close",
+                onClick: handleVisible
+              }, [
+                createVNode(Close)
+              ]),
+              __props.enableScale ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                createVNode(ZoomIn, { onClick: unref(clickPlusScale) }, null, 8, ["onClick"]),
+                createVNode(ZoomOut, { onClick: unref(clickMinusScale) }, null, 8, ["onClick"])
+              ])) : createCommentVNode("", true)
+            ], 34)
+          ], 2)
+        ]))
+      ], 64);
+    };
+  }
+});
+const PreviewFileContextKey = Symbol("PreviewFile");
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "preview-file",
+  props: {
+    width: { default: "100%" },
+    height: { default: "100%" },
+    src: {},
+    enablePagination: { type: Boolean, default: true },
+    enableScale: { type: Boolean, default: true },
+    enableMove: { type: Boolean, default: true },
+    loadingType: { default: "circle" },
+    loadingState: { default: () => ({}) },
+    convertToLocalFileUrl: { type: Boolean, default: false },
+    themeColor: { default: "#409eff" }
+  },
+  setup(__props) {
+    const props = __props;
+    provide(PreviewFileContextKey, props);
+    const ns = useNamespace("preview-file");
+    const previewFileStyle = computed(() => {
+      const { width, height, themeColor } = props;
+      const style = {
+        "--preview-file-primary-color": themeColor
+      };
+      if (!isEmpty(width)) {
+        style.width = addUnit(width);
+      }
+      if (!isEmpty(height)) {
+        style.height = addUnit(height);
+      }
+      return style;
+    });
+    const { fileType, fileUrl } = useFileState(props);
+    const loading = ref(true);
+    const loadingCom = computed(() => {
+      const { loadingType } = props;
+      switch (loadingType) {
+        case "circle":
+          return Loading.Circle;
+        case "dot":
+          return Loading.Dot;
+        case "cube":
+          return Loading.Cube;
+        case "progress":
+        default:
+          return Loading.Progress;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(ns).b()),
+        style: normalizeStyle([previewFileStyle.value])
+      }, [
+        !unref(isEmpty)(unref(fileUrl)) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass([unref(ns).e("wrapper")])
+        }, [
+          unref(isPdfFile)(unref(fileType)) ? (openBlock(), createBlock(_sfc_main$6, {
+            key: 0,
+            modelValue: loading.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => loading.value = $event),
+            "file-url": unref(fileUrl),
+            "show-tools": !_ctx.$slots.default,
+            "enable-pagination": __props.enablePagination,
+            "enable-scale": __props.enableScale,
+            "enable-move": __props.enableMove
+          }, {
+            default: withCtx(({ fileDataState }) => [
+              renderSlot(_ctx.$slots, "default", {
+                fileState: fileDataState,
+                data: props
+              })
+            ]),
+            _: 3
+          }, 8, ["modelValue", "file-url", "show-tools", "enable-pagination", "enable-scale", "enable-move"])) : createCommentVNode("", true),
+          unref(isWordFile)(unref(fileType)) ? (openBlock(), createBlock(_sfc_main$5, {
+            key: 1,
+            modelValue: loading.value,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => loading.value = $event),
+            "file-url": unref(fileUrl),
+            "show-tools": !_ctx.$slots.default,
+            "enable-pagination": __props.enablePagination,
+            "enable-scale": __props.enableScale,
+            "enable-move": __props.enableMove,
+            "is-local-file": __props.convertToLocalFileUrl
+          }, null, 8, ["modelValue", "file-url", "show-tools", "enable-pagination", "enable-scale", "enable-move", "is-local-file"])) : unref(isImageFile)(unref(fileType)) ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 2,
+            modelValue: loading.value,
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => loading.value = $event),
+            "file-url": unref(fileUrl),
+            "show-tools": !_ctx.$slots.default,
+            "enable-scale": __props.enableScale,
+            "enable-move": __props.enableMove
+          }, null, 8, ["modelValue", "file-url", "show-tools", "enable-scale", "enable-move"])) : createCommentVNode("", true)
+        ], 2)) : createCommentVNode("", true),
+        withDirectives(createElementVNode("div", {
+          class: normalizeClass([unref(ns).e("loading")])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass([unref(ns).e("loading-spinner")])
+          }, [
+            (openBlock(), createBlock(resolveDynamicComponent(loadingCom.value), normalizeProps(guardReactiveProps({
+              ...__props.loadingState,
+              color: __props.themeColor
+            })), null, 16))
+          ], 2)
+        ], 2), [
+          [vShow, loading.value]
+        ])
+      ], 6);
+    };
+  }
+});
+const PreviewFileComponent = _sfc_main;
+PreviewFileComponent.install = (app) => {
+  app.component("PreviewFile", _sfc_main);
+  app.component("Loading", Loading);
+};
+export {
+  Loading,
+  PreviewFileComponent as default
+};