@l1yp/file-viewer 0.1.4 → 0.1.5

package/dist/components/DocxEmbeddedFiles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocxEmbeddedFiles.js","names":[],"sources":["../../src/components/DocxEmbeddedFiles.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport Icon from '@/components/icons/Icon.vue'\nimport { formatBytes } from '@/lib/format'\nimport type { DocxEmbeddedFile } from '@/lib/docxEmbeddings'\n\ndefineProps<{\n  files: readonly DocxEmbeddedFile[]\n  downloadBusyId?: string\n  error?: string\n}>()\n\nconst emit = defineEmits<{\n  open: [file: DocxEmbeddedFile]\n  download: [file: DocxEmbeddedFile]\n}>()\n\nfunction extension(name: string): string {\n  const i = name.lastIndexOf('.')\n  return i > 0 ? name.slice(i + 1).toUpperCase() : 'FILE'\n}\n</script>\n\n<template>\n  <section class=\"def\" aria-label=\"Word 文档内嵌文件\">\n    <div class=\"def__heading\">\n      <Icon name=\"paperclip\" :size=\"14\" />\n      <span>内嵌文件</span>\n      <span class=\"def__count\">{{ files.length }}</span>\n    </div>\n    <div class=\"def__list\">\n      <div v-for=\"file in files\" :key=\"file.id\" class=\"def__item\">\n        <button\n          type=\"button\"\n          class=\"def__open\"\n          :title=\"`预览 ${file.name}`\"\n          @click=\"emit('open', file)\"\n        >\n          <span class=\"def__ext\">{{ extension(file.name) }}</span>\n          <span class=\"def__name\">{{ file.label || file.name }}</span>\n          <span class=\"def__size\">{{ formatBytes(file.size) }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"def__download\"\n          :disabled=\"downloadBusyId === file.id\"\n          :title=\"downloadBusyId === file.id ? '正在准备下载' : `下载 ${file.name}`\"\n          @click=\"emit('download', file)\"\n        >\n          <Icon :name=\"downloadBusyId === file.id ? 'clock' : 'download'\" :size=\"14\" />\n        </button>\n      </div>\n    </div>\n    <span v-if=\"error\" class=\"def__error\" role=\"status\" :title=\"error\">{{ error }}</span>\n  </section>\n</template>\n\n<style scoped>\n.def {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-shrink: 0;\n  min-width: 0;\n  padding: 7px 10px;\n  border-bottom: 1px solid var(--border);\n  background: var(--surface);\n}\n.def__heading {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n  color: var(--muted);\n  font-size: 11.5px;\n  font-weight: 600;\n  white-space: nowrap;\n}\n.def__count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 999px;\n  color: var(--accent);\n  background: var(--accent-soft);\n  font-size: 10.5px;\n  font-variant-numeric: tabular-nums;\n}\n.def__list {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow-x: auto;\n  overscroll-behavior-inline: contain;\n  scrollbar-width: thin;\n}\n.def__item {\n  display: flex;\n  align-items: stretch;\n  flex: 0 0 auto;\n  min-width: 180px;\n  max-width: 260px;\n  height: 32px;\n  border: 1px solid var(--border-2);\n  border-radius: 8px;\n  background: var(--surface-2);\n  overflow: hidden;\n}\n.def__item:hover {\n  border-color: var(--accent);\n}\n.def__open,\n.def__download {\n  font-family: inherit;\n  color: inherit;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n.def__open {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 0 8px;\n  text-align: left;\n}\n.def__ext {\n  flex-shrink: 0;\n  color: var(--accent);\n  font-size: 9.5px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n}\n.def__name {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  color: var(--text);\n  font-size: 11.5px;\n  font-weight: 500;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.def__size {\n  flex-shrink: 0;\n  color: var(--faint);\n  font-size: 10px;\n  font-variant-numeric: tabular-nums;\n}\n.def__download {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 30px;\n  border-left: 1px solid var(--border);\n  color: var(--muted);\n}\n.def__download:hover:not(:disabled) {\n  color: var(--accent);\n  background: var(--surface);\n}\n.def__download:disabled {\n  cursor: wait;\n  opacity: 0.6;\n}\n.def__error {\n  flex: 0 1 180px;\n  min-width: 0;\n  overflow: hidden;\n  color: var(--danger);\n  font-size: 10.5px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n@container (max-width: 500px) {\n  .def {\n    align-items: stretch;\n    flex-direction: column;\n    gap: 6px;\n  }\n  .def__item {\n    min-width: 170px;\n  }\n  .def__error {\n    flex-basis: auto;\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1,15 @@
+import type { DocxEmbeddedFile } from '@/lib/docxEmbeddings';
+type __VLS_Props = {
+    files: readonly DocxEmbeddedFile[];
+    downloadBusyId?: string;
+    error?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    download: (file: DocxEmbeddedFile) => any;
+    open: (file: DocxEmbeddedFile) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDownload?: ((file: DocxEmbeddedFile) => any) | undefined;
+    onOpen?: ((file: DocxEmbeddedFile) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/DocxEmbeddedFiles.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,69 @@
+import { formatBytes as e } from "../lib/format.js";
+import t from "./icons/Icon.js";
+import { Fragment as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, openBlock as c, renderList as l, toDisplayString as u, unref as d } from "vue";
+//#region src/components/DocxEmbeddedFiles.vue?vue&type=script&setup=true&lang.ts
+var f = {
+	class: "def",
+	"aria-label": "Word 文档内嵌文件"
+}, p = { class: "def__heading" }, m = { class: "def__count" }, h = { class: "def__list" }, g = ["title", "onClick"], _ = { class: "def__ext" }, v = { class: "def__name" }, y = { class: "def__size" }, b = [
+	"disabled",
+	"title",
+	"onClick"
+], x = ["title"], S = /*@__PURE__*/ s({
+	__name: "DocxEmbeddedFiles",
+	props: {
+		files: {},
+		downloadBusyId: {},
+		error: {}
+	},
+	emits: ["open", "download"],
+	setup(s, { emit: S }) {
+		let C = S;
+		function w(e) {
+			let t = e.lastIndexOf(".");
+			return t > 0 ? e.slice(t + 1).toUpperCase() : "FILE";
+		}
+		return (S, T) => (c(), i("section", f, [
+			a("div", p, [
+				o(t, {
+					name: "paperclip",
+					size: 14
+				}),
+				T[0] ||= a("span", null, "内嵌文件", -1),
+				a("span", m, u(s.files.length), 1)
+			]),
+			a("div", h, [(c(!0), i(n, null, l(s.files, (n) => (c(), i("div", {
+				key: n.id,
+				class: "def__item"
+			}, [a("button", {
+				type: "button",
+				class: "def__open",
+				title: `预览 ${n.name}`,
+				onClick: (e) => C("open", n)
+			}, [
+				a("span", _, u(w(n.name)), 1),
+				a("span", v, u(n.label || n.name), 1),
+				a("span", y, u(d(e)(n.size)), 1)
+			], 8, g), a("button", {
+				type: "button",
+				class: "def__download",
+				disabled: s.downloadBusyId === n.id,
+				title: s.downloadBusyId === n.id ? "正在准备下载" : `下载 ${n.name}`,
+				onClick: (e) => C("download", n)
+			}, [o(t, {
+				name: s.downloadBusyId === n.id ? "clock" : "download",
+				size: 14
+			}, null, 8, ["name"])], 8, b)]))), 128))]),
+			s.error ? (c(), i("span", {
+				key: 0,
+				class: "def__error",
+				role: "status",
+				title: s.error
+			}, u(s.error), 9, x)) : r("", !0)
+		]));
+	}
+});
+//#endregion
+export { S as default };
+
+//# sourceMappingURL=DocxEmbeddedFiles.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/DocxEmbeddedFiles.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocxEmbeddedFiles.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/DocxEmbeddedFiles.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport Icon from '@/components/icons/Icon.vue'\nimport { formatBytes } from '@/lib/format'\nimport type { DocxEmbeddedFile } from '@/lib/docxEmbeddings'\n\ndefineProps<{\n  files: readonly DocxEmbeddedFile[]\n  downloadBusyId?: string\n  error?: string\n}>()\n\nconst emit = defineEmits<{\n  open: [file: DocxEmbeddedFile]\n  download: [file: DocxEmbeddedFile]\n}>()\n\nfunction extension(name: string): string {\n  const i = name.lastIndexOf('.')\n  return i > 0 ? name.slice(i + 1).toUpperCase() : 'FILE'\n}\n</script>\n\n<template>\n  <section class=\"def\" aria-label=\"Word 文档内嵌文件\">\n    <div class=\"def__heading\">\n      <Icon name=\"paperclip\" :size=\"14\" />\n      <span>内嵌文件</span>\n      <span class=\"def__count\">{{ files.length }}</span>\n    </div>\n    <div class=\"def__list\">\n      <div v-for=\"file in files\" :key=\"file.id\" class=\"def__item\">\n        <button\n          type=\"button\"\n          class=\"def__open\"\n          :title=\"`预览 ${file.name}`\"\n          @click=\"emit('open', file)\"\n        >\n          <span class=\"def__ext\">{{ extension(file.name) }}</span>\n          <span class=\"def__name\">{{ file.label || file.name }}</span>\n          <span class=\"def__size\">{{ formatBytes(file.size) }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"def__download\"\n          :disabled=\"downloadBusyId === file.id\"\n          :title=\"downloadBusyId === file.id ? '正在准备下载' : `下载 ${file.name}`\"\n          @click=\"emit('download', file)\"\n        >\n          <Icon :name=\"downloadBusyId === file.id ? 'clock' : 'download'\" :size=\"14\" />\n        </button>\n      </div>\n    </div>\n    <span v-if=\"error\" class=\"def__error\" role=\"status\" :title=\"error\">{{ error }}</span>\n  </section>\n</template>\n\n<style scoped>\n.def {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-shrink: 0;\n  min-width: 0;\n  padding: 7px 10px;\n  border-bottom: 1px solid var(--border);\n  background: var(--surface);\n}\n.def__heading {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n  color: var(--muted);\n  font-size: 11.5px;\n  font-weight: 600;\n  white-space: nowrap;\n}\n.def__count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 999px;\n  color: var(--accent);\n  background: var(--accent-soft);\n  font-size: 10.5px;\n  font-variant-numeric: tabular-nums;\n}\n.def__list {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow-x: auto;\n  overscroll-behavior-inline: contain;\n  scrollbar-width: thin;\n}\n.def__item {\n  display: flex;\n  align-items: stretch;\n  flex: 0 0 auto;\n  min-width: 180px;\n  max-width: 260px;\n  height: 32px;\n  border: 1px solid var(--border-2);\n  border-radius: 8px;\n  background: var(--surface-2);\n  overflow: hidden;\n}\n.def__item:hover {\n  border-color: var(--accent);\n}\n.def__open,\n.def__download {\n  font-family: inherit;\n  color: inherit;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n.def__open {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 0 8px;\n  text-align: left;\n}\n.def__ext {\n  flex-shrink: 0;\n  color: var(--accent);\n  font-size: 9.5px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n}\n.def__name {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  color: var(--text);\n  font-size: 11.5px;\n  font-weight: 500;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.def__size {\n  flex-shrink: 0;\n  color: var(--faint);\n  font-size: 10px;\n  font-variant-numeric: tabular-nums;\n}\n.def__download {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 30px;\n  border-left: 1px solid var(--border);\n  color: var(--muted);\n}\n.def__download:hover:not(:disabled) {\n  color: var(--accent);\n  background: var(--surface);\n}\n.def__download:disabled {\n  cursor: wait;\n  opacity: 0.6;\n}\n.def__error {\n  flex: 0 1 180px;\n  min-width: 0;\n  overflow: hidden;\n  color: var(--danger);\n  font-size: 10.5px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n@container (max-width: 500px) {\n  .def {\n    align-items: stretch;\n    flex-direction: column;\n    gap: 6px;\n  }\n  .def__item {\n    min-width: 170px;\n  }\n  .def__error {\n    flex-basis: auto;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAWA,IAAM,IAAO;EAKb,SAAS,EAAU,GAAsB;GACvC,IAAM,IAAI,EAAK,YAAY,GAAG;GAC9B,OAAO,IAAI,IAAI,EAAK,MAAM,IAAI,CAAC,CAAC,CAAC,YAAY,IAAI;EACnD;yBAIE,EA8BU,WA9BV,GA8BU;GA7BR,EAIM,OAJN,GAIM;IAHJ,EAAoC,GAAA;KAA9B,MAAK;KAAa,MAAM;;aAC9B,EAAiB,QAAA,MAAX,QAAI,EAAA;IACV,EAAkD,QAAlD,GAAkD,EAAtB,EAAA,MAAM,MAAM,GAAA,CAAA;;GAE1C,EAsBM,OAtBN,GAsBM,EAAA,EAAA,EAAA,GArBJ,EAoBM,GAAA,MAAA,EApBc,EAAA,QAAR,YAAZ,EAoBM,OAAA;IApBsB,KAAK,EAAK;IAAI,OAAM;OAC9C,EASS,UAAA;IARP,MAAK;IACL,OAAM;IACL,OAAK,MAAQ,EAAK;IAClB,UAAK,MAAE,EAAI,QAAS,CAAI;;IAEzB,EAAwD,QAAxD,GAAwD,EAA9B,EAAU,EAAK,IAAI,CAAA,GAAA,CAAA;IAC7C,EAA4D,QAA5D,GAA4D,EAAjC,EAAK,SAAS,EAAK,IAAI,GAAA,CAAA;IAClD,EAA2D,QAA3D,GAA2D,EAAhC,EAAA,CAAA,CAAW,CAAC,EAAK,IAAI,CAAA,GAAA,CAAA;aAElD,EAQS,UAAA;IAPP,MAAK;IACL,OAAM;IACL,UAAU,EAAA,mBAAmB,EAAK;IAClC,OAAO,EAAA,mBAAmB,EAAK,KAAE,WAAA,MAAoB,EAAK;IAC1D,UAAK,MAAE,EAAI,YAAa,CAAI;OAE7B,EAA6E,GAAA;IAAtE,MAAM,EAAA,mBAAmB,EAAK,KAAE,UAAA;IAA0B,MAAM;;GAIjE,EAAA,SAAA,EAAA,GAAZ,EAAqF,QAAA;;IAAlE,OAAM;IAAa,MAAK;IAAU,OAAO,EAAA;QAAU,EAAA,KAAK,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

package/dist/components/DocxViewer.js

@@ -2,7 +2,7 @@ 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-5e8d92a6"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-f9695f8d"]]);
 //#endregion
 export { n as default };
 

