@l1yp/file-viewer 0.1.0 → 0.1.1

package/README.md

@@ -7,6 +7,7 @@
 ## 特性
 
 - **60+ 格式**：docx/xlsx/pptx/pdf、zip/7z/rar/tar、png/tiff/psd/heic/dcm、csv/jsonl/sqlite、markdown/代码高亮、eml/mht/har、字体/证书/密钥库、epub/mob、drawio/dxf/geojson、hprof/.class/.so/.dll、易语言 .e/.ec 等。
+- **ZIP 网页预览**：打开压缩包里的 HTML 时，自动解析并加载同包的 JS、CSS、图片、字体等相对依赖；源码保持原样，脚本仍需用户主动开启后才会在不透明源沙箱中运行。
 - **零后端**：上游字节只在浏览器解析；HTML/SVG 走沙箱 iframe、下载端点无法内联执行。
 - **按需分包**：每个查看器是独立的懒加载 chunk，打开 PDF 才拉 PDF 引擎；用不到的格式零成本。
 - **重型依赖可选**：只装你需要的格式的引擎；没装时显示「请安装 X」提示卡，不崩溃。

package/dist/components/DocxNavigationPane.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./DocxNavigationPane.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                   */
+//#region src/components/DocxNavigationPane.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-82c26438"]]);
+//#endregion
+export { n as default };

package/dist/components/DocxNavigationPane.vue.d.ts

