dsh-scroll-piano 0.3.2 → 0.3.3

package/README.md

@@ -6,13 +6,14 @@
 
 - 聊天区右边缘一条细彩色竖条（开启时淡淡发光），鼠标进入该区间即触发。
 - 鼠标纵向移动 = 连续刮奏；竖条上有个白点跟随鼠标位置。
-- 竖条上有**「我的消息」刻度**：你每发一条消息，对应高度就有一根蓝色小横杠——一眼看出自己发的话都在哪。
-- **气泡只在鼠标贴住「你发的某条消息」时出现**（±24px 容差），内容就是那条消息的正文（最多 3 行）+「点击跳转」提示；**其余位置整个不显示**（不显示音名、不显示 MIDI 数字）。
+- 竖条上有**「我的消息」小地图刻度**：你每发一条消息，对应位置一根蓝色小横杠——**按「在整段对话里的位置」定位，与滚动无关**，所以不管你滚到对话多深，自己的消息始终标在那、点得到。
+- **气泡只在鼠标贴近某条刻度（±16px）时出现**，内容就是那条消息的正文（最多 3 行）+「点击跳转」提示；**其余位置整个不显示**（不显示音名、不显示 MIDI 数字）。
 - **点击气泡** → 平滑滚动，把那条消息滚到视口中央。
 - 左下角一枚 `🎵 滚动钢琴 ON/OFF` 胶囊：点开关切换、右侧滑块调音量（设置存 `localStorage`）。
 - 默认音域 C3–C6（3 个八度），只按半音触发（同音不重复触发）。
 
-> 预览**只显示用户自己发的消息**，且**不做「取全局最近一条」兜底**：鼠标离你所有消息都超过 ±24px 时气泡整个收起——否则在一个只有一条用户消息的视口里，滑到哪都显示同一条（就是「重复显示」）。位置感交给竖条刻度。声音与预览**彼此独立**——任何位置滑动都照常出声，只有预览挑消息。
+> 预览**只显示用户自己发的消息**，**不做「取全局最近一条」兜底**（否则同一条会在整片区域反复出现 = 重复显示），位置感交给刻度。**声音与预览彼此独立**——任何位置滑动都照常出声，只有预览挑消息。
+> 拿不到聊天区时（欢迎页 / 新会话还没有消息），触发区**退回窗口右边缘**，声音照出——否则那类页面连声音都没有（踩过）。
 
 ## 消息预览怎么定位
 
@@ -24,7 +25,7 @@
 | `14:assistant-stepN:M` | AI 消息 → 跳过 |
 | `12:turn-processN` / `["process",…]` / `9:turn-tailN` | 过程 / 工具调用 / 轮次尾 → 跳过 |
 
-滑动时按鼠标纵坐标 y 找**纵坐标落在其 `getBoundingClientRect()` 内**的那条用户消息，`innerText` 取正文（去掉末尾 `HH:MM` 时间戳）；点击时对该元素 `scrollIntoView({ block: "center" })`。**只认这些 `data-*` 属性**——容器类名（`icaHSq_flowItem`、`ST7X_W_scrollBody`）都带 hash，不碰。
+刻度 y = **消息在滚动内容里的偏移 ÷ 内容总长 × 视口高**（`r.top − 视口top + scrollTop` 得到内容坐标，再归一化），**与 scrollTop 无关**——滚多远都不变，消息不会"滚出屏幕"而看不见。鼠标贴近某条刻度（±16px）就取它 `innerText` 的正文（去掉末尾 `HH:MM` 时间戳）显示，点击时对该元素 `scrollIntoView({ block: "center" })`。**只认这些 `data-*` 属性**——容器类名（`icaHSq_flowItem`、`ST7X_W_scrollBody`）都带 hash，不碰。
 
 ## 触发区：聊天区右边缘，不是窗口右边缘
 

package/lib/client.js

