dsh-whale-particles
给 DSH Web 加一个点阵互动背景:点阵可组成鲸鱼或你上传的透明 PNG 照片,每颗粒子有自己独立的平滑外力;既能手动随鼠标扰动,也能切换自动屏保模式(360° 任意方向扫波 + 全屏呼吸躁动),参数面板支持恢复默认。
- Stars
- 0
- Language
- JavaScript
- Created
- Sep 5, 2026
- Updated
- Sep 6, 2026
Introduction
dsh-whale-particles
把“点阵鲸鱼/照片点阵”作为 DSH Web 界面背景的浏览器端插件。
- 每颗粒子都有自己独立、低频、平滑的“外力”(非统一流场、非逐帧白噪声),像官网鲸鱼一样:每颗各自动作柔和、彼此不齐;
- 手动模式:光标靠近时圈内各点柔和躁动,移开即平滑归位;
- 自动模式(屏保):“波”沿 360° 任意方向扫过主体(自动避开与上一道过近的方向,斜向按系数减速)+ “全屏呼吸”(缓缓起、维持、缓缓落),间隔默认 0(波连着波);
- 主体可切换:
- 🐋 鲸鱼(默认剪影);
- 🖼 照片:导入透明 PNG,引擎按 alpha 取主体、内部压成几 KB 小蒙版,仅存本地(localStorage),不上传;
- 参数面板(右下角 ⚙,或 设置 → 常规 → “🐋 鲸鱼点阵背景”):密度、大小、位置、波速/带宽/斜向系数/间隔、网格/描边/方块、alpha 阈值/反相等,全部即时生效并自动保存,带「恢复默认」;
- 附带调整:空会话(hero)输入栏整体下移,避免盖住主体;有对话后自动恢复贴底布局;鲸鱼中心自动跟随左侧栏宽窄(内容区居中,平滑补间)。
安装(本地/离线)
dsh plugin --profile desktop add ./dsh-whale-particles
无 dsh CLI 时(与离线分发包相同做法):
- 把
dsh-whale-particles文件夹复制到C:\Users\<用户名>\.dsh\profiles\desktop\node_modules\dsh-whale-particles; - 在
…\profiles\desktop\package.json的dsh.profile.bundles里追加"dsh-whale-particles"(改前先备份); - 重启 DSH Desktop。
若 profile 不叫 desktop,把上面路径中的名字换成实际的即可。
版本适配(重要)
插件的“界面透明化”与“空会话输入栏下移”依赖 DSH Web 界面里 CSS Module 哈希类名; 不同 DSH/Desktop 版本这些前缀会变。点阵引擎本身不依赖界面类名,任何版本都能渲染, 变了的只是“让界面透明、露出背景”那几条规则和 composer 下移规则。
需要调整时,编辑 lib/client.js 中 STYLE 常量开头几条与
measureContentCenter() 里的选择器,把哈希前缀换成本机实际类名:
| 作用 | 选择器(0.1.1-rc.2 / Desktop v2.0.x) |
|---|---|
| 主框架透明 | .pI_x6G_frame |
| 会话/根容器透明 | .wSkVaW_root、.ydkMvW_root |
| 侧栏半透明 | .pI_x6G_sidebarCol |
| 内容区中心测量 | .pI_x6G_sidebarCol、[data-slot="sidebar"] |
| 空会话输入栏下移 | .wSkVaW_root[data-phase=hero] .wSkVaW_composerSeat |
实测:DSH Desktop v2.0.5 与 v2.0.3 的前缀不同——把上面的哈希换成目标机器的实际值即可
(例如在 DevTools 里选中主框架/侧栏/输入栏元素,取类名里 _frame、_sidebarCol、
_composerSeat 对应项的新前缀;全局替换 pI_x6G、wSkVaW、ydkMvW 三处)。
改动后重启生效。
卸载 / 临时隐藏
dsh plugin --profile desktop remove dsh-whale-particles
或 Settings → 插件里停用;临时隐藏可在 DevTools 执行:
document.body.removeAttribute('data-dsh-whale');
document.getElementById('dsh-whale-particles-layer')?.remove();
说明
- 默认鲸鱼轮廓路径内联自 dsh-homepage-skin(MIT,来源见该仓库 README),保留为默认主体;
如需商用/换形,替换
lib/client.js里的WHALE_PATH(Path2D 数据)即可,照片模式不受影响。 - 纯浏览器插件:宿主半区
lib/index.js为空实现;构建产物lib/client.js为window.__ModuleLoader__.load格式,免二次构建。 - 参数与照片蒙版保存在浏览器 localStorage(键
dsh-whale:cfg/dsh-whale:auto/dsh-whale:photo),每台机器各自保存,不随插件文件迁移。