@work-zhanguo/light-file-preview 0.0.17 → 0.0.19

package/README.md

@@ -25,13 +25,15 @@
 
 ## 项目简介
 
-- 当前版本：`0.0.17`
+- 当前版本：`0.0.18`
 - 适用场景：业务系统附件预览、在线查看、弹窗预览、新页面预览
 - 支持 Vue 3、Vue 2 适配入口，以及非 Vue 项目的 standalone 产物
+- `PPTX` 预览已拆分为独立项目：[@work-zhanguo/pptx-preview](https://www.npmjs.com/package/@work-zhanguo/pptx-preview) / [Gitee](https://gitee.com/hou_zhan_guo/pptx-review)
 - 在线演示：可通过顶部 `在线演示 Demo` 入口访问
 
 最近更新：
 
+- `0.0.18`：更新 `PPTX` 在线预览效果截图，README 与文档页展示改为真实预览画面
 - `0.0.17`：补全 `PPTX` 在线预览能力，接入 `@work-zhanguo/pptx-preview`，同步更新演示文件与项目文档
 - `0.0.16`：修复 `style.css` 引入后污染业务全局样式的问题，组件样式已收敛到 `.lfp-*` 作用域
 - `0.0.15`：新增 npm `README.md` 的中英文双版本折叠切换展示，同步调整包描述与文档版本信息
@@ -59,11 +61,12 @@
 
 ![PDF 预览效果](https://unpkg.com/@work-zhanguo/light-file-preview/public/screenshots/effect-pdf.png)
 
-### PPTX
+### PPTX 说明
 
-`PPTX` 现已支持在线预览，适合业务系统里常见的汇报、方案、说明类演示文稿查看。旧版 `PPT` 仍保持下载入口降级。
+当前项目不再内置 `PPTX` 预览和相关集成能力。如需演示文稿预览，请直接使用独立项目：
 
-![PPTX 预览效果](https://unpkg.com/@work-zhanguo/light-file-preview/public/screenshots/effect-pptx.png)
+- npm：[@work-zhanguo/pptx-preview](https://www.npmjs.com/package/@work-zhanguo/pptx-preview)
+- Gitee：[hou_zhan_guo/pptx-review](https://gitee.com/hou_zhan_guo/pptx-review)
 
 ## 支持文件
 
@@ -87,7 +90,6 @@
 - `CSS`
 - `MD`
 - `DOCX`
-- `PPTX`
 - `XLS`
 - `XLSX`
 - `CSV`
@@ -100,6 +102,7 @@
 
 - `DOC`
 - `PPT`
+- `PPTX`
 - 其他未识别格式
 
 补充说明：
@@ -112,11 +115,17 @@
 
 - [pdf.js](https://github.com/mozilla/pdf.js)
 - [docx-preview](https://github.com/VolodymyrBaydalka/docxjs)
-- [@work-zhanguo/pptx-preview](https://www.npmjs.com/package/@work-zhanguo/pptx-preview)
 - [SheetJS](https://github.com/SheetJS/sheetjs)
 - [marked](https://github.com/markedjs/marked)
 - [DOMPurify](https://github.com/cure53/DOMPurify)
 
+## PPTX 预览
+
+`PPTX` 预览已经拆分到独立项目维护。本项目只保留通用文件预览能力，不再内置 `PPTX` 渲染器。
+
+- npm：[@work-zhanguo/pptx-preview](https://www.npmjs.com/package/@work-zhanguo/pptx-preview)
+- Gitee：[hou_zhan_guo/pptx-review](https://gitee.com/hou_zhan_guo/pptx-review)
+
 ## 安装
 
 ```bash
@@ -297,13 +306,15 @@ npm run build:site
 
 ## Overview
 
-- Current version: `0.0.17`
+- Current version: `0.0.18`
 - Use cases: attachment preview in business systems, inline viewing, dialog preview, and standalone preview pages
 - Supports Vue 3, a Vue 2 adapter entry, and standalone assets for non-Vue projects
+- `PPTX` preview has been split into a standalone project: [@work-zhanguo/pptx-preview](https://www.npmjs.com/package/@work-zhanguo/pptx-preview) / [Gitee](https://gitee.com/hou_zhan_guo/pptx-review)
 - Demo: available through the `在线演示 Demo` link at the top of this document
 
 Recent updates:
 
+- `0.0.18`: refreshed the `PPTX` preview screenshot so README and docs now show the real online preview result
 - `0.0.17`: added online `PPTX` preview through `@work-zhanguo/pptx-preview`, and synchronized the demo file and project documentation
 - `0.0.16`: fixed global style leakage caused by importing `style.css`, and scoped published component styles to `.lfp-*` rules only
 - `0.0.15`: rewrote `README.md` for npm with collapsible Chinese and English sections, and synchronized package description and documentation version info
@@ -331,11 +342,12 @@ The images below use the npm CDN URL. Local repository changes do not affect the
 
 ![PDF preview](https://unpkg.com/@work-zhanguo/light-file-preview/public/screenshots/effect-pdf.png)
 
-### PPTX
+### PPTX Note
 
-`PPTX` files are now supported for online preview, which fits common slide decks used in business systems. Legacy `PPT` files still fall back to a download entry.
+This project no longer ships built-in `PPTX` preview support. If you need slide preview, use the standalone project instead:
 
-![PPTX preview](https://unpkg.com/@work-zhanguo/light-file-preview/public/screenshots/effect-pptx.png)
+- npm: [@work-zhanguo/pptx-preview](https://www.npmjs.com/package/@work-zhanguo/pptx-preview)
+- Gitee: [hou_zhan_guo/pptx-review](https://gitee.com/hou_zhan_guo/pptx-review)
 
 ## Supported Files
 
@@ -359,7 +371,6 @@ Supported for online preview:
 - `CSS`
 - `MD`
 - `DOCX`
-- `PPTX`
 - `XLS`
 - `XLSX`
 - `CSV`
@@ -372,6 +383,7 @@ Fallback to download entry:
 
 - `DOC`
 - `PPT`
+- `PPTX`
 - any unrecognized format
 
 Notes:
@@ -384,11 +396,17 @@ Notes:
 
 - [pdf.js](https://github.com/mozilla/pdf.js)
 - [docx-preview](https://github.com/VolodymyrBaydalka/docxjs)
-- [@work-zhanguo/pptx-preview](https://www.npmjs.com/package/@work-zhanguo/pptx-preview)
 - [SheetJS](https://github.com/SheetJS/sheetjs)
 - [marked](https://github.com/markedjs/marked)
 - [DOMPurify](https://github.com/cure53/DOMPurify)
 
+## PPTX Preview
+
+`PPTX` preview is now maintained as a standalone project. This package keeps the generic file preview scope and no longer bundles a `PPTX` renderer.
+
+- npm: [@work-zhanguo/pptx-preview](https://www.npmjs.com/package/@work-zhanguo/pptx-preview)
+- Gitee: [hou_zhan_guo/pptx-review](https://gitee.com/hou_zhan_guo/pptx-review)
+
 ## Installation
 
 ```bash

package/dist/{UnsupportedRenderer-B016ePP5.js → UnsupportedRenderer-CbQ7S46f.js}

@@ -1,5 +1,5 @@
 import { defineComponent as o, openBlock as l, createElementBlock as a, createElementVNode as t, toDisplayString as i, unref as r } from "vue";
-import { d as s } from "./index-DX4yvG8n.js";
+import { d as s } from "./index-DB5StklO.js";
 const d = { class: "lfp-empty" }, p = { class: "lfp-hint" }, c = /* @__PURE__ */ o({
   __name: "UnsupportedRenderer",
   props: {

package/dist/index-DB5StklO.js

@@ -0,0 +1,363 @@
+import { defineComponent as ee, defineAsyncComponent as L, ref as R, computed as x, watch as U, onBeforeUnmount as te, openBlock as s, createBlock as E, Teleport as oe, createVNode as N, Transition as O, withCtx as V, createElementBlock as v, normalizeClass as Z, createCommentVNode as S, createElementVNode as l, toDisplayString as D, Fragment as ne, unref as _, reactive as $, createApp as q, h as z } from "vue";
+const y = {
+  image: ["png", "jpg", "jpeg", "gif", "webp", "bmp", "svg"],
+  pdf: ["pdf"],
+  text: ["txt", "json", "js", "ts", "jsx", "tsx", "html", "css", "md", "csv"],
+  docx: ["docx"],
+  sheet: ["xls", "xlsx", "csv"],
+  video: ["mp4", "webm"],
+  audio: ["mp3", "wav"]
+}, ae = ["doc", "ppt", "pptx"];
+function I(e = "") {
+  const n = e.split("#")[0].split("?")[0].split(".");
+  return n.length > 1 ? n[n.length - 1].toLowerCase() : "";
+}
+function le(e) {
+  const t = I(e);
+  return y.image.includes(t) ? "image" : y.pdf.includes(t) ? "pdf" : y.docx.includes(t) ? "docx" : y.sheet.includes(t) ? "sheet" : y.video.includes(t) ? "video" : y.audio.includes(t) ? "audio" : y.text.includes(t) ? t === "csv" ? "sheet" : "text" : (ae.includes(t), "unsupported");
+}
+function se(e) {
+  if (/^(blob:|data:|https?:\/\/|file:\/\/)/i.test(e))
+    return e;
+  try {
+    const t = new URL(e, window.location.href);
+    return t.pathname = t.pathname.split("/").map((n) => encodeURIComponent(decodeURIComponent(n))).join("/"), t.toString();
+  } catch (t) {
+    return e.split("/").map((n) => encodeURIComponent(decodeURIComponent(n))).join("/");
+  }
+}
+function H(e, t) {
+  var r;
+  if (typeof e == "string") {
+    const f = se(e), d = e.split("/"), o = (r = t != null ? t : d[d.length - 1]) != null ? r : "unknown";
+    return {
+      source: e,
+      src: f,
+      name: decodeURIComponent(o.split("?")[0].split("#")[0]),
+      extension: I(o)
+    };
+  }
+  const n = URL.createObjectURL(e), c = t != null ? t : "name" in e && typeof e.name == "string" ? e.name : "blob";
+  return {
+    source: e,
+    src: n,
+    name: c,
+    extension: I(c),
+    cleanup: () => URL.revokeObjectURL(n)
+  };
+}
+function ie(e, t) {
+  const n = document.createElement("a");
+  n.href = e, n.download = t, n.target = "_blank", n.rel = "noopener", document.body.append(n), n.click(), n.remove();
+}
+const ue = ["aria-modal"], re = {
+  key: 0,
+  class: "lfp-toolbar"
+}, ce = { class: "lfp-toolbar__meta" }, de = { class: "lfp-title" }, ve = { class: "lfp-badge" }, fe = { class: "lfp-toolbar__actions" }, pe = {
+  key: 0,
+  class: "lfp-loading"
+}, me = {
+  key: 0,
+  class: "lfp-error"
+}, ge = ["src", "alt"], xe = ["src"], be = ["src"], A = /* @__PURE__ */ ee({
+  __name: "FilePreview",
+  props: {
+    source: {},
+    fileName: {},
+    mode: { default: "inline" },
+    visible: { type: Boolean, default: !0 },
+    loadingText: { default: "文件加载中..." },
+    textEncoding: { default: "utf-8" },
+    maxTextBytes: { default: 1024 * 1024 * 2 },
+    maxSheetRows: { default: 200 },
+    maxSheetCols: { default: 50 },
+    pdfScale: { default: 1.35 },
+    showToolbar: { type: Boolean, default: !0 },
+    dialogTitle: { default: "文件预览" }
+  },
+  emits: ["update:visible", "error"],
+  setup(e, { emit: t }) {
+    const n = L(() => import("./PdfRenderer-DweDxjLS.js")), c = L(() => import("./TextRenderer-KUhpnf63.js")), r = L(() => import("./DocxRenderer-Cck1uOjU.js")), f = L(() => import("./SheetRenderer-CMDoDBXR.js")), d = L(() => import("./UnsupportedRenderer-CbQ7S46f.js")), o = e, F = t, b = R(null), p = R(!1), h = R(""), k = R(0), a = R(H(o.source, o.fileName)), w = R(!1), X = {
+      image: "图片",
+      pdf: "PDF",
+      text: "文本",
+      docx: "DOCX",
+      sheet: "表格",
+      video: "视频",
+      audio: "音频",
+      unsupported: "下载"
+    }, m = x(() => le(a.value.name)), W = x(() => X[m.value]), G = x(() => o.fileName || a.value.name || o.dialogTitle), g = x(() => o.mode === "dialog"), J = x(() => g.value ? o.visible : !0), B = x(() => `${a.value.src}::${k.value}`), C = x(
+      () => [
+        a.value.src,
+        a.value.extension,
+        o.textEncoding,
+        o.maxTextBytes,
+        o.maxSheetRows,
+        o.maxSheetCols,
+        o.pdfScale,
+        k.value
+      ].join("::")
+    ), j = x(() => m.value === "image" ? "img" : m.value === "video" ? "video" : m.value === "audio" ? "audio" : null);
+    U(
+      () => [o.source, o.fileName],
+      () => {
+        var i, u;
+        (i = b.value) == null || i.call(b), a.value = H(o.source, o.fileName), b.value = (u = a.value.cleanup) != null ? u : null, h.value = "", p.value = !1, k.value += 1;
+      },
+      { immediate: !0 }
+    ), U(
+      () => [o.textEncoding, o.maxTextBytes, o.maxSheetRows, o.maxSheetCols, o.pdfScale],
+      () => {
+        h.value = "", p.value = !1, k.value += 1;
+      }
+    ), U(
+      () => o.visible,
+      (i, u) => {
+        if (g.value) {
+          if (!i) {
+            w.value = !1, p.value = !1;
+            return;
+          }
+          u || (h.value = "", p.value = !1, k.value += 1, w.value = !1);
+        }
+      }
+    ), U(
+      () => o.mode,
+      (i, u) => {
+        i === "dialog" && u !== "dialog" && o.visible && (h.value = "", p.value = !1, k.value += 1, w.value = !1);
+      }
+    ), te(() => {
+      var i;
+      (i = b.value) == null || i.call(b);
+    });
+    function M() {
+      w.value = !1, F("update:visible", !1);
+    }
+    function Q() {
+      w.value = !0;
+    }
+    function Y() {
+      w.value && (w.value = !1, M());
+    }
+    function K() {
+      ie(a.value.src, a.value.name);
+    }
+    function P(i) {
+      h.value = i.message, F("error", i);
+    }
+    function T(i) {
+      p.value = i;
+    }
+    return (i, u) => (s(), E(oe, {
+      to: "body",
+      disabled: !g.value
+    }, [
+      N(O, {
+        name: g.value ? "lfp-dialog" : "lfp-static",
+        appear: ""
+      }, {
+        default: V(() => [
+          J.value ? (s(), v("div", {
+            key: 0,
+            class: Z(["lfp-wrapper", { "is-dialog": g.value }])
+          }, [
+            g.value ? (s(), v("div", {
+              key: 0,
+              class: "lfp-backdrop",
+              onPointerdown: Q,
+              onClick: Y
+            }, null, 32)) : S("", !0),
+            l("section", {
+              class: "lfp-panel",
+              role: "dialog",
+              "aria-modal": g.value ? "true" : "false"
+            }, [
+              e.showToolbar ? (s(), v("header", re, [
+                l("div", ce, [
+                  l("strong", de, D(G.value), 1),
+                  l("span", ve, D(W.value), 1)
+                ]),
+                l("div", fe, [
+                  l("button", {
+                    class: "lfp-button lfp-icon-button",
+                    type: "button",
+                    "aria-label": "Download",
+                    title: "Download",
+                    onClick: K
+                  }, [...u[0] || (u[0] = [
+                    l("svg", {
+                      viewBox: "0 0 24 24",
+                      "aria-hidden": "true"
+                    }, [
+                      l("path", { d: "M12 3.5a1 1 0 0 1 1 1V12l2.8-2.8a1 1 0 1 1 1.4 1.42l-4.5 4.48a1 1 0 0 1-1.4 0l-4.5-4.48a1 1 0 0 1 1.4-1.42L11 12V4.5a1 1 0 0 1 1-1Zm-7 13a1 1 0 0 1 1 1v.75c0 .41.34.75.75.75h10.5a.75.75 0 0 0 .75-.75v-.75a1 1 0 1 1 2 0v.75A2.75 2.75 0 0 1 17.25 21H6.75A2.75 2.75 0 0 1 4 18.25v-.75a1 1 0 0 1 1-1Z" })
+                    ], -1)
+                  ])]),
+                  g.value ? (s(), v("button", {
+                    key: 0,
+                    class: "lfp-button lfp-button is-ghost lfp-icon-button",
+                    type: "button",
+                    "aria-label": "Close",
+                    title: "Close",
+                    onClick: M
+                  }, [...u[1] || (u[1] = [
+                    l("svg", {
+                      viewBox: "0 0 24 24",
+                      "aria-hidden": "true"
+                    }, [
+                      l("path", { d: "M6.7 5.3a1 1 0 0 1 1.4 0L12 9.17l3.9-3.88a1 1 0 1 1 1.4 1.42L13.4 10.6l3.9 3.89a1 1 0 0 1-1.4 1.42L12 12.03l-3.9 3.88a1 1 0 0 1-1.4-1.42l3.9-3.89-3.9-3.89a1 1 0 0 1 0-1.42Z" })
+                    ], -1)
+                  ])])) : S("", !0)
+                ])
+              ])) : S("", !0),
+              l("div", {
+                class: Z(["lfp-content", { "is-loading": p.value }])
+              }, [
+                N(O, { name: "lfp-fade" }, {
+                  default: V(() => [
+                    p.value ? (s(), v("div", pe, [
+                      u[2] || (u[2] = l("span", { class: "lfp-spinner" }, null, -1)),
+                      l("span", null, D(e.loadingText), 1)
+                    ])) : S("", !0)
+                  ]),
+                  _: 1
+                }),
+                h.value ? (s(), v("div", me, [
+                  l("p", null, D(h.value), 1),
+                  l("button", {
+                    class: "lfp-button lfp-icon-button",
+                    type: "button",
+                    "aria-label": "Download",
+                    title: "Download",
+                    onClick: K
+                  }, [...u[3] || (u[3] = [
+                    l("svg", {
+                      viewBox: "0 0 24 24",
+                      "aria-hidden": "true"
+                    }, [
+                      l("path", { d: "M12 3.5a1 1 0 0 1 1 1V12l2.8-2.8a1 1 0 1 1 1.4 1.42l-4.5 4.48a1 1 0 0 1-1.4 0l-4.5-4.48a1 1 0 0 1 1.4-1.42L11 12V4.5a1 1 0 0 1 1-1Zm-7 13a1 1 0 0 1 1 1v.75c0 .41.34.75.75.75h10.5a.75.75 0 0 0 .75-.75v-.75a1 1 0 1 1 2 0v.75A2.75 2.75 0 0 1 17.25 21H6.75A2.75 2.75 0 0 1 4 18.25v-.75a1 1 0 0 1 1-1Z" })
+                    ], -1)
+                  ])])
+                ])) : (s(), v(ne, { key: 1 }, [
+                  j.value === "img" ? (s(), v("img", {
+                    key: B.value,
+                    class: "lfp-image",
+                    src: a.value.src,
+                    alt: a.value.name,
+                    loading: "lazy"
+                  }, null, 8, ge)) : j.value === "video" ? (s(), v("video", {
+                    key: B.value,
+                    class: "lfp-media",
+                    src: a.value.src,
+                    controls: "",
+                    preload: "metadata"
+                  }, null, 8, xe)) : j.value === "audio" ? (s(), v("audio", {
+                    key: B.value,
+                    class: "lfp-audio",
+                    src: a.value.src,
+                    controls: "",
+                    preload: "metadata"
+                  }, null, 8, be)) : m.value === "pdf" ? (s(), E(_(n), {
+                    key: C.value,
+                    source: typeof o.source == "string" ? a.value.src : o.source,
+                    scale: e.pdfScale,
+                    onLoading: T,
+                    onError: P
+                  }, null, 8, ["source", "scale"])) : m.value === "docx" ? (s(), E(_(r), {
+                    key: C.value,
+                    source: typeof o.source == "string" ? a.value.src : o.source,
+                    onLoading: T,
+                    onError: P
+                  }, null, 8, ["source"])) : m.value === "sheet" ? (s(), E(_(f), {
+                    key: C.value,
+                    source: typeof o.source == "string" ? a.value.src : o.source,
+                    "max-cols": e.maxSheetCols,
+                    "max-rows": e.maxSheetRows,
+                    onLoading: T,
+                    onError: P
+                  }, null, 8, ["source", "max-cols", "max-rows"])) : m.value === "text" ? (s(), E(_(c), {
+                    key: C.value,
+                    source: typeof o.source == "string" ? a.value.src : o.source,
+                    encoding: e.textEncoding,
+                    extension: a.value.extension,
+                    "max-bytes": e.maxTextBytes,
+                    onLoading: T,
+                    onError: P
+                  }, null, 8, ["source", "encoding", "extension", "max-bytes"])) : (s(), E(_(d), {
+                    key: 7,
+                    "file-name": a.value.name,
+                    src: a.value.src
+                  }, null, 8, ["file-name", "src"]))
+                ], 64))
+              ], 2)
+            ], 8, ue)
+          ], 2)) : S("", !0)
+        ]),
+        _: 1
+      }, 8, ["name"])
+    ], 8, ["disabled"]));
+  }
+});
+function he(e) {
+  if (typeof e == "string") {
+    const t = document.querySelector(e);
+    if (!t)
+      throw new Error(`未找到挂载节点：${e}`);
+    return t;
+  }
+  return e;
+}
+function we(e, t) {
+  const n = $({ ...t }), c = he(e), r = q({
+    render: () => z(A, n)
+  });
+  return r.mount(c), {
+    update(f) {
+      Object.assign(n, f);
+    },
+    unmount() {
+      r.unmount();
+    }
+  };
+}
+function ye(e) {
+  const t = document.createElement("div");
+  document.body.append(t);
+  let n;
+  const c = e["onUpdate:visible"], r = $({
+    visible: !0,
+    mode: "dialog",
+    ...e,
+    "onUpdate:visible"(d) {
+      c == null || c(d), r.visible = d, d || queueMicrotask(() => n.unmount());
+    }
+  }), f = q({
+    render: () => z(A, r)
+  });
+  return f.mount(t), n = {
+    update(d) {
+      Object.assign(r, d);
+    },
+    unmount() {
+      f.unmount(), t.remove();
+    }
+  }, n;
+}
+function Re() {
+  const e = {
+    mount: we,
+    openDialog: ye
+  };
+  return typeof window != "undefined" && (window.LightFilePreview = e), e;
+}
+const Ee = {
+  install(e) {
+    e.component("LightFilePreview", A);
+  }
+};
+export {
+  A as _,
+  ie as d,
+  Ee as i,
+  ye as o,
+  Re as r
+};

package/dist/light-file-preview.js

@@ -1,4 +1,4 @@
-import { _ as i, i as r, o, r as l } from "./index-DX4yvG8n.js";
+import { _ as i, i as r, o, r as l } from "./index-DB5StklO.js";
 export {
   i as FilePreview,
   r as default,