@l1yp/file-viewer 0.1.0

package/dist/components/LogViewer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,670 @@
+import { formatBytes as e } from "../lib/format.js";
+import t from "./icons/Icon.js";
+import { useLogRules as n } from "../composables/useLogRules.js";
+import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, openBlock as m, ref as h, renderList as ee, toDisplayString as g, unref as _, vModelCheckbox as v, vModelText as y, watch as b, withDirectives as x, withKeys as te, withModifiers as ne } from "vue";
+//#region src/components/LogViewer.vue?vue&type=script&setup=true&lang.ts
+var re = { class: "log" }, ie = {
+	key: 0,
+	class: "log__msg"
+}, ae = {
+	key: 1,
+	class: "log__msg log__gate"
+}, oe = {
+	key: 2,
+	class: "log__msg log__msg--error"
+}, se = { class: "log__bar" }, ce = { class: "log__searchwrap" }, le = {
+	key: 0,
+	class: "log__matches"
+}, ue = ["disabled"], de = ["disabled"], fe = ["disabled"], pe = ["title"], me = { class: "log__total" }, he = {
+	key: 0,
+	class: "log__rules-empty"
+}, ge = ["onUpdate:modelValue"], _e = ["onUpdate:modelValue"], ve = ["onClick"], ye = ["onClick"], be = {
+	class: "log__rule-color",
+	title: "背景色"
+}, xe = ["onUpdate:modelValue"], Se = ["onUpdate:modelValue", "disabled"], Ce = {
+	class: "log__rule-color",
+	title: "字体色"
+}, we = ["onUpdate:modelValue"], Te = ["onUpdate:modelValue", "disabled"], Ee = ["disabled", "onClick"], De = ["disabled", "onClick"], Oe = ["onClick"], ke = ["title", "onClick"], Ae = ["title", "onClick"], je = ["title", "onClick"], Me = { class: "log__ln" }, Ne = {
+	key: 0,
+	class: "log__fold-cell"
+}, Pe = ["title", "onClick"], Fe = ["innerHTML"], Ie = ["onClick"], Le = 64 * 1024 * 1024, S = 19, Re = 12, C = 10, ze = 2, w = /*@__PURE__*/ u({
+	__name: "LogViewer",
+	props: {
+		url: {},
+		name: {},
+		size: {}
+	},
+	setup(u) {
+		let w = u, T = h("loading"), E = h(""), D = h([]), O = h(null), k = h(0), A = h(400), j = null, Be = /^[ \t]+at\s+\S+[.(]/, M = /^[ \t]+File\s["']/, Ve = /^[ \t]+from\s+\S+:\d+/, He = /^[ \t]*\.\.\.\s+\d+\s+more\b/, Ue = /^[ \t]+--- End of /;
+		function N(e) {
+			return Be.test(e) || M.test(e) || Ve.test(e) || He.test(e) || Ue.test(e);
+		}
+		let P = i(() => {
+			let e = D.value, t = e.length, n = [], r = 0;
+			for (; r < t;) {
+				if (!N(e[r])) {
+					r++;
+					continue;
+				}
+				let i = r, a = M.test(e[r]);
+				for (r++; r < t;) {
+					let t = e[r];
+					if (N(t)) a = M.test(t), r++;
+					else if (a && /^[ \t]+\S/.test(t)) a = !1, r++;
+					else break;
+				}
+				let o = r - 1, s = i - 1, c = s >= 0 && !N(e[s]) && e[s].trim() !== "" ? i : i + 1;
+				o - c + 1 >= ze && n.push({
+					header: c - 1,
+					frameStart: c,
+					frameEnd: o
+				});
+			}
+			return n;
+		}), F = i(() => P.value.length > 0), We = i(() => {
+			let e = /* @__PURE__ */ new Map();
+			return P.value.forEach((t, n) => e.set(t.header, n)), e;
+		});
+		function I(e) {
+			let t = P.value, n = 0, r = t.length - 1;
+			for (; n <= r;) {
+				let i = n + r >> 1, a = t[i];
+				if (e < a.header) r = i - 1;
+				else if (e > a.frameEnd) n = i + 1;
+				else return i;
+			}
+			return -1;
+		}
+		let L = h(/* @__PURE__ */ new Set()), R = i(() => F.value && L.value.size === P.value.length);
+		function Ge(e) {
+			let t = new Set(L.value);
+			t.has(e) ? t.delete(e) : t.add(e), L.value = t;
+		}
+		function Ke() {
+			L.value = R.value ? /* @__PURE__ */ new Set() : new Set(P.value.map((e, t) => t));
+		}
+		function z(e) {
+			return !(L.value.has(e) || U.value && tt.value.has(e));
+		}
+		let { rules: B, add: qe, remove: Je, move: Ye } = n(), V = h(!1), Xe = i(() => {
+			let e = [];
+			for (let t of B.value) {
+				if (!t.enabled || !t.pattern || !(t.bgOn || t.fgOn)) continue;
+				let n;
+				if (t.regex) try {
+					let e = new RegExp(t.pattern, t.caseSensitive ? "" : "i");
+					n = (t) => e.test(t);
+				} catch {
+					n = null;
+				}
+				else if (t.caseSensitive) {
+					let e = t.pattern;
+					n = (t) => t.includes(e);
+				} else {
+					let e = t.pattern.toLowerCase();
+					n = (t) => t.toLowerCase().includes(e);
+				}
+				n && e.push({
+					test: n,
+					bg: t.bgOn ? t.bg : "",
+					fg: t.fgOn ? t.fg : ""
+				});
+			}
+			return e;
+		});
+		function Ze(e) {
+			for (let t of Xe.value) if (t.test(e)) return {
+				bg: t.bg,
+				fg: t.fg
+			};
+			return null;
+		}
+		function Qe(e) {
+			if (!e.regex || !e.pattern) return !1;
+			try {
+				return new RegExp(e.pattern), !1;
+			} catch {
+				return !0;
+			}
+		}
+		let H = h(""), U = h(""), W;
+		b(H, (e) => {
+			clearTimeout(W), W = setTimeout(() => {
+				U.value = e, q.value = 0, Y.value = /* @__PURE__ */ new Set();
+			}, 160);
+		});
+		function $e() {
+			H.value = "", clearTimeout(W), U.value = "", q.value = 0, Y.value = /* @__PURE__ */ new Set();
+		}
+		let G = h(!1), K = h(!1), q = h(0), J = i(() => {
+			let e = U.value.toLowerCase();
+			if (!e) return [];
+			let t = [], n = D.value;
+			for (let r = 0; r < n.length; r++) n[r].toLowerCase().includes(e) && t.push(r);
+			return t;
+		});
+		function et(e, t) {
+			return t ? e.toLowerCase().includes(t.toLowerCase()) : !1;
+		}
+		let tt = i(() => {
+			let e = /* @__PURE__ */ new Set();
+			if (!U.value) return e;
+			for (let t of J.value) {
+				let n = I(t);
+				n >= 0 && e.add(n);
+			}
+			return e;
+		}), nt = i(() => {
+			let e = J.value;
+			return e.length ? e[Math.min(q.value, e.length - 1)] : -1;
+		}), rt = /\b(?:ERROR|FATAL|SEVERE|CRITICAL|PANIC|FAILED|FAILURE)\b|\b\w*(?:Exception|Error)\b|\bTraceback\b|\bCaused by\b|^\s*panic:/, it = i(() => {
+			if (!K.value) return [];
+			let e = D.value, t = We.value, n = [];
+			for (let r = 0; r < e.length; r++) (t.has(r) || rt.test(e[r])) && n.push(r);
+			return n;
+		}), at = i(() => new Set(it.value)), ot = i(() => G.value && U.value !== ""), st = i(() => {
+			let e = ot.value, t = K.value;
+			if (!e && !t) return null;
+			if (e && t) {
+				let e = at.value;
+				return J.value.filter((t) => e.has(t));
+			}
+			return t ? it.value : J.value;
+		}), ct = i(() => ot.value), Y = h(/* @__PURE__ */ new Set());
+		b([K, G], () => {
+			Y.value = /* @__PURE__ */ new Set();
+		});
+		function X(e, t, n) {
+			let r = e + 1, i = t - 1;
+			if (i < r) return;
+			let a = r, o = i;
+			n === "down" ? o = Math.min(i, r + C - 1) : n === "up" && (a = Math.max(r, i - C + 1));
+			let s = new Set(Y.value);
+			for (let e = a; e <= o; e++) s.add(e);
+			Y.value = s;
+		}
+		let lt = i(() => {
+			let e = P.value, t = D.value.length, n = [], r = 0, i = 0;
+			for (let t = 0; t < e.length; t++) {
+				if (!z(t)) continue;
+				let a = e[t];
+				a.frameStart > i && (n.push({
+					o0: i,
+					o1: a.frameStart - 1,
+					d0: r
+				}), r += a.frameStart - i), i = a.frameEnd + 1;
+			}
+			return i < t && (n.push({
+				o0: i,
+				o1: t - 1,
+				d0: r
+			}), r += t - i), {
+				runs: n,
+				total: r
+			};
+		}), Z = i(() => {
+			let e = st.value;
+			if (e === null) return null;
+			let t = D.value.length, n = P.value, r = [];
+			if (ct.value) {
+				let t = /* @__PURE__ */ new Set();
+				for (let n of e) {
+					let e = I(n);
+					e >= 0 && t.add(e);
+				}
+				for (let e of t) r.push([n[e].header, n[e].frameEnd]);
+				r.sort((e, t) => e[0] - t[0]);
+			}
+			let i = (e) => {
+				let t = 0, n = r.length - 1;
+				for (; t <= n;) {
+					let i = t + n >> 1;
+					if (e < r[i][0]) n = i - 1;
+					else if (e > r[i][1]) t = i + 1;
+					else return !0;
+				}
+				return !1;
+			}, a = [];
+			for (let t of e) i(t) || a.push(t);
+			for (let e of Y.value) i(e) || a.push(e);
+			a.sort((e, t) => e - t);
+			let o = [], s = 0, c = 0, l = r.length ? r[0][0] : Infinity, u = -1;
+			for (; s < r.length || c < a.length;) {
+				let e = s < r.length ? l : Infinity, t = c < a.length ? a[c] : Infinity, n;
+				e <= t ? (n = e, l >= r[s][1] ? (s++, l = s < r.length ? r[s][0] : Infinity) : l++) : (n = t, c++), n !== u && (o.push(n), u = n);
+			}
+			let d = [], f = [], p = -1;
+			for (let e of o) e - p > 1 && (d.push({
+				t: "gap",
+				top: p,
+				bottom: e,
+				size: e - p - 1
+			}), f.push(p + .5)), d.push({
+				t: "line",
+				orig: e
+			}), f.push(e), p = e;
+			return p < t - 1 && (d.push({
+				t: "gap",
+				top: p,
+				bottom: t,
+				size: t - 1 - p
+			}), f.push(p + .5)), {
+				items: d,
+				key: f
+			};
+		}), ut = i(() => Z.value !== null), dt = i(() => Z.value ? Z.value.items.length : lt.value.total);
+		function ft(e) {
+			let t = D.value[e] ?? "", n = We.value.get(e);
+			if (n !== void 0) {
+				let r = P.value[n];
+				return {
+					n: e + 1,
+					text: t,
+					kind: "header",
+					collapsed: Z.value ? !1 : z(n),
+					count: r.frameEnd - r.frameStart + 1,
+					gid: n
+				};
+			}
+			let r = I(e), i = r >= 0 && e >= P.value[r].frameStart ? "frame" : "plain";
+			return {
+				n: e + 1,
+				text: t,
+				kind: i,
+				collapsed: !1,
+				count: 0,
+				gid: -1
+			};
+		}
+		function pt(e, t) {
+			let n = 0, r = e.length - 1, i = 0;
+			for (; n <= r;) {
+				let a = n + r >> 1;
+				t < e[a].d0 ? r = a - 1 : (i = a, n = a + 1);
+			}
+			let a = e[i];
+			return a ? a.o0 + (t - a.d0) : t;
+		}
+		let mt = i(() => Math.max(0, Math.floor(k.value / S) - Re)), ht = i(() => Math.min(dt.value, Math.ceil((k.value + A.value) / S) + Re));
+		function gt(e, t) {
+			let n = ft(t);
+			return {
+				i: e,
+				isGap: !1,
+				...n,
+				style: Ze(n.text),
+				context: Z.value !== null && Y.value.has(t) && !et(n.text, U.value),
+				top: 0,
+				bottom: 0,
+				size: 0,
+				step: 0
+			};
+		}
+		let _t = i(() => {
+			let e = [], t = mt.value, n = ht.value, r = Z.value;
+			if (r) for (let i = t; i < n; i++) {
+				let t = r.items[i];
+				t && (t.t === "gap" ? e.push({
+					i,
+					isGap: !0,
+					n: 0,
+					text: "",
+					kind: "plain",
+					collapsed: !1,
+					count: 0,
+					gid: -1,
+					style: null,
+					context: !1,
+					top: t.top,
+					bottom: t.bottom,
+					size: t.size,
+					step: Math.min(C, t.size)
+				}) : e.push(gt(i, t.orig)));
+			}
+			else {
+				let r = lt.value.runs;
+				for (let i = t; i < n; i++) e.push(gt(i, pt(r, i)));
+			}
+			return e;
+		});
+		function Q(e) {
+			return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+		}
+		function vt(e) {
+			let t = U.value;
+			if (!t) return Q(e);
+			let n = e.toLowerCase(), r = t.toLowerCase(), i = "", a = 0, o = n.indexOf(r, a);
+			for (; o !== -1;) i += Q(e.slice(a, o)), i += "<mark class=\"log__hit\">" + Q(e.slice(o, o + t.length)) + "</mark>", a = o + t.length, o = n.indexOf(r, a);
+			return i += Q(e.slice(a)), i;
+		}
+		function yt(e) {
+			let t = O.value;
+			t && (t.scrollTop = Math.max(0, e * S - A.value / 2 + S));
+		}
+		function bt(e) {
+			let t = Z.value;
+			if (t) {
+				let n = t.key, r = 0, i = n.length - 1;
+				for (; r <= i;) {
+					let t = r + i >> 1;
+					if (n[t] === e) return t;
+					n[t] < e ? r = t + 1 : i = t - 1;
+				}
+				return -1;
+			}
+			let n = I(e);
+			n >= 0 && e >= P.value[n].frameStart && z(n) && (e = P.value[n].header);
+			let r = lt.value.runs, i = 0, a = r.length - 1;
+			for (; i <= a;) {
+				let t = i + a >> 1;
+				if (e < r[t].o0) a = t - 1;
+				else if (e > r[t].o1) i = t + 1;
+				else return r[t].d0 + (e - r[t].o0);
+			}
+			return -1;
+		}
+		function xt(e) {
+			let t = J.value;
+			if (!t.length) return;
+			q.value = (q.value + e + t.length) % t.length;
+			let n = bt(t[q.value]);
+			n >= 0 && yt(n);
+		}
+		let St = h("");
+		function Ct() {
+			let e = parseInt(St.value, 10);
+			if (!Number.isFinite(e)) return;
+			let t = bt(Math.max(0, Math.min(D.value.length - 1, e - 1)));
+			t >= 0 && yt(t);
+		}
+		function wt() {
+			O.value && (k.value = O.value.scrollTop);
+		}
+		async function $() {
+			if (w.url) {
+				T.value = "loading", E.value = "";
+				try {
+					let e = await fetch(w.url);
+					if (!e.ok) throw Error(`HTTP ${e.status}`);
+					D.value = (await e.text()).split("\n"), D.value.length > 1 && D.value[D.value.length - 1] === "" && D.value.pop(), L.value = /* @__PURE__ */ new Set(), Y.value = /* @__PURE__ */ new Set(), k.value = 0, O.value && (O.value.scrollTop = 0), T.value = "ready";
+				} catch (e) {
+					E.value = e instanceof Error ? e.message : String(e), T.value = "error";
+				}
+			}
+		}
+		function Tt() {
+			if (w.size && w.size > Le) {
+				T.value = "gate";
+				return;
+			}
+			$();
+		}
+		return b(O, (e) => {
+			j?.disconnect(), e && typeof ResizeObserver < "u" && (j = new ResizeObserver(() => {
+				O.value && (A.value = O.value.clientHeight);
+			}), j.observe(e), A.value = e.clientHeight);
+		}, { flush: "post" }), b(() => w.url, Tt, { immediate: !0 }), p(() => {
+			clearTimeout(W), j?.disconnect();
+		}), (n, i) => (m(), o("div", re, [T.value === "loading" ? (m(), o("p", ie, "正在加载…")) : T.value === "gate" ? (m(), o("div", ae, [s("p", null, "该文件较大（" + g(_(e)(w.size)) + "），将在浏览器内加载。是否继续？", 1), s("button", {
+			type: "button",
+			class: "log__btn",
+			onClick: $
+		}, "加载并预览")])) : T.value === "error" ? (m(), o("div", oe, [s("p", null, "加载失败：" + g(E.value), 1), s("button", {
+			type: "button",
+			class: "log__btn",
+			onClick: $
+		}, "重试")])) : (m(), o(r, { key: 3 }, [s("div", se, [
+			s("div", ce, [x(s("input", {
+				"onUpdate:modelValue": i[0] ||= (e) => H.value = e,
+				class: "log__search",
+				type: "text",
+				placeholder: "搜索…",
+				"aria-label": "搜索",
+				onKeydown: te($e, ["esc"])
+			}, null, 544), [[y, H.value]]), H.value ? (m(), o("button", {
+				key: 0,
+				type: "button",
+				class: "log__clear",
+				title: "清空搜索",
+				"aria-label": "清空搜索",
+				onClick: $e
+			}, [l(t, {
+				name: "close",
+				size: 12
+			})])) : a("", !0)]),
+			U.value ? (m(), o("span", le, g(J.value.length ? q.value + 1 : 0) + "/" + g(J.value.length), 1)) : a("", !0),
+			s("button", {
+				type: "button",
+				class: "log__nav",
+				title: "上一处",
+				disabled: !J.value.length,
+				onClick: i[1] ||= (e) => xt(-1)
+			}, " ↑ ", 8, ue),
+			s("button", {
+				type: "button",
+				class: "log__nav",
+				title: "下一处",
+				disabled: !J.value.length,
+				onClick: i[2] ||= (e) => xt(1)
+			}, " ↓ ", 8, de),
+			s("button", {
+				type: "button",
+				class: d(["log__nav log__nav--text", { "log__nav--on": G.value }]),
+				disabled: !U.value,
+				title: "只看匹配行（命中的堆栈整条保留，行间可展开上下文）",
+				onClick: i[3] ||= (e) => G.value = !G.value
+			}, " 过滤 ", 10, fe),
+			s("button", {
+				type: "button",
+				class: d(["log__nav log__nav--text", { "log__nav--on": K.value }]),
+				title: "只显示异常/错误行（异常头、ERROR/FATAL、*Exception/*Error 等；可与搜索过滤叠加）",
+				onClick: i[4] ||= (e) => K.value = !K.value
+			}, " 只看异常 ", 2),
+			F.value ? (m(), o("button", {
+				key: 1,
+				type: "button",
+				class: d(["log__nav log__nav--text", { "log__nav--on": R.value }]),
+				title: `共 ${P.value.length} 处调用堆栈，点击${R.value ? "折叠" : "展开"}全部`,
+				onClick: Ke
+			}, g(R.value ? "折叠堆栈" : "展开堆栈"), 11, pe)) : a("", !0),
+			s("button", {
+				type: "button",
+				class: d(["log__nav log__nav--text", { "log__nav--on": V.value || Xe.value.length > 0 }]),
+				title: "按规则给行上色",
+				onClick: i[5] ||= (e) => V.value = !V.value
+			}, " 上色 ", 2),
+			i[15] ||= s("span", { class: "log__spacer" }, null, -1),
+			x(s("input", {
+				"onUpdate:modelValue": i[6] ||= (e) => St.value = e,
+				class: "log__goto",
+				type: "text",
+				inputmode: "numeric",
+				placeholder: "行号",
+				"aria-label": "跳转到行",
+				onKeydown: te(Ct, ["enter"])
+			}, null, 544), [[y, St.value]]),
+			s("span", me, [c(g(D.value.length) + " 行", 1), F.value ? (m(), o(r, { key: 0 }, [c(" · " + g(P.value.length) + " 堆栈", 1)], 64)) : a("", !0)]),
+			V.value ? (m(), o("div", {
+				key: 2,
+				class: "log__overlay",
+				onClick: i[7] ||= (e) => V.value = !1
+			})) : a("", !0),
+			V.value ? (m(), o("div", {
+				key: 3,
+				class: "log__rules",
+				onClick: i[9] ||= ne(() => {}, ["stop"])
+			}, [
+				i[14] ||= s("div", { class: "log__rules-head" }, [s("span", { class: "log__rules-title" }, "行上色规则"), s("span", { class: "log__rules-hint" }, "从上到下，首个匹配生效")], -1),
+				_(B).length ? a("", !0) : (m(), o("p", he, [...i[10] ||= [
+					c(" 还没有规则。添加一条，用关键字或正则给匹配行上色（如 ", -1),
+					s("code", null, "ERROR", -1),
+					c(" 标红）。 ", -1)
+				]])),
+				(m(!0), o(r, null, ee(_(B), (e, n) => (m(), o("div", {
+					key: e.id,
+					class: "log__rule"
+				}, [
+					x(s("input", {
+						"onUpdate:modelValue": (t) => e.enabled = t,
+						type: "checkbox",
+						title: "启用该规则"
+					}, null, 8, ge), [[v, e.enabled]]),
+					x(s("input", {
+						"onUpdate:modelValue": (t) => e.pattern = t,
+						class: d(["log__rule-pat", { "log__rule-pat--bad": Qe(e) }]),
+						type: "text",
+						placeholder: "关键字或正则"
+					}, null, 10, _e), [[y, e.pattern]]),
+					s("button", {
+						type: "button",
+						class: d(["log__rule-tog", { "log__rule-tog--on": e.regex }]),
+						title: "按正则匹配",
+						onClick: (t) => e.regex = !e.regex
+					}, " .* ", 10, ve),
+					s("button", {
+						type: "button",
+						class: d(["log__rule-tog", { "log__rule-tog--on": e.caseSensitive }]),
+						title: "区分大小写",
+						onClick: (t) => e.caseSensitive = !e.caseSensitive
+					}, " Aa ", 10, ye),
+					s("label", be, [
+						x(s("input", {
+							"onUpdate:modelValue": (t) => e.bgOn = t,
+							type: "checkbox"
+						}, null, 8, xe), [[v, e.bgOn]]),
+						x(s("input", {
+							"onUpdate:modelValue": (t) => e.bg = t,
+							type: "color",
+							disabled: !e.bgOn
+						}, null, 8, Se), [[y, e.bg]]),
+						i[11] ||= s("span", null, "底", -1)
+					]),
+					s("label", Ce, [
+						x(s("input", {
+							"onUpdate:modelValue": (t) => e.fgOn = t,
+							type: "checkbox"
+						}, null, 8, we), [[v, e.fgOn]]),
+						x(s("input", {
+							"onUpdate:modelValue": (t) => e.fg = t,
+							type: "color",
+							disabled: !e.fgOn
+						}, null, 8, Te), [[y, e.fg]]),
+						i[12] ||= s("span", null, "字", -1)
+					]),
+					s("button", {
+						type: "button",
+						class: "log__rule-ic",
+						title: "上移",
+						disabled: n === 0,
+						onClick: (t) => _(Ye)(e.id, -1)
+					}, [l(t, {
+						name: "arrowUp",
+						size: 12
+					})], 8, Ee),
+					s("button", {
+						type: "button",
+						class: "log__rule-ic",
+						title: "下移",
+						disabled: n === _(B).length - 1,
+						onClick: (t) => _(Ye)(e.id, 1)
+					}, [l(t, {
+						name: "arrowDown",
+						size: 12
+					})], 8, De),
+					s("button", {
+						type: "button",
+						class: "log__rule-ic log__rule-del",
+						title: "删除",
+						onClick: (t) => _(Je)(e.id)
+					}, [l(t, {
+						name: "trash",
+						size: 12
+					})], 8, Oe)
+				]))), 128)),
+				s("button", {
+					type: "button",
+					class: "log__rules-add",
+					onClick: i[8] ||= (...e) => _(qe) && _(qe)(...e)
+				}, [l(t, {
+					name: "plus",
+					size: 12
+				}), i[13] ||= c(" 添加规则 ", -1)])
+			])) : a("", !0)
+		]), s("div", {
+			ref_key: "scrollEl",
+			ref: O,
+			class: "log__scroll",
+			onScroll: wt
+		}, [s("div", {
+			class: "log__sizer",
+			style: f({ height: dt.value * S + "px" })
+		}, [s("div", {
+			class: "log__rows",
+			style: f({ paddingTop: mt.value * S + "px" })
+		}, [(m(!0), o(r, null, ee(_t.value, (e) => (m(), o("div", {
+			key: e.i,
+			class: d(["log__row", {
+				log__gaprow: e.isGap,
+				"log__row--active": !e.isGap && e.n - 1 === nt.value,
+				"log__row--header": !e.isGap && e.kind === "header",
+				"log__row--frame": !e.isGap && e.kind === "frame",
+				"log__row--context": e.context
+			}]),
+			style: f(!e.isGap && e.style && e.style.bg ? { background: e.style.bg } : void 0)
+		}, [e.isGap ? (m(), o(r, { key: 0 }, [
+			e.size > C ? (m(), o("button", {
+				key: 0,
+				type: "button",
+				class: "log__gapbtn",
+				title: `向下展开 ${e.step} 行（上方匹配之后）`,
+				onClick: (t) => X(e.top, e.bottom, "down")
+			}, [l(t, {
+				name: "chevronDown",
+				size: 12
+			})], 8, ke)) : a("", !0),
+			s("button", {
+				type: "button",
+				class: "log__gapmain",
+				title: `展开全部 ${e.size} 行`,
+				onClick: (t) => X(e.top, e.bottom, "all")
+			}, " ⋯ " + g(e.size) + " 行 ", 9, Ae),
+			e.size > C ? (m(), o("button", {
+				key: 1,
+				type: "button",
+				class: "log__gapbtn log__gapbtn--up",
+				title: `向上展开 ${e.step} 行（下方匹配之前）`,
+				onClick: (t) => X(e.top, e.bottom, "up")
+			}, [l(t, {
+				name: "chevronDown",
+				size: 12
+			})], 8, je)) : a("", !0)
+		], 64)) : (m(), o(r, { key: 1 }, [
+			s("span", Me, g(e.n), 1),
+			F.value ? (m(), o("span", Ne, [e.kind === "header" && !ut.value ? (m(), o("button", {
+				key: 0,
+				type: "button",
+				class: "log__fold",
+				title: e.collapsed ? "展开堆栈" : "折叠堆栈",
+				onClick: (t) => Ge(e.gid)
+			}, [l(t, {
+				name: "chevronRight",
+				size: 12,
+				class: d(["log__chev", { "log__chev--open": !e.collapsed }])
+			}, null, 8, ["class"])], 8, Pe)) : a("", !0)])) : a("", !0),
+			s("span", {
+				class: "log__tx",
+				style: f(e.style && e.style.fg ? { color: e.style.fg } : void 0),
+				innerHTML: vt(e.text)
+			}, null, 12, Fe),
+			e.kind === "header" && e.collapsed && !ut.value ? (m(), o("button", {
+				key: 1,
+				type: "button",
+				class: "log__badge",
+				title: "展开堆栈",
+				onClick: (t) => Ge(e.gid)
+			}, " ⋯ " + g(e.count) + " 帧 ", 9, Ie)) : a("", !0)
+		], 64))], 6))), 128))], 4)], 4)], 544)], 64))]));
+	}
+});
+//#endregion
+export { w as default };

package/dist/components/LrcViewer.js

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

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

@@ -0,0 +1,17 @@
+/**
+ * Side-viewer LRC lyrics renderer. Unlike the text-backed viewers, this one self-fetches the BYTES and sniffs
+ * the encoding (UTF-8 → GBK → lenient, see lib/encoding.ts) — QQ Music's `.lrc` files are almost always GBK
+ * and would be mojibake if read as UTF-8 text. The bytes are parsed in-browser (see lib/lrc.ts) into a synced
+ * lyric list (timestamp + text); HTML numeric entities common in those files are decoded too.
+ *
+ * Self-contained 歌词/源码 toggle (the panel's own toggle is for text-backed kinds, which this isn't): render
+ * shows the parsed lines, source shows the decoded raw text.
+ */
+type __VLS_Props = {
+    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;