@@ -0,0 +1,23 @@
+import type { ElementNavigationItem } from '@/composables/useElementNavigation';
+type __VLS_Props = {
+    outlineItems: readonly ElementNavigationItem[];
+    pageItems: readonly ElementNavigationItem[];
+    activeOutlineId: string;
+    activePageId: string;
+};
+type __VLS_ModelProps = {
+    'collapsed'?: boolean;
+    'view'?: 'outline' | 'pages';
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    navigate: (item: ElementNavigationItem) => any;
+    "update:collapsed": (value: boolean) => any;
+    "update:view": (value: "outline" | "pages") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onNavigate?: ((item: ElementNavigationItem) => any) | undefined;
+    "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+    "onUpdate:view"?: ((value: "outline" | "pages") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/DocxNavigationPane.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,96 @@
+import e from "./icons/Icon.js";
+import { Fragment as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, toDisplayString as f, useModel as p } from "vue";
+//#region src/components/DocxNavigationPane.vue?vue&type=script&setup=true&lang.ts
+var m = { class: "dn__header" }, h = { class: "dn__count" }, g = {
+	class: "dn__tabs",
+	role: "tablist",
+	"aria-label": "导航方式"
+}, _ = ["aria-selected"], v = ["aria-selected"], y = {
+	class: "dn__list",
+	"aria-label": "文档目录"
+}, b = [
+	"aria-current",
+	"title",
+	"onClick"
+], x = { class: "dn__label" }, S = {
+	key: 0,
+	class: "dn__empty"
+}, C = ["aria-current", "onClick"], w = { class: "dn__page-sheet" }, T = { class: "dn__label" }, E = /*@__PURE__*/ o({
+	__name: "DocxNavigationPane",
+	props: /*@__PURE__*/ s({
+		outlineItems: {},
+		pageItems: {},
+		activeOutlineId: {},
+		activePageId: {}
+	}, {
+		collapsed: {
+			type: Boolean,
+			default: !1
+		},
+		collapsedModifiers: {},
+		view: { default: "outline" },
+		viewModifiers: {}
+	}),
+	emits: /*@__PURE__*/ s(["navigate"], ["update:collapsed", "update:view"]),
+	setup(o, { emit: s }) {
+		let E = o, D = s, O = p(o, "collapsed"), k = p(o, "view");
+		function A(e) {
+			return (k.value === "outline" ? E.activeOutlineId : E.activePageId) === e.id;
+		}
+		return (s, p) => (u(), r("aside", {
+			class: c(["dn", { "dn--collapsed": O.value }]),
+			"aria-label": "文档导航"
+		}, [O.value ? (u(), r("button", {
+			key: 0,
+			type: "button",
+			class: "dn__reopen",
+			"aria-label": "展开文档导航",
+			title: "展开文档导航",
+			onClick: p[0] ||= (e) => O.value = !1
+		}, [a(e, {
+			name: "chevronRight",
+			size: 15
+		})])) : (u(), r(t, { key: 1 }, [
+			i("header", m, [i("div", null, [p[4] ||= i("strong", { class: "dn__title" }, "导航", -1), i("span", h, f(o.pageItems.length) + " 页", 1)]), i("button", {
+				type: "button",
+				class: "dn__collapse",
+				"aria-label": "收起文档导航",
+				title: "收起文档导航",
+				onClick: p[1] ||= (e) => O.value = !0
+			}, [a(e, {
+				name: "chevronLeft",
+				size: 15
+			})])]),
+			i("div", g, [i("button", {
+				type: "button",
+				role: "tab",
+				class: c(["dn__tab", { "dn__tab--active": k.value === "outline" }]),
+				"aria-selected": k.value === "outline",
+				onClick: p[2] ||= (e) => k.value = "outline"
+			}, " 目录 ", 10, _), i("button", {
+				type: "button",
+				role: "tab",
+				class: c(["dn__tab", { "dn__tab--active": k.value === "pages" }]),
+				"aria-selected": k.value === "pages",
+				onClick: p[3] ||= (e) => k.value = "pages"
+			}, " 页面 ", 10, v)]),
+			i("nav", y, [k.value === "outline" ? (u(), r(t, { key: 0 }, [(u(!0), r(t, null, d(o.outlineItems, (e) => (u(), r("button", {
+				key: e.id,
+				type: "button",
+				class: c(["dn__outline-item", { "dn__item--active": A(e) }]),
+				style: l({ paddingLeft: `${10 + e.level * 12}px` }),
+				"aria-current": A(e) ? "location" : void 0,
+				title: e.title,
+				onClick: (t) => D("navigate", e)
+			}, [p[5] ||= i("span", { class: "dn__marker" }, null, -1), i("span", x, f(e.title), 1)], 14, b))), 128)), o.outlineItems.length ? n("", !0) : (u(), r("p", S, " 文档未设置标题层级，可切换到“页面”导航。 "))], 64)) : (u(!0), r(t, { key: 1 }, d(o.pageItems, (e, t) => (u(), r("button", {
+				key: e.id,
+				type: "button",
+				class: c(["dn__page-item", { "dn__item--active": A(e) }]),
+				"aria-current": A(e) ? "page" : void 0,
+				onClick: (t) => D("navigate", e)
+			}, [i("span", w, f(t + 1), 1), i("span", T, f(e.title), 1)], 10, C))), 128))])
+		], 64))], 2));
+	}
+});
+//#endregion
+export { E as default };

package/dist/components/DocxViewer.js

@@ -2,6 +2,6 @@ import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./DocxViewer.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                           */
 //#region src/components/DocxViewer.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-9bff4ace"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-5e8d92a6"]]);
 //#endregion
 export { n as default };

package/dist/components/DocxViewer.vue_vue_type_script_setup_true_lang.js

@@ -1,59 +1,92 @@
-import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, onBeforeUnmount as i, onMounted as a, openBlock as o, ref as s, toDisplayString as c, vShow as l, watch as u, withDirectives as d } from "vue";
-import { renderAsync as f } from "docx-preview";
+import e from "./DocxNavigationPane.js";
+import { useElementNavigation as t } from "../composables/useElementNavigation.js";
+import { buildDocxNavigation as n, buildDocxPageNavigation as r } from "../lib/docxNavigation.js";
+import { createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, onBeforeUnmount as l, onMounted as u, openBlock as d, shallowRef as f, toDisplayString as p, unref as m, vShow as h, watch as g, withDirectives as _ } from "vue";
+import { renderAsync as v } from "docx-preview";
 //#region src/components/DocxViewer.vue?vue&type=script&setup=true&lang.ts
