@l1yp/file-viewer 0.1.0

package/dist/components/GeoViewer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,255 @@
+import { fileExt as e } from "../lib/fileType.js";
+import t from "./MissingDependency.js";
+import { isMissingModule as n } from "../lib/optionalDep.js";
+import { parseGeo as r } from "../lib/geo.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, onBeforeUnmount as d, onMounted as f, openBlock as p, ref as m, renderList as h, shallowRef as g, toDisplayString as _, watch as v } from "vue";
+//#region src/components/GeoViewer.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "geo" }, b = { class: "geo__head" }, x = { class: "geo__badge" }, S = { class: "geo__count" }, C = {
+	key: 0,
+	class: "geo__chip"
+}, w = {
+	key: 1,
+	class: "geo__chip"
+}, T = {
+	key: 2,
+	class: "geo__chip"
+}, E = { class: "geo__map" }, D = {
+	key: 1,
+	class: "geo__empty"
+}, O = {
+	key: 2,
+	class: "geo__err"
+}, k = {
+	key: 3,
+	class: "geo__offline"
+}, A = {
+	key: 0,
+	class: "geo__list"
+}, ee = ["onClick"], j = { class: "geo__feat-name" }, M = { class: "geo__feat-kind" }, N = "https://tiles.openfreemap.org/styles/liberty", P = /*@__PURE__*/ u({
+	__name: "GeoViewer",
+	props: {
+		text: {},
+		name: {}
+	},
+	setup(u) {
+		let P = u, F = {
+			version: 8,
+			sources: {},
+			layers: [{
+				id: "bg",
+				type: "background",
+				paint: { "background-color": "#e6ebf0" }
+			}]
+		}, I = a(() => r(P.text, e(P.name))), L = {
+			geojson: "GeoJSON",
+			kml: "KML",
+			gpx: "GPX"
+		}, R = {
+			point: "点",
+			line: "线",
+			polygon: "面"
+		}, z = a(() => {
+			let e = [];
+			return I.value.features.forEach((t, n) => {
+				for (let r of t.geoms) {
+					let i = {
+						fi: n,
+						name: t.name,
+						kind: r.kind
+					};
+					if (r.kind === "point") e.push({
+						type: "Feature",
+						properties: i,
+						geometry: {
+							type: "Point",
+							coordinates: r.coords[0]
+						}
+					});
+					else if (r.kind === "line") e.push({
+						type: "Feature",
+						properties: i,
+						geometry: {
+							type: "LineString",
+							coordinates: r.coords
+						}
+					});
+					else {
+						let t = r.coords.slice(), n = t[0], a = t[t.length - 1];
+						n && a && (n[0] !== a[0] || n[1] !== a[1]) && t.push(n), e.push({
+							type: "Feature",
+							properties: i,
+							geometry: {
+								type: "Polygon",
+								coordinates: [t]
+							}
+						});
+					}
+				}
+			}), {
+				type: "FeatureCollection",
+				features: e
+			};
+		}), B = a(() => z.value.features.length > 0), V = a(() => I.value.features.map((e) => {
+			let t = Infinity, n = Infinity, r = -Infinity, i = -Infinity;
+			for (let a of e.geoms) for (let [e, o] of a.coords) e < t && (t = e), e > r && (r = e), o < n && (n = o), o > i && (i = o);
+			return Number.isFinite(t) ? [[t, n], [r, i]] : null;
+		})), H = a(() => {
+			let e = Infinity, t = Infinity, n = -Infinity, r = -Infinity;
+			for (let i of V.value) i && (i[0][0] < e && (e = i[0][0]), i[0][1] < t && (t = i[0][1]), i[1][0] > n && (n = i[1][0]), i[1][1] > r && (r = i[1][1]));
+			return Number.isFinite(e) ? [[e, t], [n, r]] : null;
+		}), U = a(() => {
+			let e = 0, t = 0, n = 0;
+			for (let r of z.value.features) r.properties.kind === "point" ? e++ : r.properties.kind === "line" ? t++ : n++;
+			return {
+				features: I.value.features.length,
+				point: e,
+				line: t,
+				polygon: n
+			};
+		}), W = a(() => I.value.features.map((e) => {
+			let t = new Set(e.geoms.map((e) => R[e.kind]));
+			return Array.from(t).join("/");
+		})), G = m(null), K = g(null), q = m(""), J = m(null), Y = m(!1), X = null, Z;
+		function Q(e, t) {
+			!K.value || !e || K.value.fitBounds(e, {
+				padding: 44,
+				maxZoom: 15,
+				animate: t,
+				duration: 500
+			});
+		}
+		function $() {
+			let e = K.value;
+			if (!(!e || !e.isStyleLoaded() || e.getSource("geo"))) {
+				clearTimeout(Z), e.addSource("geo", {
+					type: "geojson",
+					data: z.value
+				}), e.addLayer({
+					id: "geo-fill",
+					type: "fill",
+					source: "geo",
+					filter: [
+						"==",
+						["get", "kind"],
+						"polygon"
+					],
+					paint: {
+						"fill-color": "#3b82f6",
+						"fill-opacity": .25,
+						"fill-outline-color": "#2563eb"
+					}
+				}), e.addLayer({
+					id: "geo-line",
+					type: "line",
+					source: "geo",
+					filter: [
+						"==",
+						["get", "kind"],
+						"line"
+					],
+					paint: {
+						"line-color": "#e8590c",
+						"line-width": 3,
+						"line-opacity": .9
+					},
+					layout: {
+						"line-join": "round",
+						"line-cap": "round"
+					}
+				}), e.addLayer({
+					id: "geo-point",
+					type: "circle",
+					source: "geo",
+					filter: [
+						"==",
+						["get", "kind"],
+						"point"
+					],
+					paint: {
+						"circle-radius": 6,
+						"circle-color": "#d6336c",
+						"circle-stroke-color": "#ffffff",
+						"circle-stroke-width": 2
+					}
+				});
+				for (let t of [
+					"geo-fill",
+					"geo-line",
+					"geo-point"
+				]) e.on("click", t, (t) => {
+					let n = (t.features?.[0])?.properties?.name || "";
+					n && X && new X.Popup({ closeButton: !1 }).setLngLat(t.lngLat).setText(n).addTo(e);
+				}), e.on("mouseenter", t, () => e.getCanvas().style.cursor = "pointer"), e.on("mouseleave", t, () => e.getCanvas().style.cursor = "");
+				Q(H.value, !1);
+			}
+		}
+		f(async () => {
+			if (!G.value) return;
+			try {
+				X = await import("maplibre-gl"), await import("maplibre-gl/dist/maplibre-gl.css");
+			} catch (e) {
+				n(e) ? J.value = ["maplibre-gl"] : q.value = "地图库加载失败";
+				return;
+			}
+			let e = H.value, t = new X.Map({
+				container: G.value,
+				style: N,
+				center: e ? [(e[0][0] + e[1][0]) / 2, (e[0][1] + e[1][1]) / 2] : [0, 20],
+				zoom: e ? 4 : 1,
+				attributionControl: { compact: !0 }
+			});
+			K.value = t, t.addControl(new X.NavigationControl({ showCompass: !1 }), "top-right"), t.on("load", $), t.on("styledata", $), t.on("error", () => {
+				t.getSource("geo") || (Y.value = !0);
+			}), Z = setTimeout(() => {
+				!K.value || K.value.getSource("geo") || (Y.value = !0, K.value.setStyle(F));
+			}, 6e3);
+		}), v(z, (e) => {
+			let t = K.value;
+			if (!t) return;
+			let n = t.getSource("geo");
+			n && "setData" in n && (n.setData(e), Q(H.value, !1));
+		}), d(() => {
+			clearTimeout(Z), K.value?.remove(), K.value = null;
+		});
+		function te(e) {
+			let t = V.value[e], n = K.value;
+			!t || !n || (t[0][0] === t[1][0] && t[0][1] === t[1][1] ? n.flyTo({
+				center: t[0],
+				zoom: 14,
+				duration: 500
+			}) : Q(t, !0));
+		}
+		return (e, n) => (p(), c("div", y, [
+			l("div", b, [
+				l("span", x, _(L[I.value.format] ?? I.value.format), 1),
+				l("span", S, _(U.value.features) + " 个要素", 1),
+				U.value.point ? (p(), c("span", C, "点 " + _(U.value.point), 1)) : s("", !0),
+				U.value.line ? (p(), c("span", w, "线 " + _(U.value.line), 1)) : s("", !0),
+				U.value.polygon ? (p(), c("span", T, "面 " + _(U.value.polygon), 1)) : s("", !0),
+				B.value ? (p(), c("button", {
+					key: 3,
+					type: "button",
+					class: "geo__reset",
+					onClick: n[0] ||= (e) => Q(H.value, !0)
+				}, " 重置视图 ")) : s("", !0)
+			]),
+			l("div", E, [J.value ? (p(), o(t, {
+				key: 0,
+				pkg: J.value,
+				label: "地图"
+			}, null, 8, ["pkg"])) : (p(), c(i, { key: 1 }, [B.value ? (p(), c("div", {
+				key: 0,
+				ref_key: "mapEl",
+				ref: G,
+				class: "geo__canvas"
+			}, null, 512)) : (p(), c("p", D, "未解析到几何要素（可切换到「源码」查看原始内容）。")), q.value ? (p(), c("div", O, _(q.value), 1)) : Y.value ? (p(), c("div", k, " 底图瓦片不可达（离线？），仅显示数据 ")) : s("", !0)], 64))]),
+			B.value ? (p(), c("ul", A, [(p(!0), c(i, null, h(I.value.features, (e, t) => (p(), c("li", { key: t }, [l("button", {
+				type: "button",
+				class: "geo__feat",
+				onClick: (e) => te(t)
+			}, [l("span", j, _(e.name || `要素 #${t + 1}`), 1), l("span", M, _(W.value[t]), 1)], 8, ee)]))), 128))])) : s("", !0)
+		]));
+	}
+});
+//#endregion
+export { P as default };

