dsh-scroll-piano 0.3.1 → 0.3.2

package/README.md

@@ -6,12 +6,13 @@
 
 - 聊天区右边缘一条细彩色竖条（开启时淡淡发光），鼠标进入该区间即触发。
 - 鼠标纵向移动 = 连续刮奏；竖条上有个白点跟随鼠标位置。
-- **气泡只在鼠标正落在「你发的某条消息」上时出现**，内容就是那条消息的正文（最多 3 行）+「点击跳转」提示；**其余位置整个不显示**（不显示音名、不显示 MIDI 数字）。
+- 竖条上有**「我的消息」刻度**：你每发一条消息，对应高度就有一根蓝色小横杠——一眼看出自己发的话都在哪。
+- **气泡只在鼠标贴住「你发的某条消息」时出现**（±24px 容差），内容就是那条消息的正文（最多 3 行）+「点击跳转」提示；**其余位置整个不显示**（不显示音名、不显示 MIDI 数字）。
 - **点击气泡** → 平滑滚动，把那条消息滚到视口中央。
 - 左下角一枚 `🎵 滚动钢琴 ON/OFF` 胶囊：点开关切换、右侧滑块调音量（设置存 `localStorage`）。
 - 默认音域 C3–C6（3 个八度），只按半音触发（同音不重复触发）。
 
-> 预览**只显示用户自己发的消息**，且**不做「取最近一条」兜底**：滑到 AI 回复 / 工具调用 / 过程块上时气泡整个收起，避免同一条消息在整片区域里被反复显示。声音与预览**彼此独立**——任何位置滑动都照常出声，只有预览挑消息。
+> 预览**只显示用户自己发的消息**，且**不做「取全局最近一条」兜底**：鼠标离你所有消息都超过 ±24px 时气泡整个收起——否则在一个只有一条用户消息的视口里，滑到哪都显示同一条（就是「重复显示」）。位置感交给竖条刻度。声音与预览**彼此独立**——任何位置滑动都照常出声，只有预览挑消息。
 
 ## 消息预览怎么定位
 

package/lib/client.js

@@ -30,6 +30,8 @@ window.__ModuleLoader__.load({
 			".dshscp_vol{width:76px;accent-color:var(--dsw-alias-state-business-primary,#5b8def)}",
 			".dshscp_strip{position:fixed;top:0;right:0;width:3px;height:100%;z-index:2147482000;pointer-events:none;background:linear-gradient(180deg,rgba(91,141,239,.85),rgba(160,120,240,.85));opacity:0;transition:opacity .15s ease}",
 			".dshscp_stripOn{opacity:.55}",
+			".dshscp_ticks{position:fixed;top:0;right:0;width:9px;height:100%;z-index:2147482000;pointer-events:none}",
+			".dshscp_tick{position:absolute;right:0;width:7px;height:2px;border-radius:1px;background:rgba(91,141,239,.95);box-shadow:0 0 4px rgba(91,141,239,.7)}",
 			".dshscp_marker{position:fixed;right:0;width:7px;height:7px;border-radius:50%;z-index:2147482001;pointer-events:none;background:#fff;box-shadow:0 0 8px rgba(160,120,240,.95);opacity:0;transition:opacity .1s ease}",
 			".dshscp_markerOn{opacity:1}",
 			".dshscp_prev{position:fixed;right:18px;z-index:2147482002;pointer-events:none;max-width:min(320px,42vw);padding:7px 10px;border-radius:9px;background:rgba(20,24,32,.95);color:#e6e8ee;box-shadow:0 6px 22px rgba(0,0,0,.45);opacity:0;transition:opacity .1s ease}",
@@ -177,28 +179,51 @@ window.__ModuleLoader__.load({
 		}
 
 		/**
-		 * 取**纵坐标 y 落在其范围内**的那条**用户消息**——只预览「我输入的」，
-		 * 不预览 AI 的。稳定锚点是 `[data-chat-flow]` 的直接子元素，key 形如
+		 * 取鼠标纵坐标附近的那条**用户消息**——只认「我输入的」，AI 回复一律不参与。
+		 * 稳定锚点是 `[data-chat-flow]` 的直接子元素，key 形如
 		 * `13:input-message<uuid>`（用户）/ `14:assistant-stepN:M`（AI）/
 		 * `12:turn-processN`（过程块），类名带 hash 所以只认 data 属性。
 		 *
-		 * 刻意**不做「取最近一条」兜底**：滑到 AI / 过程块上就返回 null（预览收起），
-		 * 否则同一条用户消息会在整片区域里被反复显示（就是「重复显示」）。
+		 * **必须贴住消息本体**（超出 ±TOL 就算没有）：不搞「取全局最近一条」，
+		 * 否则在只有一个用户消息的视口里，鼠标滑到哪都显示同一条 = 重复显示。
+		 * 位置感交给竖条上的刻度（`userMessageTicks`）。
 		 */
 		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 || y < r.top || y > r.bottom) continue;
+				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;
-				return { text, el };
+				bestDist = dist;
+				best = { text, el, dist };
 			}
-			return null;
+			return best;
+		}
+
+		/** 列出当前所有用户消息在视口里的纵向中心（给竖条上的刻度用）。 */
+		function userMessageTicks() {
+			const flow = document.querySelector("[data-chat-flow]");
+			if (!flow) return [];
+			const out = [];
+			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;
+				if (!(el.innerText || "").trim()) continue;
+				out.push(Math.round(r.top + r.height / 2));
+			}
+			return out;
 		}
 
 		//#region settings
