v0.1.4:预览框(tooltip)专项 —— sticky tip · rAF 跟随 · 墨玉玻璃材质
本版为预览框(tooltip)专项重构:交互手感、跟随定位与材质语言整体升级。
交互升级
- Sticky tip:气泡常驻挂载,内容随悬停目标原地替换,入场动画只播首次——快速扫过整列药丸不再"灭—等—亮"闪烁;分级延迟,首颗 150ms、导轨内连续目标降至 60ms(Radix/shadcn 成熟做法)
- rAF 实时跟随:气泡存活期间逐帧读取药丸实时位置直写样式,导轨自身滚动 / 侧栏推式时气泡不再钉死原位指鹿为马;零 React 重渲开销
- 预览可复制:指针可经间隙移入气泡,直接选中复制正文;移出防抖 80ms、Esc 随时关闭,隐藏态不遮挡聊天区点击
缺陷修复
- 拖拽 scrub 时气泡错位闪跳:此前 hover 定时器挂着就按下拖拽,旧位置的气泡弹出且随目标变化错位闪跳;现按下即关泡并屏蔽调度,松手恢复
视觉 / 材质
- ★ 墨玉玻璃材质(核心):气泡不再是最轻的浅灰实心块——改为与 hover 药丸同一 token 长出的深色磨砂玻璃(
label-primary 88%+blur(20px) saturate(1.8))、双层内光效(顶缘高光 + 内描边)、重投影、radius 14px;头部序号装进迷你药丸 chip 与外侧大药丸首尾呼应;入场从药丸侧平移滑出。深色主题自动翻转为"白瓷玻璃+黑字",零主题分支 - 去箭头化:删除双三角箭头,悬在代码块/图片上方不再露实心色块断裂;方向暗示交给滑出入场动画
- 高度预算匹配:max-height 提升至
min(36vh, 280px)、正文 6 行、预览 buffer 300 字符——长消息终于能看全 - 保留段落结构:预览不再把换行拍平,多段落消息保留原有层次
- 细节三连:头部数字
tabular-nums扫动不横跳;仅"进行中"显示脉冲徽标(常量"已完成"不再占宽);投影加重一档强化顶层浮起感
安装:dsh plugin remove dsh-user-message-timeline && dsh plugin --profile web add file:~/dsh-user-message-timeline 后重启 dsh web 并硬刷新;npm 侧 npm i dsh-user-message-timeline@0.1.4