package/dist/components/DocxViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DocxViewer.js","names":[],"sources":["../../src/components/DocxViewer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'\nimport { renderAsync } from 'docx-preview'\nimport DocxNavigationPane from '@/components/DocxNavigationPane.vue'\nimport { useElementNavigation } from '@/composables/useElementNavigation'\nimport {\n  buildDocxNavigation,\n  buildDocxPageNavigation,\n  type ParsedDocxModel,\n} from '@/lib/docxNavigation'\n\n/**\n * Side-viewer Word (`.docx`) renderer. Fetches the document bytes from the download URL and renders the\n * OOXML to HTML entirely in-browser via docx-preview (https://github.com/VolodymyrBaydalka/docxjs) — a\n * paginated, paper-like preview (white pages on a neutral canvas, like Word). No CDN / network beyond the\n * file fetch: docx-preview bundles its own jszip + renderer, and images are inlined as base64.\n *\n * Two entry shapes mirror the other browsers (DICOM/zip): a real download URL for a held attachment, or a\n * blob URL minted by the archive browsers from already-extracted bytes. docx-preview injects its own CSS\n * into the render container, prefixed with the `className` ('docx') so it can't leak onto the page.\n */\nconst props = defineProps<{\n  /** Download/blob URL of the .docx bytes. */\n  url?: string\n  name: string\n  size?: number\n}>()\n\ntype Status = 'loading' | 'ready' | 'error'\nconst status = shallowRef<Status>('loading')\nconst errorMsg = shallowRef('')\n// The element docx-preview renders into. Always mounted (v-show, not v-if) so the ref exists when we render.\nconst docEl = shallowRef<HTMLElement | null>(null)\nconst navView = shallowRef<'outline' | 'pages'>('outline')\nconst navCollapsed = shallowRef(false)\nconst { outlineItems, pageItems, activeOutlineId, activePageId, setItems, navigate } =\n  useElementNavigation(docEl)\n\nasync function render(): Promise<void> {\n  const el = docEl.value\n  if (!props.url || !el) return\n  status.value = 'loading'\n  errorMsg.value = ''\n  setItems([], [])\n  el.innerHTML = '' // drop any prior render (e.g. on retry / switching files)\n  const url = props.url\n  try {\n    const res = await fetch(url)\n    if (!res.ok) throw new Error(`HTTP ${res.status}`)\n    const buf = await res.arrayBuffer()\n    // Stale guard: a newer render may have started while we awaited the fetch.\n    if (props.url !== url || docEl.value !== el) return\n    const document = (await renderAsync(buf, el, undefined, {\n      className: 'docx', // CSS prefix → docx-preview's injected styles stay scoped to this subtree\n      inWrapper: true, // wrap pages in the gray \"paper on desk\" canvas, like Word\n      // The side panel is narrow (and resizable), so don't pin pages to the fixed A4 width — that overflows\n      // and clips the left edge. Let pages fill the available width and reflow; height follows content.\n      ignoreWidth: true,\n      ignoreHeight: true,\n      breakPages: true, // honor page breaks → still separate page sheets, stacked vertically\n      renderHeaders: true,\n      renderFooters: true,\n      renderFootnotes: true,\n      renderEndnotes: true,\n      useBase64URL: true, // inline embedded images as data URLs (no blob-URL lifecycle to manage)\n    })) as ParsedDocxModel\n    if (props.url !== url || docEl.value !== el) return\n    let navigation\n    try {\n      navigation = buildDocxNavigation(document, el)\n    } catch (error) {\n      // A malformed/unsupported Word model must never turn an otherwise rendered document into an error page.\n      console.warn('DOCX outline navigation unavailable:', error)\n      navigation = { outline: [], pages: buildDocxPageNavigation(el) }\n    }\n    setItems(navigation.outline, navigation.pages)\n    navView.value = navigation.outline.length ? 'outline' : 'pages'\n    status.value = 'ready'\n  } catch (e) {\n    errorMsg.value = e instanceof Error ? e.message : String(e)\n    status.value = 'error'\n  }\n}\n\nonMounted(render)\nwatch(() => props.url, render)\nonBeforeUnmount(() => {\n  if (docEl.value) docEl.value.innerHTML = ''\n})\n</script>\n\n<template>\n  <div class=\"dx\">\n    <DocxNavigationPane\n      v-if=\"status === 'ready'\"\n      v-model:collapsed=\"navCollapsed\"\n      v-model:view=\"navView\"\n      :outline-items=\"outlineItems\"\n      :page-items=\"pageItems\"\n      :active-outline-id=\"activeOutlineId\"\n      :active-page-id=\"activePageId\"\n      @navigate=\"navigate\"\n    />\n    <div class=\"dx__stage\">\n      <p v-if=\"status === 'loading'\" class=\"dx__msg\">正在渲染 Word 文档…</p>\n      <div v-else-if=\"status === 'error'\" class=\"dx__msg dx__msg--error\">\n        <p>渲染失败：{{ errorMsg }}</p>\n        <button type=\"button\" class=\"dx__retry\" @click=\"render\">重试</button>\n      </div>\n      <!-- Always mounted (v-show) so docEl is available to docx-preview; hidden until render completes. -->\n      <div v-show=\"status === 'ready'\" ref=\"docEl\" class=\"dx__doc\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.dx {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: row;\n  background: var(--surface);\n  container-type: inline-size;\n}\n.dx__stage {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.dx__msg {\n  padding: 20px 16px;\n  color: var(--muted);\n  font-size: 13px;\n}\n.dx__msg--error {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 10px;\n  color: var(--danger);\n}\n.dx__retry {\n  font-family: inherit;\n  font-size: 12.5px;\n  color: var(--text);\n  background: var(--surface);\n  border: 1px solid var(--border-2);\n  border-radius: 8px;\n  padding: 5px 12px;\n  cursor: pointer;\n}\n.dx__retry:hover {\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n/* Scroll region holding the rendered document. The pages keep their native Word appearance (white paper,\n * black text) for fidelity; we only retint the surrounding \"desk\" to the app's neutral surface so it sits\n * in the panel naturally in both light and dark themes. :deep reaches docx-preview's injected DOM. */\n.dx__doc {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  background: var(--surface-2);\n}\n.dx__doc :deep(.docx-wrapper) {\n  background: var(--surface-2);\n  padding: 22px 16px 40px;\n  gap: 16px;\n}\n/* Each page: a white sheet with a soft shadow. With ignoreWidth the page reflows to the panel width, so\n * pin it to fill the wrapper (box-sizing so the doc's own margins stay inside the sheet, not overflowing). */\n.dx__doc :deep(.docx-wrapper > section.docx) {\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);\n  margin-bottom: 0;\n}\n/* Some Word docs anchor tables as \"floating\" objects (OOXML `w:tblpPr` — a table pinned to a fixed spot on\n * the page with body text wrapping around it). docx-preview approximates that with `float: left` + a fixed\n * point width. On a full A4 page the table lands where Word put it, but in this narrow, width-reflowing\n * panel the floats stack unpredictably and the surrounding paragraphs wrap into the gaps beside them — so on\n * resize the layout scrambles and dark cell shading appears to streak across (the reported \"背景乱串 / 排版\n * 混乱\"). Since we've already chosen reflow over pixel-exact A4 fidelity (ignoreWidth + section width:100%),\n * force every table back to a normal full-width block that stacks top-to-bottom at any panel width, and let\n * long cell content wrap instead of overflowing. */\n.dx__doc :deep(section.docx table) {\n  float: none !important;\n  width: 100% !important;\n  max-width: 100%;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n.dx__doc :deep(section.docx td),\n.dx__doc :deep(section.docx th) {\n  overflow-wrap: break-word;\n}\n/* The page's own side margins (this doc uses ~90pt) would swallow most of a narrow panel now that tables\n * fill the width, so cap the horizontal padding while keeping the top/bottom page margin intact. */\n.dx__doc :deep(section.docx) {\n  padding-left: clamp(14px, 5%, 90pt) !important;\n  padding-right: clamp(14px, 5%, 90pt) !important;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"DocxViewer.js","names":[],"sources":["../../src/components/DocxViewer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { defineAsyncComponent, nextTick, onBeforeUnmount, shallowRef, watch } from 'vue'\nimport { renderAsync } from 'docx-preview'\nimport DocxEmbeddedFiles from '@/components/DocxEmbeddedFiles.vue'\nimport DocxNavigationPane from '@/components/DocxNavigationPane.vue'\nimport Icon from '@/components/icons/Icon.vue'\nimport type { ViewerFile } from '@/composables/useFileViewer'\nimport { useElementNavigation } from '@/composables/useElementNavigation'\nimport {\n  extractDocxEmbeddedFile,\n  readDocxEmbeddedFiles,\n  type DocxEmbeddedFile,\n} from '@/lib/docxEmbeddings'\nimport { mountDocxEmbeddedPreviews, type DocxEmbeddedDomController } from '@/lib/docxEmbeddedDom'\nimport {\n  buildDocxNavigation,\n  buildDocxPageNavigation,\n  type ParsedDocxModel,\n} from '@/lib/docxNavigation'\nimport { formatBytes } from '@/lib/format'\nimport { classifyViewerFile } from '@/lib/viewerKind'\n\n// The shared body lets an extracted package reuse the same viewer as a top-level file. Lazy loading breaks the\n// FileViewerBody → DocxViewer → FileViewerBody module cycle, matching ZipBrowser's nested-entry hand-off.\nconst FileViewerBody = defineAsyncComponent(() => import('@/components/FileViewerBody.vue'))\n\n/**\n * Side-viewer Word (`.docx`) renderer. Fetches the document bytes from the download URL and renders the\n * OOXML to HTML entirely in-browser via docx-preview (https://github.com/VolodymyrBaydalka/docxjs) — a\n * paginated, paper-like preview (white pages on a neutral canvas, like Word). No CDN / network beyond the\n * file fetch: docx-preview bundles its own jszip + renderer, and images are inlined as base64.\n *\n * Two entry shapes mirror the other browsers (DICOM/zip): a real download URL for a held attachment, or a\n * blob URL minted by the archive browsers from already-extracted bytes. docx-preview injects its own CSS\n * into the render container, prefixed with the `className` ('docx') so it can't leak onto the page.\n */\nconst props = defineProps<{\n  /** Download/blob URL of the .docx bytes. */\n  url?: string\n  name: string\n  size?: number\n}>()\n\ntype Status = 'loading' | 'ready' | 'error'\nconst status = shallowRef<Status>('loading')\nconst errorMsg = shallowRef('')\n// The element docx-preview renders into. Always mounted (v-show, not v-if) so the ref exists when we render.\nconst docEl = shallowRef<HTMLElement | null>(null)\nconst navView = shallowRef<'outline' | 'pages'>('outline')\nconst navCollapsed = shallowRef(false)\nconst { outlineItems, pageItems, activeOutlineId, activePageId, setItems, navigate } =\n  useElementNavigation(docEl)\n\nlet documentBuffer: ArrayBuffer | null = null\nlet embeddedBlobUrl = ''\nlet embeddedSelectionRun = 0\nlet renderRun = 0\nlet documentScrollTop = 0\nlet inlineEmbedded: DocxEmbeddedDomController | null = null\nconst embeddedFiles = shallowRef<DocxEmbeddedFile[]>([])\nconst selectedEmbedded = shallowRef<DocxEmbeddedFile | null>(null)\nconst embeddedViewerFile = shallowRef<ViewerFile | null>(null)\nconst embeddedStatus = shallowRef<Status>('ready')\nconst embeddedError = shallowRef('')\nconst downloadBusyId = shallowRef('')\nconst downloadError = shallowRef('')\n\nfunction revokeEmbeddedBlob(): void {\n  if (!embeddedBlobUrl) return\n  URL.revokeObjectURL(embeddedBlobUrl)\n  embeddedBlobUrl = ''\n}\n\nfunction clearInlineEmbedded(): void {\n  inlineEmbedded?.dispose()\n  inlineEmbedded = null\n}\n\nfunction closeEmbedded(restoreDocumentScroll = true): void {\n  const shouldRestoreScroll = restoreDocumentScroll && selectedEmbedded.value !== null\n  embeddedSelectionRun++\n  selectedEmbedded.value = null\n  embeddedViewerFile.value = null\n  embeddedStatus.value = 'ready'\n  embeddedError.value = ''\n  revokeEmbeddedBlob()\n  if (shouldRestoreScroll) {\n    void nextTick(() => {\n      if (!selectedEmbedded.value && docEl.value) docEl.value.scrollTop = documentScrollTop\n    })\n  }\n}\n\nfunction resetEmbedded(): void {\n  closeEmbedded(false)\n  clearInlineEmbedded()\n  documentBuffer = null\n  documentScrollTop = 0\n  embeddedFiles.value = []\n  downloadBusyId.value = ''\n  downloadError.value = ''\n}\n\nasync function render(): Promise<void> {\n  const el = docEl.value\n  if (!props.url || !el) return\n  const run = ++renderRun\n  status.value = 'loading'\n  errorMsg.value = ''\n  resetEmbedded()\n  setItems([], [])\n  el.innerHTML = '' // drop any prior render (e.g. on retry / switching files)\n  const url = props.url\n  try {\n    const res = await fetch(url)\n    if (!res.ok) throw new Error(`HTTP ${res.status}`)\n    const buf = await res.arrayBuffer()\n    // Stale guard: a newer render may have started while we awaited the fetch.\n    if (renderRun !== run || props.url !== url || docEl.value !== el) return\n    // Embedded packages are a best-effort enhancement: malformed relationship XML must not blank a Word file\n    // that docx-preview can otherwise render. Parse concurrently because both consumers only read the buffer.\n    const embeddedPromise = readDocxEmbeddedFiles(buf).catch((error) => {\n      console.warn('DOCX embedded files unavailable:', error)\n      return []\n    })\n    const document = (await renderAsync(buf, el, undefined, {\n      className: 'docx', // CSS prefix → docx-preview's injected styles stay scoped to this subtree\n      inWrapper: true, // wrap pages in the gray \"paper on desk\" canvas, like Word\n      // The side panel is narrow (and resizable), so don't pin pages to the fixed A4 width — that overflows\n      // and clips the left edge. Let pages fill the available width and reflow; height follows content.\n      ignoreWidth: true,\n      ignoreHeight: true,\n      breakPages: true, // honor page breaks → still separate page sheets, stacked vertically\n      renderHeaders: true,\n      renderFooters: true,\n      renderFootnotes: true,\n      renderEndnotes: true,\n      useBase64URL: true, // inline embedded images as data URLs (no blob-URL lifecycle to manage)\n    })) as ParsedDocxModel\n    const discoveredEmbeddedFiles = await embeddedPromise\n    if (renderRun !== run || props.url !== url || docEl.value !== el) return\n    let navigation\n    try {\n      navigation = buildDocxNavigation(document, el)\n    } catch (error) {\n      // A malformed/unsupported Word model must never turn an otherwise rendered document into an error page.\n      console.warn('DOCX outline navigation unavailable:', error)\n      navigation = { outline: [], pages: buildDocxPageNavigation(el) }\n    }\n    setItems(navigation.outline, navigation.pages)\n    navView.value = navigation.outline.length ? 'outline' : 'pages'\n    documentBuffer = buf\n    embeddedFiles.value = discoveredEmbeddedFiles\n    inlineEmbedded = mountDocxEmbeddedPreviews({\n      root: el,\n      buffer: buf,\n      files: discoveredEmbeddedFiles,\n      onOpen: (file) => void openEmbedded(file),\n    })\n    status.value = 'ready'\n  } catch (e) {\n    if (renderRun !== run) return\n    errorMsg.value = e instanceof Error ? e.message : String(e)\n    status.value = 'error'\n  }\n}\n\nasync function openEmbedded(file: DocxEmbeddedFile): Promise<void> {\n  if (!documentBuffer) return\n  const buffer = documentBuffer\n  let pendingUrl = ''\n  documentScrollTop = docEl.value?.scrollTop ?? 0\n  closeEmbedded(false)\n  // closeEmbedded invalidates prior work; this run now becomes the active selection.\n  const activeRun = ++embeddedSelectionRun\n  selectedEmbedded.value = file\n  embeddedStatus.value = 'loading'\n  embeddedError.value = ''\n  try {\n    const bytes = await extractDocxEmbeddedFile(buffer, file)\n    if (embeddedSelectionRun !== activeRun || documentBuffer !== buffer) return\n    const url = URL.createObjectURL(new Blob([bytes], { type: file.contentType }))\n    pendingUrl = url\n    const viewerFile = classifyViewerFile({\n      name: file.name,\n      url,\n      size: file.size,\n      mime: file.contentType,\n    })\n    if (embeddedSelectionRun !== activeRun || selectedEmbedded.value !== file) {\n      URL.revokeObjectURL(url)\n      pendingUrl = ''\n      return\n    }\n    embeddedBlobUrl = url\n    pendingUrl = ''\n    embeddedViewerFile.value = viewerFile\n    embeddedStatus.value = 'ready'\n  } catch (error) {\n    if (pendingUrl) URL.revokeObjectURL(pendingUrl)\n    if (embeddedSelectionRun !== activeRun) return\n    embeddedError.value = error instanceof Error ? error.message : String(error)\n    embeddedStatus.value = 'error'\n  }\n}\n\nasync function downloadEmbedded(file: DocxEmbeddedFile): Promise<void> {\n  if (!documentBuffer || downloadBusyId.value) return\n  const buffer = documentBuffer\n  downloadBusyId.value = file.id\n  downloadError.value = ''\n  let url = ''\n  try {\n    const bytes = await extractDocxEmbeddedFile(buffer, file)\n    if (documentBuffer !== buffer) return\n    url = URL.createObjectURL(new Blob([bytes], { type: file.contentType }))\n    const anchor = document.createElement('a')\n    anchor.href = url\n    anchor.download = file.name\n    document.body.appendChild(anchor)\n    anchor.click()\n    anchor.remove()\n  } catch (error) {\n    downloadError.value = error instanceof Error ? error.message : String(error)\n  } finally {\n    if (url) setTimeout(() => URL.revokeObjectURL(url), 1000)\n    if (downloadBusyId.value === file.id) downloadBusyId.value = ''\n  }\n}\n\nwatch(\n  [() => props.url, docEl],\n  ([url, element]) => {\n    if (url && element) void render()\n  },\n  { immediate: true },\n)\nonBeforeUnmount(() => {\n  renderRun++\n  resetEmbedded()\n  if (docEl.value) docEl.value.innerHTML = ''\n})\n</script>\n\n<template>\n  <div class=\"dx\">\n    <DocxNavigationPane\n      v-if=\"status === 'ready' && !selectedEmbedded\"\n      v-model:collapsed=\"navCollapsed\"\n      v-model:view=\"navView\"\n      :outline-items=\"outlineItems\"\n      :page-items=\"pageItems\"\n      :active-outline-id=\"activeOutlineId\"\n      :active-page-id=\"activePageId\"\n      @navigate=\"navigate\"\n    />\n    <div class=\"dx__stage\">\n      <div v-if=\"selectedEmbedded\" class=\"dx__embedded-bar\">\n        <button type=\"button\" class=\"dx__back\" title=\"返回 Word 文档\" @click=\"closeEmbedded()\">\n          <Icon name=\"arrowLeft\" :size=\"16\" />\n        </button>\n        <span class=\"dx__embedded-title\" :title=\"selectedEmbedded.name\">\n          {{ selectedEmbedded.label || selectedEmbedded.name }}\n        </span>\n        <span class=\"dx__embedded-size\">{{ formatBytes(selectedEmbedded.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"dx__download\"\n          title=\"下载内嵌文件\"\n          @click=\"downloadEmbedded(selectedEmbedded)\"\n        >\n          <Icon name=\"download\" :size=\"15\" />\n        </button>\n      </div>\n\n      <p v-if=\"status === 'loading'\" class=\"dx__msg\">正在渲染 Word 文档…</p>\n      <div v-else-if=\"status === 'error'\" class=\"dx__msg dx__msg--error\">\n        <p>渲染失败：{{ errorMsg }}</p>\n        <button type=\"button\" class=\"dx__retry\" @click=\"render\">重试</button>\n      </div>\n      <template v-else-if=\"selectedEmbedded\">\n        <p v-if=\"embeddedStatus === 'loading'\" class=\"dx__msg\">正在读取内嵌文件…</p>\n        <div v-else-if=\"embeddedStatus === 'error'\" class=\"dx__msg dx__msg--error\">\n          <p>读取失败：{{ embeddedError }}</p>\n          <button type=\"button\" class=\"dx__retry\" @click=\"openEmbedded(selectedEmbedded)\">\n            重试\n          </button>\n        </div>\n        <FileViewerBody v-else-if=\"embeddedViewerFile\" :file=\"embeddedViewerFile\" mode=\"render\" />\n      </template>\n\n      <DocxEmbeddedFiles\n        v-else-if=\"status === 'ready' && embeddedFiles.length\"\n        :files=\"embeddedFiles\"\n        :download-busy-id=\"downloadBusyId\"\n        :error=\"downloadError\"\n        @open=\"openEmbedded\"\n        @download=\"downloadEmbedded\"\n      />\n      <!-- Always mounted (v-show) so docEl is available to docx-preview; hidden until render completes. -->\n      <div v-show=\"status === 'ready' && !selectedEmbedded\" ref=\"docEl\" class=\"dx__doc\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.dx {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: row;\n  background: var(--surface);\n  container-type: inline-size;\n}\n.dx__stage {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.dx__msg {\n  padding: 20px 16px;\n  color: var(--muted);\n  font-size: 13px;\n}\n.dx__msg--error {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 10px;\n  color: var(--danger);\n}\n.dx__retry {\n  font-family: inherit;\n  font-size: 12.5px;\n  color: var(--text);\n  background: var(--surface);\n  border: 1px solid var(--border-2);\n  border-radius: 8px;\n  padding: 5px 12px;\n  cursor: pointer;\n}\n.dx__retry:hover {\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n.dx__embedded-bar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n  padding: 7px 10px 7px 8px;\n  border-bottom: 1px solid var(--border);\n  background: var(--surface);\n}\n.dx__back,\n.dx__download {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 30px;\n  height: 28px;\n  padding: 0;\n  color: var(--muted);\n  background: transparent;\n  border: none;\n  border-radius: 7px;\n  cursor: pointer;\n}\n.dx__back:hover,\n.dx__download:hover {\n  color: var(--accent);\n  background: var(--surface-2);\n}\n.dx__embedded-title {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  color: var(--text-strong);\n  font-size: 12.5px;\n  font-weight: 500;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dx__embedded-size {\n  flex-shrink: 0;\n  color: var(--faint);\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n}\n\n/* docx-preview intentionally skips OLE `w:object` nodes but leaves their empty <p>. The DOM adapter inserts\n * Word/WPS's inert raster snapshot, or a rendered PPTX first slide when the snapshot is browser-incompatible,\n * into that exact paragraph. The whole preview opens the real embedded file. */\n.dx__doc :deep(.docx-embedded-host) {\n  min-height: 0;\n  margin: 8px 0 12px;\n  text-align: center;\n}\n.dx__doc :deep(.docx-embedded-preview) {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  width: 100%;\n  min-height: 72px;\n  padding: 12px;\n  overflow: hidden;\n  color: #334155;\n  background: #f8fafc;\n  border: 1px solid #cbd5e1;\n  border-radius: 6px;\n  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);\n  cursor: pointer;\n  font-family: Arial, sans-serif;\n  text-align: left;\n}\n.dx__doc :deep(.docx-embedded-preview:hover),\n.dx__doc :deep(.docx-embedded-preview:focus-visible) {\n  border-color: #3370ff;\n  box-shadow:\n    0 0 0 2px rgba(51, 112, 255, 0.16),\n    0 2px 8px rgba(15, 23, 42, 0.16);\n  outline: none;\n}\n.dx__doc :deep(.docx-embedded-preview--image) {\n  display: inline-block;\n  min-height: 0;\n  padding: 0;\n  background: #fff;\n}\n.dx__doc :deep(.docx-embedded-preview--pptx) {\n  display: block;\n  min-height: 0;\n  padding: 0;\n  background: #fff;\n}\n.dx__doc :deep(.docx-embedded-preview--loading) {\n  cursor: progress;\n}\n.dx__doc :deep(.docx-embedded-preview__pptx-slide) {\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  pointer-events: none;\n}\n.dx__doc :deep(.docx-embedded-preview__pptx-status) {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #64748b;\n  background: #f8fafc;\n  font-size: 12px;\n  font-weight: 600;\n}\n.dx__doc :deep(.docx-embedded-preview__image) {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: contain;\n}\n.dx__doc :deep(.docx-embedded-preview__hint) {\n  position: absolute;\n  right: 8px;\n  bottom: 8px;\n  padding: 5px 9px;\n  color: #fff;\n  background: rgba(15, 23, 42, 0.76);\n  border-radius: 999px;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(3px);\n  transition:\n    opacity 0.15s,\n    transform 0.15s;\n}\n.dx__doc :deep(.docx-embedded-preview:hover .docx-embedded-preview__hint),\n.dx__doc :deep(.docx-embedded-preview:focus-visible .docx-embedded-preview__hint) {\n  opacity: 1;\n  transform: translateY(0);\n}\n.dx__doc :deep(.docx-embedded-preview__badge) {\n  flex-shrink: 0;\n  padding: 5px 7px;\n  color: #166534;\n  background: #dcfce7;\n  border-radius: 5px;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n}\n.dx__doc :deep(.docx-embedded-preview__fallback-label) {\n  min-width: 0;\n  overflow: hidden;\n  font-size: 12px;\n  font-weight: 600;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Scroll region holding the rendered document. The pages keep their native Word appearance (white paper,\n * black text) for fidelity; we only retint the surrounding \"desk\" to the app's neutral surface so it sits\n * in the panel naturally in both light and dark themes. :deep reaches docx-preview's injected DOM. */\n.dx__doc {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  background: var(--surface-2);\n}\n.dx__doc :deep(.docx-wrapper) {\n  background: var(--surface-2);\n  padding: 22px 16px 40px;\n  gap: 16px;\n}\n/* Each page: a white sheet with a soft shadow. With ignoreWidth the page reflows to the panel width, so\n * pin it to fill the wrapper (box-sizing so the doc's own margins stay inside the sheet, not overflowing). */\n.dx__doc :deep(.docx-wrapper > section.docx) {\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);\n  margin-bottom: 0;\n}\n/* Some Word docs anchor tables as \"floating\" objects (OOXML `w:tblpPr` — a table pinned to a fixed spot on\n * the page with body text wrapping around it). docx-preview approximates that with `float: left` + a fixed\n * point width. On a full A4 page the table lands where Word put it, but in this narrow, width-reflowing\n * panel the floats stack unpredictably and the surrounding paragraphs wrap into the gaps beside them — so on\n * resize the layout scrambles and dark cell shading appears to streak across (the reported \"背景乱串 / 排版\n * 混乱\"). Since we've already chosen reflow over pixel-exact A4 fidelity (ignoreWidth + section width:100%),\n * force every table back to a normal full-width block that stacks top-to-bottom at any panel width, and let\n * long cell content wrap instead of overflowing. */\n.dx__doc :deep(section.docx table) {\n  float: none !important;\n  width: 100% !important;\n  max-width: 100%;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n.dx__doc :deep(section.docx td),\n.dx__doc :deep(section.docx th) {\n  overflow-wrap: break-word;\n}\n/* The page's own side margins (this doc uses ~90pt) would swallow most of a narrow panel now that tables\n * fill the width, so cap the horizontal padding while keeping the top/bottom page margin intact. */\n.dx__doc :deep(section.docx) {\n  padding-left: clamp(14px, 5%, 90pt) !important;\n  padding-right: clamp(14px, 5%, 90pt) !important;\n}\n</style>\n"],"mappings":""}

