dsh-scroll-piano

dsh-scroll-piano · 滚动钢琴

鼠标滑过 DSH 聊天区右边缘的竖条（滚动条/把手那一条）时，按鼠标的纵向位置发出钢琴音：越靠上音越高、越靠下音越低（特雷门琴式）。

效果

• 聊天区右边缘一条细彩色竖条（开启时淡淡发光），鼠标进入该区间即触发。
• 鼠标纵向移动 = 连续刮奏；竖条上有个白点跟随鼠标位置。
• 竖条上有**「我的消息」小地图刻度**：你每发一条消息，对应位置一根蓝色小横杠——按「在整段对话里的位置」定位，与滚动无关，所以不管你滚到对话多深，自己的消息始终标在那、点得到。
• 气泡只在鼠标贴近某条刻度（±16px）时出现，内容就是那条消息的正文（最多 3 行）；其余位置整个不显示（不显示音名、不显示 MIDI 数字）。
• 点蓝色小横杠 → 跳到那条消息（平滑滚动、滚到视口中央）。蓝条命中区放大到 18×12px（可视化仍是 7×2 细条，悬停时加宽变亮），比原来 2px 高好点得多；点气泡也能跳（两者同一个 jumpTo）。
• 左下角一枚 🎵 滚动钢琴 ON/OFF 胶囊：点开关切换、右侧滑块调音量（设置存 localStorage）。胶囊可拖动（cursor:grab）：位移 >6px 判定为拖、松手位置存 localStorage("dsh-scroll-piano:pillPos")、拖完 400ms 内不吞点击；按在音量滑块上不进拖动，滑块照常调音量。
• 默认音域 C3–C6（3 个八度），只按半音触发（同音不重复触发）。

预览只显示用户自己发的消息，不做「取全局最近一条」兜底（否则同一条会在整片区域反复出现 = 重复显示），位置感交给刻度。声音与预览彼此独立——任何位置滑动都照常出声，只有预览挑消息。 拿不到聊天区时（欢迎页 / 新会话还没有消息），触发区退回窗口右边缘，声音照出——否则那类页面连声音都没有（踩过）。

消息预览怎么定位

聊天流的稳定锚点是 [data-chat-flow]：它的直接子元素一条消息一个，key 形如：

key 前缀	含义
13:input-message<uuid>	用户消息 → 预览这条（角色显示「你」）
14:assistant-stepN:M	AI 消息 → 跳过
12:turn-processN / ["process",…] / 9:turn-tailN	过程 / 工具调用 / 轮次尾 → 跳过

刻度 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，不碰。

触发区：聊天区右边缘，不是窗口右边缘

滚动条本身是浏览器原生滚动条（不在 DOM 里、类名带 hash），所以触发用全局 pointermove + clientX 判定。但判定基准是聊天区滚动容器的右边缘（从 [data-chat-flow] 往上找第一个 overflow-y:auto 的祖先），不是窗口右边缘——否则右侧栏（文件预览等）打开时会在面板上触发、气泡还会盖住面板。

竖条 / 圆点 / 气泡的位置也跟着这个右边缘走，用 ResizeObserver（容器变宽）+ MutationObserver（面板开合是 DOM 增删）双重兜底重算。

可调参数

代码内 DEFAULTS（lib/client.js）：

键	默认	说明
on	true	开关
volume	0.25	音量
stripWidth	30	右侧竖条宽度（px）
lowNote / highNote	48 / 84	音域（MIDI，C3–C6）
inset	56	上下留白（px），让最高/最低音够得着

技术要点

项	做法
挂载槽位	shell.overlay
触发	document.addEventListener("pointermove")，clientX >= innerWidth - stripWidth 才生效
音高	midi = highNote - t*(highNote-lowNote)，t 为纵向归一化位置
音频	Web Audio 合成（泛音 + 快速起音 + 指数衰减 + 噪声锤击瞬态 + 低通 + 压缩器）
客户端形态	手写 window.__ModuleLoader__.load 零构建 bundle，platform: web

安装

dsh plugin --profile desktop add dsh-scroll-piano

装好后左下角出现 🎵 滚动钢琴 ON/OFF 胶囊（包名会进 dsh.profile.bundles，实测热载入，一般不用重启；没生效就刷新页面）。

本地开发安装

NODE=~/.dsh/dsh-runtimes/dsh-primary-runtime/dependencies/node/bin/node
PNPM=~/.dsh/dsh-runtimes/dsh-primary-runtime/dependencies/pnpm/bin/pnpm.mjs
# profile/package.json 的 dependencies 加： "dsh-scroll-piano": "link:<本目录>"
# profile/cordis.patch.yml 加：
#   - insert:
#       - id: dsh-scroll-piano
#         name: dsh-scroll-piano
cd ~/.dsh/profiles/desktop && "$NODE" "$PNPM" install --no-frozen-lockfile

顺序很重要：先 pnpm install 建软链，再触发 cordis.patch.yml 热载入，否则 loader 首次 require 找不到包、之后不会自动重试。

开发

npm test          # node test/bundle-check.mjs

说明

• 首次出声需要一次用户手势（点开关或首次滑动即自动解锁 AudioContext）。
• 与 dsh-piano（滑动钢琴键盘）是两个独立插件，可同时装。