@@ -227,7 +252,7 @@ window.__ModuleLoader__.load({
 			const prevRef = useRef(null);
 			const roleRef = useRef(null);
 			const textRef = useRef(null);
-			const bubbleHoverRef = useRef(false);
+			const ticksRef = useRef(null);
 			const activeMsgRef = useRef(null);
 
 			const setOn = useCallback((on) => {
@@ -251,6 +276,25 @@ window.__ModuleLoader__.load({
 				let roEl = null;
 				let mo = null;
 				let moTimer = 0;
+				let tickTimer = 0;
+				/** 竖条上给「我的消息」打刻度：一眼看出自己发的话都在哪。 */
+				const refreshTicks = () => {
+					const box = ticksRef.current;
+					if (!box) return;
+					const ys = userMessageTicks();
+					while (box.children.length > ys.length) box.removeChild(box.lastChild);
+					while (box.children.length < ys.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";
+				};
+				// 滚动 / 流式更新会让刻度移位；节流到 150ms，避免 pointermove 上做布局读取
+				const scheduleTicks = () => {
+					if (tickTimer) return;
+					tickTimer = window.setTimeout(() => { tickTimer = 0; refreshTicks(); }, 150);
+				};
 				/** 把竖条 / 圆点 / 气泡钉到聊天区右边缘（右侧面板打开时跟着左移）。 */
 				const placeAtChatEdge = () => {
 					const view = chatViewport();
@@ -258,6 +302,8 @@ window.__ModuleLoader__.load({
 					if (stripRef.current) stripRef.current.style.right = rightPx + "px";
 					if (markerRef.current) markerRef.current.style.right = rightPx + "px";
 					if (prevRef.current) prevRef.current.style.right = rightPx + 18 + "px";
+					if (ticksRef.current) ticksRef.current.style.right = rightPx + "px";
+					scheduleTicks();
 					// 面板开合 / 窗口缩放会改聊天容器宽度 → 挂 ResizeObserver 跟着走
 					const sc = findChatScroller();
 					if (ro && sc && sc !== roEl) {
@@ -313,10 +359,18 @@ window.__ModuleLoader__.load({
 					if (markerRef.current) markerRef.current.classList.remove("dshscp_markerOn");
 				};
 
+				/** 鼠标是否正压在气泡上（压在气泡上时别收掉，用户要点它跳转）。 */
+				const overBubble = (x, y) => {
+					const el = prevRef.current;
+					if (!el || !el.classList.contains("dshscp_prevOn")) return false;
+					const r = el.getBoundingClientRect();
+					return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
+				};
+
 				const onMove = (e) => {
 					const s = settingsRef.current;
 					if (!s.on) return;
-					if (bubbleHoverRef.current) return; // 鼠标停在气泡上（正要点击），别把它收掉
+					if (overBubble(e.clientX, e.clientY)) return; // 鼠标停在气泡上（正要点击）
 					const view = placeAtChatEdge();
 					if (!view) return;
 					// 触发区 = 聊天区右边缘那一条；落在右侧面板上一律不响应
@@ -330,7 +384,7 @@ window.__ModuleLoader__.load({
 					// t=0（顶部）→ highNote；t=1（底部）→ lowNote
 					const midi = Math.round(s.highNote - t * (s.highNote - s.lowNote));
 					showMarker(e.clientY);
-					// 预览只看用户消息；没有就整个收起（不显示音名/MIDI）
+					// 预览只挑「我发的消息」里离鼠标最近的那条（不显示音名/MIDI）
 					showPreview(e.clientY, userMessageAtY(e.clientY));
 					if (markerRef.current) markerRef.current.classList.add("dshscp_markerOn");
 					if (midi !== lastMidiRef.current) {
@@ -345,41 +399,40 @@ window.__ModuleLoader__.load({
 				};
 				const onLeave = () => {
 					lastMidiRef.current = null;
-					bubbleHoverRef.current = false;
 					hidePreview();
 				};
 				document.addEventListener("pointermove", onMove, { passive: true });
 				document.addEventListener("pointerleave", onLeave);
+				document.addEventListener("scroll", scheduleTicks, { passive: true, capture: true });
 				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();
 					if (mo) mo.disconnect();
 					if (moTimer) window.clearTimeout(moTimer);
+					if (tickTimer) window.clearTimeout(tickTimer);
 				};
 			}, []);
 
-			// 竖条 + 位置圆点 + 「我的消息」预览气泡（气泡可点，点了跳过去）
+			// 竖条 + 「我的消息」刻度 + 位置圆点 + 预览气泡（气泡可点，点了跳过去）
 			return h(React.Fragment, null,
 				h("div", { ref: stripRef, className: "dshscp_strip" + (settings.on ? " dshscp_stripOn" : "") }),
+				h("div", { ref: ticksRef, className: "dshscp_ticks" }),
 				h("div", { ref: markerRef, className: "dshscp_marker" }),
 				h("div", {
 					ref: prevRef,
 					className: "dshscp_prev",
-					// 鼠标移进气泡时别被 pointermove 收掉（要能点它跳转）
-					onMouseEnter: () => { bubbleHoverRef.current = true; },
-					onMouseLeave: () => { bubbleHoverRef.current = false; },
 					onClick: () => {
 						const m = activeMsgRef.current;
 						if (!m || !m.el) return;
 						try { m.el.scrollIntoView({ behavior: "smooth", block: "center" }); }
 						catch { try { m.el.scrollIntoView(); } catch {} }
-						bubbleHoverRef.current = false;
 						activeMsgRef.current = null;
 						if (prevRef.current) {
 							prevRef.current.classList.remove("dshscp_prevOn");

package/package.json

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