package/dist/components/DocxViewer.vue_vue_type_script_setup_true_lang.js

@@ -1,35 +1,66 @@
-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";
+import { classifyViewerFile as e } from "../lib/viewerKind.js";
+import { formatBytes as t } from "../lib/format.js";
+import n from "./icons/Icon.js";
+import r from "./DocxEmbeddedFiles.js";
+import i from "./DocxNavigationPane.js";
+import { useElementNavigation as a } from "../composables/useElementNavigation.js";
+import { extractDocxEmbeddedFile as o, readDocxEmbeddedFiles as s } from "../lib/docxEmbeddings.js";
+import { mountDocxEmbeddedPreviews as c } from "../lib/docxEmbeddedDom.js";
+import { buildDocxNavigation as ee, buildDocxPageNavigation as te } from "../lib/docxNavigation.js";
+import { Fragment as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineAsyncComponent as h, defineComponent as g, nextTick as ne, onBeforeUnmount as re, openBlock as _, shallowRef as v, toDisplayString as y, unref as b, vShow as ie, watch as ae, withDirectives as oe } from "vue";
+import { renderAsync as se } from "docx-preview";
 //#region src/components/DocxViewer.vue?vue&type=script&setup=true&lang.ts
-var y = { class: "dx" }, b = { class: "dx__stage" }, x = {
+var ce = { class: "dx" }, le = { class: "dx__stage" }, x = {
 	key: 0,
+	class: "dx__embedded-bar"
+}, S = ["title"], C = { class: "dx__embedded-size" }, ue = {
+	key: 1,
 	class: "dx__msg"
-}, S = {
+}, de = {
+	key: 2,
+	class: "dx__msg dx__msg--error"
+}, fe = {
+	key: 0,
+	class: "dx__msg"
+}, pe = {
 	key: 1,
 	class: "dx__msg dx__msg--error"
-}, C = /*@__PURE__*/ c({
+}, w = /*@__PURE__*/ g({
 	__name: "DocxViewer",
 	props: {
 		url: {},
 		name: {},
 		size: {}
 	},
-	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;
+	setup(g) {
+		let w = h(() => import("./FileViewerBody.js")), T = g, E = v("loading"), D = v(""), O = v(null), k = v("outline"), A = v(!1), { outlineItems: me, pageItems: he, activeOutlineId: j, activePageId: M, setItems: N, navigate: P } = a(O), F = null, I = "", L = 0, R = 0, z = 0, B = null, V = v([]), H = v(null), U = v(null), W = v("ready"), G = v(""), K = v(""), q = v("");
+		function ge() {
+			I &&= (URL.revokeObjectURL(I), "");
+		}
+		function J() {
+			B?.dispose(), B = null;
+		}
+		function Y(e = !0) {
+			let t = e && H.value !== null;
+			L++, H.value = null, U.value = null, W.value = "ready", G.value = "", ge(), t && ne(() => {
+				!H.value && O.value && (O.value.scrollTop = z);
+			});
+		}
+		function X() {
+			Y(!1), J(), F = null, z = 0, V.value = [], K.value = "", q.value = "";
+		}
+		async function Z() {
+			let e = O.value;
+			if (!T.url || !e) return;
+			let t = ++R;
+			E.value = "loading", D.value = "", X(), N([], []), e.innerHTML = "";
+			let n = T.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, {
+				let r = await fetch(n);
+				if (!r.ok) throw Error(`HTTP ${r.status}`);
+				let i = await r.arrayBuffer();
+				if (R !== t || T.url !== n || O.value !== e) return;
+				let a = s(i).catch((e) => (console.warn("DOCX embedded files unavailable:", e), [])), o = await se(i, e, void 0, {
 					className: "docx",
 					inWrapper: !0,
 					ignoreWidth: !0,
@@ -40,35 +71,87 @@ var y = { class: "dx" }, b = { class: "dx__stage" }, x = {
 					renderFootnotes: !0,
 					renderEndnotes: !0,
 					useBase64URL: !0
-				});
-				if (C.url !== t || E.value !== e) return;
-				let s;
+				}), l = await a;
+				if (R !== t || T.url !== n || O.value !== e) return;
+				let u;
 				try {
-					s = n(o, e);
+					u = ee(o, e);
 				} catch (t) {
-					console.warn("DOCX outline navigation unavailable:", t), s = {
+					console.warn("DOCX outline navigation unavailable:", t), u = {
 						outline: [],
-						pages: r(e)
+						pages: te(e)
 					};
 				}
-				N(s.outline, s.pages), D.value = s.outline.length ? "outline" : "pages", w.value = "ready";
+				N(u.outline, u.pages), k.value = u.outline.length ? "outline" : "pages", F = i, V.value = l, B = c({
+					root: e,
+					buffer: i,
+					files: l,
+					onOpen: (e) => void Q(e)
+				}), E.value = "ready";
+			} catch (e) {
+				if (R !== t) return;
+				D.value = e instanceof Error ? e.message : String(e), E.value = "error";
+			}
+		}
+		async function Q(t) {
+			if (!F) return;
+			let n = F, r = "";
+			z = O.value?.scrollTop ?? 0, Y(!1);
+			let i = ++L;
+			H.value = t, W.value = "loading", G.value = "";
+			try {
+				let a = await o(n, t);
+				if (L !== i || F !== n) return;
+				let s = URL.createObjectURL(new Blob([a], { type: t.contentType }));
+				r = s;
+				let c = e({
+					name: t.name,
+					url: s,
+					size: t.size,
+					mime: t.contentType
+				});
+				if (L !== i || H.value !== t) {
+					URL.revokeObjectURL(s), r = "";
+					return;
+				}
+				I = s, r = "", U.value = c, W.value = "ready";
+			} catch (e) {
+				if (r && URL.revokeObjectURL(r), L !== i) return;
+				G.value = e instanceof Error ? e.message : String(e), W.value = "error";
+			}
+		}
+		async function $(e) {
+			if (!F || K.value) return;
+			let t = F;
+			K.value = e.id, q.value = "";
+			let n = "";
+			try {
+				let r = await o(t, e);
+				if (F !== t) return;
+				n = URL.createObjectURL(new Blob([r], { type: e.contentType }));
+				let i = document.createElement("a");
+				i.href = n, i.download = e.name, document.body.appendChild(i), i.click(), i.remove();
 			} catch (e) {
-				T.value = e instanceof Error ? e.message : String(e), w.value = "error";
+				q.value = e instanceof Error ? e.message : String(e);
+			} finally {
+				n && setTimeout(() => URL.revokeObjectURL(n), 1e3), K.value === e.id && (K.value = "");
 			}
 		}
-		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, {
+		return ae([() => T.url, O], ([e, t]) => {
+			e && t && Z();
+		}, { immediate: !0 }), re(() => {
+			R++, X(), O.value && (O.value.innerHTML = "");
+		}), (e, a) => (_(), f("div", ce, [E.value === "ready" && !H.value ? (_(), u(i, {
 			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)
+			collapsed: A.value,
+			"onUpdate:collapsed": a[0] ||= (e) => A.value = e,
+			view: k.value,
+			"onUpdate:view": a[1] ||= (e) => k.value = e,
+			"outline-items": b(me),
+			"page-items": b(he),
+			"active-outline-id": b(j),
+			"active-page-id": b(M),
+			onNavigate: b(P)
 		}, null, 8, [
 			"collapsed",
 			"view",
@@ -77,18 +160,65 @@ var y = { class: "dx" }, b = { class: "dx__stage" }, x = {
 			"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: F
-		}, "重试")])) : a("", !0), _(s("div", {
-			ref_key: "docEl",
-			ref: E,
-			class: "dx__doc"
-		}, null, 512), [[h, w.value === "ready"]])])]));
+		])) : d("", !0), p("div", le, [
+			H.value ? (_(), f("div", x, [
+				p("button", {
+					type: "button",
+					class: "dx__back",
+					title: "返回 Word 文档",
+					onClick: a[2] ||= (e) => Y()
+				}, [m(n, {
+					name: "arrowLeft",
+					size: 16
+				})]),
+				p("span", {
+					class: "dx__embedded-title",
+					title: H.value.name
+				}, y(H.value.label || H.value.name), 9, S),
+				p("span", C, y(b(t)(H.value.size)), 1),
+				p("button", {
+					type: "button",
+					class: "dx__download",
+					title: "下载内嵌文件",
+					onClick: a[3] ||= (e) => $(H.value)
+				}, [m(n, {
+					name: "download",
+					size: 15
+				})])
+			])) : d("", !0),
+			E.value === "loading" ? (_(), f("p", ue, "正在渲染 Word 文档…")) : E.value === "error" ? (_(), f("div", de, [p("p", null, "渲染失败：" + y(D.value), 1), p("button", {
+				type: "button",
+				class: "dx__retry",
+				onClick: Z
+			}, "重试")])) : H.value ? (_(), f(l, { key: 3 }, [W.value === "loading" ? (_(), f("p", fe, "正在读取内嵌文件…")) : W.value === "error" ? (_(), f("div", pe, [p("p", null, "读取失败：" + y(G.value), 1), p("button", {
+				type: "button",
+				class: "dx__retry",
+				onClick: a[4] ||= (e) => Q(H.value)
+			}, " 重试 ")])) : U.value ? (_(), u(b(w), {
+				key: 2,
+				file: U.value,
+				mode: "render"
+			}, null, 8, ["file"])) : d("", !0)], 64)) : E.value === "ready" && V.value.length ? (_(), u(r, {
+				key: 4,
+				files: V.value,
+				"download-busy-id": K.value,
+				error: q.value,
+				onOpen: Q,
+				onDownload: $
+			}, null, 8, [
+				"files",
+				"download-busy-id",
+				"error"
+			])) : d("", !0),
+			oe(p("div", {
+				ref_key: "docEl",
+				ref: O,
+				class: "dx__doc"
+			}, null, 512), [[ie, E.value === "ready" && !H.value]])
+		])]));
 	}
 });
 //#endregion
