dsh-heatmap 0.1.0

package/lib/client.js

@@ -0,0 +1,897 @@
+window.__ModuleLoader__.load({
+	id: "dsh-heatmap",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let react = require("react");
+		let react_jsx_runtime = require("react/jsx-runtime");
+		//#region src/client/storage.ts
+		const EVENTS_KEY = "dsh-heatmap.events.v1";
+		const SETTINGS_KEY = "dsh-heatmap.settings.v1";
+		const CONSENT_KEY = "dsh-heatmap.consent.v1";
+		const DEFAULT_SETTINGS = {
+			heatmapMode: false,
+			trackingEnabled: true,
+			trackMouse: false,
+			sampleRate: 1,
+			uploadEndpoint: "",
+			consentRequired: true,
+			maxEvents: 5e3
+		};
+		function readSettings() {
+			try {
+				const raw = localStorage.getItem(SETTINGS_KEY);
+				if (!raw) return { ...DEFAULT_SETTINGS };
+				return {
+					...DEFAULT_SETTINGS,
+					...JSON.parse(raw)
+				};
+			} catch {
+				return { ...DEFAULT_SETTINGS };
+			}
+		}
+		/** 当前生效设置（可变引用，供埋点引擎实时读取）。 */
+		let currentSettings = readSettings();
+		function getSettings() {
+			return currentSettings;
+		}
+		function saveSettings(next) {
+			currentSettings = { ...next };
+			try {
+				localStorage.setItem(SETTINGS_KEY, JSON.stringify(currentSettings));
+			} catch {}
+		}
+		let currentSessionId = "";
+		function getSessionId() {
+			return currentSessionId;
+		}
+		function setSessionId(id) {
+			currentSessionId = id;
+		}
+		/** 本地事件环形缓冲（内存 + localStorage 持久化）。 */
+		var ClientEventStore = class {
+			events = [];
+			loaded = false;
+			ensureLoaded() {
+				if (this.loaded) return;
+				this.loaded = true;
+				try {
+					const raw = localStorage.getItem(EVENTS_KEY);
+					this.events = raw ? JSON.parse(raw) : [];
+				} catch {
+					this.events = [];
+				}
+			}
+			push(event, maxEvents) {
+				this.ensureLoaded();
+				this.events.push(event);
+				if (this.events.length > maxEvents) this.events = this.events.slice(-maxEvents);
+			}
+			flush() {
+				try {
+					localStorage.setItem(EVENTS_KEY, JSON.stringify(this.events));
+				} catch {}
+			}
+			all() {
+				this.ensureLoaded();
+				return this.events;
+			}
+			clear() {
+				this.events = [];
+				try {
+					localStorage.removeItem(EVENTS_KEY);
+				} catch {}
+			}
+			buildBatch(sessionId) {
+				this.ensureLoaded();
+				return {
+					v: 1,
+					sessionId,
+					sentAt: Date.now(),
+					events: this.events
+				};
+			}
+		};
+		const clientStore = new ClientEventStore();
+		function hasConsented() {
+			try {
+				return localStorage.getItem(CONSENT_KEY) === "1";
+			} catch {
+				return false;
+			}
+		}
+		function setConsented(value) {
+			try {
+				localStorage.setItem(CONSENT_KEY, value ? "1" : "0");
+			} catch {}
+		}
+		//#endregion
+		//#region src/client/tracker.ts
+		function uuid() {
+			try {
+				return crypto.randomUUID();
+			} catch {
+				return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+			}
+		}
+		/** 参与「元素身份」识别的语义标签；点击落在子节点时向上寻找最近的可交互元素。 */
+		const INTERACTIVE_TAGS = /* @__PURE__ */ new Set([
+			"BUTTON",
+			"A",
+			"INPUT",
+			"TEXTAREA",
+			"SELECT",
+			"OPTION",
+			"LABEL",
+			"SUMMARY",
+			"DETAILS",
+			"LI",
+			"DIV",
+			"SPAN",
+			"P",
+			"H1",
+			"H2",
+			"H3",
+			"H4",
+			"H5",
+			"H6"
+		]);
+		function nearestInteractive(el) {
+			let cur = el;
+			while (cur && cur !== document.body && cur !== document.documentElement) {
+				if (INTERACTIVE_TAGS.has(cur.tagName)) return cur;
+				cur = cur.parentElement;
+			}
+			return el;
+		}
+		function textOf(el) {
+			const t = (el.textContent ?? "").replace(/\s+/g, " ").trim();
+			if (t === "") return void 0;
+			return t.length > 40 ? `${t.slice(0, 40)}…` : t;
+		}
+		/**
+		* 生成稳定的元素身份（优先 data-testid > id > aria-label > role+tag > placeholder/name > tag+text）。
+		* 隐私保护：input/textarea/select 与 contenteditable 元素绝不采集其内容/文案。
+		*/
+		function identify(el) {
+			if (!el || el === document.body || el === document.documentElement) return void 0;
+			const tag = el.tagName.toLowerCase();
+			const testId = el.getAttribute("data-testid") ?? el.getAttribute("data-test-id") ?? void 0;
+			const id = el.id || void 0;
+			const ariaLabel = el.getAttribute("aria-label") ?? void 0;
+			const role = el.getAttribute("role") ?? void 0;
+			const title = el.getAttribute("title") ?? void 0;
+			const isInputLike = tag === "input" || tag === "textarea" || tag === "select" || el.isContentEditable === true;
+			const name = isInputLike ? el.getAttribute("name") ?? void 0 : void 0;
+			const placeholder = isInputLike ? el.getAttribute("placeholder") ?? void 0 : void 0;
+			const text = isInputLike ? void 0 : textOf(el);
+			const elementId = testId ?? id ?? ariaLabel ?? (role ? `${role}#${tag}` : void 0) ?? (placeholder ? `${tag}[${placeholder}]` : void 0) ?? (name ? `${tag}#${name}` : void 0) ?? `${tag}${text ? `:${text}` : ""}`;
+			return {
+				tag,
+				...id !== void 0 ? { id } : {},
+				...role !== void 0 ? { role } : {},
+				...ariaLabel !== void 0 ? { ariaLabel } : {},
+				...title !== void 0 ? { title } : {},
+				...testId !== void 0 ? { testId } : {},
+				...name !== void 0 ? { name } : {},
+				...placeholder !== void 0 ? { placeholder } : {},
+				...text !== void 0 ? { text } : {},
+				elementId
+			};
+		}
+		function createTracker() {
+			const sessionId = uuid();
+			setSessionId(sessionId);
+			const page = () => ({
+				path: window.location.pathname,
+				hash: window.location.hash
+			});
+			const emit = (type, partial) => {
+				const s = getSettings();
+				if (!s.trackingEnabled) return;
+				if (s.sampleRate < 1 && Math.random() > s.sampleRate) return;
+				const event = {
+					v: 1,
+					id: uuid(),
+					ts: Date.now(),
+					sessionId,
+					type,
+					page: page(),
+					...partial
+				};
+				clientStore.push(event, s.maxEvents);
+			};
+			emit("session_start", {});
+			emit("page_view", {});
+			const onClick = (e) => {
+				emit("click", {
+					target: identify(nearestInteractive(e.target)),
+					position: {
+						x: e.clientX,
+						y: e.clientY
+					}
+				});
+			};
+			const onFocusIn = (e) => {
+				emit("focus", { target: identify(e.target) });
+			};
+			const onFocusOut = (e) => {
+				emit("blur", { target: identify(e.target) });
+			};
+			let lastHover = 0;
+			const onMouseMove = (e) => {
+				if (!getSettings().trackMouse) return;
+				const now = Date.now();
+				if (now - lastHover < 250) return;
+				lastHover = now;
+				emit("hover", {
+					position: {
+						x: e.clientX,
+						y: e.clientY
+					},
+					target: identify(nearestInteractive(e.target))
+				});
+			};
+			let scrollTimer;
+			const onScroll = () => {
+				if (scrollTimer !== void 0) return;
+				scrollTimer = window.setTimeout(() => {
+					scrollTimer = void 0;
+					const doc = document.documentElement;
+					const max = doc.scrollHeight - doc.clientHeight;
+					const depth = max > 0 ? Math.min(1, Math.max(0, doc.scrollTop / max)) : 0;
+					emit("scroll_depth", { depth: Math.round(depth * 100) / 100 });
+				}, 500);
+			};
+			const onVisibility = () => {
+				const visible = document.visibilityState === "visible";
+				emit("visibility", { visible });
+				if (!visible) emit("session_end", {});
+			};
+			let lastInput = 0;
+			const onInput = (e) => {
+				const now = Date.now();
+				if (now - lastInput < 1e3) return;
+				const el = e.target;
+				if (!el || !("value" in el)) return;
+				lastInput = now;
+				emit("input", {
+					target: identify(el),
+					inputLength: el.value.length
+				});
+			};
+			const onHashChange = () => {
+				emit("page_view", {});
+			};
+			const onPageHide = () => {
+				emit("session_end", {});
+				clientStore.flush();
+			};
+			const impressed = /* @__PURE__ */ new WeakSet();
+			const IMPRESSION_SELECTOR = "[data-testid], [data-impression], [role=\"main\"], [role=\"region\"], [role=\"dialog\"], [role=\"navigation\"], [role=\"complementary\"]";
+			const impressionObserver = new IntersectionObserver((entries) => {
+				for (const entry of entries) if (entry.isIntersecting && entry.intersectionRatio >= .5 && !impressed.has(entry.target)) {
+					impressed.add(entry.target);
+					impressionObserver.unobserve(entry.target);
+					emit("impression", { target: identify(entry.target) });
+				}
+			}, { threshold: [.5] });
+			const scanImpressions = () => {
+				document.querySelectorAll(IMPRESSION_SELECTOR).forEach((el) => {
+					if (!impressed.has(el)) impressionObserver.observe(el);
+				});
+			};
+			scanImpressions();
+			const impressionTimer = window.setInterval(scanImpressions, 2500);
+			document.addEventListener("click", onClick, true);
+			document.addEventListener("focusin", onFocusIn, true);
+			document.addEventListener("focusout", onFocusOut, true);
+			document.addEventListener("mousemove", onMouseMove, true);
+			document.addEventListener("scroll", onScroll, true);
+			document.addEventListener("input", onInput, true);
+			document.addEventListener("visibilitychange", onVisibility);
+			window.addEventListener("hashchange", onHashChange);
+			window.addEventListener("pagehide", onPageHide);
+			const flushTimer = window.setInterval(() => clientStore.flush(), 3e3);
+			return { dispose() {
+				document.removeEventListener("click", onClick, true);
+				document.removeEventListener("focusin", onFocusIn, true);
+				document.removeEventListener("focusout", onFocusOut, true);
+				document.removeEventListener("mousemove", onMouseMove, true);
+				document.removeEventListener("scroll", onScroll, true);
+				document.removeEventListener("input", onInput, true);
+				document.removeEventListener("visibilitychange", onVisibility);
+				window.removeEventListener("hashchange", onHashChange);
+				window.removeEventListener("pagehide", onPageHide);
+				window.clearInterval(flushTimer);
+				window.clearInterval(impressionTimer);
+				impressionObserver.disconnect();
+				if (scrollTimer !== void 0) window.clearTimeout(scrollTimer);
+				clientStore.flush();
+			} };
+		}
+		//#endregion
+		//#region src/client/ConsentModal.tsx
+		const backdrop = {
+			position: "fixed",
+			inset: 0,
+			background: "rgba(0, 0, 0, 0.55)",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			zIndex: 2e4,
+			pointerEvents: "auto"
+		};
+		const dialog = {
+			width: 420,
+			maxWidth: "calc(100vw - 32px)",
+			background: "#1e1f24",
+			border: "1px solid #3a3c44",
+			borderRadius: 10,
+			padding: 18,
+			color: "#e6e6e6",
+			boxShadow: "0 12px 40px rgba(0,0,0,0.5)",
+			fontSize: 13,
+			lineHeight: 1.6
+		};
+		function ConsentModal(props) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: backdrop,
+				onClick: props.onCancel,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: dialog,
+					onClick: (e) => e.stopPropagation(),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							style: {
+								fontSize: 15,
+								fontWeight: 700,
+								marginBottom: 10
+							},
+							children: "数据上传授权"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							style: { margin: "0 0 10px" },
+							children: [
+								"即将把 ",
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: props.count }),
+								" 条使用埋点数据（点击、聚焦、停留、滚动、鼠标位置等）上传到："
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							style: {
+								background: "#141519",
+								border: "1px solid #3a3c44",
+								borderRadius: 6,
+								padding: "8px 10px",
+								marginBottom: 10,
+								wordBreak: "break-all",
+								fontFamily: "monospace",
+								fontSize: 12
+							},
+							children: props.destination
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							style: {
+								margin: "0 0 12px",
+								color: "#aab"
+							},
+							children: [
+								"隐私承诺：数据仅包含页面控件身份、坐标、时间与视口信息，",
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: "不包含对话正文、输入内容或个人身份信息" }),
+								"。 只有在你点击「同意并上传」后，数据才会被发送。"
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								justifyContent: "flex-end",
+								gap: 8
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								onClick: props.onCancel,
+								style: btn$1("#2a2b30", "#ccc"),
+								children: "取消"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								onClick: props.onAgree,
+								style: btn$1("#3a82f7", "#fff"),
+								children: "同意并上传"
+							})]
+						})
+					]
+				})
+			});
+		}
+		function btn$1(bg, color) {
+			return {
+				background: bg,
+				color,
+				border: "1px solid #4a4c55",
+				borderRadius: 6,
+				padding: "6px 14px",
+				fontSize: 13,
+				cursor: "pointer"
+			};
+		}
+		//#endregion
+		//#region src/client/HeatmapOverlay.tsx
+		/**
+		* 热力图覆盖层 + 统计面板 + 设置 + 上传（含授权弹窗）。
+		*
+		* 注册进 `shell.overlay`（additive list slot）。热力图数据只来自本地采集，
+		* 面板明确标注「本地 / 本人」数据。
+		*/
+		function computeStats(events) {
+			let clicks = 0;
+			let focus = 0;
+			let impressions = 0;
+			const sessions = /* @__PURE__ */ new Set();
+			const top = /* @__PURE__ */ new Map();
+			let dwellMs = 0;
+			let visibleStart = 0;
+			let maxDepth = 0;
+			for (const e of events) {
+				sessions.add(e.sessionId);
+				if (e.type === "click") {
+					clicks += 1;
+					if (e.target?.elementId) top.set(e.target.elementId, (top.get(e.target.elementId) ?? 0) + 1);
+				}
+				if (e.type === "focus") focus += 1;
+				if (e.type === "impression") impressions += 1;
+				if (e.type === "visibility") {
+					if (e.visible) {
+						if (visibleStart === 0) visibleStart = e.ts;
+					} else if (visibleStart > 0) {
+						dwellMs += e.ts - visibleStart;
+						visibleStart = 0;
+					}
+				}
+				if (e.type === "scroll_depth" && e.depth !== void 0 && e.depth > maxDepth) maxDepth = e.depth;
+			}
+			if (visibleStart > 0) dwellMs += Date.now() - visibleStart;
+			const topList = [...top.entries()].sort((a, b) => b[1] - a[1]).slice(0, 5).map(([elementId, count]) => ({
+				elementId,
+				count
+			}));
+			return {
+				total: events.length,
+				clicks,
+				focus,
+				impressions,
+				sessions: sessions.size,
+				dwellMs,
+				maxDepth,
+				top: topList
+			};
+		}
+		/** 热度色带：透明 → 蓝 → 青 → 绿 → 黄 → 红。 */
+		function heatColor(t) {
+			const stops = [
+				[0, [
+					0,
+					60,
+					255
+				]],
+				[.35, [
+					0,
+					220,
+					255
+				]],
+				[.6, [
+					30,
+					230,
+					60
+				]],
+				[.8, [
+					255,
+					220,
+					0
+				]],
+				[1, [
+					255,
+					30,
+					0
+				]]
+			];
+			let a = stops[0];
+			let b = stops[stops.length - 1];
+			for (let i = 0; i < stops.length - 1; i += 1) if (t >= stops[i][0] && t <= stops[i + 1][0]) {
+				a = stops[i];
+				b = stops[i + 1];
+				break;
+			}
+			const span = b[0] - a[0] || 1;
+			const k = Math.min(1, Math.max(0, (t - a[0]) / span));
+			return `rgba(${Math.round(a[1][0] + (b[1][0] - a[1][0]) * k)}, ${Math.round(a[1][1] + (b[1][1] - a[1][1]) * k)}, ${Math.round(a[1][2] + (b[1][2] - a[1][2]) * k)}, ${.28 + .5 * t})`;
+		}
+		function drawHeatmap(canvas, events) {
+			const dpr = window.devicePixelRatio || 1;
+			const w = window.innerWidth;
+			const h = window.innerHeight;
+			canvas.width = Math.floor(w * dpr);
+			canvas.height = Math.floor(h * dpr);
+			canvas.style.width = `${w}px`;
+			canvas.style.height = `${h}px`;
+			const ctx = canvas.getContext("2d");
+			if (!ctx) return;
+			ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+			ctx.clearRect(0, 0, w, h);
+			const CELL = 22;
+			const cols = Math.ceil(w / CELL);
+			const rows = Math.ceil(h / CELL);
+			const grid = new Int32Array(rows * cols);
+			let max = 0;
+			for (const e of events) {
+				if (!e.position) continue;
+				const gx = Math.floor(e.position.x / CELL);
+				const gy = Math.floor(e.position.y / CELL);
+				if (gx < 0 || gy < 0 || gx >= cols || gy >= rows) continue;
+				const idx = gy * cols + gx;
+				grid[idx] += e.type === "click" ? 3 : 1;
+				if (grid[idx] > max) max = grid[idx];
+			}
+			if (max === 0) return;
+			for (let gy = 0; gy < rows; gy += 1) for (let gx = 0; gx < cols; gx += 1) {
+				const v = grid[gy * cols + gx];
+				if (v === 0) continue;
+				const t = v / max;
+				ctx.fillStyle = heatColor(t);
+				ctx.beginPath();
+				const radius = CELL * (.35 + .55 * t);
+				ctx.arc(gx * CELL + CELL / 2, gy * CELL + CELL / 2, radius, 0, Math.PI * 2);
+				ctx.fill();
+			}
+		}
+		function fmtDuration(ms) {
+			if (ms < 1e3) return `${ms}ms`;
+			const s = Math.floor(ms / 1e3);
+			if (s < 60) return `${s}s`;
+			return `${Math.floor(s / 60)}m ${s % 60}s`;
+		}
+		const panelStyle = {
+			position: "fixed",
+			right: 16,
+			bottom: 16,
+			width: 300,
+			background: "#1e1f24",
+			border: "1px solid #3a3c44",
+			borderRadius: 10,
+			padding: 14,
+			color: "#e6e6e6",
+			boxShadow: "0 8px 30px rgba(0,0,0,0.45)",
+			fontSize: 12,
+			zIndex: 1e4,
+			pointerEvents: "auto",
+			display: "flex",
+			flexDirection: "column",
+			gap: 8
+		};
+		function HeatmapOverlay() {
+			const [settings, setSettings] = (0, react.useState)(() => getSettings());
+			const [open, setOpen] = (0, react.useState)(false);
+			const [consentOpen, setConsentOpen] = (0, react.useState)(false);
+			const [uploadMsg, setUploadMsg] = (0, react.useState)(null);
+			const [tick, setTick] = (0, react.useState)(0);
+			const canvasRef = (0, react.useRef)(null);
+			(0, react.useEffect)(() => {
+				const timer = window.setInterval(() => setTick((v) => v + 1), 1e3);
+				return () => window.clearInterval(timer);
+			}, []);
+			(0, react.useEffect)(() => {
+				if (!settings.heatmapMode || !canvasRef.current) return;
+				const redraw = () => drawHeatmap(canvasRef.current, clientStore.all());
+				redraw();
+				const resize = () => redraw();
+				window.addEventListener("resize", resize);
+				const timer = window.setInterval(redraw, 1e3);
+				return () => {
+					window.removeEventListener("resize", resize);
+					window.clearInterval(timer);
+				};
+			}, [settings.heatmapMode, tick]);
+			const s = computeStats(clientStore.all());
+			const destination = settings.uploadEndpoint !== "" ? settings.uploadEndpoint : `${window.location.origin}/dsh-heatmap/ingest`;
+			const update = (patch) => {
+				const next = {
+					...settings,
+					...patch
+				};
+				setSettings(next);
+				saveSettings(next);
+			};
+			const doUpload = (0, react.useCallback)(async () => {
+				const batch = clientStore.buildBatch(getSessionId());
+				setConsentOpen(false);
+				setUploadMsg("上传中…");
+				try {
+					const res = await fetch(destination, {
+						method: "POST",
+						headers: { "content-type": "application/json" },
+						body: JSON.stringify(batch)
+					});
+					if (res.ok) setUploadMsg(`已上传 ${batch.events.length} 条埋点数据`);
+					else setUploadMsg(`上传失败（HTTP ${res.status}）`);
+				} catch (err) {
+					setUploadMsg(`上传失败：${err instanceof Error ? err.message : String(err)}`);
+				}
+			}, [destination]);
+			const onUploadClick = () => {
+				setUploadMsg(null);
+				if (settings.consentRequired && !hasConsented()) {
+					setConsentOpen(true);
+					return;
+				}
+				doUpload();
+			};
+			const onAgree = () => {
+				setConsented(true);
+				doUpload();
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				settings.heatmapMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
+					ref: canvasRef,
+					style: {
+						position: "fixed",
+						inset: 0,
+						zIndex: 9e3,
+						pointerEvents: "none"
+					}
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					onClick: () => setOpen((v) => !v),
+					style: {
+						position: "fixed",
+						right: 16,
+						bottom: 16,
+						zIndex: 10001,
+						width: 44,
+						height: 44,
+						borderRadius: 22,
+						cursor: "pointer",
+						background: settings.heatmapMode ? "#e0483e" : "#2a2b30",
+						color: "#fff",
+						border: "1px solid #4a4c55",
+						fontSize: 18,
+						boxShadow: "0 4px 16px rgba(0,0,0,0.4)",
+						pointerEvents: "auto"
+					},
+					title: "dsh-heatmap 埋点与热力图",
+					children: "🔥"
+				}),
+				open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: panelStyle,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								justifyContent: "space-between",
+								alignItems: "center"
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", {
+								style: { fontSize: 13 },
+								children: "dsh-heatmap"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: {
+									fontSize: 10,
+									background: "#123",
+									color: "#9cf",
+									padding: "1px 6px",
+									borderRadius: 8
+								},
+								children: "本地 / 本人数据"
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								background: "#141519",
+								borderRadius: 6,
+								padding: "8px 10px",
+								display: "flex",
+								flexDirection: "column",
+								gap: 3
+							},
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+									label: "事件总数",
+									value: String(s.total)
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+									label: "点击",
+									value: String(s.clicks)
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+									label: "聚焦",
+									value: String(s.focus)
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+									label: "曝光",
+									value: String(s.impressions)
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+									label: "会话数",
+									value: String(s.sessions)
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+									label: "停留时长",
+									value: fmtDuration(s.dwellMs)
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+									label: "最大滚动",
+									value: `${Math.round(s.maxDepth * 100)}%`
+								})
+							]
+						}),
+						s.top.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								background: "#141519",
+								borderRadius: 6,
+								padding: "8px 10px"
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								style: {
+									marginBottom: 4,
+									fontWeight: 600
+								},
+								children: "点击最多的控件"
+							}), s.top.map((t) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								style: {
+									display: "flex",
+									justifyContent: "space-between",
+									fontSize: 11,
+									color: "#bbb"
+								},
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: {
+										overflow: "hidden",
+										textOverflow: "ellipsis",
+										whiteSpace: "nowrap",
+										maxWidth: 200
+									},
+									children: t.elementId
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t.count })]
+							}, t.elementId))]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
+							label: "热力图模式",
+							checked: settings.heatmapMode,
+							onChange: (v) => update({ heatmapMode: v })
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
+							label: "采集埋点",
+							checked: settings.trackingEnabled,
+							onChange: (v) => update({ trackingEnabled: v })
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
+							label: "鼠标热力图",
+							checked: settings.trackMouse,
+							onChange: (v) => update({ trackMouse: v })
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
+							label: "上传需授权",
+							checked: settings.consentRequired,
+							onChange: (v) => update({ consentRequired: v })
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: 3
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+								style: {
+									fontSize: 11,
+									color: "#aaa"
+								},
+								children: "上传地址（留空 = 本地收集器）"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								value: settings.uploadEndpoint,
+								onChange: (e) => update({ uploadEndpoint: e.target.value }),
+								placeholder: destination,
+								style: {
+									fontSize: 11,
+									padding: "4px 6px",
+									background: "#141519",
+									color: "#ddd",
+									border: "1px solid #3a3c44",
+									borderRadius: 5
+								}
+							})]
+						}),
+						uploadMsg && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							style: {
+								fontSize: 11,
+								color: uploadMsg.startsWith("已上传") ? "#8e8" : "#e88"
+							},
+							children: uploadMsg
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								gap: 6
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								onClick: onUploadClick,
+								style: btn("#3a82f7", "#fff", true),
+								children: "上传数据"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								onClick: () => {
+									clientStore.clear();
+									setTick((v) => v + 1);
+								},
+								style: btn("#2a2b30", "#ccc"),
+								children: "清除本地"
+							})]
+						})
+					]
+				}),
+				consentOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsentModal, {
+					destination,
+					count: clientStore.all().length,
+					onCancel: () => setConsentOpen(false),
+					onAgree
+				})
+			] });
+		}
+		function Row({ label, value }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					justifyContent: "space-between"
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: { color: "#999" },
+					children: label
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: { fontWeight: 600 },
+					children: value
+				})]
+			});
+		}
+		function Toggle({ label, checked, onChange }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				style: {
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center",
+					cursor: "pointer"
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "checkbox",
+					checked,
+					onChange: (e) => onChange(e.target.checked)
+				})]
+			});
+		}
+		function btn(bg, color, primary = false) {
+			return {
+				flex: primary ? 1.4 : 1,
+				background: bg,
+				color,
+				border: "1px solid #4a4c55",
+				borderRadius: 6,
+				padding: "6px 10px",
+				fontSize: 12,
+				cursor: "pointer"
+			};
+		}
+		//#endregion
+		//#region src/client/index.ts
+		const inject = ["slots"];
+		function apply(ctx) {
+			const tracker = createTracker();
+			ctx.effect(() => () => tracker.dispose(), "dsh-heatmap: tracker");
+			ctx.slots.register({
+				name: "shell.overlay",
+				id: "dsh-heatmap-overlay",
+				order: 1e3
+			}, HeatmapOverlay);
+		}
+		//#endregion
+		exports.apply = apply;
+		exports.inject = inject;
+		return module.exports;
+	}
+});
+
+//# sourceMappingURL=client.js.map