package/dist/components/HarViewer.js

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

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

@@ -0,0 +1,20 @@
+/**
+ * Side-viewer HAR (`.har`) renderer. Fetches the archive text and parses the HTTP Archive entirely in-browser
+ * (hand-rolled, see lib/har.ts) — no third-party. Lays out a master-detail vertical split tuned for the narrow
+ * side pane: a filterable request list on top, and the selected request's detail (general / headers / query /
+ * cookies / request + response body) below. Bodies are decoded (standard base64 + the «base64 but undeclared»
+ * case some tools emit); images preview from a data URI, binaries show a hex dump.
+ *
+ * Safety: a HAR body is untrusted upstream content. We never execute it — text bodies render as escaped,
+ * optionally syntax-highlighted source; image bodies render through a data-URI `<img>` (an `<img>` never runs
+ * scripts, so even an SVG body is inert). No body is fetched as a live resource.
+ */
+type __VLS_Props = {
+    /** Download URL of the .har bytes. */
+    url?: string;
+    name: string;
+    size?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/HarViewer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,322 @@
+import { formatBytes as e } from "../lib/format.js";
+import { highlightCode as t } from "../lib/highlight.js";
+import { decodeContent as n, decodePostData as r, fmtMs as i, fmtSize as a, parseHar as ee, parseQuery as te, prettyBody as ne, statusClass as re, toCurl as ie } from "../lib/har.js";
+import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, defineComponent as f, normalizeClass as p, onBeforeUnmount as m, openBlock as h, ref as g, renderList as _, toDisplayString as v, unref as y, vModelText as ae, watch as oe, withDirectives as se } from "vue";
+//#region src/components/HarViewer.vue?vue&type=script&setup=true&lang.ts
+var ce = { class: "har" }, le = {
+	key: 0,
+	class: "har__msg"
+}, ue = {
+	key: 1,
+	class: "har__msg har__gate"
+}, de = {
+	key: 2,
+	class: "har__msg har__msg--error"
+}, fe = { class: "har__bar" }, pe = { class: "har__cats" }, me = ["onClick"], he = {
+	key: 0,
+	class: "har__empty"
+}, ge = ["title", "onClick"], _e = { class: "har__name" }, ve = { class: "har__name-main" }, ye = { class: "har__name-sub" }, be = { class: "har__type" }, xe = { class: "har__size" }, b = { class: "har__time" }, x = {
+	key: 0,
+	class: "har__detail"
+}, S = { class: "har__tabs" }, C = { class: "har__tab-n" }, w = { class: "har__tab-n" }, T = { class: "har__tab-n" }, E = { class: "har__pane" }, D = { class: "har__kv" }, O = {
+	key: 1,
+	class: "har__kv har__kv--mono"
+}, k = {
+	key: 2,
+	class: "har__kv har__kv--mono"
+}, A = {
+	key: 3,
+	class: "har__kv har__kv--mono"
+}, j = { class: "har__kv har__kv--mono" }, M = { class: "har__kv har__kv--mono" }, Se = {
+	key: 0,
+	class: "har__kv har__kv--mono"
+}, Ce = { class: "har__bodybar" }, we = { class: "har__bodymime" }, Te = { class: "har__body" }, Ee = ["innerHTML"], De = { class: "har__bodybar" }, Oe = { class: "har__bodymime" }, ke = {
+	key: 0,
+	class: "har__b64"
+}, Ae = {
+	key: 0,
+	class: "har__img"
+}, je = ["src", "alt"], Me = {
+	key: 1,
+	class: "har__body"
+}, Ne = ["innerHTML"], Pe = 25 * 1024 * 1024, N = /*@__PURE__*/ f({
+	__name: "HarViewer",
+	props: {
+		url: {},
+		name: {},
+		size: {}
+	},
+	setup(f) {
+		let N = f, P = g("loading"), F = g(""), I = g(null), L = g(null), R = g(""), z = g("general"), B = {
+			doc: "文档",
+			xhr: "XHR",
+			js: "JS",
+			css: "CSS",
+			img: "图片",
+			font: "字体",
+			media: "媒体",
+			ws: "WS",
+			other: "其它"
+		}, V = g("all"), Fe = s(() => {
+			let e = /* @__PURE__ */ new Set();
+			for (let t of I.value?.entries ?? []) e.add(t.category);
+			return Object.keys(B).filter((t) => e.has(t));
+		}), H = s(() => {
+			let e = I.value?.entries ?? [], t = R.value.trim().toLowerCase(), n = V.value;
+			return e.filter((e) => n !== "all" && e.category !== n ? !1 : t ? e.url.toLowerCase().includes(t) || e.method.toLowerCase().includes(t) || String(e.status).includes(t) || e.type.toLowerCase().includes(t) : !0);
+		});
+		function Ie(e) {
+			return e.pathname.split("/").filter(Boolean).pop() || e.host || e.pathname || e.url;
+		}
+		function Le(e) {
+			L.value = e, z.value = "general";
+		}
+		async function U() {
+			if (N.url) {
+				P.value = "loading", F.value = "", L.value = null;
+				try {
+					let e = await fetch(N.url);
+					if (!e.ok) throw Error(`HTTP ${e.status}`);
+					let t = ee(await e.text());
+					I.value = {
+						entries: t.entries,
+						creator: t.creator,
+						version: t.version
+					}, P.value = "ready";
+				} catch (e) {
+					F.value = e instanceof Error ? e.message : String(e), P.value = "error";
+				}
+			}
+		}
+		function Re() {
+			if (N.size && N.size > Pe) {
+				P.value = "gate";
+				return;
+			}
+			U();
+		}
+		oe(() => N.url, Re, { immediate: !0 });
+		let W = s(() => L.value?.raw.request.headers ?? []), G = s(() => L.value?.raw.response.headers ?? []), K = s(() => {
+			let e = L.value;
+			if (!e) return [];
+			let t = e.raw.request.queryString;
+			if (t.length) return t;
+			let n = e.url.indexOf("?");
+			return n >= 0 ? te(e.url.slice(n)) : [];
+		}), q = s(() => {
+			let e = L.value;
+			return e ? {
+				req: e.raw.request.cookies,
+				res: e.raw.response.cookies
+			} : {
+				req: [],
+				res: []
+			};
+		}), ze = s(() => q.value.req.length + q.value.res.length > 0), J = s(() => {
+			let e = L.value;
+			if (!e) return null;
+			let t = r(e.raw.request.postData, "auto");
+			return t.kind === "empty" ? null : t;
+		}), Y = s(() => {
+			let e = L.value;
+			if (!e) return null;
+			let t = n(e.raw.response.content, "auto");
+			return t.kind === "empty" ? null : t;
+		}), Be = s(() => {
+			let e = L.value;
+			if (!e) return [];
+			let t = e.raw, n = [
+				{
+					name: "请求 URL",
+					value: e.url
+				},
+				{
+					name: "方法",
+					value: e.method
+				},
+				{
+					name: "状态",
+					value: e.status ? `${e.status} ${e.statusText}`.trim() : "(无响应)"
+				},
+				{
+					name: "协议",
+					value: t.response.httpVersion || t.request.httpVersion || ""
+				},
+				{
+					name: "远端 IP",
+					value: e.serverIP
+				},
+				{
+					name: "响应类型",
+					value: e.mime || ""
+				},
+				{
+					name: "响应大小",
+					value: a(e.size)
+				},
+				{
+					name: "请求体大小",
+					value: e.reqSize ? a(e.reqSize) : ""
+				},
+				{
+					name: "耗时",
+					value: i(e.time)
+				},
+				{
+					name: "开始时间",
+					value: e.startedISO
+				}
+			];
+			return t.response.redirectURL && n.push({
+				name: "重定向",
+				value: t.response.redirectURL
+			}), n.filter((e) => e.value);
+		});
+		function X(e) {
+			let { text: n, pretty: r } = ne(e.text, e.mime), i = r ? "json" : Ve(e.mime);
+			return i ? t(n, i) : He(n);
+		}
+		function Ve(e) {
+			let t = e.toLowerCase();
+			return t.includes("javascript") || t.includes("ecmascript") ? "javascript" : t === "text/css" ? "css" : t === "text/html" || t.includes("xhtml") ? "xml" : t.includes("json") ? "json" : t.includes("svg") || t.includes("xml") ? "xml" : "";
+		}
+		function He(e) {
+			return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+		}
+		let Z = g(""), Q;
+		async function $(e, t) {
+			try {
+				await navigator.clipboard?.writeText(e);
+			} catch {}
+			Z.value = t, clearTimeout(Q), Q = setTimeout(() => Z.value = "", 1400);
+		}
+		function Ue() {
+			L.value && $(ie(L.value), "curl");
+		}
+		return m(() => clearTimeout(Q)), (t, n) => (h(), l("div", ce, [P.value === "loading" ? (h(), l("p", le, "正在解析 HAR…")) : P.value === "gate" ? (h(), l("div", ue, [u("p", null, "该 HAR 较大（" + v(y(e)(N.size)) + "），将在浏览器内解析。是否继续？", 1), u("button", {
+			type: "button",
+			class: "har__btn",
+			onClick: U
+		}, "解析并预览")])) : P.value === "error" ? (h(), l("div", de, [u("p", null, "解析失败：" + v(F.value), 1), u("button", {
+			type: "button",
+			class: "har__btn",
+			onClick: U
+		}, "重试")])) : P.value === "ready" && I.value ? (h(), l(o, { key: 3 }, [
+			u("div", fe, [se(u("input", {
+				"onUpdate:modelValue": n[0] ||= (e) => R.value = e,
+				class: "har__filter",
+				type: "text",
+				placeholder: "筛选 URL / 方法 / 状态…"
+			}, null, 512), [[ae, R.value]]), u("div", pe, [u("button", {
+				type: "button",
+				class: p(["har__cat", { "har__cat--on": V.value === "all" }]),
+				onClick: n[1] ||= (e) => V.value = "all"
+			}, " 全部 " + v(I.value.entries.length), 3), (h(!0), l(o, null, _(Fe.value, (e) => (h(), l("button", {
+				key: e,
+				type: "button",
+				class: p(["har__cat", [`har__cat--${e}`, { "har__cat--on": V.value === e }]]),
+				onClick: (t) => V.value = e
+			}, v(B[e]), 11, me))), 128))])]),
+			u("div", { class: p(["har__list", { "har__list--split": L.value }]) }, [H.value.length ? c("", !0) : (h(), l("p", he, "没有匹配的请求。")), (h(!0), l(o, null, _(H.value, (e) => (h(), l("button", {
+				key: e.index,
+				type: "button",
+				class: p(["har__row", { "har__row--on": L.value?.index === e.index }]),
+				title: e.url,
+				onClick: (t) => Le(e)
+			}, [
+				u("span", { class: p(["har__method", `m-${e.method.toLowerCase()}`]) }, v(e.method), 3),
+				u("span", { class: p(["har__status", y(re)(e.status)]) }, v(e.status || "—"), 3),
+				u("span", _e, [u("span", ve, v(Ie(e)), 1), u("span", ye, v(e.host), 1)]),
+				u("span", be, v(e.type), 1),
+				u("span", xe, v(y(a)(e.size)), 1),
+				u("span", b, v(y(i)(e.time)), 1)
+			], 10, ge))), 128))], 2),
+			L.value ? (h(), l("section", x, [u("div", S, [
+				u("button", {
+					type: "button",
+					class: p(["har__tab", { "har__tab--on": z.value === "general" }]),
+					onClick: n[2] ||= (e) => z.value = "general"
+				}, " 概览 ", 2),
+				u("button", {
+					type: "button",
+					class: p(["har__tab", { "har__tab--on": z.value === "reqHeaders" }]),
+					onClick: n[3] ||= (e) => z.value = "reqHeaders"
+				}, [n[11] ||= d(" 请求头 ", -1), u("span", C, v(W.value.length), 1)], 2),
+				u("button", {
+					type: "button",
+					class: p(["har__tab", { "har__tab--on": z.value === "resHeaders" }]),
+					onClick: n[4] ||= (e) => z.value = "resHeaders"
+				}, [n[12] ||= d(" 响应头 ", -1), u("span", w, v(G.value.length), 1)], 2),
+				K.value.length ? (h(), l("button", {
+					key: 0,
+					type: "button",
+					class: p(["har__tab", { "har__tab--on": z.value === "query" }]),
+					onClick: n[5] ||= (e) => z.value = "query"
+				}, [n[13] ||= d(" 查询 ", -1), u("span", T, v(K.value.length), 1)], 2)) : c("", !0),
+				ze.value ? (h(), l("button", {
+					key: 1,
+					type: "button",
+					class: p(["har__tab", { "har__tab--on": z.value === "cookies" }]),
+					onClick: n[6] ||= (e) => z.value = "cookies"
+				}, " Cookie ", 2)) : c("", !0),
+				J.value ? (h(), l("button", {
+					key: 2,
+					type: "button",
+					class: p(["har__tab", { "har__tab--on": z.value === "reqBody" }]),
+					onClick: n[7] ||= (e) => z.value = "reqBody"
+				}, " 请求体 ", 2)) : c("", !0),
+				Y.value ? (h(), l("button", {
+					key: 3,
+					type: "button",
+					class: p(["har__tab", { "har__tab--on": z.value === "resBody" }]),
+					onClick: n[8] ||= (e) => z.value = "resBody"
+				}, " 响应体 ", 2)) : c("", !0)
+			]), u("div", E, [z.value === "general" ? (h(), l(o, { key: 0 }, [u("dl", D, [(h(!0), l(o, null, _(Be.value, (e) => (h(), l("div", {
+				key: e.name,
+				class: "har__kv-row"
+			}, [u("dt", null, v(e.name), 1), u("dd", null, v(e.value), 1)]))), 128))]), u("button", {
+				type: "button",
+				class: "har__btn har__btn--sm",
+				onClick: Ue
+			}, v(Z.value === "curl" ? "已复制" : "复制为 cURL"), 1)], 64)) : z.value === "reqHeaders" ? (h(), l("dl", O, [(h(!0), l(o, null, _(W.value, (e, t) => (h(), l("div", {
+				key: t,
+				class: "har__kv-row"
+			}, [u("dt", null, v(e.name), 1), u("dd", null, v(e.value), 1)]))), 128))])) : z.value === "resHeaders" ? (h(), l("dl", k, [(h(!0), l(o, null, _(G.value, (e, t) => (h(), l("div", {
+				key: t,
+				class: "har__kv-row"
+			}, [u("dt", null, v(e.name), 1), u("dd", null, v(e.value), 1)]))), 128))])) : z.value === "query" ? (h(), l("dl", A, [(h(!0), l(o, null, _(K.value, (e, t) => (h(), l("div", {
+				key: t,
+				class: "har__kv-row"
+			}, [u("dt", null, v(e.name), 1), u("dd", null, v(e.value), 1)]))), 128))])) : z.value === "cookies" ? (h(), l(o, { key: 4 }, [q.value.req.length ? (h(), l(o, { key: 0 }, [n[14] ||= u("h4", { class: "har__sub" }, "请求 Cookie", -1), u("dl", j, [(h(!0), l(o, null, _(q.value.req, (e, t) => (h(), l("div", {
+				key: t,
+				class: "har__kv-row"
+			}, [u("dt", null, v(e.name), 1), u("dd", null, v(e.value), 1)]))), 128))])], 64)) : c("", !0), q.value.res.length ? (h(), l(o, { key: 1 }, [n[15] ||= u("h4", { class: "har__sub" }, "响应 Set-Cookie", -1), u("dl", M, [(h(!0), l(o, null, _(q.value.res, (e, t) => (h(), l("div", {
+				key: t,
+				class: "har__kv-row"
+			}, [u("dt", null, v(e.name), 1), u("dd", null, v(e.value), 1)]))), 128))])], 64)) : c("", !0)], 64)) : z.value === "reqBody" && J.value ? (h(), l(o, { key: 5 }, [J.value.kind === "form" && J.value.form ? (h(), l("dl", Se, [(h(!0), l(o, null, _(J.value.form, (e, t) => (h(), l("div", {
+				key: t,
+				class: "har__kv-row"
+			}, [u("dt", null, v(e.name), 1), u("dd", null, v(e.value), 1)]))), 128))])) : (h(), l(o, { key: 1 }, [u("div", Ce, [u("span", we, v(J.value.mime || "文本") + " · " + v(y(a)(J.value.size)), 1), u("button", {
+				type: "button",
+				class: "har__btn har__btn--sm",
+				onClick: n[9] ||= (e) => $(J.value.text, "reqBody")
+			}, v(Z.value === "reqBody" ? "已复制" : "复制"), 1)]), u("pre", Te, [u("code", {
+				class: "hljs",
+				innerHTML: X(J.value)
+			}, null, 8, Ee)])], 64))], 64)) : z.value === "resBody" && Y.value ? (h(), l(o, { key: 6 }, [u("div", De, [u("span", Oe, [d(v(Y.value.mime || "文本") + " · " + v(y(a)(Y.value.size)) + " ", 1), Y.value.wasBase64 ? (h(), l("span", ke, "base64 已解码")) : c("", !0)]), Y.value.isImage ? c("", !0) : (h(), l("button", {
+				key: 0,
+				type: "button",
+				class: "har__btn har__btn--sm",
+				onClick: n[10] ||= (e) => $(Y.value.text, "resBody")
+			}, v(Z.value === "resBody" ? "已复制" : "复制"), 1))]), Y.value.isImage ? (h(), l("div", Ae, [u("img", {
+				src: Y.value.dataUri,
+				alt: L.value.url
+			}, null, 8, je)])) : (h(), l("pre", Me, [u("code", {
+				class: "hljs",
+				innerHTML: X(Y.value)
+			}, null, 8, Ne)]))], 64)) : c("", !0)])])) : c("", !0)
+		], 64)) : c("", !0)]));
+	}
+});
+//#endregion
+export { N as default };

package/dist/components/HexViewer.js

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

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

@@ -0,0 +1,22 @@
+/**
+ * Side-viewer hex dump: fetch a file's raw bytes and render them as the classic three columns — an offset
+ * gutter, 16 bytes per row in hex (split into two 8-byte groups), and an ASCII gutter (printable bytes shown
+ * verbatim, everything else as `.`). Like {@link LogViewer} the rows are VIRTUALIZED — only the visible window
+ * is in the DOM — so even a multi-MB file scrolls smoothly (a naive dump would mount hundreds of thousands of
+ * rows). The bytes never leave the browser; they come from the same download endpoint as any other file.
+ *
+ * This is the universal fall-back: ANY file can be inspected byte-for-byte here, so it's offered (alongside
+ * the other formatters) on the unpreviewable-binary card — never auto-detected. Parsing needs the whole file
+ * in memory, so a large file is gated behind a confirm (mirrors BinObjBrowser).
+ */
+type __VLS_Props = {
+    url?: string;
+    name: string;
+    size?: number;
+};
+declare function doLoad(): Promise<void>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    reload: typeof doLoad;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;