Back to home@fewoot

dsh-whale-particles

给 DSH Web 加一个点阵互动背景:点阵可组成鲸鱼或你上传的透明 PNG 照片,每颗粒子有自己独立的平滑外力;既能手动随鼠标扰动,也能切换自动屏保模式(360° 任意方向扫波 + 全屏呼吸躁动),参数面板支持恢复默认。

Stars
0
Language
JavaScript
Created
Sep 5, 2026
Updated
Sep 6, 2026
GitHub repo

Introduction

dsh-whale-particles

把“点阵鲸鱼/照片点阵”作为 DSH Web 界面背景的浏览器端插件。

  • 每颗粒子都有自己独立、低频、平滑的“外力”(非统一流场、非逐帧白噪声),像官网鲸鱼一样:每颗各自动作柔和、彼此不齐;
  • 手动模式:光标靠近时圈内各点柔和躁动,移开即平滑归位;
  • 自动模式(屏保):“波”沿 360° 任意方向扫过主体(自动避开与上一道过近的方向,斜向按系数减速)+ “全屏呼吸”(缓缓起、维持、缓缓落),间隔默认 0(波连着波);
  • 主体可切换:
    • 🐋 鲸鱼(默认剪影);
    • 🖼 照片:导入透明 PNG,引擎按 alpha 取主体、内部压成几 KB 小蒙版,仅存本地(localStorage),不上传;
  • 参数面板(右下角 ⚙,或 设置 → 常规 → “🐋 鲸鱼点阵背景”):密度、大小、位置、波速/带宽/斜向系数/间隔、网格/描边/方块、alpha 阈值/反相等,全部即时生效并自动保存,带「恢复默认」;
  • 附带调整:空会话(hero)输入栏整体下移,避免盖住主体;有对话后自动恢复贴底布局;鲸鱼中心自动跟随左侧栏宽窄(内容区居中,平滑补间)。

安装(本地/离线)

dsh plugin --profile desktop add ./dsh-whale-particles

无 dsh CLI 时(与离线分发包相同做法):

  1. dsh-whale-particles 文件夹复制到 C:\Users\<用户名>\.dsh\profiles\desktop\node_modules\dsh-whale-particles;
  2. …\profiles\desktop\package.jsondsh.profile.bundles 里追加 "dsh-whale-particles"(改前先备份);
  3. 重启 DSH Desktop。

若 profile 不叫 desktop,把上面路径中的名字换成实际的即可。

版本适配(重要)

插件的“界面透明化”与“空会话输入栏下移”依赖 DSH Web 界面里 CSS Module 哈希类名; 不同 DSH/Desktop 版本这些前缀会变。点阵引擎本身不依赖界面类名,任何版本都能渲染, 变了的只是“让界面透明、露出背景”那几条规则和 composer 下移规则。

需要调整时,编辑 lib/client.jsSTYLE 常量开头几条与 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_x6GwSkVaWydkMvW 三处)。 改动后重启生效。

卸载 / 临时隐藏

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.jswindow.__ModuleLoader__.load 格式,免二次构建。
  • 参数与照片蒙版保存在浏览器 localStorage(键 dsh-whale:cfg / dsh-whale:auto / dsh-whale:photo),每台机器各自保存,不随插件文件迁移。