-export { C as default };
+export { w as default };
 
 //# sourceMappingURL=DocxViewer.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/DocxViewer.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DocxViewer.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/DocxViewer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'\nimport { renderAsync } from 'docx-preview'\nimport DocxNavigationPane from '@/components/DocxNavigationPane.vue'\nimport { useElementNavigation } from '@/composables/useElementNavigation'\nimport {\n  buildDocxNavigation,\n  buildDocxPageNavigation,\n  type ParsedDocxModel,\n} from '@/lib/docxNavigation'\n\n/**\n * Side-viewer Word (`.docx`) renderer. Fetches the document bytes from the download URL and renders the\n * OOXML to HTML entirely in-browser via docx-preview (https://github.com/VolodymyrBaydalka/docxjs) — a\n * paginated, paper-like preview (white pages on a neutral canvas, like Word). No CDN / network beyond the\n * file fetch: docx-preview bundles its own jszip + renderer, and images are inlined as base64.\n *\n * Two entry shapes mirror the other browsers (DICOM/zip): a real download URL for a held attachment, or a\n * blob URL minted by the archive browsers from already-extracted bytes. docx-preview injects its own CSS\n * into the render container, prefixed with the `className` ('docx') so it can't leak onto the page.\n */\nconst props = defineProps<{\n  /** Download/blob URL of the .docx bytes. */\n  url?: string\n  name: string\n  size?: number\n}>()\n\ntype Status = 'loading' | 'ready' | 'error'\nconst status = shallowRef<Status>('loading')\nconst errorMsg = shallowRef('')\n// The element docx-preview renders into. Always mounted (v-show, not v-if) so the ref exists when we render.\nconst docEl = shallowRef<HTMLElement | null>(null)\nconst navView = shallowRef<'outline' | 'pages'>('outline')\nconst navCollapsed = shallowRef(false)\nconst { outlineItems, pageItems, activeOutlineId, activePageId, setItems, navigate } =\n  useElementNavigation(docEl)\n\nasync function render(): Promise<void> {\n  const el = docEl.value\n  if (!props.url || !el) return\n  status.value = 'loading'\n  errorMsg.value = ''\n  setItems([], [])\n  el.innerHTML = '' // drop any prior render (e.g. on retry / switching files)\n  const url = props.url\n  try {\n    const res = await fetch(url)\n    if (!res.ok) throw new Error(`HTTP ${res.status}`)\n    const buf = await res.arrayBuffer()\n    // Stale guard: a newer render may have started while we awaited the fetch.\n    if (props.url !== url || docEl.value !== el) return\n    const document = (await renderAsync(buf, el, undefined, {\n      className: 'docx', // CSS prefix → docx-preview's injected styles stay scoped to this subtree\n      inWrapper: true, // wrap pages in the gray \"paper on desk\" canvas, like Word\n      // The side panel is narrow (and resizable), so don't pin pages to the fixed A4 width — that overflows\n      // and clips the left edge. Let pages fill the available width and reflow; height follows content.\n      ignoreWidth: true,\n      ignoreHeight: true,\n      breakPages: true, // honor page breaks → still separate page sheets, stacked vertically\n      renderHeaders: true,\n      renderFooters: true,\n      renderFootnotes: true,\n      renderEndnotes: true,\n      useBase64URL: true, // inline embedded images as data URLs (no blob-URL lifecycle to manage)\n    })) as ParsedDocxModel\n    if (props.url !== url || docEl.value !== el) return\n    let navigation\n    try {\n      navigation = buildDocxNavigation(document, el)\n    } catch (error) {\n      // A malformed/unsupported Word model must never turn an otherwise rendered document into an error page.\n      console.warn('DOCX outline navigation unavailable:', error)\n      navigation = { outline: [], pages: buildDocxPageNavigation(el) }\n    }\n    setItems(navigation.outline, navigation.pages)\n    navView.value = navigation.outline.length ? 'outline' : 'pages'\n    status.value = 'ready'\n  } catch (e) {\n    errorMsg.value = e instanceof Error ? e.message : String(e)\n    status.value = 'error'\n  }\n}\n\nonMounted(render)\nwatch(() => props.url, render)\nonBeforeUnmount(() => {\n  if (docEl.value) docEl.value.innerHTML = ''\n})\n</script>\n\n<template>\n  <div class=\"dx\">\n    <DocxNavigationPane\n      v-if=\"status === 'ready'\"\n      v-model:collapsed=\"navCollapsed\"\n      v-model:view=\"navView\"\n      :outline-items=\"outlineItems\"\n      :page-items=\"pageItems\"\n      :active-outline-id=\"activeOutlineId\"\n      :active-page-id=\"activePageId\"\n      @navigate=\"navigate\"\n    />\n    <div class=\"dx__stage\">\n      <p v-if=\"status === 'loading'\" class=\"dx__msg\">正在渲染 Word 文档…</p>\n      <div v-else-if=\"status === 'error'\" class=\"dx__msg dx__msg--error\">\n        <p>渲染失败：{{ errorMsg }}</p>\n        <button type=\"button\" class=\"dx__retry\" @click=\"render\">重试</button>\n      </div>\n      <!-- Always mounted (v-show) so docEl is available to docx-preview; hidden until render completes. -->\n      <div v-show=\"status === 'ready'\" ref=\"docEl\" class=\"dx__doc\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.dx {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: row;\n  background: var(--surface);\n  container-type: inline-size;\n}\n.dx__stage {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.dx__msg {\n  padding: 20px 16px;\n  color: var(--muted);\n  font-size: 13px;\n}\n.dx__msg--error {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 10px;\n  color: var(--danger);\n}\n.dx__retry {\n  font-family: inherit;\n  font-size: 12.5px;\n  color: var(--text);\n  background: var(--surface);\n  border: 1px solid var(--border-2);\n  border-radius: 8px;\n  padding: 5px 12px;\n  cursor: pointer;\n}\n.dx__retry:hover {\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n/* Scroll region holding the rendered document. The pages keep their native Word appearance (white paper,\n * black text) for fidelity; we only retint the surrounding \"desk\" to the app's neutral surface so it sits\n * in the panel naturally in both light and dark themes. :deep reaches docx-preview's injected DOM. */\n.dx__doc {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  background: var(--surface-2);\n}\n.dx__doc :deep(.docx-wrapper) {\n  background: var(--surface-2);\n  padding: 22px 16px 40px;\n  gap: 16px;\n}\n/* Each page: a white sheet with a soft shadow. With ignoreWidth the page reflows to the panel width, so\n * pin it to fill the wrapper (box-sizing so the doc's own margins stay inside the sheet, not overflowing). */\n.dx__doc :deep(.docx-wrapper > section.docx) {\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);\n  margin-bottom: 0;\n}\n/* Some Word docs anchor tables as \"floating\" objects (OOXML `w:tblpPr` — a table pinned to a fixed spot on\n * the page with body text wrapping around it). docx-preview approximates that with `float: left` + a fixed\n * point width. On a full A4 page the table lands where Word put it, but in this narrow, width-reflowing\n * panel the floats stack unpredictably and the surrounding paragraphs wrap into the gaps beside them — so on\n * resize the layout scrambles and dark cell shading appears to streak across (the reported \"背景乱串 / 排版\n * 混乱\"). Since we've already chosen reflow over pixel-exact A4 fidelity (ignoreWidth + section width:100%),\n * force every table back to a normal full-width block that stacks top-to-bottom at any panel width, and let\n * long cell content wrap instead of overflowing. */\n.dx__doc :deep(section.docx table) {\n  float: none !important;\n  width: 100% !important;\n  max-width: 100%;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n.dx__doc :deep(section.docx td),\n.dx__doc :deep(section.docx th) {\n  overflow-wrap: break-word;\n}\n/* The page's own side margins (this doc uses ~90pt) would swallow most of a narrow panel now that tables\n * fill the width, so cap the horizontal padding while keeping the top/bottom page margin intact. */\n.dx__doc :deep(section.docx) {\n  padding-left: clamp(14px, 5%, 90pt) !important;\n  padding-right: clamp(14px, 5%, 90pt) !important;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAqBA,IAAM,IAAQ,GAQR,IAAS,EAAmB,SAAS,GACrC,IAAW,EAAW,EAAE,GAExB,IAAQ,EAA+B,IAAI,GAC3C,IAAU,EAAgC,SAAS,GACnD,IAAe,EAAW,EAAK,GAC/B,EAAE,iBAAc,cAAW,oBAAiB,iBAAc,aAAU,gBACxE,EAAqB,CAAK;EAE5B,eAAe,IAAwB;GACrC,IAAM,IAAK,EAAM;GACjB,IAAI,CAAC,EAAM,OAAO,CAAC,GAAI;GAIvB,AAHA,EAAO,QAAQ,WACf,EAAS,QAAQ,IACjB,EAAS,CAAC,GAAG,CAAC,CAAC,GACf,EAAG,YAAY;GACf,IAAM,IAAM,EAAM;GAClB,IAAI;IACF,IAAM,IAAM,MAAM,MAAM,CAAG;IAC3B,IAAI,CAAC,EAAI,IAAI,MAAU,MAAM,QAAQ,EAAI,QAAQ;IACjD,IAAM,IAAM,MAAM,EAAI,YAAY;IAElC,IAAI,EAAM,QAAQ,KAAO,EAAM,UAAU,GAAI;IAC7C,IAAM,IAAY,MAAM,EAAY,GAAK,GAAI,KAAA,GAAW;KACtD,WAAW;KACX,WAAW;KAGX,aAAa;KACb,cAAc;KACd,YAAY;KACZ,eAAe;KACf,eAAe;KACf,iBAAiB;KACjB,gBAAgB;KAChB,cAAc;IAChB,CAAC;IACD,IAAI,EAAM,QAAQ,KAAO,EAAM,UAAU,GAAI;IAC7C,IAAI;IACJ,IAAI;KACF,IAAa,EAAoB,GAAU,CAAE;IAC/C,SAAS,GAAO;KAGd,AADA,QAAQ,KAAK,wCAAwC,CAAK,GAC1D,IAAa;MAAE,SAAS,CAAC;MAAG,OAAO,EAAwB,CAAE;KAAE;IACjE;IAGA,AAFA,EAAS,EAAW,SAAS,EAAW,KAAK,GAC7C,EAAQ,QAAQ,EAAW,QAAQ,SAAS,YAAY,SACxD,EAAO,QAAQ;GACjB,SAAS,GAAG;IAEV,AADA,EAAS,QAAQ,aAAa,QAAQ,EAAE,UAAU,OAAO,CAAC,GAC1D,EAAO,QAAQ;GACjB;EACF;SAEA,EAAU,CAAM,GAChB,QAAY,EAAM,KAAK,CAAM,GAC7B,QAAsB;GACpB,AAAI,EAAM,UAAO,EAAM,MAAM,YAAY;EAC3C,CAAC,mBAIC,EAoBM,OApBN,GAoBM,CAlBI,EAAA,UAAM,WAAA,EAAA,GADd,EASE,GAAA;;GAPQ,WAAW,EAAA;2CAAY,QAAA;GACvB,MAAM,EAAA;sCAAO,QAAA;GACpB,iBAAe,EAAA,CAAA;GACf,cAAY,EAAA,CAAA;GACZ,qBAAmB,EAAA,CAAA;GACnB,kBAAgB,EAAA,CAAA;GAChB,YAAU,EAAA,CAAA;;;;;;;;;mBAEb,EAQM,OARN,GAQM,CAPK,EAAA,UAAM,aAAA,EAAA,GAAf,EAAgE,KAAhE,GAA+C,eAAa,KAC5C,EAAA,UAAM,WAAA,EAAA,GAAtB,EAGM,OAHN,GAGM,CAFJ,EAA0B,KAAA,MAAvB,UAAK,EAAG,EAAA,KAAQ,GAAA,CAAA,GACnB,EAAmE,UAAA;GAA3D,MAAK;GAAS,OAAM;GAAa,SAAO;KAAQ,IAAE,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAG5D,EAA+D,OAAA;YAA1B;GAAJ,KAAI;GAAQ,OAAM;sBAAtC,EAAA,UAAM,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"DocxViewer.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/DocxViewer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { defineAsyncComponent, nextTick, onBeforeUnmount, shallowRef, watch } from 'vue'\nimport { renderAsync } from 'docx-preview'\nimport DocxEmbeddedFiles from '@/components/DocxEmbeddedFiles.vue'\nimport DocxNavigationPane from '@/components/DocxNavigationPane.vue'\nimport Icon from '@/components/icons/Icon.vue'\nimport type { ViewerFile } from '@/composables/useFileViewer'\nimport { useElementNavigation } from '@/composables/useElementNavigation'\nimport {\n  extractDocxEmbeddedFile,\n  readDocxEmbeddedFiles,\n  type DocxEmbeddedFile,\n} from '@/lib/docxEmbeddings'\nimport { mountDocxEmbeddedPreviews, type DocxEmbeddedDomController } from '@/lib/docxEmbeddedDom'\nimport {\n  buildDocxNavigation,\n  buildDocxPageNavigation,\n  type ParsedDocxModel,\n} from '@/lib/docxNavigation'\nimport { formatBytes } from '@/lib/format'\nimport { classifyViewerFile } from '@/lib/viewerKind'\n\n// The shared body lets an extracted package reuse the same viewer as a top-level file. Lazy loading breaks the\n// FileViewerBody → DocxViewer → FileViewerBody module cycle, matching ZipBrowser's nested-entry hand-off.\nconst FileViewerBody = defineAsyncComponent(() => import('@/components/FileViewerBody.vue'))\n\n/**\n * Side-viewer Word (`.docx`) renderer. Fetches the document bytes from the download URL and renders the\n * OOXML to HTML entirely in-browser via docx-preview (https://github.com/VolodymyrBaydalka/docxjs) — a\n * paginated, paper-like preview (white pages on a neutral canvas, like Word). No CDN / network beyond the\n * file fetch: docx-preview bundles its own jszip + renderer, and images are inlined as base64.\n *\n * Two entry shapes mirror the other browsers (DICOM/zip): a real download URL for a held attachment, or a\n * blob URL minted by the archive browsers from already-extracted bytes. docx-preview injects its own CSS\n * into the render container, prefixed with the `className` ('docx') so it can't leak onto the page.\n */\nconst props = defineProps<{\n  /** Download/blob URL of the .docx bytes. */\n  url?: string\n  name: string\n  size?: number\n}>()\n\ntype Status = 'loading' | 'ready' | 'error'\nconst status = shallowRef<Status>('loading')\nconst errorMsg = shallowRef('')\n// The element docx-preview renders into. Always mounted (v-show, not v-if) so the ref exists when we render.\nconst docEl = shallowRef<HTMLElement | null>(null)\nconst navView = shallowRef<'outline' | 'pages'>('outline')\nconst navCollapsed = shallowRef(false)\nconst { outlineItems, pageItems, activeOutlineId, activePageId, setItems, navigate } =\n  useElementNavigation(docEl)\n\nlet documentBuffer: ArrayBuffer | null = null\nlet embeddedBlobUrl = ''\nlet embeddedSelectionRun = 0\nlet renderRun = 0\nlet documentScrollTop = 0\nlet inlineEmbedded: DocxEmbeddedDomController | null = null\nconst embeddedFiles = shallowRef<DocxEmbeddedFile[]>([])\nconst selectedEmbedded = shallowRef<DocxEmbeddedFile | null>(null)\nconst embeddedViewerFile = shallowRef<ViewerFile | null>(null)\nconst embeddedStatus = shallowRef<Status>('ready')\nconst embeddedError = shallowRef('')\nconst downloadBusyId = shallowRef('')\nconst downloadError = shallowRef('')\n\nfunction revokeEmbeddedBlob(): void {\n  if (!embeddedBlobUrl) return\n  URL.revokeObjectURL(embeddedBlobUrl)\n  embeddedBlobUrl = ''\n}\n\nfunction clearInlineEmbedded(): void {\n  inlineEmbedded?.dispose()\n  inlineEmbedded = null\n}\n\nfunction closeEmbedded(restoreDocumentScroll = true): void {\n  const shouldRestoreScroll = restoreDocumentScroll && selectedEmbedded.value !== null\n  embeddedSelectionRun++\n  selectedEmbedded.value = null\n  embeddedViewerFile.value = null\n  embeddedStatus.value = 'ready'\n  embeddedError.value = ''\n  revokeEmbeddedBlob()\n  if (shouldRestoreScroll) {\n    void nextTick(() => {\n      if (!selectedEmbedded.value && docEl.value) docEl.value.scrollTop = documentScrollTop\n    })\n  }\n}\n\nfunction resetEmbedded(): void {\n  closeEmbedded(false)\n  clearInlineEmbedded()\n  documentBuffer = null\n  documentScrollTop = 0\n  embeddedFiles.value = []\n  downloadBusyId.value = ''\n  downloadError.value = ''\n}\n\nasync function render(): Promise<void> {\n  const el = docEl.value\n  if (!props.url || !el) return\n  const run = ++renderRun\n  status.value = 'loading'\n  errorMsg.value = ''\n  resetEmbedded()\n  setItems([], [])\n  el.innerHTML = '' // drop any prior render (e.g. on retry / switching files)\n  const url = props.url\n  try {\n    const res = await fetch(url)\n    if (!res.ok) throw new Error(`HTTP ${res.status}`)\n    const buf = await res.arrayBuffer()\n    // Stale guard: a newer render may have started while we awaited the fetch.\n    if (renderRun !== run || props.url !== url || docEl.value !== el) return\n    // Embedded packages are a best-effort enhancement: malformed relationship XML must not blank a Word file\n    // that docx-preview can otherwise render. Parse concurrently because both consumers only read the buffer.\n    const embeddedPromise = readDocxEmbeddedFiles(buf).catch((error) => {\n      console.warn('DOCX embedded files unavailable:', error)\n      return []\n    })\n    const document = (await renderAsync(buf, el, undefined, {\n      className: 'docx', // CSS prefix → docx-preview's injected styles stay scoped to this subtree\n      inWrapper: true, // wrap pages in the gray \"paper on desk\" canvas, like Word\n      // The side panel is narrow (and resizable), so don't pin pages to the fixed A4 width — that overflows\n      // and clips the left edge. Let pages fill the available width and reflow; height follows content.\n      ignoreWidth: true,\n      ignoreHeight: true,\n      breakPages: true, // honor page breaks → still separate page sheets, stacked vertically\n      renderHeaders: true,\n      renderFooters: true,\n      renderFootnotes: true,\n      renderEndnotes: true,\n      useBase64URL: true, // inline embedded images as data URLs (no blob-URL lifecycle to manage)\n    })) as ParsedDocxModel\n    const discoveredEmbeddedFiles = await embeddedPromise\n    if (renderRun !== run || props.url !== url || docEl.value !== el) return\n    let navigation\n    try {\n      navigation = buildDocxNavigation(document, el)\n    } catch (error) {\n      // A malformed/unsupported Word model must never turn an otherwise rendered document into an error page.\n      console.warn('DOCX outline navigation unavailable:', error)\n      navigation = { outline: [], pages: buildDocxPageNavigation(el) }\n    }\n    setItems(navigation.outline, navigation.pages)\n    navView.value = navigation.outline.length ? 'outline' : 'pages'\n    documentBuffer = buf\n    embeddedFiles.value = discoveredEmbeddedFiles\n    inlineEmbedded = mountDocxEmbeddedPreviews({\n      root: el,\n      buffer: buf,\n      files: discoveredEmbeddedFiles,\n      onOpen: (file) => void openEmbedded(file),\n    })\n    status.value = 'ready'\n  } catch (e) {\n    if (renderRun !== run) return\n    errorMsg.value = e instanceof Error ? e.message : String(e)\n    status.value = 'error'\n  }\n}\n\nasync function openEmbedded(file: DocxEmbeddedFile): Promise<void> {\n  if (!documentBuffer) return\n  const buffer = documentBuffer\n  let pendingUrl = ''\n  documentScrollTop = docEl.value?.scrollTop ?? 0\n  closeEmbedded(false)\n  // closeEmbedded invalidates prior work; this run now becomes the active selection.\n  const activeRun = ++embeddedSelectionRun\n  selectedEmbedded.value = file\n  embeddedStatus.value = 'loading'\n  embeddedError.value = ''\n  try {\n    const bytes = await extractDocxEmbeddedFile(buffer, file)\n    if (embeddedSelectionRun !== activeRun || documentBuffer !== buffer) return\n    const url = URL.createObjectURL(new Blob([bytes], { type: file.contentType }))\n    pendingUrl = url\n    const viewerFile = classifyViewerFile({\n      name: file.name,\n      url,\n      size: file.size,\n      mime: file.contentType,\n    })\n    if (embeddedSelectionRun !== activeRun || selectedEmbedded.value !== file) {\n      URL.revokeObjectURL(url)\n      pendingUrl = ''\n      return\n    }\n    embeddedBlobUrl = url\n    pendingUrl = ''\n    embeddedViewerFile.value = viewerFile\n    embeddedStatus.value = 'ready'\n  } catch (error) {\n    if (pendingUrl) URL.revokeObjectURL(pendingUrl)\n    if (embeddedSelectionRun !== activeRun) return\n    embeddedError.value = error instanceof Error ? error.message : String(error)\n    embeddedStatus.value = 'error'\n  }\n}\n\nasync function downloadEmbedded(file: DocxEmbeddedFile): Promise<void> {\n  if (!documentBuffer || downloadBusyId.value) return\n  const buffer = documentBuffer\n  downloadBusyId.value = file.id\n  downloadError.value = ''\n  let url = ''\n  try {\n    const bytes = await extractDocxEmbeddedFile(buffer, file)\n    if (documentBuffer !== buffer) return\n    url = URL.createObjectURL(new Blob([bytes], { type: file.contentType }))\n    const anchor = document.createElement('a')\n    anchor.href = url\n    anchor.download = file.name\n    document.body.appendChild(anchor)\n    anchor.click()\n    anchor.remove()\n  } catch (error) {\n    downloadError.value = error instanceof Error ? error.message : String(error)\n  } finally {\n    if (url) setTimeout(() => URL.revokeObjectURL(url), 1000)\n    if (downloadBusyId.value === file.id) downloadBusyId.value = ''\n  }\n}\n\nwatch(\n  [() => props.url, docEl],\n  ([url, element]) => {\n    if (url && element) void render()\n  },\n  { immediate: true },\n)\nonBeforeUnmount(() => {\n  renderRun++\n  resetEmbedded()\n  if (docEl.value) docEl.value.innerHTML = ''\n})\n</script>\n\n<template>\n  <div class=\"dx\">\n    <DocxNavigationPane\n      v-if=\"status === 'ready' && !selectedEmbedded\"\n      v-model:collapsed=\"navCollapsed\"\n      v-model:view=\"navView\"\n      :outline-items=\"outlineItems\"\n      :page-items=\"pageItems\"\n      :active-outline-id=\"activeOutlineId\"\n      :active-page-id=\"activePageId\"\n      @navigate=\"navigate\"\n    />\n    <div class=\"dx__stage\">\n      <div v-if=\"selectedEmbedded\" class=\"dx__embedded-bar\">\n        <button type=\"button\" class=\"dx__back\" title=\"返回 Word 文档\" @click=\"closeEmbedded()\">\n          <Icon name=\"arrowLeft\" :size=\"16\" />\n        </button>\n        <span class=\"dx__embedded-title\" :title=\"selectedEmbedded.name\">\n          {{ selectedEmbedded.label || selectedEmbedded.name }}\n        </span>\n        <span class=\"dx__embedded-size\">{{ formatBytes(selectedEmbedded.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"dx__download\"\n          title=\"下载内嵌文件\"\n          @click=\"downloadEmbedded(selectedEmbedded)\"\n        >\n          <Icon name=\"download\" :size=\"15\" />\n        </button>\n      </div>\n\n      <p v-if=\"status === 'loading'\" class=\"dx__msg\">正在渲染 Word 文档…</p>\n      <div v-else-if=\"status === 'error'\" class=\"dx__msg dx__msg--error\">\n        <p>渲染失败：{{ errorMsg }}</p>\n        <button type=\"button\" class=\"dx__retry\" @click=\"render\">重试</button>\n      </div>\n      <template v-else-if=\"selectedEmbedded\">\n        <p v-if=\"embeddedStatus === 'loading'\" class=\"dx__msg\">正在读取内嵌文件…</p>\n        <div v-else-if=\"embeddedStatus === 'error'\" class=\"dx__msg dx__msg--error\">\n          <p>读取失败：{{ embeddedError }}</p>\n          <button type=\"button\" class=\"dx__retry\" @click=\"openEmbedded(selectedEmbedded)\">\n            重试\n          </button>\n        </div>\n        <FileViewerBody v-else-if=\"embeddedViewerFile\" :file=\"embeddedViewerFile\" mode=\"render\" />\n      </template>\n\n      <DocxEmbeddedFiles\n        v-else-if=\"status === 'ready' && embeddedFiles.length\"\n        :files=\"embeddedFiles\"\n        :download-busy-id=\"downloadBusyId\"\n        :error=\"downloadError\"\n        @open=\"openEmbedded\"\n        @download=\"downloadEmbedded\"\n      />\n      <!-- Always mounted (v-show) so docEl is available to docx-preview; hidden until render completes. -->\n      <div v-show=\"status === 'ready' && !selectedEmbedded\" ref=\"docEl\" class=\"dx__doc\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.dx {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: row;\n  background: var(--surface);\n  container-type: inline-size;\n}\n.dx__stage {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.dx__msg {\n  padding: 20px 16px;\n  color: var(--muted);\n  font-size: 13px;\n}\n.dx__msg--error {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 10px;\n  color: var(--danger);\n}\n.dx__retry {\n  font-family: inherit;\n  font-size: 12.5px;\n  color: var(--text);\n  background: var(--surface);\n  border: 1px solid var(--border-2);\n  border-radius: 8px;\n  padding: 5px 12px;\n  cursor: pointer;\n}\n.dx__retry:hover {\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n.dx__embedded-bar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n  padding: 7px 10px 7px 8px;\n  border-bottom: 1px solid var(--border);\n  background: var(--surface);\n}\n.dx__back,\n.dx__download {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 30px;\n  height: 28px;\n  padding: 0;\n  color: var(--muted);\n  background: transparent;\n  border: none;\n  border-radius: 7px;\n  cursor: pointer;\n}\n.dx__back:hover,\n.dx__download:hover {\n  color: var(--accent);\n  background: var(--surface-2);\n}\n.dx__embedded-title {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  color: var(--text-strong);\n  font-size: 12.5px;\n  font-weight: 500;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dx__embedded-size {\n  flex-shrink: 0;\n  color: var(--faint);\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n}\n\n/* docx-preview intentionally skips OLE `w:object` nodes but leaves their empty <p>. The DOM adapter inserts\n * Word/WPS's inert raster snapshot, or a rendered PPTX first slide when the snapshot is browser-incompatible,\n * into that exact paragraph. The whole preview opens the real embedded file. */\n.dx__doc :deep(.docx-embedded-host) {\n  min-height: 0;\n  margin: 8px 0 12px;\n  text-align: center;\n}\n.dx__doc :deep(.docx-embedded-preview) {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  width: 100%;\n  min-height: 72px;\n  padding: 12px;\n  overflow: hidden;\n  color: #334155;\n  background: #f8fafc;\n  border: 1px solid #cbd5e1;\n  border-radius: 6px;\n  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);\n  cursor: pointer;\n  font-family: Arial, sans-serif;\n  text-align: left;\n}\n.dx__doc :deep(.docx-embedded-preview:hover),\n.dx__doc :deep(.docx-embedded-preview:focus-visible) {\n  border-color: #3370ff;\n  box-shadow:\n    0 0 0 2px rgba(51, 112, 255, 0.16),\n    0 2px 8px rgba(15, 23, 42, 0.16);\n  outline: none;\n}\n.dx__doc :deep(.docx-embedded-preview--image) {\n  display: inline-block;\n  min-height: 0;\n  padding: 0;\n  background: #fff;\n}\n.dx__doc :deep(.docx-embedded-preview--pptx) {\n  display: block;\n  min-height: 0;\n  padding: 0;\n  background: #fff;\n}\n.dx__doc :deep(.docx-embedded-preview--loading) {\n  cursor: progress;\n}\n.dx__doc :deep(.docx-embedded-preview__pptx-slide) {\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  pointer-events: none;\n}\n.dx__doc :deep(.docx-embedded-preview__pptx-status) {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #64748b;\n  background: #f8fafc;\n  font-size: 12px;\n  font-weight: 600;\n}\n.dx__doc :deep(.docx-embedded-preview__image) {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: contain;\n}\n.dx__doc :deep(.docx-embedded-preview__hint) {\n  position: absolute;\n  right: 8px;\n  bottom: 8px;\n  padding: 5px 9px;\n  color: #fff;\n  background: rgba(15, 23, 42, 0.76);\n  border-radius: 999px;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(3px);\n  transition:\n    opacity 0.15s,\n    transform 0.15s;\n}\n.dx__doc :deep(.docx-embedded-preview:hover .docx-embedded-preview__hint),\n.dx__doc :deep(.docx-embedded-preview:focus-visible .docx-embedded-preview__hint) {\n  opacity: 1;\n  transform: translateY(0);\n}\n.dx__doc :deep(.docx-embedded-preview__badge) {\n  flex-shrink: 0;\n  padding: 5px 7px;\n  color: #166534;\n  background: #dcfce7;\n  border-radius: 5px;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n}\n.dx__doc :deep(.docx-embedded-preview__fallback-label) {\n  min-width: 0;\n  overflow: hidden;\n  font-size: 12px;\n  font-weight: 600;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Scroll region holding the rendered document. The pages keep their native Word appearance (white paper,\n * black text) for fidelity; we only retint the surrounding \"desk\" to the app's neutral surface so it sits\n * in the panel naturally in both light and dark themes. :deep reaches docx-preview's injected DOM. */\n.dx__doc {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  background: var(--surface-2);\n}\n.dx__doc :deep(.docx-wrapper) {\n  background: var(--surface-2);\n  padding: 22px 16px 40px;\n  gap: 16px;\n}\n/* Each page: a white sheet with a soft shadow. With ignoreWidth the page reflows to the panel width, so\n * pin it to fill the wrapper (box-sizing so the doc's own margins stay inside the sheet, not overflowing). */\n.dx__doc :deep(.docx-wrapper > section.docx) {\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);\n  margin-bottom: 0;\n}\n/* Some Word docs anchor tables as \"floating\" objects (OOXML `w:tblpPr` — a table pinned to a fixed spot on\n * the page with body text wrapping around it). docx-preview approximates that with `float: left` + a fixed\n * point width. On a full A4 page the table lands where Word put it, but in this narrow, width-reflowing\n * panel the floats stack unpredictably and the surrounding paragraphs wrap into the gaps beside them — so on\n * resize the layout scrambles and dark cell shading appears to streak across (the reported \"背景乱串 / 排版\n * 混乱\"). Since we've already chosen reflow over pixel-exact A4 fidelity (ignoreWidth + section width:100%),\n * force every table back to a normal full-width block that stacks top-to-bottom at any panel width, and let\n * long cell content wrap instead of overflowing. */\n.dx__doc :deep(section.docx table) {\n  float: none !important;\n  width: 100% !important;\n  max-width: 100%;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n.dx__doc :deep(section.docx td),\n.dx__doc :deep(section.docx th) {\n  overflow-wrap: break-word;\n}\n/* The page's own side margins (this doc uses ~90pt) would swallow most of a narrow panel now that tables\n * fill the width, so cap the horizontal padding while keeping the top/bottom page margin intact. */\n.dx__doc :deep(section.docx) {\n  padding-left: clamp(14px, 5%, 90pt) !important;\n  padding-right: clamp(14px, 5%, 90pt) !important;\n}\n</style>\n"],"mappings":"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"}

package/dist/components/FileViewerBody.js

@@ -2,7 +2,7 @@ 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-82d079e3"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-82dd34f8"]]);
 //#endregion
 export { n as default };