dsh-scroll-piano 0.3.3 → 0.3.5

package/README.md

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

package/lib/client.js

@@ -23,15 +23,17 @@ window.__ModuleLoader__.load({
 
 		//#region styles
 		const CSS = [
-			".dshscp_pill{box-sizing:border-box;position:fixed;left:132px;bottom:16px;z-index:2147483000;height:32px;display:inline-flex;align-items:center;gap:10px;padding:0 10px;border-radius:16px;background:var(--dsw-alias-bg-elevated,#1f2430);color:var(--dsw-alias-label-primary,#e6e8ee);box-shadow:0 4px 18px rgba(0,0,0,.35);font-size:12px;line-height:16px}",
+			".dshscp_pill{box-sizing:border-box;position:fixed;left:132px;bottom:16px;z-index:2147483000;height:32px;display:inline-flex;align-items:center;gap:10px;padding:0 10px;border-radius:16px;background:var(--dsw-alias-bg-elevated,#1f2430);color:var(--dsw-alias-label-primary,#e6e8ee);box-shadow:0 4px 18px rgba(0,0,0,.35);font-size:12px;line-height:16px;cursor:grab;touch-action:none}",
 			".dshscp_pill button{box-sizing:border-box;border:none;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:0 2px;display:inline-flex;align-items:center;gap:6px}",
 			".dshscp_dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--dsw-alias-label-tertiary,#6b7280)}",
 			".dshscp_dotOn{background:#35c46a;box-shadow:0 0 6px rgba(53,196,106,.9)}",
 			".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_ticks{position:fixed;top:0;right:0;width:20px;height:100%;z-index:2147482000;pointer-events:none}",
+			".dshscp_tick{position:absolute;right:0;width:18px;height:12px;margin-top:-6px;pointer-events:auto;cursor:pointer}",
+			".dshscp_tick::after{content:\"\";position:absolute;right:0;top:50%;transform:translateY(-50%);width:7px;height:2px;border-radius:1px;background:rgba(91,141,239,.95);box-shadow:0 0 4px rgba(91,141,239,.7);transition:all .12s ease}",
+			".dshscp_tick:hover::after{width:16px;box-shadow:0 0 7px rgba(91,141,239,1)}",
 			".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}",
@@ -39,7 +41,6 @@ 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_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";
@@ -240,6 +241,48 @@ window.__ModuleLoader__.load({
 		//#region component
 		function ScrollPiano() {
 			const [settings, setSettings] = useState(loadSettings);
+			// —— 左下角那条黑胶囊**可拖动**（音量滑块除外，它自己要收拖动事件）——
+			const [pillPos, setPillPos] = useState(() => {
+				try { return JSON.parse(localStorage.getItem("dsh-scroll-piano:pillPos") || "null"); } catch { return null; }
+			});
+			const pillPosRef = useRef(pillPos);
+			pillPosRef.current = pillPos;
+			const pillDragRef = useRef(null);
+			const pillDraggedRef = useRef(false);
+			const pillClearRef = useRef(0);
+			const onPillDown = (e) => {
+				// 按在音量滑块上不进拖动，否则调音量会被拖走
+				if (e.target && e.target.tagName === "INPUT") return;
+				if (e.pointerType === "mouse" && e.button !== 0) return;
+				pillDraggedRef.current = false;
+				const r = e.currentTarget.getBoundingClientRect();
+				pillDragRef.current = { x: e.clientX, y: e.clientY, left: r.left, top: r.top, moved: false };
+				try { e.currentTarget.setPointerCapture(e.pointerId); } catch {}
+			};
+			const onPillMove = (e) => {
+				const d = pillDragRef.current;
+				if (!d) return;
+				const dx = e.clientX - d.x;
+				const dy = e.clientY - d.y;
+				if (!d.moved && Math.abs(dx) + Math.abs(dy) > 6) d.moved = true;
+				if (!d.moved) return;
+				const left = Math.max(4, Math.min(window.innerWidth - 60, d.left + dx));
+				const top = Math.max(4, Math.min(window.innerHeight - 40, d.top + dy));
+				pillPosRef.current = { left, top };
+				setPillPos({ left, top });
+			};
+			const onPillUp = (e) => {
+				const d = pillDragRef.current;
+				pillDragRef.current = null;
+				try { e.currentTarget.releasePointerCapture(e.pointerId); } catch {}
+				if (!d || !d.moved) return;
+				pillDraggedRef.current = true;
+				const pos = pillPosRef.current;
+				if (pos) { try { localStorage.setItem("dsh-scroll-piano:pillPos", JSON.stringify(pos)); } catch {} }
+				// 拖完不一定紧跟 click → 400ms 自动清，别吞掉下一次真正点击
+				if (pillClearRef.current) window.clearTimeout(pillClearRef.current);
+				pillClearRef.current = window.setTimeout(() => { pillDraggedRef.current = false; }, 400);
+			};
 			const settingsRef = useRef(settings);
 			settingsRef.current = settings;
 			const lastMidiRef = useRef(null);
@@ -251,6 +294,7 @@ window.__ModuleLoader__.load({
 			const textRef = useRef(null);
 			const ticksRef = useRef(null);
 			const ticksDataRef = useRef([]); // [{y, el}] — 小地图刻度数据（showPreview 靠它找消息）
+			const jumpToRef = useRef(() => {});
 			const activeMsgRef = useRef(null);
 
 			const setOn = useCallback((on) => {
@@ -275,6 +319,26 @@ window.__ModuleLoader__.load({
 				let mo = null;
 				let moTimer = 0;
 				let tickTimer = 0;
+				/** 平滑滚动到某条消息（点蓝条 / 点气泡都走这里）。 */
+				const jumpTo = (el) => {
+					if (!el) return;
+					try { el.scrollIntoView({ behavior: "smooth", block: "center" }); }
+					catch { try { el.scrollIntoView(); } catch {} }
+					activeMsgRef.current = null;
+					if (prevRef.current) {
+						prevRef.current.classList.remove("dshscp_prevOn");
+						prevRef.current.style.pointerEvents = "none";
+					}
+					if (markerRef.current) markerRef.current.classList.remove("dshscp_markerOn");
+				};
+				jumpToRef.current = jumpTo;
+				/** 点竖条上的蓝色小横杠 → 跳到那条消息（事件委托，刻度是动态增删的）。 */
+				const onTickClick = (e) => {
+					const t = e.target;
+					if (!t || !t.classList || !t.classList.contains("dshscp_tick")) return;
+					const idx = parseInt(t.getAttribute("data-i"), 10);
+					if (idx >= 0) jumpTo(ticksDataRef.current[idx] && ticksDataRef.current[idx].el);
+				};
 				/** 竖条上给「我的消息」打小地图刻度：不管滚到哪，自己的消息始终标在那。 */
 				const refreshTicks = () => {
 					const box = ticksRef.current;
@@ -288,7 +352,10 @@ window.__ModuleLoader__.load({
 						i.className = "dshscp_tick";
 						box.appendChild(i);
 					}
-					for (let i = 0; i < data.length; i++) box.children[i].style.top = data[i].y + "px";
+					for (let i = 0; i < data.length; i++) {
+						box.children[i].style.top = data[i].y + "px";
+						box.children[i].setAttribute("data-i", String(i));
+					}
 				};
 				// 对话增长 / 面板开合会改内容总长 → 节流到 150ms 重算（刻度与 scrollTop 无关，滚动不用重算）
 				const scheduleTicks = () => {
@@ -408,12 +475,14 @@ window.__ModuleLoader__.load({
 				document.addEventListener("pointermove", onMove, { passive: true });
 				document.addEventListener("pointerleave", onLeave);
 				// 不需要监听 scroll：刻度是按「内容偏移/内容总长」算的，与 scrollTop 无关
+				if (ticksRef.current) ticksRef.current.addEventListener("click", onTickClick);
 				window.addEventListener("blur", onLeave);
 				window.addEventListener("resize", placeAtChatEdge);
 				placeAtChatEdge();
 				return () => {
 					document.removeEventListener("pointermove", onMove);
 					document.removeEventListener("pointerleave", onLeave);
+					if (ticksRef.current) ticksRef.current.removeEventListener("click", onTickClick);
 					window.removeEventListener("blur", onLeave);
 					window.removeEventListener("resize", placeAtChatEdge);
 					if (ro) ro.disconnect();
@@ -423,7 +492,10 @@ window.__ModuleLoader__.load({
 				};
 			}, []);
 
-			// 竖条 + 「我的消息」刻度 + 位置圆点 + 预览气泡（气泡可点，点了跳过去）
+			/** 点气泡也跳（文字提示已去掉，主入口是点蓝条）。 */
+			const onBubbleClick = () => jumpToRef.current(activeMsgRef.current && activeMsgRef.current.el);
+
+			// 竖条 + 「我的消息」刻度（**点蓝色小横杠跳过去**）+ 位置圆点 + 预览气泡
 			return h(React.Fragment, null,
 				h("div", { ref: stripRef, className: "dshscp_strip" + (settings.on ? " dshscp_stripOn" : "") }),
 				h("div", { ref: ticksRef, className: "dshscp_ticks" }),
@@ -431,28 +503,26 @@ window.__ModuleLoader__.load({
 				h("div", {
 					ref: prevRef,
 					className: "dshscp_prev",
-					onClick: () => {
-						const m = activeMsgRef.current;
-						if (!m || !m.el) return;
-						try { m.el.scrollIntoView({ behavior: "smooth", block: "center" }); }
-						catch { try { m.el.scrollIntoView(); } catch {} }
-						activeMsgRef.current = null;
-						if (prevRef.current) {
-							prevRef.current.classList.remove("dshscp_prevOn");
-							prevRef.current.style.pointerEvents = "none";
-						}
-						if (markerRef.current) markerRef.current.classList.remove("dshscp_markerOn");
-					}
+					onClick: onBubbleClick
 				},
 					h("div", { className: "dshscp_prevTop" },
-						h("span", { ref: roleRef, className: "dshscp_prevRole" }, "你"),
-						h("span", { className: "dshscp_prevHint" }, "点击跳转")
+						h("span", { ref: roleRef, className: "dshscp_prevRole" }, "你")
 					),
 					h("div", { ref: textRef, className: "dshscp_prevText" })
 				),
-				h("div", { className: "dshscp_pill" },
+				h("div", {
+					className: "dshscp_pill",
+					onPointerDown: onPillDown,
+					onPointerMove: onPillMove,
+					onPointerUp: onPillUp,
+					onPointerCancel: onPillUp,
+					style: pillPos ? { left: pillPos.left + "px", top: pillPos.top + "px", bottom: "auto" } : undefined
+				},
 					h("button", {
-						onClick: () => setOn(!settings.on),
+						onClick: () => {
+							if (pillDraggedRef.current) { pillDraggedRef.current = false; return; } // 刚才是拖，不是点
+							setOn(!settings.on);
+						},
 						title: settings.on ? "关闭滚动钢琴" : "开启滚动钢琴"
 					},
 						h("span", { className: "dshscp_dot" + (settings.on ? " dshscp_dotOn" : "") }),

package/package.json

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