@@ -167,53 +167,35 @@ window.__ModuleLoader__.load({
 		}
 
 		/**
-		 * 聊天区滚动容器的视口矩形——把触发区钉在**聊天区右边缘**，
-		 * 而不是窗口右边缘：右侧栏（文件预览等）打开时，窗口右边是面板，
-		 * 不该在面板上触发、更不该让气泡盖住面板。
+		 * 聊天区滚动容器的度量。`right` 用来把触发区钉在聊天区右边缘（右侧栏打开时不盖面板）；
+		 * `top/scrollTop/scrollHeight` 用来把**整段对话**压进竖条做小地图。
+		 *
+		 * 拿不到聊天区（欢迎页 / 新会话还没消息）时返回 null——调用方**退回窗口右边缘**，
+		 * 否则那类页面连钢琴声都不出（踩过）。
 		 */
 		function chatViewport() {
 			const el = findChatScroller();
 			if (!el) return null;
 			const r = el.getBoundingClientRect();
-			return { right: Math.round(r.right), top: Math.round(r.top), bottom: Math.round(r.bottom) };
+			return {
+				right: Math.round(r.right),
+				top: Math.round(r.top),
+				scrollTop: el.scrollTop,
+				scrollHeight: Math.max(1, el.scrollHeight),
+				clientHeight: Math.max(1, el.clientHeight)
+			};
 		}
 
 		/**
-		 * 取鼠标纵坐标附近的那条**用户消息**——只认「我输入的」，AI 回复一律不参与。
-		 * 稳定锚点是 `[data-chat-flow]` 的直接子元素，key 形如
-		 * `13:input-message<uuid>`（用户）/ `14:assistant-stepN:M`（AI）/
-		 * `12:turn-processN`（过程块），类名带 hash 所以只认 data 属性。
+		 * 把**整段对话**映射成竖条上的小地图刻度：每条用户消息一个 y（0..视口高）。
 		 *
-		 * **必须贴住消息本体**（超出 ±TOL 就算没有）：不搞「取全局最近一条」，
-		 * 否则在只有一个用户消息的视口里，鼠标滑到哪都显示同一条 = 重复显示。
-		 * 位置感交给竖条上的刻度（`userMessageTicks`）。
+		 * y 取的是「消息在**滚动内容**里的偏移 / 内容总长」，**与 scrollTop 无关**——
+		 * 所以不管滚到哪、滚多远，自己的消息刻度**始终在那**，看得见也点得到。
+		 * （上一版按视口坐标定位：滚到对话底部时你的消息 y 是 -4339，全跑到屏幕外了。）
 		 */
-		function userMessageAtY(y) {
-			const TOL = 24; // 允许鼠标略微超出消息边界，滑动更宽容
-			const flow = document.querySelector("[data-chat-flow]");
-			if (!flow) return null;
-			let best = null;
-			let bestDist = Infinity;
-			for (const el of flow.children) {
-				const key = String(el.getAttribute("data-chat-flow-key") || el.getAttribute("data-chat-node-key") || "");
-				if (!/input-message/.test(key)) continue;
-				const r = el.getBoundingClientRect();
-				if (r.height <= 0) continue;
-				const dist = y < r.top ? r.top - y : (y > r.bottom ? y - r.bottom : 0);
-				if (dist > TOL || dist >= bestDist) continue;
-				// innerText 抓渲染后的正文；末尾的 HH:MM 是消息时间戳，去掉
-				const text = (el.innerText || "").replace(/\s+/g, " ").trim().replace(/\s*\d{1,2}:\d{2}$/, "").trim();
-				if (!text) continue;
-				bestDist = dist;
-				best = { text, el, dist };
-			}
-			return best;
-		}
-
-		/** 列出当前所有用户消息在视口里的纵向中心（给竖条上的刻度用）。 */
-		function userMessageTicks() {
+		function minimapTicks(view) {
 			const flow = document.querySelector("[data-chat-flow]");
-			if (!flow) return [];
+			if (!flow || !view) return [];
 			const out = [];
 			for (const el of flow.children) {
 				const key = String(el.getAttribute("data-chat-flow-key") || el.getAttribute("data-chat-node-key") || "");
@@ -221,11 +203,26 @@ window.__ModuleLoader__.load({
 				const r = el.getBoundingClientRect();
 				if (r.height <= 0) continue;
 				if (!(el.innerText || "").trim()) continue;
-				out.push(Math.round(r.top + r.height / 2));
+				// 视口坐标 + 已滚动量 = 在滚动内容里的坐标
+				const contentCenter = r.top - view.top + view.scrollTop + r.height / 2;
+				const y = Math.round(contentCenter / view.scrollHeight * window.innerHeight);
+				out.push({ y, el });
 			}
 			return out;
 		}
 
+		/** 取小地图纵坐标 y 附近（±TOL）的那条用户消息；没有就 null → 气泡收起。 */
+		function messageNearTick(y, ticks) {
+			const TOL = 16;
+			let best = null;
+			let bestD = Infinity;
+			for (const t of ticks) {
+				const d = Math.abs(t.y - y);
+				if (d <= TOL && d < bestD) { bestD = d; best = t; }
+			}
+			return best;
+		}
+
 		//#region settings
 		const LS_KEY = "dsh-scroll-piano:settings";
 		const DEFAULTS = { on: true, volume: 0.25, stripWidth: 30, lowNote: 48, highNote: 84, inset: 56 };
@@ -253,6 +250,7 @@ window.__ModuleLoader__.load({
 			const roleRef = useRef(null);
 			const textRef = useRef(null);
 			const ticksRef = useRef(null);
+			const ticksDataRef = useRef([]); // [{y, el}] — 小地图刻度数据（showPreview 靠它找消息）
 			const activeMsgRef = useRef(null);
 
 			const setOn = useCallback((on) => {
@@ -277,20 +275,22 @@ window.__ModuleLoader__.load({
 				let mo = null;
 				let moTimer = 0;
 				let tickTimer = 0;
-				/** 竖条上给「我的消息」打刻度：一眼看出自己发的话都在哪。 */
+				/** 竖条上给「我的消息」打小地图刻度：不管滚到哪，自己的消息始终标在那。 */
 				const refreshTicks = () => {
 					const box = ticksRef.current;
+					const view = chatViewport();
+					const data = minimapTicks(view);
+					ticksDataRef.current = data;
 					if (!box) return;
-					const ys = userMessageTicks();
-					while (box.children.length > ys.length) box.removeChild(box.lastChild);
-					while (box.children.length < ys.length) {
+					while (box.children.length > data.length) box.removeChild(box.lastChild);
+					while (box.children.length < data.length) {
 						const i = document.createElement("i");
 						i.className = "dshscp_tick";
 						box.appendChild(i);
 					}
-					for (let i = 0; i < ys.length; i++) box.children[i].style.top = Math.round(ys[i]) + "px";
+					for (let i = 0; i < data.length; i++) box.children[i].style.top = data[i].y + "px";
 				};
-				// 滚动 / 流式更新会让刻度移位；节流到 150ms，避免 pointermove 上做布局读取
+				// 对话增长 / 面板开合会改内容总长 → 节流到 150ms 重算（刻度与 scrollTop 无关，滚动不用重算）
 				const scheduleTicks = () => {
 					if (tickTimer) return;
 					tickTimer = window.setTimeout(() => { tickTimer = 0; refreshTicks(); }, 150);
@@ -341,7 +341,11 @@ window.__ModuleLoader__.load({
 						return;
 					}
 					activeMsgRef.current = msg;
-					if (textRef.current) textRef.current.textContent = msg.text;
+					// 内容现取现算（消息可能被重新渲染）；去掉末尾的 HH:MM 时间戳
+					if (textRef.current) {
+						textRef.current.textContent = (msg.el.innerText || "")
+							.replace(/\s+/g, " ").trim().replace(/\s*\d{1,2}:\d{2}$/, "").trim();
+					}
 					el.style.pointerEvents = "auto";
 					el.style.cursor = "pointer";
 					// 竖直居中于鼠标，并夹在视口内
@@ -372,9 +376,9 @@ window.__ModuleLoader__.load({
 					if (!s.on) return;
 					if (overBubble(e.clientX, e.clientY)) return; // 鼠标停在气泡上（正要点击）
 					const view = placeAtChatEdge();
-					if (!view) return;
-					// 触发区 = 聊天区右边缘那一条；落在右侧面板上一律不响应
-					if (e.clientX < view.right - s.stripWidth || e.clientX > view.right + 2) {
+					// 没有聊天区（欢迎页 / 新会话还没消息）→ 退回窗口右边缘，声音照出（踩过：这里 return 会让声音都没）
+					const baseRight = view ? view.right : window.innerWidth;
+					if (e.clientX < baseRight - s.stripWidth || e.clientX > baseRight + 2) {
 						lastMidiRef.current = null;
 						hidePreview();
 						return;
@@ -384,8 +388,8 @@ window.__ModuleLoader__.load({
 					// t=0（顶部）→ highNote；t=1（底部）→ lowNote
 					const midi = Math.round(s.highNote - t * (s.highNote - s.lowNote));
 					showMarker(e.clientY);
-					// 预览只挑「我发的消息」里离鼠标最近的那条（不显示音名/MIDI）
-					showPreview(e.clientY, userMessageAtY(e.clientY));
+					// 预览只挑「我发的消息」里离该刻度最近的那条（不显示音名/MIDI）
+					showPreview(e.clientY, messageNearTick(e.clientY, ticksDataRef.current));
 					if (markerRef.current) markerRef.current.classList.add("dshscp_markerOn");
 					if (midi !== lastMidiRef.current) {
 						lastMidiRef.current = midi;
@@ -403,14 +407,13 @@ window.__ModuleLoader__.load({
 				};
 				document.addEventListener("pointermove", onMove, { passive: true });
 				document.addEventListener("pointerleave", onLeave);
-				document.addEventListener("scroll", scheduleTicks, { passive: true, capture: true });
+				// 不需要监听 scroll：刻度是按「内容偏移/内容总长」算的，与 scrollTop 无关
 				window.addEventListener("blur", onLeave);
 				window.addEventListener("resize", placeAtChatEdge);
 				placeAtChatEdge();
 				return () => {
 					document.removeEventListener("pointermove", onMove);
 					document.removeEventListener("pointerleave", onLeave);
-					document.removeEventListener("scroll", scheduleTicks, { capture: true });
 					window.removeEventListener("blur", onLeave);
 					window.removeEventListener("resize", placeAtChatEdge);
 					if (ro) ro.disconnect();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-scroll-piano",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "滚动钢琴：鼠标滑过 DSH 右侧边缘的滚动条竖条时，按纵向位置发出钢琴音（越高音越高，特雷门琴式）。",
   "type": "module",
   "license": "MIT",