-var p = { class: "dx" }, m = {
+var y = { class: "dx" }, b = { class: "dx__stage" }, x = {
 	key: 0,
 	class: "dx__msg"
-}, h = {
+}, S = {
 	key: 1,
 	class: "dx__msg dx__msg--error"
-}, g = /*@__PURE__*/ r({
+}, C = /*@__PURE__*/ c({
 	__name: "DocxViewer",
 	props: {
 		url: {},
 		name: {},
 		size: {}
 	},
-	setup(r) {
-		let g = r, _ = s("loading"), v = s(""), y = s(null);
-		async function b() {
-			let e = y.value;
-			if (!(!g.url || !e)) {
-				_.value = "loading", v.value = "", e.innerHTML = "";
+	setup(c) {
+		let C = c, w = f("loading"), T = f(""), E = f(null), D = f("outline"), O = f(!1), { outlineItems: k, pageItems: A, activeOutlineId: j, activePageId: M, setItems: N, navigate: P } = t(E);
+		async function F() {
+			let e = E.value;
+			if (!C.url || !e) return;
+			w.value = "loading", T.value = "", N([], []), e.innerHTML = "";
+			let t = C.url;
+			try {
+				let i = await fetch(t);
+				if (!i.ok) throw Error(`HTTP ${i.status}`);
+				let a = await i.arrayBuffer();
+				if (C.url !== t || E.value !== e) return;
+				let o = await v(a, e, void 0, {
+					className: "docx",
+					inWrapper: !0,
+					ignoreWidth: !0,
+					ignoreHeight: !0,
+					breakPages: !0,
+					renderHeaders: !0,
+					renderFooters: !0,
+					renderFootnotes: !0,
+					renderEndnotes: !0,
+					useBase64URL: !0
+				});
+				if (C.url !== t || E.value !== e) return;
+				let s;
 				try {
-					let t = await fetch(g.url);
-					if (!t.ok) throw Error(`HTTP ${t.status}`);
-					let n = await t.arrayBuffer();
-					if (y.value !== e || (await f(n, e, void 0, {
-						className: "docx",
-						inWrapper: !0,
-						ignoreWidth: !0,
-						ignoreHeight: !0,
-						breakPages: !0,
-						renderHeaders: !0,
-						renderFooters: !0,
-						renderFootnotes: !0,
-						renderEndnotes: !0,
-						useBase64URL: !0
-					}), y.value !== e)) return;
-					_.value = "ready";
-				} catch (e) {
-					v.value = e instanceof Error ? e.message : String(e), _.value = "error";
+					s = n(o, e);
+				} catch (t) {
+					console.warn("DOCX outline navigation unavailable:", t), s = {
+						outline: [],
+						pages: r(e)
+					};
 				}
+				N(s.outline, s.pages), D.value = s.outline.length ? "outline" : "pages", w.value = "ready";
+			} catch (e) {
+				T.value = e instanceof Error ? e.message : String(e), w.value = "error";
 			}
 		}
-		return a(b), u(() => g.url, b), i(() => {
-			y.value && (y.value.innerHTML = "");
-		}), (r, i) => (o(), t("div", p, [_.value === "loading" ? (o(), t("p", m, "正在渲染 Word 文档…")) : _.value === "error" ? (o(), t("div", h, [n("p", null, "渲染失败：" + c(v.value), 1), n("button", {
+		return u(F), g(() => C.url, F), l(() => {
+			E.value && (E.value.innerHTML = "");
+		}), (t, n) => (d(), o("div", y, [w.value === "ready" ? (d(), i(e, {
+			key: 0,
+			collapsed: O.value,
+			"onUpdate:collapsed": n[0] ||= (e) => O.value = e,
+			view: D.value,
+			"onUpdate:view": n[1] ||= (e) => D.value = e,
+			"outline-items": m(k),
+			"page-items": m(A),
+			"active-outline-id": m(j),
+			"active-page-id": m(M),
+			onNavigate: m(P)
+		}, null, 8, [
+			"collapsed",
+			"view",
+			"outline-items",
+			"page-items",
+			"active-outline-id",
+			"active-page-id",
+			"onNavigate"
+		])) : a("", !0), s("div", b, [w.value === "loading" ? (d(), o("p", x, "正在渲染 Word 文档…")) : w.value === "error" ? (d(), o("div", S, [s("p", null, "渲染失败：" + p(T.value), 1), s("button", {
 			type: "button",
 			class: "dx__retry",
-			onClick: b
-		}, "重试")])) : e("", !0), d(n("div", {
+			onClick: F
+		}, "重试")])) : a("", !0), _(s("div", {
 			ref_key: "docEl",
-			ref: y,
+			ref: E,
 			class: "dx__doc"
-		}, null, 512), [[l, _.value === "ready"]])]));
+		}, null, 512), [[h, w.value === "ready"]])])]));
 	}
 });
 //#endregion
-export { g as default };
+export { C as default };

package/dist/components/FileViewerBody.js

@@ -2,6 +2,6 @@ import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./FileViewerBody.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                               */
 //#region src/components/FileViewerBody.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-e200097e"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-af870145"]]);
 //#endregion
 export { n as default };

package/dist/components/FileViewerBody.vue.d.ts

@@ -24,6 +24,11 @@ type __VLS_Props = {
     file: ViewerFile;
     mode?: 'render' | 'source';
     hostChooser?: boolean;
+    /**
+     * Render-only HTML whose archive-relative dependencies have already been rewritten. Source/copy continue to
+     * use `file.content` (or fetched text), so opening an HTML entry inside a ZIP still shows its original source.
+     */
+    htmlPreview?: string;
 };
 declare function pickFormat(key: string): void;
 declare function resetFormat(): void;