npm - @l1yp/file-viewer - Versions diffs - 0.1.3 → 0.1.4 - Mend

@l1yp/file-viewer 0.1.3 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/dist/components/ImageLightbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageLightbox.js","names":[],"sources":["../../src/components/ImageLightbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { useLightbox } from '@/composables/useLightbox'\nimport { fileExt } from '@/lib/fileType'\nimport Icon from '@/components/icons/Icon.vue'\nimport ZoomImage from '@/components/ZoomImage.vue'\n\n/*\n Full-screen media lightbox (the \"弹框预览\"). A single instance is mounted in App.vue and driven by the\n * `useLightbox` singleton — any thumbnail / file chip opens it. Teleported to <body> so it overlays everything\n * regardless of the message tree's stacking contexts. Close via the X button, the empty backdrop, or Esc.\n \n Images render in the shared {@link ZoomImage} stage (wheel-zoom, drag-pan, dbl-click fit↔2×, toolbar, and\n * long-image fill-width). +/-/0 keys drive it via the exposed methods; a no-drag click on empty area closes.\n * Videos are FETCHED and played from a blob URL: the download endpoint serves `octet-stream` + `nosniff`, so a\n * direct `<video src>` can't determine a codec — but a blob tagged with the right MIME does (no backend change;\n * the same trick ZipBrowser uses).\n /\nconst { current, close } = useLightbox()\n\n// Extension → a concrete video MIME so the blob decodes (the upstream bytes arrive as octet-stream).\nconst VIDEO_MIME: Record<string, string> = {\n mp4: 'video/mp4',\n m4v: 'video/mp4',\n webm: 'video/webm',\n ogv: 'video/ogg',\n mov: 'video/quicktime',\n mkv: 'video/x-matroska',\n avi: 'video/x-msvideo',\n}\n\nconst isVideo = computed(() => current.value?.kind === 'video')\nconst zoomImg = ref<InstanceType<typeof ZoomImage> \| null>(null)\n\nconst videoUrl = ref('')\nconst videoLoading = ref(false)\nconst videoError = ref('')\n\nfunction onKey(e: KeyboardEvent): void {\n if (e.key === 'Escape') {\n close()\n } else if (!isVideo.value) {\n if (e.key === '+' \|\| e.key === '=') zoomImg.value?.zoomIn()\n else if (e.key === '-' \|\| e.key === '_') zoomImg.value?.zoomOut()\n else if (e.key === '0') zoomImg.value?.fit()\n }\n}\n\nfunction revokeVideo(): void {\n if (videoUrl.value) {\n URL.revokeObjectURL(videoUrl.value)\n videoUrl.value = ''\n }\n}\n\n// Fetch a video's bytes and wrap them in a typed blob the <video> element can actually decode.\nasync function loadVideo(media: NonNullable<typeof current.value>): Promise<void> {\n videoLoading.value = true\n videoError.value = ''\n try {\n const res = await fetch(media.src)\n if (!res.ok) throw new Error(`HTTP ${res.status}`)\n const raw = await res.blob()\n // Don't trust raw.type — the endpoint always serves octet-stream; derive from the filename extension.\n const type = VIDEO_MIME[fileExt(media.alt \|\| '')] \|\| 'video/mp4'\n const url = URL.createObjectURL(new Blob([raw], { type }))\n // Guard against the lightbox having closed / switched media while the fetch was in flight.\n if (current.value === media) videoUrl.value = url\n else URL.revokeObjectURL(url)\n } catch (e) {\n if (current.value === media) videoError.value = e instanceof Error ? e.message : String(e)\n } finally {\n if (current.value === media) videoLoading.value = false\n }\n}\n\n// Add the Esc listener and lock body scroll only while open; reset video state on every change and (re)load\n// when the new media is a video. Guarded for SSR.\nwatch(current, (media) => {\n if (typeof window === 'undefined') return\n if (media) {\n window.addEventListener('keydown', onKey)\n document.body.style.overflow = 'hidden'\n } else {\n window.removeEventListener('keydown', onKey)\n document.body.style.overflow = ''\n }\n revokeVideo()\n videoError.value = ''\n videoLoading.value = false\n if (media?.kind === 'video') void loadVideo(media)\n})\n\nonBeforeUnmount(() => {\n if (typeof window !== 'undefined') {\n window.removeEventListener('keydown', onKey)\n document.body.style.overflow = ''\n }\n revokeVideo()\n})\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div v-if=\"current\" class=\"lightbox\">\n <button\n type=\"button\"\n class=\"lightbox__close\"\n title=\"关闭 (Esc)\"\n aria-label=\"关闭\"\n @click=\"close\"\n >\n <Icon name=\"close\" :size=\"22\" :stroke-width=\"2.2\" />\n </button>\n\n <template v-if=\"isVideo\">\n <p v-if=\"videoLoading\" class=\"lightbox__msg\">加载视频中…</p>\n <p v-else-if=\"videoError\" class=\"lightbox__msg\">视频加载失败：{{ videoError }}</p>\n <video\n v-else-if=\"videoUrl\"\n class=\"lightbox__video\"\n :src=\"videoUrl\"\n controls\n autoplay\n playsinline\n />\n </template>\n\n <ZoomImage\n v-else\n ref=\"zoomImg\"\n class=\"lightbox__zoom\"\n :src=\"current.src\"\n :alt=\"current.alt \|\| ''\"\n :long=\"current.long\"\n @empty-click=\"close\"\n />\n </div>\n </Teleport>\n</template>\n\n<style scoped>\n.lightbox {\n position: fixed;\n inset: 0;\n z-index: 2000;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.82);\n animation: lightbox-in 0.12s ease-out;\n}\n@keyframes lightbox-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n/ The zoom/pan stage fills the overlay; its transparent background lets the dark backdrop show through. */\n.lightbox__zoom {\n position: absolute;\n inset: 0;\n}\n.lightbox__video {\n max-width: 94vw;\n max-height: 94vh;\n border-radius: 6px;\n background: #000;\n box-shadow: 0 16px 56px rgba(0, 0, 0, 0.55);\n}\n.lightbox__msg {\n color: #fff;\n font-size: 14px;\n}\n.lightbox__close {\n position: fixed;\n top: 16px;\n right: 16px;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border: none;\n border-radius: 10px;\n background: rgba(255, 255, 255, 0.12);\n color: #fff;\n cursor: pointer;\n transition: background 0.15s ease;\n}\n.lightbox__close:hover {\n background: rgba(255, 255, 255, 0.24);\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"ImageLightbox.js","names":[],"sources":["../../src/components/ImageLightbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, shallowRef, useTemplateRef, watch } from 'vue'\nimport { useLightbox } from '@/composables/useLightbox'\nimport { fileExt } from '@/lib/fileType'\nimport Icon from '@/components/icons/Icon.vue'\nimport LightboxGalleryStrip from '@/components/LightboxGalleryStrip.vue'\nimport ZoomImage from '@/components/ZoomImage.vue'\n\n/*\n Full-screen media lightbox (the \"弹框预览\"). A single instance is mounted in App.vue and driven by the\n * `useLightbox` singleton — any thumbnail / file chip opens it. Teleported to <body> so it overlays everything\n * regardless of the message tree's stacking contexts. Close via the X button, the empty backdrop, or Esc.\n \n Images render in the shared {@link ZoomImage} stage (wheel-zoom, drag-pan, dbl-click fit↔2×, toolbar, and\n * long-image fill-width). +/-/0 keys drive it via the exposed methods; a no-drag click on empty area closes.\n * Videos are FETCHED and played from a blob URL: the download endpoint serves `octet-stream` + `nosniff`, so a\n * direct `<video src>` can't determine a codec — but a blob tagged with the right MIME does (no backend change;\n * the same trick ZipBrowser uses).\n /\nconst { current, gallery, currentIndex, hasPrevious, hasNext, close, previous, next, select } =\n useLightbox()\n\n// Extension → a concrete video MIME so the blob decodes (the upstream bytes arrive as octet-stream).\nconst VIDEO_MIME: Record<string, string> = {\n mp4: 'video/mp4',\n m4v: 'video/mp4',\n webm: 'video/webm',\n ogv: 'video/ogg',\n mov: 'video/quicktime',\n mkv: 'video/x-matroska',\n avi: 'video/x-msvideo',\n}\n\nconst isVideo = computed(() => current.value?.kind === 'video')\nconst hasGallery = computed(() => !isVideo.value && gallery.value.length > 1)\nconst zoomImg = useTemplateRef<InstanceType<typeof ZoomImage>>('zoomImg')\n\nconst videoUrl = shallowRef('')\nconst videoLoading = shallowRef(false)\nconst videoError = shallowRef('')\n\nfunction onKey(e: KeyboardEvent): void {\n if (e.key === 'Escape') {\n close()\n } else if (!isVideo.value) {\n if (e.key === 'ArrowLeft') previous()\n else if (e.key === 'ArrowRight') next()\n else if (e.key === '+' \|\| e.key === '=') zoomImg.value?.zoomIn()\n else if (e.key === '-' \|\| e.key === '_') zoomImg.value?.zoomOut()\n else if (e.key === '0') zoomImg.value?.fit()\n }\n}\n\nfunction revokeVideo(): void {\n if (videoUrl.value) {\n URL.revokeObjectURL(videoUrl.value)\n videoUrl.value = ''\n }\n}\n\n// Fetch a video's bytes and wrap them in a typed blob the <video> element can actually decode.\nasync function loadVideo(media: NonNullable<typeof current.value>): Promise<void> {\n videoLoading.value = true\n videoError.value = ''\n try {\n const res = await fetch(media.src)\n if (!res.ok) throw new Error(`HTTP ${res.status}`)\n const raw = await res.blob()\n // Don't trust raw.type — the endpoint always serves octet-stream; derive from the filename extension.\n const type = VIDEO_MIME[fileExt(media.alt \|\| '')] \|\| 'video/mp4'\n const url = URL.createObjectURL(new Blob([raw], { type }))\n // Guard against the lightbox having closed / switched media while the fetch was in flight.\n if (current.value === media) videoUrl.value = url\n else URL.revokeObjectURL(url)\n } catch (e) {\n if (current.value === media) videoError.value = e instanceof Error ? e.message : String(e)\n } finally {\n if (current.value === media) videoLoading.value = false\n }\n}\n\n// Add the Esc listener and lock body scroll only while open; reset video state on every change and (re)load\n// when the new media is a video. Guarded for SSR.\nwatch(current, (media) => {\n if (typeof window === 'undefined') return\n if (media) {\n window.addEventListener('keydown', onKey)\n document.body.style.overflow = 'hidden'\n } else {\n window.removeEventListener('keydown', onKey)\n document.body.style.overflow = ''\n }\n revokeVideo()\n videoError.value = ''\n videoLoading.value = false\n if (media?.kind === 'video') void loadVideo(media)\n})\n\nonBeforeUnmount(() => {\n if (typeof window !== 'undefined') {\n window.removeEventListener('keydown', onKey)\n document.body.style.overflow = ''\n }\n revokeVideo()\n})\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div v-if=\"current\" class=\"lightbox\">\n <button\n type=\"button\"\n class=\"lightbox__close\"\n title=\"关闭 (Esc)\"\n aria-label=\"关闭\"\n @click=\"close\"\n >\n <Icon name=\"close\" :size=\"22\" :stroke-width=\"2.2\" />\n </button>\n\n <div v-if=\"hasGallery\" class=\"lightbox__meta\" aria-live=\"polite\">\n <span class=\"lightbox__name\">{{ current.alt \|\| '图片' }}</span>\n <span class=\"lightbox__count\">{{ currentIndex + 1 }} / {{ gallery.length }}</span>\n </div>\n\n <button\n v-if=\"hasPrevious\"\n type=\"button\"\n class=\"lightbox__nav lightbox__nav--prev\"\n title=\"上一张 (←)\"\n aria-label=\"上一张图片\"\n @click=\"previous\"\n >\n <Icon name=\"chevronLeft\" :size=\"24\" :stroke-width=\"2.2\" />\n </button>\n <button\n v-if=\"hasNext\"\n type=\"button\"\n class=\"lightbox__nav lightbox__nav--next\"\n title=\"下一张 (→)\"\n aria-label=\"下一张图片\"\n @click=\"next\"\n >\n <Icon name=\"chevronRight\" :size=\"24\" :stroke-width=\"2.2\" />\n </button>\n\n <template v-if=\"isVideo\">\n <p v-if=\"videoLoading\" class=\"lightbox__msg\">加载视频中…</p>\n <p v-else-if=\"videoError\" class=\"lightbox__msg\">视频加载失败：{{ videoError }}</p>\n <video\n v-else-if=\"videoUrl\"\n class=\"lightbox__video\"\n :src=\"videoUrl\"\n controls\n autoplay\n playsinline\n />\n </template>\n\n <ZoomImage\n v-else\n :key=\"current.src\"\n ref=\"zoomImg\"\n class=\"lightbox__zoom\"\n :src=\"current.src\"\n :alt=\"current.alt \|\| ''\"\n :long=\"current.long\"\n :toolbar-bottom=\"hasGallery ? 108 : 14\"\n @empty-click=\"close\"\n />\n\n <LightboxGalleryStrip\n v-if=\"hasGallery\"\n class=\"lightbox__gallery\"\n :items=\"gallery\"\n :current-index=\"currentIndex\"\n @select=\"select\"\n />\n </div>\n </Teleport>\n</template>\n\n<style scoped>\n.lightbox {\n position: fixed;\n inset: 0;\n z-index: 2000;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(4, 5, 9, 0.86);\n backdrop-filter: blur(3px);\n animation: lightbox-in 0.12s ease-out;\n}\n@keyframes lightbox-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n/ The zoom/pan stage fills the overlay; its transparent background lets the dark backdrop show through. */\n.lightbox__zoom {\n position: absolute;\n inset: 0;\n}\n.lightbox__meta {\n position: fixed;\n top: 16px;\n left: 50%;\n z-index: 2;\n display: flex;\n align-items: center;\n gap: 9px;\n max-width: min(560px, calc(100vw - 160px));\n min-height: 38px;\n padding: 7px 13px;\n border: 1px solid rgba(255, 255, 255, 0.14);\n border-radius: 12px;\n background: rgba(24, 25, 30, 0.52);\n color: #fff;\n box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);\n backdrop-filter: blur(16px) saturate(1.2);\n transform: translateX(-50%);\n}\n.lightbox__name {\n overflow: hidden;\n font-size: 13px;\n font-weight: 500;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.lightbox__count {\n flex: 0 0 auto;\n color: rgba(255, 255, 255, 0.62);\n font-size: 11.5px;\n font-variant-numeric: tabular-nums;\n}\n.lightbox__nav {\n position: fixed;\n top: 50%;\n z-index: 2;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 64px;\n border: none;\n background: transparent;\n color: rgba(255, 255, 255, 0.78);\n filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.72));\n opacity: 0.82;\n cursor: pointer;\n transform: translateY(-50%);\n transition:\n color 0.16s ease,\n filter 0.16s ease,\n opacity 0.16s ease,\n transform 0.16s ease;\n}\n.lightbox__nav:hover {\n background: transparent;\n color: #fff;\n filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.82));\n opacity: 1;\n transform: translateY(-50%) scale(1.12);\n}\n.lightbox__nav:focus-visible {\n outline: 2px solid #fff;\n outline-offset: 3px;\n}\n.lightbox__nav--prev {\n left: 18px;\n}\n.lightbox__nav--next {\n right: 18px;\n}\n.lightbox__gallery {\n position: fixed;\n bottom: 16px;\n left: 50%;\n z-index: 2;\n transform: translateX(-50%);\n}\n.lightbox__video {\n max-width: 94vw;\n max-height: 94vh;\n border-radius: 6px;\n background: #000;\n box-shadow: 0 16px 56px rgba(0, 0, 0, 0.55);\n}\n.lightbox__msg {\n color: #fff;\n font-size: 14px;\n}\n.lightbox__close {\n position: fixed;\n top: 16px;\n right: 16px;\n z-index: 3;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border: none;\n border-radius: 50%;\n background: transparent;\n color: rgba(255, 255, 255, 0.82);\n filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.68));\n cursor: pointer;\n transition:\n background 0.15s ease,\n color 0.15s ease,\n transform 0.15s ease;\n}\n.lightbox__close:hover {\n background: rgba(255, 255, 255, 0.18);\n color: #fff;\n transform: scale(1.06);\n}\n.lightbox__close:focus-visible {\n outline: 2px solid #fff;\n outline-offset: 3px;\n}\n\n@media (max-width: 640px) {\n .lightbox__meta {\n top: 12px;\n left: 12px;\n max-width: calc(100vw - 76px);\n transform: none;\n }\n .lightbox__close {\n top: 12px;\n right: 12px;\n }\n .lightbox__nav {\n width: 40px;\n height: 54px;\n border-radius: 13px;\n }\n .lightbox__nav--prev {\n left: 8px;\n }\n .lightbox__nav--next {\n right: 8px;\n }\n .lightbox__gallery {\n bottom: 12px;\n }\n}\n</style>\n"],"mappings":""}

package/dist/components/ImageLightbox.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -2,21 +2,26 @@ import { fileExt as e } from "../lib/fileType.js";
 import t from "./icons/Icon.js";
 import { useLightbox as n } from "../composables/useLightbox.js";
 import r from "./ZoomImage.js";
-import { Fragment as i, Teleport as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, onBeforeUnmount as p, openBlock as m, ref as h, toDisplayString as g, unref as _, watch as v } from "vue";
+import i from "./LightboxGalleryStrip.js";
+import { Fragment as a, Teleport as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, onBeforeUnmount as m, openBlock as h, shallowRef as g, toDisplayString as _, unref as v, useTemplateRef as y, watch as b } from "vue";
 //#region src/components/ImageLightbox.vue?vue&type=script&setup=true&lang.ts
-var y = {
+var x = {
 	key: 0,
 	class: "lightbox"
-}, b = {
+}, S = {
+	key: 0,
+	class: "lightbox__meta",
+	"aria-live": "polite"
+}, C = { class: "lightbox__name" }, w = { class: "lightbox__count" }, T = {
 	key: 0,
 	class: "lightbox__msg"
-}, x = {
+}, E = {
 	key: 1,
 	class: "lightbox__msg"
-}, S = ["src"], C = /*@__PURE__*/ f({
+}, D = ["src"], O = /*@__PURE__*/ p({
 	__name: "ImageLightbox",
-	setup(f) {
-		let { current: C, close: w } = n(), T = {
+	setup(p) {
+		let { current: O, gallery: k, currentIndex: A, hasPrevious: j, hasNext: M, close: N, previous: P, next: F, select: I } = n(), L = {
 			mp4: "video/mp4",
 			m4v: "video/mp4",
 			webm: "video/webm",
@@ -24,65 +29,106 @@ var y = {
 			mov: "video/quicktime",
 			mkv: "video/x-matroska",
 			avi: "video/x-msvideo"
-		}, E = o(() => C.value?.kind === "video"), D = h(null), O = h(""), k = h(!1), A = h("");
-		function j(e) {
-			e.key === "Escape" ? w() : E.value || (e.key === "+" || e.key === "=" ? D.value?.zoomIn() : e.key === "-" || e.key === "_" ? D.value?.zoomOut() : e.key === "0" && D.value?.fit());
+		}, R = s(() => O.value?.kind === "video"), z = s(() => !R.value && k.value.length > 1), B = y("zoomImg"), V = g(""), H = g(!1), U = g("");
+		function W(e) {
+			e.key === "Escape" ? N() : R.value || (e.key === "ArrowLeft" ? P() : e.key === "ArrowRight" ? F() : e.key === "+" || e.key === "=" ? B.value?.zoomIn() : e.key === "-" || e.key === "_" ? B.value?.zoomOut() : e.key === "0" && B.value?.fit());
 		}
-		function M() {
-			O.value &&= (URL.revokeObjectURL(O.value), "");
+		function G() {
+			V.value &&= (URL.revokeObjectURL(V.value), "");
 		}
-		async function N(t) {
-			k.value = !0, A.value = "";
+		async function K(t) {
+			H.value = !0, U.value = "";
 			try {
 				let n = await fetch(t.src);
 				if (!n.ok) throw Error(`HTTP ${n.status}`);
-				let r = await n.blob(), i = T[e(t.alt || "")] || "video/mp4", a = URL.createObjectURL(new Blob([r], { type: i }));
-				C.value === t ? O.value = a : URL.revokeObjectURL(a);
+				let r = await n.blob(), i = L[e(t.alt || "")] || "video/mp4", a = URL.createObjectURL(new Blob([r], { type: i }));
+				O.value === t ? V.value = a : URL.revokeObjectURL(a);
 			} catch (e) {
-				C.value === t && (A.value = e instanceof Error ? e.message : String(e));
+				O.value === t && (U.value = e instanceof Error ? e.message : String(e));
 			} finally {
-				C.value === t && (k.value = !1);
+				O.value === t && (H.value = !1);
 			}
 		}
-		return v(C, (e) => {
-			typeof window > "u" || (e ? (window.addEventListener("keydown", j), document.body.style.overflow = "hidden") : (window.removeEventListener("keydown", j), document.body.style.overflow = ""), M(), A.value = "", k.value = !1, e?.kind === "video" && N(e));
-		}), p(() => {
-			typeof window < "u" && (window.removeEventListener("keydown", j), document.body.style.overflow = ""), M();
-		}), (e, n) => (m(), s(a, { to: "body" }, [_(C) ? (m(), l("div", y, [u("button", {
-			type: "button",
-			class: "lightbox__close",
-			title: "关闭 (Esc)",
-			"aria-label": "关闭",
-			onClick: n[0] ||= (...e) => _(w) && _(w)(...e)
-		}, [d(t, {
-			name: "close",
-			size: 22,
-			"stroke-width": 2.2
-		})]), E.value ? (m(), l(i, { key: 0 }, [k.value ? (m(), l("p", b, "加载视频中…")) : A.value ? (m(), l("p", x, "视频加载失败：" + g(A.value), 1)) : O.value ? (m(), l("video", {
-			key: 2,
-			class: "lightbox__video",
-			src: O.value,
-			controls: "",
-			autoplay: "",
-			playsinline: ""
-		}, null, 8, S)) : c("", !0)], 64)) : (m(), s(r, {
-			key: 1,
-			ref_key: "zoomImg",
-			ref: D,
-			class: "lightbox__zoom",
-			src: _(C).src,
-			alt: _(C).alt || "",
-			long: _(C).long,
-			onEmptyClick: _(w)
-		}, null, 8, [
-			"src",
-			"alt",
-			"long",
-			"onEmptyClick"
-		]))])) : c("", !0)]));
+		return b(O, (e) => {
+			typeof window > "u" || (e ? (window.addEventListener("keydown", W), document.body.style.overflow = "hidden") : (window.removeEventListener("keydown", W), document.body.style.overflow = ""), G(), U.value = "", H.value = !1, e?.kind === "video" && K(e));
+		}), m(() => {
+			typeof window < "u" && (window.removeEventListener("keydown", W), document.body.style.overflow = ""), G();
+		}), (e, n) => (h(), c(o, { to: "body" }, [v(O) ? (h(), u("div", x, [
+			d("button", {
+				type: "button",
+				class: "lightbox__close",
+				title: "关闭 (Esc)",
+				"aria-label": "关闭",
+				onClick: n[0] ||= (...e) => v(N) && v(N)(...e)
+			}, [f(t, {
+				name: "close",
+				size: 22,
+				"stroke-width": 2.2
+			})]),
+			z.value ? (h(), u("div", S, [d("span", C, _(v(O).alt || "图片"), 1), d("span", w, _(v(A) + 1) + " / " + _(v(k).length), 1)])) : l("", !0),
+			v(j) ? (h(), u("button", {
+				key: 1,
+				type: "button",
+				class: "lightbox__nav lightbox__nav--prev",
+				title: "上一张 (←)",
+				"aria-label": "上一张图片",
+				onClick: n[1] ||= (...e) => v(P) && v(P)(...e)
+			}, [f(t, {
+				name: "chevronLeft",
+				size: 24,
+				"stroke-width": 2.2
+			})])) : l("", !0),
+			v(M) ? (h(), u("button", {
+				key: 2,
+				type: "button",
+				class: "lightbox__nav lightbox__nav--next",
+				title: "下一张 (→)",
+				"aria-label": "下一张图片",
+				onClick: n[2] ||= (...e) => v(F) && v(F)(...e)
+			}, [f(t, {
+				name: "chevronRight",
+				size: 24,
+				"stroke-width": 2.2
+			})])) : l("", !0),
+			R.value ? (h(), u(a, { key: 3 }, [H.value ? (h(), u("p", T, "加载视频中…")) : U.value ? (h(), u("p", E, "视频加载失败：" + _(U.value), 1)) : V.value ? (h(), u("video", {
+				key: 2,
+				class: "lightbox__video",
+				src: V.value,
+				controls: "",
+				autoplay: "",
+				playsinline: ""
+			}, null, 8, D)) : l("", !0)], 64)) : (h(), c(r, {
+				key: v(O).src,
+				ref_key: "zoomImg",
+				ref: B,
+				class: "lightbox__zoom",
+				src: v(O).src,
+				alt: v(O).alt || "",
+				long: v(O).long,
+				"toolbar-bottom": z.value ? 108 : 14,
+				onEmptyClick: v(N)
+			}, null, 8, [
+				"src",
+				"alt",
+				"long",
+				"toolbar-bottom",
+				"onEmptyClick"
+			])),
+			z.value ? (h(), c(i, {
+				key: 5,
+				class: "lightbox__gallery",
+				items: v(k),
+				"current-index": v(A),
+				onSelect: v(I)
+			}, null, 8, [
+				"items",
+				"current-index",
+				"onSelect"
+			])) : l("", !0)
+		])) : l("", !0)]));
 	}
 });
 //#endregion
-export { C as default };
+export { O as default };
 //# sourceMappingURL=ImageLightbox.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ImageLightbox.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageLightbox.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/ImageLightbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { useLightbox } from '@/composables/useLightbox'\nimport { fileExt } from '@/lib/fileType'\nimport Icon from '@/components/icons/Icon.vue'\nimport ZoomImage from '@/components/ZoomImage.vue'\n\n/*\n Full-screen media lightbox (the \"弹框预览\"). A single instance is mounted in App.vue and driven by the\n * `useLightbox` singleton — any thumbnail / file chip opens it. Teleported to <body> so it overlays everything\n * regardless of the message tree's stacking contexts. Close via the X button, the empty backdrop, or Esc.\n \n Images render in the shared {@link ZoomImage} stage (wheel-zoom, drag-pan, dbl-click fit↔2×, toolbar, and\n * long-image fill-width). +/-/0 keys drive it via the exposed methods; a no-drag click on empty area closes.\n * Videos are FETCHED and played from a blob URL: the download endpoint serves `octet-stream` + `nosniff`, so a\n * direct `<video src>` can't determine a codec — but a blob tagged with the right MIME does (no backend change;\n * the same trick ZipBrowser uses).\n /\nconst { current, close } = useLightbox()\n\n// Extension → a concrete video MIME so the blob decodes (the upstream bytes arrive as octet-stream).\nconst VIDEO_MIME: Record<string, string> = {\n mp4: 'video/mp4',\n m4v: 'video/mp4',\n webm: 'video/webm',\n ogv: 'video/ogg',\n mov: 'video/quicktime',\n mkv: 'video/x-matroska',\n avi: 'video/x-msvideo',\n}\n\nconst isVideo = computed(() => current.value?.kind === 'video')\nconst zoomImg = ref<InstanceType<typeof ZoomImage> \| null>(null)\n\nconst videoUrl = ref('')\nconst videoLoading = ref(false)\nconst videoError = ref('')\n\nfunction onKey(e: KeyboardEvent): void {\n if (e.key === 'Escape') {\n close()\n } else if (!isVideo.value) {\n if (e.key === '+' \|\| e.key === '=') zoomImg.value?.zoomIn()\n else if (e.key === '-' \|\| e.key === '_') zoomImg.value?.zoomOut()\n else if (e.key === '0') zoomImg.value?.fit()\n }\n}\n\nfunction revokeVideo(): void {\n if (videoUrl.value) {\n URL.revokeObjectURL(videoUrl.value)\n videoUrl.value = ''\n }\n}\n\n// Fetch a video's bytes and wrap them in a typed blob the <video> element can actually decode.\nasync function loadVideo(media: NonNullable<typeof current.value>): Promise<void> {\n videoLoading.value = true\n videoError.value = ''\n try {\n const res = await fetch(media.src)\n if (!res.ok) throw new Error(`HTTP ${res.status}`)\n const raw = await res.blob()\n // Don't trust raw.type — the endpoint always serves octet-stream; derive from the filename extension.\n const type = VIDEO_MIME[fileExt(media.alt \|\| '')] \|\| 'video/mp4'\n const url = URL.createObjectURL(new Blob([raw], { type }))\n // Guard against the lightbox having closed / switched media while the fetch was in flight.\n if (current.value === media) videoUrl.value = url\n else URL.revokeObjectURL(url)\n } catch (e) {\n if (current.value === media) videoError.value = e instanceof Error ? e.message : String(e)\n } finally {\n if (current.value === media) videoLoading.value = false\n }\n}\n\n// Add the Esc listener and lock body scroll only while open; reset video state on every change and (re)load\n// when the new media is a video. Guarded for SSR.\nwatch(current, (media) => {\n if (typeof window === 'undefined') return\n if (media) {\n window.addEventListener('keydown', onKey)\n document.body.style.overflow = 'hidden'\n } else {\n window.removeEventListener('keydown', onKey)\n document.body.style.overflow = ''\n }\n revokeVideo()\n videoError.value = ''\n videoLoading.value = false\n if (media?.kind === 'video') void loadVideo(media)\n})\n\nonBeforeUnmount(() => {\n if (typeof window !== 'undefined') {\n window.removeEventListener('keydown', onKey)\n document.body.style.overflow = ''\n }\n revokeVideo()\n})\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div v-if=\"current\" class=\"lightbox\">\n <button\n type=\"button\"\n class=\"lightbox__close\"\n title=\"关闭 (Esc)\"\n aria-label=\"关闭\"\n @click=\"close\"\n >\n <Icon name=\"close\" :size=\"22\" :stroke-width=\"2.2\" />\n </button>\n\n <template v-if=\"isVideo\">\n <p v-if=\"videoLoading\" class=\"lightbox__msg\">加载视频中…</p>\n <p v-else-if=\"videoError\" class=\"lightbox__msg\">视频加载失败：{{ videoError }}</p>\n <video\n v-else-if=\"videoUrl\"\n class=\"lightbox__video\"\n :src=\"videoUrl\"\n controls\n autoplay\n playsinline\n />\n </template>\n\n <ZoomImage\n v-else\n ref=\"zoomImg\"\n class=\"lightbox__zoom\"\n :src=\"current.src\"\n :alt=\"current.alt \|\| ''\"\n :long=\"current.long\"\n @empty-click=\"close\"\n />\n </div>\n </Teleport>\n</template>\n\n<style scoped>\n.lightbox {\n position: fixed;\n inset: 0;\n z-index: 2000;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.82);\n animation: lightbox-in 0.12s ease-out;\n}\n@keyframes lightbox-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n/ The zoom/pan stage fills the overlay; its transparent background lets the dark backdrop show through. */\n.lightbox__zoom {\n position: absolute;\n inset: 0;\n}\n.lightbox__video {\n max-width: 94vw;\n max-height: 94vh;\n border-radius: 6px;\n background: #000;\n box-shadow: 0 16px 56px rgba(0, 0, 0, 0.55);\n}\n.lightbox__msg {\n color: #fff;\n font-size: 14px;\n}\n.lightbox__close {\n position: fixed;\n top: 16px;\n right: 16px;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border: none;\n border-radius: 10px;\n background: rgba(255, 255, 255, 0.12);\n color: #fff;\n cursor: pointer;\n transition: background 0.15s ease;\n}\n.lightbox__close:hover {\n background: rgba(255, 255, 255, 0.24);\n}\n</style>\n"],"mappings":"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"}
1	+ {"version":3,"file":"ImageLightbox.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/ImageLightbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, shallowRef, useTemplateRef, watch } from 'vue'\nimport { useLightbox } from '@/composables/useLightbox'\nimport { fileExt } from '@/lib/fileType'\nimport Icon from '@/components/icons/Icon.vue'\nimport LightboxGalleryStrip from '@/components/LightboxGalleryStrip.vue'\nimport ZoomImage from '@/components/ZoomImage.vue'\n\n/*\n Full-screen media lightbox (the \"弹框预览\"). A single instance is mounted in App.vue and driven by the\n * `useLightbox` singleton — any thumbnail / file chip opens it. Teleported to <body> so it overlays everything\n * regardless of the message tree's stacking contexts. Close via the X button, the empty backdrop, or Esc.\n \n Images render in the shared {@link ZoomImage} stage (wheel-zoom, drag-pan, dbl-click fit↔2×, toolbar, and\n * long-image fill-width). +/-/0 keys drive it via the exposed methods; a no-drag click on empty area closes.\n * Videos are FETCHED and played from a blob URL: the download endpoint serves `octet-stream` + `nosniff`, so a\n * direct `<video src>` can't determine a codec — but a blob tagged with the right MIME does (no backend change;\n * the same trick ZipBrowser uses).\n /\nconst { current, gallery, currentIndex, hasPrevious, hasNext, close, previous, next, select } =\n useLightbox()\n\n// Extension → a concrete video MIME so the blob decodes (the upstream bytes arrive as octet-stream).\nconst VIDEO_MIME: Record<string, string> = {\n mp4: 'video/mp4',\n m4v: 'video/mp4',\n webm: 'video/webm',\n ogv: 'video/ogg',\n mov: 'video/quicktime',\n mkv: 'video/x-matroska',\n avi: 'video/x-msvideo',\n}\n\nconst isVideo = computed(() => current.value?.kind === 'video')\nconst hasGallery = computed(() => !isVideo.value && gallery.value.length > 1)\nconst zoomImg = useTemplateRef<InstanceType<typeof ZoomImage>>('zoomImg')\n\nconst videoUrl = shallowRef('')\nconst videoLoading = shallowRef(false)\nconst videoError = shallowRef('')\n\nfunction onKey(e: KeyboardEvent): void {\n if (e.key === 'Escape') {\n close()\n } else if (!isVideo.value) {\n if (e.key === 'ArrowLeft') previous()\n else if (e.key === 'ArrowRight') next()\n else if (e.key === '+' \|\| e.key === '=') zoomImg.value?.zoomIn()\n else if (e.key === '-' \|\| e.key === '_') zoomImg.value?.zoomOut()\n else if (e.key === '0') zoomImg.value?.fit()\n }\n}\n\nfunction revokeVideo(): void {\n if (videoUrl.value) {\n URL.revokeObjectURL(videoUrl.value)\n videoUrl.value = ''\n }\n}\n\n// Fetch a video's bytes and wrap them in a typed blob the <video> element can actually decode.\nasync function loadVideo(media: NonNullable<typeof current.value>): Promise<void> {\n videoLoading.value = true\n videoError.value = ''\n try {\n const res = await fetch(media.src)\n if (!res.ok) throw new Error(`HTTP ${res.status}`)\n const raw = await res.blob()\n // Don't trust raw.type — the endpoint always serves octet-stream; derive from the filename extension.\n const type = VIDEO_MIME[fileExt(media.alt \|\| '')] \|\| 'video/mp4'\n const url = URL.createObjectURL(new Blob([raw], { type }))\n // Guard against the lightbox having closed / switched media while the fetch was in flight.\n if (current.value === media) videoUrl.value = url\n else URL.revokeObjectURL(url)\n } catch (e) {\n if (current.value === media) videoError.value = e instanceof Error ? e.message : String(e)\n } finally {\n if (current.value === media) videoLoading.value = false\n }\n}\n\n// Add the Esc listener and lock body scroll only while open; reset video state on every change and (re)load\n// when the new media is a video. Guarded for SSR.\nwatch(current, (media) => {\n if (typeof window === 'undefined') return\n if (media) {\n window.addEventListener('keydown', onKey)\n document.body.style.overflow = 'hidden'\n } else {\n window.removeEventListener('keydown', onKey)\n document.body.style.overflow = ''\n }\n revokeVideo()\n videoError.value = ''\n videoLoading.value = false\n if (media?.kind === 'video') void loadVideo(media)\n})\n\nonBeforeUnmount(() => {\n if (typeof window !== 'undefined') {\n window.removeEventListener('keydown', onKey)\n document.body.style.overflow = ''\n }\n revokeVideo()\n})\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div v-if=\"current\" class=\"lightbox\">\n <button\n type=\"button\"\n class=\"lightbox__close\"\n title=\"关闭 (Esc)\"\n aria-label=\"关闭\"\n @click=\"close\"\n >\n <Icon name=\"close\" :size=\"22\" :stroke-width=\"2.2\" />\n </button>\n\n <div v-if=\"hasGallery\" class=\"lightbox__meta\" aria-live=\"polite\">\n <span class=\"lightbox__name\">{{ current.alt \|\| '图片' }}</span>\n <span class=\"lightbox__count\">{{ currentIndex + 1 }} / {{ gallery.length }}</span>\n </div>\n\n <button\n v-if=\"hasPrevious\"\n type=\"button\"\n class=\"lightbox__nav lightbox__nav--prev\"\n title=\"上一张 (←)\"\n aria-label=\"上一张图片\"\n @click=\"previous\"\n >\n <Icon name=\"chevronLeft\" :size=\"24\" :stroke-width=\"2.2\" />\n </button>\n <button\n v-if=\"hasNext\"\n type=\"button\"\n class=\"lightbox__nav lightbox__nav--next\"\n title=\"下一张 (→)\"\n aria-label=\"下一张图片\"\n @click=\"next\"\n >\n <Icon name=\"chevronRight\" :size=\"24\" :stroke-width=\"2.2\" />\n </button>\n\n <template v-if=\"isVideo\">\n <p v-if=\"videoLoading\" class=\"lightbox__msg\">加载视频中…</p>\n <p v-else-if=\"videoError\" class=\"lightbox__msg\">视频加载失败：{{ videoError }}</p>\n <video\n v-else-if=\"videoUrl\"\n class=\"lightbox__video\"\n :src=\"videoUrl\"\n controls\n autoplay\n playsinline\n />\n </template>\n\n <ZoomImage\n v-else\n :key=\"current.src\"\n ref=\"zoomImg\"\n class=\"lightbox__zoom\"\n :src=\"current.src\"\n :alt=\"current.alt \|\| ''\"\n :long=\"current.long\"\n :toolbar-bottom=\"hasGallery ? 108 : 14\"\n @empty-click=\"close\"\n />\n\n <LightboxGalleryStrip\n v-if=\"hasGallery\"\n class=\"lightbox__gallery\"\n :items=\"gallery\"\n :current-index=\"currentIndex\"\n @select=\"select\"\n />\n </div>\n </Teleport>\n</template>\n\n<style scoped>\n.lightbox {\n position: fixed;\n inset: 0;\n z-index: 2000;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(4, 5, 9, 0.86);\n backdrop-filter: blur(3px);\n animation: lightbox-in 0.12s ease-out;\n}\n@keyframes lightbox-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n/ The zoom/pan stage fills the overlay; its transparent background lets the dark backdrop show through. */\n.lightbox__zoom {\n position: absolute;\n inset: 0;\n}\n.lightbox__meta {\n position: fixed;\n top: 16px;\n left: 50%;\n z-index: 2;\n display: flex;\n align-items: center;\n gap: 9px;\n max-width: min(560px, calc(100vw - 160px));\n min-height: 38px;\n padding: 7px 13px;\n border: 1px solid rgba(255, 255, 255, 0.14);\n border-radius: 12px;\n background: rgba(24, 25, 30, 0.52);\n color: #fff;\n box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);\n backdrop-filter: blur(16px) saturate(1.2);\n transform: translateX(-50%);\n}\n.lightbox__name {\n overflow: hidden;\n font-size: 13px;\n font-weight: 500;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.lightbox__count {\n flex: 0 0 auto;\n color: rgba(255, 255, 255, 0.62);\n font-size: 11.5px;\n font-variant-numeric: tabular-nums;\n}\n.lightbox__nav {\n position: fixed;\n top: 50%;\n z-index: 2;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 64px;\n border: none;\n background: transparent;\n color: rgba(255, 255, 255, 0.78);\n filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.72));\n opacity: 0.82;\n cursor: pointer;\n transform: translateY(-50%);\n transition:\n color 0.16s ease,\n filter 0.16s ease,\n opacity 0.16s ease,\n transform 0.16s ease;\n}\n.lightbox__nav:hover {\n background: transparent;\n color: #fff;\n filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.82));\n opacity: 1;\n transform: translateY(-50%) scale(1.12);\n}\n.lightbox__nav:focus-visible {\n outline: 2px solid #fff;\n outline-offset: 3px;\n}\n.lightbox__nav--prev {\n left: 18px;\n}\n.lightbox__nav--next {\n right: 18px;\n}\n.lightbox__gallery {\n position: fixed;\n bottom: 16px;\n left: 50%;\n z-index: 2;\n transform: translateX(-50%);\n}\n.lightbox__video {\n max-width: 94vw;\n max-height: 94vh;\n border-radius: 6px;\n background: #000;\n box-shadow: 0 16px 56px rgba(0, 0, 0, 0.55);\n}\n.lightbox__msg {\n color: #fff;\n font-size: 14px;\n}\n.lightbox__close {\n position: fixed;\n top: 16px;\n right: 16px;\n z-index: 3;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border: none;\n border-radius: 50%;\n background: transparent;\n color: rgba(255, 255, 255, 0.82);\n filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.68));\n cursor: pointer;\n transition:\n background 0.15s ease,\n color 0.15s ease,\n transform 0.15s ease;\n}\n.lightbox__close:hover {\n background: rgba(255, 255, 255, 0.18);\n color: #fff;\n transform: scale(1.06);\n}\n.lightbox__close:focus-visible {\n outline: 2px solid #fff;\n outline-offset: 3px;\n}\n\n@media (max-width: 640px) {\n .lightbox__meta {\n top: 12px;\n left: 12px;\n max-width: calc(100vw - 76px);\n transform: none;\n }\n .lightbox__close {\n top: 12px;\n right: 12px;\n }\n .lightbox__nav {\n width: 40px;\n height: 54px;\n border-radius: 13px;\n }\n .lightbox__nav--prev {\n left: 8px;\n }\n .lightbox__nav--next {\n right: 8px;\n }\n .lightbox__gallery {\n bottom: 12px;\n }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/LightboxGalleryStrip.js ADDED Viewed

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

package/dist/components/LightboxGalleryStrip.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"LightboxGalleryStrip.js","names":[],"sources":["../../src/components/LightboxGalleryStrip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { LightboxImage } from '@/composables/useLightbox'\nimport Icon from '@/components/icons/Icon.vue'\n\nconst props = defineProps<{\n items: readonly LightboxImage[]\n currentIndex: number\n}>()\n\nconst emit = defineEmits<{\n select: [index: number]\n}>()\n\ninterface VisibleItem {\n image: LightboxImage\n index: number\n}\n\n// Keep the dock compact even for image-heavy conversations: show the current image and its nearest neighbours.\nconst MAX_VISIBLE = 7\nconst visibleItems = computed<VisibleItem[]>(() => {\n const count = props.items.length\n const maxStart = Math.max(0, count - MAX_VISIBLE)\n const preferredStart = props.currentIndex - Math.floor(MAX_VISIBLE / 2)\n const start = Math.min(maxStart, Math.max(0, preferredStart))\n return props.items\n .slice(start, start + MAX_VISIBLE)\n .map((image, offset) => ({ image, index: start + offset }))\n})\n\nfunction hideBrokenImage(event: Event): void {\n const image = event.currentTarget as HTMLImageElement\n image.hidden = true\n}\n</script>\n\n<template>\n <nav class=\"gallery-strip\" aria-label=\"会话图片画廊\">\n <button\n v-for=\"item in visibleItems\"\n :key=\"item.image.id || item.image.src\"\n type=\"button\"\n class=\"gallery-strip__item\"\n :class=\"{ 'gallery-strip__item--active': item.index === currentIndex }\"\n :aria-label=\"`查看第 ${item.index + 1} 张图片：${item.image.alt || '图片'}`\"\n :aria-current=\"item.index === currentIndex ? 'true' : undefined\"\n :title=\"item.image.alt || `第 ${item.index + 1} 张图片`\"\n @click=\"emit('select', item.index)\"\n >\n <span\n class=\"gallery-strip__media\"\n :style=\"item.image.color ? { backgroundColor: item.image.color } : undefined\"\n >\n <Icon class=\"gallery-strip__fallback\" name=\"image\" :size=\"18\" />\n <img\n class=\"gallery-strip__img\"\n :src=\"item.image.thumbSrc || item.image.src\"\n :alt=\"item.image.alt || ''\"\n loading=\"eager\"\n draggable=\"false\"\n @error=\"hideBrokenImage\"\n @dragstart.prevent\n />\n </span>\n </button>\n </nav>\n</template>\n\n<style scoped>\n.gallery-strip {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n max-width: min(720px, calc(100vw - 112px));\n padding: 8px 10px;\n overflow-x: auto;\n scrollbar-width: none;\n border: 1px solid rgba(255, 255, 255, 0.16);\n border-radius: 18px;\n background: rgba(24, 25, 30, 0.58);\n box-shadow:\n 0 16px 44px rgba(0, 0, 0, 0.38),\n inset 0 1px 0 rgba(255, 255, 255, 0.08);\n backdrop-filter: blur(18px) saturate(1.25);\n}\n.gallery-strip::-webkit-scrollbar {\n display: none;\n}\n.gallery-strip__item {\n flex: 0 0 auto;\n width: 58px;\n height: 58px;\n padding: 3px;\n border: 1px solid transparent;\n border-radius: 13px;\n background: rgba(255, 255, 255, 0.06);\n opacity: 0.68;\n cursor: pointer;\n transform: scale(0.94);\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease,\n background 0.18s ease,\n box-shadow 0.18s ease;\n}\n.gallery-strip__item:hover {\n opacity: 0.94;\n transform: scale(1);\n background: rgba(255, 255, 255, 0.12);\n}\n.gallery-strip__item--active {\n border-color: rgba(255, 255, 255, 0.9);\n background: rgba(255, 255, 255, 0.18);\n box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);\n opacity: 1;\n transform: scale(1.06);\n}\n.gallery-strip__item:focus-visible {\n outline: 2px solid #fff;\n outline-offset: 2px;\n}\n.gallery-strip__media {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: 9px;\n background: rgba(255, 255, 255, 0.08);\n color: rgba(255, 255, 255, 0.5);\n}\n.gallery-strip__fallback {\n position: absolute;\n}\n.gallery-strip__img {\n position: relative;\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n user-select: none;\n -webkit-user-drag: none;\n}\n\n@media (max-width: 640px) {\n .gallery-strip {\n gap: 5px;\n max-width: calc(100vw - 28px);\n padding: 7px 8px;\n border-radius: 16px;\n }\n .gallery-strip__item {\n width: 50px;\n height: 50px;\n border-radius: 11px;\n }\n}\n</style>\n"],"mappings":""}

package/dist/components/LightboxGalleryStrip.vue.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type { LightboxImage } from '@/composables/useLightbox';
+type __VLS_Props = {
+    items: readonly LightboxImage[];
+    currentIndex: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((index: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/LightboxGalleryStrip.vue_vue_type_script_setup_true_lang.js ADDED Viewed

@@ -0,0 +1,60 @@
+import e from "./icons/Icon.js";
+import { Fragment as t, computed as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderList as u, withModifiers as d } from "vue";
+//#region src/components/LightboxGalleryStrip.vue?vue&type=script&setup=true&lang.ts
+var f = {
+	class: "gallery-strip",
+	"aria-label": "会话图片画廊"
+}, p = [
+	"aria-label",
+	"aria-current",
+	"title",
+	"onClick"
+], m = ["src", "alt"], h = 7, g = /*@__PURE__*/ o({
+	__name: "LightboxGalleryStrip",
+	props: {
+		items: {},
+		currentIndex: {}
+	},
+	emits: ["select"],
+	setup(o, { emit: g }) {
+		let _ = o, v = g, y = n(() => {
+			let e = _.items.length, t = Math.max(0, e - h), n = _.currentIndex - Math.floor(h / 2), r = Math.min(t, Math.max(0, n));
+			return _.items.slice(r, r + h).map((e, t) => ({
+				image: e,
+				index: r + t
+			}));
+		});
+		function b(e) {
+			let t = e.currentTarget;
+			t.hidden = !0;
+		}
+		return (n, h) => (l(), r("nav", f, [(l(!0), r(t, null, u(y.value, (t) => (l(), r("button", {
+			key: t.image.id || t.image.src,
+			type: "button",
+			class: s(["gallery-strip__item", { "gallery-strip__item--active": t.index === o.currentIndex }]),
+			"aria-label": `查看第 ${t.index + 1} 张图片：${t.image.alt || "图片"}`,
+			"aria-current": t.index === o.currentIndex ? "true" : void 0,
+			title: t.image.alt || `第 ${t.index + 1} 张图片`,
+			onClick: (e) => v("select", t.index)
+		}, [i("span", {
+			class: "gallery-strip__media",
+			style: c(t.image.color ? { backgroundColor: t.image.color } : void 0)
+		}, [a(e, {
+			class: "gallery-strip__fallback",
+			name: "image",
+			size: 18
+		}), i("img", {
+			class: "gallery-strip__img",
+			src: t.image.thumbSrc || t.image.src,
+			alt: t.image.alt || "",
+			loading: "eager",
+			draggable: "false",
+			onError: b,
+			onDragstart: h[0] ||= d(() => {}, ["prevent"])
+		}, null, 40, m)], 4)], 10, p))), 128))]));
+	}
+});
+//#endregion
+export { g as default };
+//# sourceMappingURL=LightboxGalleryStrip.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/LightboxGalleryStrip.vue_vue_type_script_setup_true_lang.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"LightboxGalleryStrip.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/LightboxGalleryStrip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { LightboxImage } from '@/composables/useLightbox'\nimport Icon from '@/components/icons/Icon.vue'\n\nconst props = defineProps<{\n items: readonly LightboxImage[]\n currentIndex: number\n}>()\n\nconst emit = defineEmits<{\n select: [index: number]\n}>()\n\ninterface VisibleItem {\n image: LightboxImage\n index: number\n}\n\n// Keep the dock compact even for image-heavy conversations: show the current image and its nearest neighbours.\nconst MAX_VISIBLE = 7\nconst visibleItems = computed<VisibleItem[]>(() => {\n const count = props.items.length\n const maxStart = Math.max(0, count - MAX_VISIBLE)\n const preferredStart = props.currentIndex - Math.floor(MAX_VISIBLE / 2)\n const start = Math.min(maxStart, Math.max(0, preferredStart))\n return props.items\n .slice(start, start + MAX_VISIBLE)\n .map((image, offset) => ({ image, index: start + offset }))\n})\n\nfunction hideBrokenImage(event: Event): void {\n const image = event.currentTarget as HTMLImageElement\n image.hidden = true\n}\n</script>\n\n<template>\n <nav class=\"gallery-strip\" aria-label=\"会话图片画廊\">\n <button\n v-for=\"item in visibleItems\"\n :key=\"item.image.id || item.image.src\"\n type=\"button\"\n class=\"gallery-strip__item\"\n :class=\"{ 'gallery-strip__item--active': item.index === currentIndex }\"\n :aria-label=\"`查看第 ${item.index + 1} 张图片：${item.image.alt || '图片'}`\"\n :aria-current=\"item.index === currentIndex ? 'true' : undefined\"\n :title=\"item.image.alt || `第 ${item.index + 1} 张图片`\"\n @click=\"emit('select', item.index)\"\n >\n <span\n class=\"gallery-strip__media\"\n :style=\"item.image.color ? { backgroundColor: item.image.color } : undefined\"\n >\n <Icon class=\"gallery-strip__fallback\" name=\"image\" :size=\"18\" />\n <img\n class=\"gallery-strip__img\"\n :src=\"item.image.thumbSrc || item.image.src\"\n :alt=\"item.image.alt || ''\"\n loading=\"eager\"\n draggable=\"false\"\n @error=\"hideBrokenImage\"\n @dragstart.prevent\n />\n </span>\n </button>\n </nav>\n</template>\n\n<style scoped>\n.gallery-strip {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n max-width: min(720px, calc(100vw - 112px));\n padding: 8px 10px;\n overflow-x: auto;\n scrollbar-width: none;\n border: 1px solid rgba(255, 255, 255, 0.16);\n border-radius: 18px;\n background: rgba(24, 25, 30, 0.58);\n box-shadow:\n 0 16px 44px rgba(0, 0, 0, 0.38),\n inset 0 1px 0 rgba(255, 255, 255, 0.08);\n backdrop-filter: blur(18px) saturate(1.25);\n}\n.gallery-strip::-webkit-scrollbar {\n display: none;\n}\n.gallery-strip__item {\n flex: 0 0 auto;\n width: 58px;\n height: 58px;\n padding: 3px;\n border: 1px solid transparent;\n border-radius: 13px;\n background: rgba(255, 255, 255, 0.06);\n opacity: 0.68;\n cursor: pointer;\n transform: scale(0.94);\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease,\n background 0.18s ease,\n box-shadow 0.18s ease;\n}\n.gallery-strip__item:hover {\n opacity: 0.94;\n transform: scale(1);\n background: rgba(255, 255, 255, 0.12);\n}\n.gallery-strip__item--active {\n border-color: rgba(255, 255, 255, 0.9);\n background: rgba(255, 255, 255, 0.18);\n box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);\n opacity: 1;\n transform: scale(1.06);\n}\n.gallery-strip__item:focus-visible {\n outline: 2px solid #fff;\n outline-offset: 2px;\n}\n.gallery-strip__media {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: 9px;\n background: rgba(255, 255, 255, 0.08);\n color: rgba(255, 255, 255, 0.5);\n}\n.gallery-strip__fallback {\n position: absolute;\n}\n.gallery-strip__img {\n position: relative;\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n user-select: none;\n -webkit-user-drag: none;\n}\n\n@media (max-width: 640px) {\n .gallery-strip {\n gap: 5px;\n max-width: calc(100vw - 28px);\n padding: 7px 8px;\n border-radius: 16px;\n }\n .gallery-strip__item {\n width: 50px;\n height: 50px;\n border-radius: 11px;\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;uBAoBM,IAAc;;;;;;;;EAfpB,IAAM,IAAQ,GAKR,IAAO,GAWP,IAAe,QAA8B;GACjD,IAAM,IAAQ,EAAM,MAAM,QACpB,IAAW,KAAK,IAAI,GAAG,IAAQ,CAAW,GAC1C,IAAiB,EAAM,eAAe,KAAK,MAAM,IAAc,CAAC,GAChE,IAAQ,KAAK,IAAI,GAAU,KAAK,IAAI,GAAG,CAAc,CAAC;GAC5D,OAAO,EAAM,MACV,MAAM,GAAO,IAAQ,CAAW,CAAA,CAChC,KAAK,GAAO,OAAY;IAAE;IAAO,OAAO,IAAQ;GAAO,EAAE;EAC9D,CAAC;EAED,SAAS,EAAgB,GAAoB;GAC3C,IAAM,IAAQ,EAAM;GACpB,EAAM,SAAS;EACjB;yBAIE,EA4BM,OA5BN,GA4BM,EAAA,EAAA,EAAA,GA3BJ,EA0BS,GAAA,MAAA,EAzBQ,EAAA,QAAR,YADT,EA0BS,UAAA;GAxBN,KAAK,EAAK,MAAM,MAAM,EAAK,MAAM;GAClC,MAAK;GACL,OAAK,EAAA,CAAC,uBAAqB,EAAA,+BACc,EAAK,UAAU,EAAA,aAAY,CAAA,CAAA;GACnE,cAAU,OAAS,EAAK,QAAK,EAAA,OAAY,EAAK,MAAM,OAAG;GACvD,gBAAc,EAAK,UAAU,EAAA,eAAY,SAAY,KAAA;GACrD,OAAO,EAAK,MAAM,OAAG,KAAS,EAAK,QAAK,EAAA;GACxC,UAAK,MAAE,EAAI,UAAW,EAAK,KAAK;MAEjC,EAcO,QAAA;GAbL,OAAM;GACL,OAAK,EAAE,EAAK,MAAM,QAAK,EAAA,iBAAsB,EAAK,MAAM,MAAK,IAAK,KAAA,CAAS;MAE5E,EAAgE,GAAA;GAA1D,OAAM;GAA0B,MAAK;GAAS,MAAM;MAC1D,EAQE,OAAA;GAPA,OAAM;GACL,KAAK,EAAK,MAAM,YAAY,EAAK,MAAM;GACvC,KAAK,EAAK,MAAM,OAAG;GACpB,SAAQ;GACR,WAAU;GACT,SAAO;GACP,aAAS,AAAA,EAAA,OAAA,QAAV,CAAA,GAAkB,CAAA,SAAA,CAAA"}

package/dist/components/SevenZipBrowser.js CHANGED Viewed

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

package/dist/components/SevenZipBrowser.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SevenZipBrowser.js","names":[],"sources":["../../src/components/SevenZipBrowser.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n computed,\n defineAsyncComponent,\n nextTick,\n onBeforeUnmount,\n onMounted,\n reactive,\n ref,\n watch,\n} from 'vue'\nimport {\n extractSevenZipEntry,\n readSevenZip,\n SevenZipEncryptedError,\n SevenZipPasswordError,\n type SevenZipArchive,\n type SevenZipEntry,\n} from '@/lib/sevenZip'\nimport type { DicomSlice } from '@/lib/dicom'\nimport type { ViewerFile } from '@/composables/useFileViewer'\nimport { fileExt, isDicomFile, isTextFile } from '@/lib/fileType'\nimport { canToggleView, classifyViewerFile, mediaMimeForName } from '@/lib/viewerKind'\nimport { formatBytes } from '@/lib/format'\nimport Icon from '@/components/icons/Icon.vue'\n\n// A folder of sibling .dcm files browses as one scrollable series — handled directly (the body has no slice model).\nconst DicomViewer = defineAsyncComponent(() => import('@/components/DicomViewer.vue'))\n// The shared side-viewer body renders a selected entry with the SAME viewers as a top-level file. Lazy to break\n// the module cycle (the body lazy-imports this browser back, for nested archives).\nconst FileViewerBody = defineAsyncComponent(() => import('@/components/FileViewerBody.vue'))\n\n/*\n The side viewer's 7z mode — the LZMA counterpart to {@link ZipBrowser}. Fetches an archive's bytes, parses +\n * decompresses them entirely in-browser (see lib/sevenZip.ts, which carries its own LZMA decoder since browsers\n * ship none), and browses the contents. Selecting an entry extracts just that one, wraps it in a blob URL, and\n * hands it to {@link FileViewerBody} (so a file inside the 7z previews with every viewer a top-level file gets).\n /\nconst props = defineProps<{ url: string; name: string }>()\n\ntype Status = 'loading' \| 'ready' \| 'error'\nconst status = ref<Status>('loading')\nconst errorMsg = ref('')\nlet buffer: ArrayBuffer \| null = null\nlet archive: SevenZipArchive \| null = null\nconst entries = ref<SevenZipEntry[]>([])\n\n// Password state for AES-encrypted 7z. `locked` = the archive header itself is encrypted (encrypted file\n// names), so it can't even be listed until unlocked; `contentEncrypted` = the listing worked but file bytes\n// need a password; `unlocked` = a password has been accepted.\nconst password = ref('')\nconst pwError = ref('')\nconst locked = ref(false)\nconst unlocked = ref(false)\nconst contentEncrypted = ref(false)\n\ninterface TreeNode {\n name: string\n path: string\n isDir: boolean\n size: number\n entry?: SevenZipEntry\n children: TreeNode[]\n}\nconst root = ref<TreeNode>({ name: '', path: '', isDir: true, size: 0, children: [] })\nconst expanded = reactive(new Set<string>())\n\nconst fileCount = computed(() => entries.value.reduce((n, e) => n + (e.isDir ? 0 : 1), 0))\nconst totalSize = computed(() => entries.value.reduce((s, e) => s + (e.isDir ? 0 : e.size), 0))\n\n// Build a folder tree from the flat entry paths (directories may be implicit — derive them either way).\nfunction buildTree(list: SevenZipEntry[]): TreeNode {\n const rootNode: TreeNode = { name: '', path: '', isDir: true, size: 0, children: [] }\n const dirs = new Map<string, TreeNode>([['', rootNode]])\n const ensureDir = (segs: string[]): TreeNode => {\n let cur = rootNode\n let acc = ''\n for (const seg of segs) {\n acc = acc ? `${acc}/${seg}` : seg\n let node = dirs.get(acc)\n if (!node) {\n node = { name: seg, path: acc, isDir: true, size: 0, children: [] }\n dirs.set(acc, node)\n cur.children.push(node)\n }\n cur = node\n }\n return cur\n }\n for (const e of list) {\n const segs = e.path.split('/').filter(Boolean)\n if (e.isDir) {\n ensureDir(segs)\n continue\n }\n const fname = segs.pop()\n if (!fname) continue\n ensureDir(segs).children.push({\n name: fname,\n path: e.path,\n isDir: false,\n size: e.size,\n entry: e,\n children: [],\n })\n }\n sortNode(rootNode)\n return rootNode\n}\n// Folders first, then files, each alphabetical (case-insensitive).\nfunction sortNode(n: TreeNode): void {\n n.children.sort((a, b) => (a.isDir === b.isDir ? a.name.localeCompare(b.name) : a.isDir ? -1 : 1))\n for (const c of n.children) if (c.isDir) sortNode(c)\n}\n\n// Flatten the tree to the rows currently visible (respecting which folders are expanded).\ninterface Row {\n node: TreeNode\n depth: number\n}\nconst rows = computed<Row[]>(() => {\n const out: Row[] = []\n const walk = (nodes: TreeNode[], depth: number): void => {\n for (const n of nodes) {\n out.push({ node: n, depth })\n if (n.isDir && expanded.has(n.path)) walk(n.children, depth + 1)\n }\n }\n walk(root.value.children, 0)\n return out\n})\n\nasync function load(): Promise<void> {\n status.value = 'loading'\n errorMsg.value = ''\n selected.value = null\n password.value = ''\n pwError.value = ''\n locked.value = false\n unlocked.value = false\n contentEncrypted.value = false\n revokeBlob()\n stackSlices.value = []\n try {\n const res = await fetch(props.url)\n if (!res.ok) throw new Error(`HTTP ${res.status}`)\n buffer = await res.arrayBuffer()\n try {\n archive = readSevenZip(buffer)\n } catch (e) {\n if (e instanceof SevenZipEncryptedError) {\n // Encrypted file names: nothing can be listed until the password unlocks the header.\n locked.value = true\n status.value = 'ready'\n return\n }\n throw e\n }\n entries.value = archive.entries\n root.value = buildTree(archive.entries)\n expanded.clear()\n contentEncrypted.value = archive.entries.some((e) => e.encrypted)\n status.value = 'ready'\n } catch (e) {\n errorMsg.value = e instanceof Error ? e.message : String(e)\n status.value = 'error'\n }\n}\n\nfunction pwMessage(e: unknown): string {\n if (e instanceof SevenZipPasswordError) return '密码错误'\n if (e instanceof SevenZipEncryptedError) return '需要密码'\n return e instanceof Error ? e.message : String(e)\n}\n\n// Unlock an encrypted archive. An encrypted header re-lists with the password (the KDF runs here, ~100ms);\n// content-only encryption verifies the password by decoding the first encrypted entry's folder.\nasync function submitPassword(): Promise<void> {\n if (!buffer \|\| !password.value) return\n pwError.value = ''\n if (locked.value) {\n status.value = 'loading'\n await nextTick() // let the spinner paint before the synchronous key derivation blocks\n try {\n archive = readSevenZip(buffer, password.value)\n entries.value = archive.entries\n root.value = buildTree(archive.entries)\n expanded.clear()\n contentEncrypted.value = archive.entries.some((e) => e.encrypted)\n locked.value = false\n unlocked.value = true\n } catch (e) {\n pwError.value = pwMessage(e)\n } finally {\n status.value = 'ready'\n }\n return\n }\n try {\n const target = entries.value.find((e) => !e.isDir && e.encrypted)\n if (target && archive) extractSevenZipEntry(buffer, archive, target, password.value)\n unlocked.value = true\n } catch (e) {\n unlocked.value = false\n pwError.value = pwMessage(e)\n }\n}\n\n// ── selected entry (detail view) ──────────────────────────────────────────────────────────────\nconst selected = ref<SevenZipEntry \| null>(null)\nconst entryStatus = ref<Status>('ready')\nconst entryErr = ref('')\nconst entryText = ref('')\nconst entryFile = ref<ViewerFile \| null>(null)\nconst entryStack = ref(false)\nconst entryMode = ref<'render' \| 'source'>('render')\nconst blobUrl = ref('')\n\n// DICOM series stack: a folder of .dcm slices browsed as one scrollable series (see ZipBrowser). 7z decode is\n// synchronous, but slice.load() stays async to match DicomSlice (the viewer awaits it either way).\nconst stackSlices = ref<DicomSlice[]>([])\nconst stackStart = ref(0)\nconst stackName = ref('')\nconst stackTotalSize = computed(() => stackSlices.value.reduce((s, sl) => s + (sl.size ?? 0), 0))\n\nconst canToggle = computed(() => canToggleView(entryFile.value, entryText.value))\n\nfunction revokeBlob(): void {\n if (blobUrl.value) {\n URL.revokeObjectURL(blobUrl.value)\n blobUrl.value = ''\n }\n}\n\nfunction dirOf(path: string): string {\n const i = path.lastIndexOf('/')\n return i < 0 ? '' : path.slice(0, i)\n}\n// Sibling .dcm files in the same folder, natural-sorted (numeric-aware) so e.g. img2 precedes img10.\nfunction dicomSiblings(e: SevenZipEntry): SevenZipEntry[] {\n const dir = dirOf(e.path)\n return entries.value\n .filter((x) => !x.isDir && isDicomFile(x.name) && dirOf(x.path) === dir)\n .sort((a, b) => a.path.localeCompare(b.path, undefined, { numeric: true, sensitivity: 'base' }))\n}\n\n// Treat as text if the name says so; for extensionless entries, sniff the first bytes for NULs.\nfunction looksText(bytes: Uint8Array, name: string): boolean {\n if (isTextFile(name)) return true\n if (fileExt(name)) return false\n const n = Math.min(bytes.length, 4096)\n for (let i = 0; i < n; i++) if (bytes[i] === 0) return false\n return true\n}\n\nfunction selectEntry(e: SevenZipEntry): void {\n selected.value = e\n entryStatus.value = 'loading'\n entryErr.value = ''\n entryText.value = ''\n entryFile.value = null\n entryStack.value = false\n entryMode.value = 'render'\n revokeBlob()\n stackSlices.value = []\n if (!buffer \|\| !archive) return\n try {\n if (isDicomFile(e.name)) {\n const siblings = dicomSiblings(e)\n if (siblings.length > 1) {\n const buf = buffer\n const arc = archive\n stackSlices.value = siblings.map((se) => ({\n name: se.name,\n size: se.size,\n load: async () => {\n const u = extractSevenZipEntry(buf, arc, se, password.value)\n const out = new ArrayBuffer(u.byteLength)\n new Uint8Array(out).set(u)\n return out\n },\n }))\n stackStart.value = Math.max(\n 0,\n siblings.findIndex((se) => se.path === e.path),\n )\n stackName.value = dirOf(e.path).split('/').pop() \|\| e.name\n entryStack.value = true\n entryStatus.value = 'ready'\n return\n }\n }\n const bytes = extractSevenZipEntry(buffer, archive, e, password.value)\n blobUrl.value = URL.createObjectURL(new Blob([bytes], { type: mediaMimeForName(e.name) }))\n entryFile.value = classifyViewerFile({\n name: e.name,\n url: blobUrl.value,\n size: e.size,\n textHint: looksText(bytes, e.name),\n })\n entryStatus.value = 'ready'\n } catch (err) {\n entryErr.value = pwMessage(err)\n entryStatus.value = 'error'\n }\n}\n\nfunction onRow(node: TreeNode): void {\n if (node.isDir) {\n if (expanded.has(node.path)) expanded.delete(node.path)\n else expanded.add(node.path)\n } else if (node.entry) {\n selectEntry(node.entry)\n }\n}\n\nfunction back(): void {\n selected.value = null\n entryText.value = ''\n entryFile.value = null\n entryStack.value = false\n revokeBlob()\n stackSlices.value = []\n}\n\n// Re-extract on demand (the decoded folder is cached in lib/sevenZip, so this stays cheap).\nfunction downloadEntry(e: SevenZipEntry): void {\n if (!buffer \|\| !archive) return\n try {\n const url = URL.createObjectURL(\n new Blob([extractSevenZipEntry(buffer, archive, e, password.value)]),\n )\n const a = document.createElement('a')\n a.href = url\n a.download = e.name\n document.body.appendChild(a)\n a.click()\n a.remove()\n setTimeout(() => URL.revokeObjectURL(url), 1000)\n } catch {\n / extraction failed — nothing to download /\n }\n}\n\nconst copied = ref(false)\nlet copyTimer: ReturnType<typeof setTimeout> \| undefined\nasync function copyEntry(): Promise<void> {\n try {\n await navigator.clipboard?.writeText(entryText.value)\n } catch {\n / clipboard unavailable — ignore /\n }\n copied.value = true\n clearTimeout(copyTimer)\n copyTimer = setTimeout(() => (copied.value = false), 1400)\n}\n\nonMounted(load)\nwatch(() => props.url, load)\nonBeforeUnmount(() => {\n revokeBlob()\n clearTimeout(copyTimer)\n})\n</script>\n\n<template>\n <div class=\"sz\">\n <p v-if=\"status === 'loading'\" class=\"sz__msg\">正在解压…</p>\n\n <div v-else-if=\"status === 'error'\" class=\"sz__msg sz__msg--error\">\n <p>{{ errorMsg }}</p>\n <button type=\"button\" class=\"sz__retry\" @click=\"load\">重试</button>\n </div>\n\n <!-- locked: the header (file names) is encrypted — must unlock before anything can be listed -->\n <div v-else-if=\"locked\" class=\"sz__locked\">\n <Icon name=\"key\" :size=\"26\" class=\"sz__lockicon\" />\n <p class=\"sz__lockmsg\">该 7z 已加密（含文件名），输入密码后查看</p>\n <div class=\"sz__lockform\">\n <input\n v-model=\"password\"\n type=\"password\"\n class=\"sz__pwinput\"\n placeholder=\"输入密码\"\n @keyup.enter=\"submitPassword\"\n />\n <button type=\"button\" class=\"sz__pwbtn\" @click=\"submitPassword\">解锁</button>\n </div>\n <p v-if=\"pwError\" class=\"sz__lockerr\">{{ pwError }}</p>\n </div>\n\n <!-- detail: one selected entry -->\n <template v-else-if=\"selected\">\n <div class=\"sz__bar\">\n <button type=\"button\" class=\"sz__back\" title=\"返回列表\" @click=\"back\">\n <Icon name=\"arrowLeft\" :size=\"16\" />\n </button>\n <span class=\"sz__path\" :title=\"selected.path\">{{ selected.path }}</span>\n <span class=\"sz__bsize\">{{ formatBytes(selected.size) }}</span>\n <div v-if=\"canToggle\" class=\"sz__view\" role=\"group\" aria-label=\"渲染或源码\">\n <button\n type=\"button\"\n class=\"sz__vbtn\"\n :class=\"{ 'sz__vbtn--on': entryMode === 'render' }\"\n title=\"渲染\"\n @click=\"entryMode = 'render'\"\n >\n <Icon name=\"eye\" :size=\"14\" />\n </button>\n <button\n type=\"button\"\n class=\"sz__vbtn\"\n :class=\"{ 'sz__vbtn--on': entryMode === 'source' }\"\n title=\"源码\"\n @click=\"entryMode = 'source'\"\n >\n <Icon name=\"code\" :size=\"14\" />\n </button>\n </div>\n <button\n v-if=\"entryText && entryStatus === 'ready'\"\n type=\"button\"\n class=\"sz__act\"\n :title=\"copied ? '已复制' : '复制'\"\n @click=\"copyEntry\"\n >\n <Icon name=\"copy\" :size=\"14\" />\n </button>\n <button type=\"button\" class=\"sz__act\" title=\"下载\" @click=\"downloadEntry(selected)\">\n <Icon name=\"download\" :size=\"15\" />\n </button>\n </div>\n\n <p v-if=\"entryStatus === 'loading'\" class=\"sz__msg\">读取中…</p>\n <div v-else-if=\"entryStatus === 'error'\" class=\"sz__msg sz__msg--error\">\n <p>{{ entryErr }}</p>\n </div>\n\n <!-- dicom series: a whole folder of .dcm slices browsed as one scrollable series (wheel/cine翻层) -->\n <DicomViewer\n v-else-if=\"entryStack\"\n :slices=\"stackSlices\"\n :start=\"stackStart\"\n :name=\"stackName\"\n :size=\"stackTotalSize\"\n />\n\n <!-- everything else: the shared body picks the right viewer from the extracted blob -->\n <FileViewerBody\n v-else-if=\"entryFile\"\n :file=\"entryFile\"\n :mode=\"entryMode\"\n @loaded=\"entryText = $event\"\n />\n </template>\n\n <!-- list: the file tree -->\n <template v-else>\n <div class=\"sz__summary\">{{ fileCount }} 个文件 · {{ formatBytes(totalSize) }}</div>\n\n <!-- password bar: shown when file bytes are encrypted (but the file names were readable) -->\n <div v-if=\"contentEncrypted\" class=\"sz__pw\" :class=\"{ 'sz__pw--ok': unlocked }\">\n <Icon name=\"key\" :size=\"14\" />\n <input\n v-model=\"password\"\n type=\"password\"\n class=\"sz__pwinput\"\n :placeholder=\"unlocked ? '已解锁（如需可重新输入）' : '此压缩包内容已加密，输入密码解锁'\"\n @keyup.enter=\"submitPassword\"\n />\n <button type=\"button\" class=\"sz__pwbtn\" @click=\"submitPassword\">\n {{ unlocked ? '已解锁' : '解锁' }}\n </button>\n <span v-if=\"pwError\" class=\"sz__pwerr\">{{ pwError }}</span>\n </div>\n\n <div class=\"sz__scroll sz__tree\">\n <p v-if=\"rows.length === 0\" class=\"sz__msg\">空压缩包</p>\n <button\n v-for=\"row in rows\"\n :key=\"row.node.path\"\n type=\"button\"\n class=\"sz__row\"\n :class=\"{ 'sz__row--dir': row.node.isDir }\"\n :style=\"{ paddingLeft: `${12 + row.depth 14}px` }\"\n @click=\"onRow(row.node)\"\n >\n <span class=\"sz__twisty\">\n <Icon\n v-if=\"row.node.isDir\"\n name=\"chevronRight\"\n :size=\"13\"\n :class=\"{ 'sz__twisty--open': expanded.has(row.node.path) }\"\n />\n </span>\n <span class=\"sz__rowicon\">\n <Icon :name=\"row.node.isDir ? 'folder' : 'fileOutline'\" :size=\"15\" />\n </span>\n <span class=\"sz__rowname\">{{ row.node.name }}</span>\n <Icon\n v-if=\"!row.node.isDir && row.node.entry?.encrypted\"\n name=\"key\"\n :size=\"12\"\n class=\"sz__rowlock\"\n />\n <span v-if=\"!row.node.isDir\" class=\"sz__rowsize\">{{ formatBytes(row.node.size) }}</span>\n </button>\n </div>\n </template>\n </div>\n</template>\n\n<style scoped>\n.sz {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n background: var(--surface);\n}\n\n.sz__msg {\n padding: 20px 16px;\n color: var(--muted);\n font-size: 13px;\n}\n.sz__msg--error {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n color: var(--danger);\n}\n.sz__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.sz__retry:hover {\n border-color: var(--accent);\n color: var(--accent);\n}\n\n/* List view ------------------------------------------------------------------------------------ /\n.sz__summary {\n flex-shrink: 0;\n padding: 9px 16px;\n border-bottom: 1px solid var(--border);\n font-size: 11.5px;\n letter-spacing: 0.02em;\n color: var(--faint);\n}\n.sz__scroll {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n}\n.sz__tree {\n padding: 6px 0;\n}\n.sz__row {\n display: flex;\n align-items: center;\n gap: 7px;\n width: 100%;\n padding: 5px 12px 5px 12px;\n background: transparent;\n border: none;\n font-family: inherit;\n font-size: 12.5px;\n color: var(--text);\n text-align: left;\n cursor: pointer;\n}\n.sz__row:hover {\n background: var(--surface-2);\n}\n.sz__twisty {\n flex-shrink: 0;\n display: inline-flex;\n width: 13px;\n color: var(--faint);\n}\n.sz__twisty--open {\n transform: rotate(90deg);\n transition: transform 0.12s;\n}\n.sz__rowicon {\n flex-shrink: 0;\n display: inline-flex;\n color: var(--faint);\n}\n.sz__row--dir .sz__rowicon {\n color: var(--accent);\n}\n.sz__rowname {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.sz__row--dir .sz__rowname {\n font-weight: 500;\n}\n.sz__rowsize {\n flex-shrink: 0;\n font-size: 11px;\n color: var(--faint);\n font-variant-numeric: tabular-nums;\n}\n\n/ Detail bar ----------------------------------------------------------------------------------- /\n.sz__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.sz__back,\n.sz__act {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 30px;\n height: 28px;\n background: transparent;\n border: none;\n border-radius: 7px;\n color: var(--muted);\n cursor: pointer;\n transition:\n background 0.15s,\n color 0.15s;\n}\n.sz__back:hover,\n.sz__act:hover {\n background: var(--surface-2);\n color: var(--accent);\n}\n.sz__path {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n direction: rtl;\n text-align: left;\n font-size: 12.5px;\n font-weight: 500;\n color: var(--text-strong);\n}\n.sz__bsize {\n flex-shrink: 0;\n font-size: 11px;\n color: var(--faint);\n font-variant-numeric: tabular-nums;\n}\n.sz__view {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n gap: 2px;\n padding: 2px;\n border-radius: 7px;\n background: var(--surface-2);\n}\n.sz__vbtn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 26px;\n height: 24px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: 5px;\n color: var(--faint);\n cursor: pointer;\n}\n.sz__vbtn--on {\n background: var(--surface);\n color: var(--accent);\n box-shadow: var(--shadow);\n}\n\n/ Password UI (encrypted 7z) --------------------------------------------------------------------- /\n.sz__locked {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 24px;\n text-align: center;\n}\n.sz__lockicon {\n color: var(--faint);\n}\n.sz__lockmsg {\n margin: 0;\n font-size: 13px;\n color: var(--muted);\n}\n.sz__lockform {\n display: flex;\n gap: 8px;\n width: 100%;\n max-width: 320px;\n}\n.sz__lockerr {\n margin: 0;\n font-size: 12px;\n color: var(--danger);\n}\n/ Inline password bar (content-encrypted, names readable) + shared input/button. */\n.sz__pw {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n padding: 8px 12px;\n border-bottom: 1px solid var(--border);\n background: var(--surface-2);\n color: var(--muted);\n}\n.sz__pw--ok {\n color: var(--accent);\n}\n.sz__pwinput {\n flex: 1 1 auto;\n min-width: 0;\n height: 28px;\n padding: 0 9px;\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: 7px;\n}\n.sz__pwinput:focus {\n outline: none;\n border-color: var(--accent);\n}\n.sz__pwbtn {\n flex-shrink: 0;\n height: 28px;\n padding: 0 12px;\n font-family: inherit;\n font-size: 12px;\n color: var(--text);\n background: var(--surface);\n border: 1px solid var(--border-2);\n border-radius: 7px;\n cursor: pointer;\n}\n.sz__pwbtn:hover {\n border-color: var(--accent);\n color: var(--accent);\n}\n.sz__pwerr {\n flex-shrink: 0;\n font-size: 11.5px;\n color: var(--danger);\n}\n.sz__rowlock {\n flex-shrink: 0;\n color: var(--faint);\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"SevenZipBrowser.js","names":[],"sources":["../../src/components/SevenZipBrowser.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n computed,\n defineAsyncComponent,\n nextTick,\n onBeforeUnmount,\n onMounted,\n reactive,\n ref,\n watch,\n} from 'vue'\nimport {\n extractSevenZipEntry,\n readSevenZip,\n SevenZipEncryptedError,\n SevenZipPasswordError,\n type SevenZipArchive,\n type SevenZipEntry,\n} from '@/lib/sevenZip'\nimport type { DicomSlice } from '@/lib/dicom'\nimport type { ViewerFile } from '@/composables/useFileViewer'\nimport { useArchiveImageGallery } from '@/composables/useArchiveImageGallery'\nimport { fileExt, isDicomFile, isTextFile } from '@/lib/fileType'\nimport { canToggleView, classifyViewerFile, mediaMimeForName } from '@/lib/viewerKind'\nimport { formatBytes } from '@/lib/format'\nimport Icon from '@/components/icons/Icon.vue'\n\n// A folder of sibling .dcm files browses as one scrollable series — handled directly (the body has no slice model).\nconst DicomViewer = defineAsyncComponent(() => import('@/components/DicomViewer.vue'))\n// The shared side-viewer body renders a selected entry with the SAME viewers as a top-level file. Lazy to break\n// the module cycle (the body lazy-imports this browser back, for nested archives).\nconst FileViewerBody = defineAsyncComponent(() => import('@/components/FileViewerBody.vue'))\n\n/*\n The side viewer's 7z mode — the LZMA counterpart to {@link ZipBrowser}. Fetches an archive's bytes, parses +\n * decompresses them entirely in-browser (see lib/sevenZip.ts, which carries its own LZMA decoder since browsers\n * ship none), and browses the contents. Selecting an entry extracts just that one, wraps it in a blob URL, and\n * hands it to {@link FileViewerBody} (so a file inside the 7z previews with every viewer a top-level file gets).\n /\nconst props = defineProps<{ url: string; name: string }>()\n\ntype Status = 'loading' \| 'ready' \| 'error'\nconst status = ref<Status>('loading')\nconst errorMsg = ref('')\nlet buffer: ArrayBuffer \| null = null\nlet archive: SevenZipArchive \| null = null\nconst entries = ref<SevenZipEntry[]>([])\n\n// Password state for AES-encrypted 7z. `locked` = the archive header itself is encrypted (encrypted file\n// names), so it can't even be listed until unlocked; `contentEncrypted` = the listing worked but file bytes\n// need a password; `unlocked` = a password has been accepted.\nconst password = ref('')\nconst pwError = ref('')\nconst locked = ref(false)\nconst unlocked = ref(false)\nconst contentEncrypted = ref(false)\n\ninterface TreeNode {\n name: string\n path: string\n isDir: boolean\n size: number\n entry?: SevenZipEntry\n children: TreeNode[]\n}\nconst root = ref<TreeNode>({ name: '', path: '', isDir: true, size: 0, children: [] })\nconst expanded = reactive(new Set<string>())\n\nconst fileCount = computed(() => entries.value.reduce((n, e) => n + (e.isDir ? 0 : 1), 0))\nconst totalSize = computed(() => entries.value.reduce((s, e) => s + (e.isDir ? 0 : e.size), 0))\n\n// Build a folder tree from the flat entry paths (directories may be implicit — derive them either way).\nfunction buildTree(list: SevenZipEntry[]): TreeNode {\n const rootNode: TreeNode = { name: '', path: '', isDir: true, size: 0, children: [] }\n const dirs = new Map<string, TreeNode>([['', rootNode]])\n const ensureDir = (segs: string[]): TreeNode => {\n let cur = rootNode\n let acc = ''\n for (const seg of segs) {\n acc = acc ? `${acc}/${seg}` : seg\n let node = dirs.get(acc)\n if (!node) {\n node = { name: seg, path: acc, isDir: true, size: 0, children: [] }\n dirs.set(acc, node)\n cur.children.push(node)\n }\n cur = node\n }\n return cur\n }\n for (const e of list) {\n const segs = e.path.split('/').filter(Boolean)\n if (e.isDir) {\n ensureDir(segs)\n continue\n }\n const fname = segs.pop()\n if (!fname) continue\n ensureDir(segs).children.push({\n name: fname,\n path: e.path,\n isDir: false,\n size: e.size,\n entry: e,\n children: [],\n })\n }\n sortNode(rootNode)\n return rootNode\n}\n// Folders first, then files, each alphabetical (case-insensitive).\nfunction sortNode(n: TreeNode): void {\n n.children.sort((a, b) => (a.isDir === b.isDir ? a.name.localeCompare(b.name) : a.isDir ? -1 : 1))\n for (const c of n.children) if (c.isDir) sortNode(c)\n}\n\n// Flatten the tree to the rows currently visible (respecting which folders are expanded).\ninterface Row {\n node: TreeNode\n depth: number\n}\nconst rows = computed<Row[]>(() => {\n const out: Row[] = []\n const walk = (nodes: TreeNode[], depth: number): void => {\n for (const n of nodes) {\n out.push({ node: n, depth })\n if (n.isDir && expanded.has(n.path)) walk(n.children, depth + 1)\n }\n }\n walk(root.value.children, 0)\n return out\n})\n\nasync function load(): Promise<void> {\n imageGallery.clear()\n status.value = 'loading'\n errorMsg.value = ''\n selected.value = null\n password.value = ''\n pwError.value = ''\n locked.value = false\n unlocked.value = false\n contentEncrypted.value = false\n revokeBlob()\n stackSlices.value = []\n try {\n const res = await fetch(props.url)\n if (!res.ok) throw new Error(`HTTP ${res.status}`)\n buffer = await res.arrayBuffer()\n try {\n archive = readSevenZip(buffer)\n } catch (e) {\n if (e instanceof SevenZipEncryptedError) {\n // Encrypted file names: nothing can be listed until the password unlocks the header.\n locked.value = true\n status.value = 'ready'\n return\n }\n throw e\n }\n entries.value = archive.entries\n root.value = buildTree(archive.entries)\n expanded.clear()\n contentEncrypted.value = archive.entries.some((e) => e.encrypted)\n status.value = 'ready'\n } catch (e) {\n errorMsg.value = e instanceof Error ? e.message : String(e)\n status.value = 'error'\n }\n}\n\nfunction pwMessage(e: unknown): string {\n if (e instanceof SevenZipPasswordError) return '密码错误'\n if (e instanceof SevenZipEncryptedError) return '需要密码'\n return e instanceof Error ? e.message : String(e)\n}\n\n// Unlock an encrypted archive. An encrypted header re-lists with the password (the KDF runs here, ~100ms);\n// content-only encryption verifies the password by decoding the first encrypted entry's folder.\nasync function submitPassword(): Promise<void> {\n if (!buffer \|\| !password.value) return\n pwError.value = ''\n if (locked.value) {\n status.value = 'loading'\n await nextTick() // let the spinner paint before the synchronous key derivation blocks\n try {\n archive = readSevenZip(buffer, password.value)\n entries.value = archive.entries\n root.value = buildTree(archive.entries)\n expanded.clear()\n contentEncrypted.value = archive.entries.some((e) => e.encrypted)\n locked.value = false\n unlocked.value = true\n } catch (e) {\n pwError.value = pwMessage(e)\n } finally {\n status.value = 'ready'\n }\n return\n }\n try {\n const target = entries.value.find((e) => !e.isDir && e.encrypted)\n if (target && archive) extractSevenZipEntry(buffer, archive, target, password.value)\n unlocked.value = true\n } catch (e) {\n unlocked.value = false\n pwError.value = pwMessage(e)\n }\n}\n\n// ── selected entry (detail view) ──────────────────────────────────────────────────────────────\nconst selected = ref<SevenZipEntry \| null>(null)\nconst entryStatus = ref<Status>('ready')\nconst entryErr = ref('')\nconst entryText = ref('')\nconst entryFile = ref<ViewerFile \| null>(null)\nconst entryStack = ref(false)\nconst entryMode = ref<'render' \| 'source'>('render')\nconst blobUrl = ref('')\n\n// DICOM series stack: a folder of .dcm slices browsed as one scrollable series (see ZipBrowser). 7z decode is\n// synchronous, but slice.load() stays async to match DicomSlice (the viewer awaits it either way).\nconst stackSlices = ref<DicomSlice[]>([])\nconst stackStart = ref(0)\nconst stackName = ref('')\nconst stackTotalSize = computed(() => stackSlices.value.reduce((s, sl) => s + (sl.size ?? 0), 0))\n\nconst canToggle = computed(() => canToggleView(entryFile.value, entryText.value))\n\nfunction revokeBlob(): void {\n if (blobUrl.value) {\n URL.revokeObjectURL(blobUrl.value)\n blobUrl.value = ''\n }\n}\n\nfunction dirOf(path: string): string {\n const i = path.lastIndexOf('/')\n return i < 0 ? '' : path.slice(0, i)\n}\n// Sibling .dcm files in the same folder, natural-sorted (numeric-aware) so e.g. img2 precedes img10.\nfunction dicomSiblings(e: SevenZipEntry): SevenZipEntry[] {\n const dir = dirOf(e.path)\n return entries.value\n .filter((x) => !x.isDir && isDicomFile(x.name) && dirOf(x.path) === dir)\n .sort((a, b) => a.path.localeCompare(b.path, undefined, { numeric: true, sensitivity: 'base' }))\n}\n\n// Treat as text if the name says so; for extensionless entries, sniff the first bytes for NULs.\nfunction looksText(bytes: Uint8Array, name: string): boolean {\n if (isTextFile(name)) return true\n if (fileExt(name)) return false\n const n = Math.min(bytes.length, 4096)\n for (let i = 0; i < n; i++) if (bytes[i] === 0) return false\n return true\n}\n\nconst imageGallery = useArchiveImageGallery<SevenZipEntry>({\n entries: () => entries.value,\n archiveName: () => props.name,\n extract: (entry) => {\n if (!buffer \|\| !archive) throw new Error('7z 尚未加载')\n return extractSevenZipEntry(buffer, archive, entry, password.value)\n },\n})\n\nfunction selectEntry(e: SevenZipEntry): void {\n selected.value = e\n entryStatus.value = 'loading'\n entryErr.value = ''\n entryText.value = ''\n entryFile.value = null\n entryStack.value = false\n entryMode.value = 'render'\n revokeBlob()\n stackSlices.value = []\n if (!buffer \|\| !archive) return\n try {\n if (isDicomFile(e.name)) {\n const siblings = dicomSiblings(e)\n if (siblings.length > 1) {\n const buf = buffer\n const arc = archive\n stackSlices.value = siblings.map((se) => ({\n name: se.name,\n size: se.size,\n load: async () => {\n const u = extractSevenZipEntry(buf, arc, se, password.value)\n const out = new ArrayBuffer(u.byteLength)\n new Uint8Array(out).set(u)\n return out\n },\n }))\n stackStart.value = Math.max(\n 0,\n siblings.findIndex((se) => se.path === e.path),\n )\n stackName.value = dirOf(e.path).split('/').pop() \|\| e.name\n entryStack.value = true\n entryStatus.value = 'ready'\n return\n }\n }\n const bytes = extractSevenZipEntry(buffer, archive, e, password.value)\n blobUrl.value = URL.createObjectURL(new Blob([bytes], { type: mediaMimeForName(e.name) }))\n const file = classifyViewerFile({\n name: e.name,\n url: blobUrl.value,\n size: e.size,\n textHint: looksText(bytes, e.name),\n })\n entryFile.value = file\n entryStatus.value = 'ready'\n if (file.image) void imageGallery.open(e, bytes)\n } catch (err) {\n entryErr.value = pwMessage(err)\n entryStatus.value = 'error'\n }\n}\n\nfunction onRow(node: TreeNode): void {\n if (node.isDir) {\n if (expanded.has(node.path)) expanded.delete(node.path)\n else expanded.add(node.path)\n } else if (node.entry) {\n selectEntry(node.entry)\n }\n}\n\nfunction back(): void {\n selected.value = null\n entryText.value = ''\n entryFile.value = null\n entryStack.value = false\n revokeBlob()\n stackSlices.value = []\n}\n\n// Re-extract on demand (the decoded folder is cached in lib/sevenZip, so this stays cheap).\nfunction downloadEntry(e: SevenZipEntry): void {\n if (!buffer \|\| !archive) return\n try {\n const url = URL.createObjectURL(\n new Blob([extractSevenZipEntry(buffer, archive, e, password.value)]),\n )\n const a = document.createElement('a')\n a.href = url\n a.download = e.name\n document.body.appendChild(a)\n a.click()\n a.remove()\n setTimeout(() => URL.revokeObjectURL(url), 1000)\n } catch {\n / extraction failed — nothing to download /\n }\n}\n\nconst copied = ref(false)\nlet copyTimer: ReturnType<typeof setTimeout> \| undefined\nasync function copyEntry(): Promise<void> {\n try {\n await navigator.clipboard?.writeText(entryText.value)\n } catch {\n / clipboard unavailable — ignore /\n }\n copied.value = true\n clearTimeout(copyTimer)\n copyTimer = setTimeout(() => (copied.value = false), 1400)\n}\n\nonMounted(load)\nwatch(() => props.url, load)\nonBeforeUnmount(() => {\n revokeBlob()\n clearTimeout(copyTimer)\n})\n</script>\n\n<template>\n <div class=\"sz\">\n <p v-if=\"status === 'loading'\" class=\"sz__msg\">正在解压…</p>\n\n <div v-else-if=\"status === 'error'\" class=\"sz__msg sz__msg--error\">\n <p>{{ errorMsg }}</p>\n <button type=\"button\" class=\"sz__retry\" @click=\"load\">重试</button>\n </div>\n\n <!-- locked: the header (file names) is encrypted — must unlock before anything can be listed -->\n <div v-else-if=\"locked\" class=\"sz__locked\">\n <Icon name=\"key\" :size=\"26\" class=\"sz__lockicon\" />\n <p class=\"sz__lockmsg\">该 7z 已加密（含文件名），输入密码后查看</p>\n <div class=\"sz__lockform\">\n <input\n v-model=\"password\"\n type=\"password\"\n class=\"sz__pwinput\"\n placeholder=\"输入密码\"\n @keyup.enter=\"submitPassword\"\n />\n <button type=\"button\" class=\"sz__pwbtn\" @click=\"submitPassword\">解锁</button>\n </div>\n <p v-if=\"pwError\" class=\"sz__lockerr\">{{ pwError }}</p>\n </div>\n\n <!-- detail: one selected entry -->\n <template v-else-if=\"selected\">\n <div class=\"sz__bar\">\n <button type=\"button\" class=\"sz__back\" title=\"返回列表\" @click=\"back\">\n <Icon name=\"arrowLeft\" :size=\"16\" />\n </button>\n <span class=\"sz__path\" :title=\"selected.path\">{{ selected.path }}</span>\n <span class=\"sz__bsize\">{{ formatBytes(selected.size) }}</span>\n <div v-if=\"canToggle\" class=\"sz__view\" role=\"group\" aria-label=\"渲染或源码\">\n <button\n type=\"button\"\n class=\"sz__vbtn\"\n :class=\"{ 'sz__vbtn--on': entryMode === 'render' }\"\n title=\"渲染\"\n @click=\"entryMode = 'render'\"\n >\n <Icon name=\"eye\" :size=\"14\" />\n </button>\n <button\n type=\"button\"\n class=\"sz__vbtn\"\n :class=\"{ 'sz__vbtn--on': entryMode === 'source' }\"\n title=\"源码\"\n @click=\"entryMode = 'source'\"\n >\n <Icon name=\"code\" :size=\"14\" />\n </button>\n </div>\n <button\n v-if=\"entryText && entryStatus === 'ready'\"\n type=\"button\"\n class=\"sz__act\"\n :title=\"copied ? '已复制' : '复制'\"\n @click=\"copyEntry\"\n >\n <Icon name=\"copy\" :size=\"14\" />\n </button>\n <button type=\"button\" class=\"sz__act\" title=\"下载\" @click=\"downloadEntry(selected)\">\n <Icon name=\"download\" :size=\"15\" />\n </button>\n </div>\n\n <p v-if=\"entryStatus === 'loading'\" class=\"sz__msg\">读取中…</p>\n <div v-else-if=\"entryStatus === 'error'\" class=\"sz__msg sz__msg--error\">\n <p>{{ entryErr }}</p>\n </div>\n\n <!-- dicom series: a whole folder of .dcm slices browsed as one scrollable series (wheel/cine翻层) -->\n <DicomViewer\n v-else-if=\"entryStack\"\n :slices=\"stackSlices\"\n :start=\"stackStart\"\n :name=\"stackName\"\n :size=\"stackTotalSize\"\n />\n\n <!-- everything else: the shared body picks the right viewer from the extracted blob -->\n <FileViewerBody\n v-else-if=\"entryFile\"\n :file=\"entryFile\"\n :mode=\"entryMode\"\n @loaded=\"entryText = $event\"\n />\n </template>\n\n <!-- list: the file tree -->\n <template v-else>\n <div class=\"sz__summary\">{{ fileCount }} 个文件 · {{ formatBytes(totalSize) }}</div>\n\n <!-- password bar: shown when file bytes are encrypted (but the file names were readable) -->\n <div v-if=\"contentEncrypted\" class=\"sz__pw\" :class=\"{ 'sz__pw--ok': unlocked }\">\n <Icon name=\"key\" :size=\"14\" />\n <input\n v-model=\"password\"\n type=\"password\"\n class=\"sz__pwinput\"\n :placeholder=\"unlocked ? '已解锁（如需可重新输入）' : '此压缩包内容已加密，输入密码解锁'\"\n @keyup.enter=\"submitPassword\"\n />\n <button type=\"button\" class=\"sz__pwbtn\" @click=\"submitPassword\">\n {{ unlocked ? '已解锁' : '解锁' }}\n </button>\n <span v-if=\"pwError\" class=\"sz__pwerr\">{{ pwError }}</span>\n </div>\n\n <div class=\"sz__scroll sz__tree\">\n <p v-if=\"rows.length === 0\" class=\"sz__msg\">空压缩包</p>\n <button\n v-for=\"row in rows\"\n :key=\"row.node.path\"\n type=\"button\"\n class=\"sz__row\"\n :class=\"{ 'sz__row--dir': row.node.isDir }\"\n :style=\"{ paddingLeft: `${12 + row.depth 14}px` }\"\n @click=\"onRow(row.node)\"\n >\n <span class=\"sz__twisty\">\n <Icon\n v-if=\"row.node.isDir\"\n name=\"chevronRight\"\n :size=\"13\"\n :class=\"{ 'sz__twisty--open': expanded.has(row.node.path) }\"\n />\n </span>\n <span class=\"sz__rowicon\">\n <Icon :name=\"row.node.isDir ? 'folder' : 'fileOutline'\" :size=\"15\" />\n </span>\n <span class=\"sz__rowname\">{{ row.node.name }}</span>\n <Icon\n v-if=\"!row.node.isDir && row.node.entry?.encrypted\"\n name=\"key\"\n :size=\"12\"\n class=\"sz__rowlock\"\n />\n <span v-if=\"!row.node.isDir\" class=\"sz__rowsize\">{{ formatBytes(row.node.size) }}</span>\n </button>\n </div>\n </template>\n </div>\n</template>\n\n<style scoped>\n.sz {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n background: var(--surface);\n}\n\n.sz__msg {\n padding: 20px 16px;\n color: var(--muted);\n font-size: 13px;\n}\n.sz__msg--error {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n color: var(--danger);\n}\n.sz__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.sz__retry:hover {\n border-color: var(--accent);\n color: var(--accent);\n}\n\n/* List view ------------------------------------------------------------------------------------ /\n.sz__summary {\n flex-shrink: 0;\n padding: 9px 16px;\n border-bottom: 1px solid var(--border);\n font-size: 11.5px;\n letter-spacing: 0.02em;\n color: var(--faint);\n}\n.sz__scroll {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n}\n.sz__tree {\n padding: 6px 0;\n}\n.sz__row {\n display: flex;\n align-items: center;\n gap: 7px;\n width: 100%;\n padding: 5px 12px 5px 12px;\n background: transparent;\n border: none;\n font-family: inherit;\n font-size: 12.5px;\n color: var(--text);\n text-align: left;\n cursor: pointer;\n}\n.sz__row:hover {\n background: var(--surface-2);\n}\n.sz__twisty {\n flex-shrink: 0;\n display: inline-flex;\n width: 13px;\n color: var(--faint);\n}\n.sz__twisty--open {\n transform: rotate(90deg);\n transition: transform 0.12s;\n}\n.sz__rowicon {\n flex-shrink: 0;\n display: inline-flex;\n color: var(--faint);\n}\n.sz__row--dir .sz__rowicon {\n color: var(--accent);\n}\n.sz__rowname {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.sz__row--dir .sz__rowname {\n font-weight: 500;\n}\n.sz__rowsize {\n flex-shrink: 0;\n font-size: 11px;\n color: var(--faint);\n font-variant-numeric: tabular-nums;\n}\n\n/ Detail bar ----------------------------------------------------------------------------------- /\n.sz__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.sz__back,\n.sz__act {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 30px;\n height: 28px;\n background: transparent;\n border: none;\n border-radius: 7px;\n color: var(--muted);\n cursor: pointer;\n transition:\n background 0.15s,\n color 0.15s;\n}\n.sz__back:hover,\n.sz__act:hover {\n background: var(--surface-2);\n color: var(--accent);\n}\n.sz__path {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n direction: rtl;\n text-align: left;\n font-size: 12.5px;\n font-weight: 500;\n color: var(--text-strong);\n}\n.sz__bsize {\n flex-shrink: 0;\n font-size: 11px;\n color: var(--faint);\n font-variant-numeric: tabular-nums;\n}\n.sz__view {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n gap: 2px;\n padding: 2px;\n border-radius: 7px;\n background: var(--surface-2);\n}\n.sz__vbtn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 26px;\n height: 24px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: 5px;\n color: var(--faint);\n cursor: pointer;\n}\n.sz__vbtn--on {\n background: var(--surface);\n color: var(--accent);\n box-shadow: var(--shadow);\n}\n\n/ Password UI (encrypted 7z) --------------------------------------------------------------------- /\n.sz__locked {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 24px;\n text-align: center;\n}\n.sz__lockicon {\n color: var(--faint);\n}\n.sz__lockmsg {\n margin: 0;\n font-size: 13px;\n color: var(--muted);\n}\n.sz__lockform {\n display: flex;\n gap: 8px;\n width: 100%;\n max-width: 320px;\n}\n.sz__lockerr {\n margin: 0;\n font-size: 12px;\n color: var(--danger);\n}\n/ Inline password bar (content-encrypted, names readable) + shared input/button. */\n.sz__pw {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n padding: 8px 12px;\n border-bottom: 1px solid var(--border);\n background: var(--surface-2);\n color: var(--muted);\n}\n.sz__pw--ok {\n color: var(--accent);\n}\n.sz__pwinput {\n flex: 1 1 auto;\n min-width: 0;\n height: 28px;\n padding: 0 9px;\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: 7px;\n}\n.sz__pwinput:focus {\n outline: none;\n border-color: var(--accent);\n}\n.sz__pwbtn {\n flex-shrink: 0;\n height: 28px;\n padding: 0 12px;\n font-family: inherit;\n font-size: 12px;\n color: var(--text);\n background: var(--surface);\n border: 1px solid var(--border-2);\n border-radius: 7px;\n cursor: pointer;\n}\n.sz__pwbtn:hover {\n border-color: var(--accent);\n color: var(--accent);\n}\n.sz__pwerr {\n flex-shrink: 0;\n font-size: 11.5px;\n color: var(--danger);\n}\n.sz__rowlock {\n flex-shrink: 0;\n color: var(--faint);\n}\n</style>\n"],"mappings":""}