dsh-scroll-piano 0.3.0 → 0.3.1

package/README.md

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

package/lib/client.js

@@ -37,7 +37,7 @@ window.__ModuleLoader__.load({
 			".dshscp_prevTop{display:flex;align-items:center;gap:8px;margin-bottom:4px}",
 			".dshscp_prevRole{flex:none;padding:1px 5px;border-radius:4px;background:rgba(91,141,239,.3);color:#bcd4ff;font-size:10px;line-height:14px}",
 			".dshscp_prevRoleAI{background:rgba(160,120,240,.28);color:#d6c4ff}",
-			".dshscp_prevNote{flex:none;color:#9aa2b1;font-size:10px;line-height:14px;font-variant-numeric:tabular-nums}",
+			".dshscp_prevHint{margin-left:auto;flex:none;color:#9aa2b1;font-size:10px;line-height:14px}",
 			".dshscp_prevText{font-size:12px;line-height:17px;color:#e6e8ee;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-break:break-word}"
 		].join("");
 		const tagId = "dsh-scroll-piano/scroll-piano.css";
@@ -150,12 +150,7 @@ window.__ModuleLoader__.load({
 			noise.start(now);
 		}
 
-		//#region note naming
-		const NOTE_NAMES = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
-		function noteLabel(midi) {
-			return NOTE_NAMES[((midi % 12) + 12) % 12] + (Math.floor(midi / 12) - 1);
-		}
-
+		//#region chat anchors
 		/** 聊天区的滚动容器（从 `[data-chat-flow]` 往上找第一个可纵向滚动的祖先）。 */
 		function findChatScroller() {
 			const flow = document.querySelector("[data-chat-flow]");
@@ -223,7 +218,6 @@ window.__ModuleLoader__.load({
 		//#region component
 		function ScrollPiano() {
 			const [settings, setSettings] = useState(loadSettings);
-			const [label, setLabel] = useState("");
 			const settingsRef = useRef(settings);
 			settingsRef.current = settings;
 			const lastMidiRef = useRef(null);
@@ -232,7 +226,6 @@ window.__ModuleLoader__.load({
 			const markerRef = useRef(null);
 			const prevRef = useRef(null);
 			const roleRef = useRef(null);
-			const noteRef = useRef(null);
 			const textRef = useRef(null);
 			const bubbleHoverRef = useRef(false);
 			const activeMsgRef = useRef(null);
@@ -288,20 +281,28 @@ window.__ModuleLoader__.load({
 					const m = markerRef.current;
 					if (m) m.style.top = Math.round(y - 3.5) + "px";
 				};
-				const showPreview = (y, noteText, msg) => {
+				/**
+				 * 气泡**只在鼠标压在某条「用户消息」上时出现**，内容只有那条消息的正文。
+				 * 其余位置（AI 回复 / 工具块 / 空白）整个收起——不放音名、不放 MIDI 数字。
+				 */
+				const showPreview = (y, msg) => {
 					const el = prevRef.current;
 					if (!el) return;
-					activeMsgRef.current = msg || null;
-					if (noteRef.current) noteRef.current.textContent = "♪ " + noteText + (msg ? "  ·  点击跳转" : "");
-					if (roleRef.current) roleRef.current.style.display = msg ? "" : "none";
-					if (textRef.current) textRef.current.textContent = msg ? msg.text : "";
-					// 只有预览到用户消息时才可点（点了跳过去）；否则纯视觉不拦事件
-					el.style.pointerEvents = msg ? "auto" : "none";
-					el.style.cursor = msg ? "pointer" : "default";
+					if (!msg) {
+						activeMsgRef.current = null;
+						el.classList.remove("dshscp_prevOn");
+						el.style.pointerEvents = "none";
+						return;
+					}
+					activeMsgRef.current = msg;
+					if (textRef.current) textRef.current.textContent = msg.text;
+					el.style.pointerEvents = "auto";
+					el.style.cursor = "pointer";
 					// 竖直居中于鼠标，并夹在视口内
 					const h = el.offsetHeight || 40;
 					const top = Math.max(8, Math.min(window.innerHeight - h - 8, y - h / 2));
 					el.style.top = Math.round(top) + "px";
+					el.classList.add("dshscp_prevOn");
 				};
 				const hidePreview = () => {
 					activeMsgRef.current = null;
@@ -329,9 +330,9 @@ window.__ModuleLoader__.load({
 					// t=0（顶部）→ highNote；t=1（底部）→ lowNote
 					const midi = Math.round(s.highNote - t * (s.highNote - s.lowNote));
 					showMarker(e.clientY);
-					showPreview(e.clientY, noteLabel(midi) + " · " + midi, userMessageAtY(e.clientY));
+					// 预览只看用户消息；没有就整个收起（不显示音名/MIDI）
+					showPreview(e.clientY, userMessageAtY(e.clientY));
 					if (markerRef.current) markerRef.current.classList.add("dshscp_markerOn");
-					if (prevRef.current) prevRef.current.classList.add("dshscp_prevOn");
 					if (midi !== lastMidiRef.current) {
 						lastMidiRef.current = midi;
 						// 限速：滑太快时不要瞬间堆几十个音（会糊成一片杂音）
@@ -340,7 +341,6 @@ window.__ModuleLoader__.load({
 							lastPlayRef.current = nowMs;
 							playNote(midi, s.volume);
 						}
-						setLabel(noteLabel(midi));
 					}
 				};
 				const onLeave = () => {
@@ -390,7 +390,7 @@ window.__ModuleLoader__.load({
 				},
 					h("div", { className: "dshscp_prevTop" },
 						h("span", { ref: roleRef, className: "dshscp_prevRole" }, "你"),
-						h("span", { ref: noteRef, className: "dshscp_prevNote" }, "♪")
+						h("span", { className: "dshscp_prevHint" }, "点击跳转")
 					),
 					h("div", { ref: textRef, className: "dshscp_prevText" })
 				),
@@ -411,8 +411,7 @@ window.__ModuleLoader__.load({
 						value: settings.volume,
 						onChange: (e) => setVolume(parseFloat(e.target.value)),
 						title: "音量"
-					}),
-					label ? h("span", { style: { opacity: 0.75, minWidth: "26px" } }, label) : null
+					})
 				)
 			);
 		}

package/package.json

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