用点阵鲸鱼或照片粒子装点界面背景
29.4/100
综合分
0
GitHub 星标
525
npm 周下载
—/5
用户评分
数据截至 2026/9/18 · 周下载取自 npm 全网(含 CI / 镜像),非本站安装数;综合分由星标、活跃度与兼容性检查合成。
安装命令 · 需先装 dsh CLI 引擎
dsh plugin --profile web add dsh-whale-particlesnpm 源 · dsh-whale-particles 的发布者账号已校验与本仓库一致
状态速览
判定依据:实装验证 · 静态安装检查 · 自动扫描 · 仓库维护状态信任档位:已验证
图例:✓ 通过! 需注意— 未判定 / 无数据· 「未判定」= 本站尚无数据,不代表插件有问题
档位由哪些信号合成
本站实装验证(真实安装 L4 覆盖全站;L5 为运行时冒烟或实机截图,覆盖范围小于 L4) · 验证所用 dsh 版本 · 静态安装检查 · 风险分级 · 仓库维护状态。 下方各区块是它的证据明细。
给这个插件打分还没有人投票↓
用户评分
还没有人投票,来当第一个
功能亮点
- 点阵组成鲸鱼或照片
- 鼠标扰动粒子
- 自动屏保扫波模式
给 DSH Web 加一个点阵互动背景:点阵可组成鲸鱼或你上传的透明 PNG 照片,每颗粒子有自己独立的平滑外力;既能手动随鼠标扰动,也能切换自动屏保模式(360° 任意方向扫波 + 全屏呼吸躁动),参数面板支持恢复默认。
最近更新
在 GitHub 查看全部 →v0.6.02026-10-15
0.6.0 —— 帧率可以自己选了,并且把"看着有点卡"的五个真实原因一并修掉。附带商店图和效果录像。
· ① 帧率可选 + 实测帧率
设置 → 鲸鱼点阵背景 → 「性能」:
| 控件 | 说明 |
| --- | --- |
| 帧率上限 | 跟随显示器 / 120 / 90 / 60 / 45 / 30 —— 出厂默认「跟随显示器」 |
| 渲染精度 | 自动 / 1× / 1.5× / 2× —— 出厂默认「自动」 |
| 实测帧率 | 每 0.5s 刷新,显示 58 fps · 1.00× · 跟随显示器 |
限帧不是"降低动画精度":跳过的帧不推进物理,动起来的速度完全不变,只是每秒少画几次。
__dshWhale.stats() 能一次打印 fps、点数、后备缓冲像素数、光晕离屏尺寸。
· ② 为什么会卡:五处开销
| 位置 | 原来 | 现在 |
| --- | --- | --- |
| 每颗粒子(×4000×2 遍) | save → translate → rotate → fillRect → restore,约 4 万次调用/帧,还每帧现算三角函数 | 旋转角恒定 → 预存 cos/sin,改 setTransform + fillRect,每帧 0 次 rotate/translate |
| 光晕那一遍 | 和本体一样精细地旋转、逐粒透明度(1/9 分辨率下根本看不见) | 整遍只 fillRect,颜色/透明度循环外设一次 |
| 颜色 | 每粒拼 "rgba(…)" 字符串 + toFixed(3),8000 次/帧 | 颜色查 17 档缓存、透明度走 globalAlpha(数字) |
| 距离 | Math.hypot(带防溢出分支,慢得多) | Math.sqrt(dx²+dy²) |
| 侧栏宽度测量 | 每 400ms 一次 getBoundingClientRect() —— 聊天流式输出时 DOM 是脏的,那次读取会强制同步重排整个会话 | ResizeObserver,只在真的变尺寸时回调 |
最后一条最像"每隔一会儿顿一下",而且和点数无关 —— 如果你之前感觉是周期性卡顿,多半就是它。
渲染精度管的是画布后备缓冲的像素密度:4K + 200% 缩放是 3300 万像素(每帧光栅化 132MB 缓冲),
比任何绘制调用都贵。「自动」= 不高于设备像素比、且总像素不超过 800 万,4K@2x 会被压到约 1×。
点阵本来就是 1~5px 的小方块,肉眼几乎无差别。
· ③ 商店图与效果录像
· 两张实机截图(深色主题):鲸鱼主体的双色渐变 + 发光、照片模式文字点阵;
· 两段录像(录的是运动本身:光标扰动、自动波、屏保呼吸;配色是录制时的默认蓝):
21 秒 · 照片模式 ·
48 秒 · 鲸鱼点阵
截图随仓库分发(市场详情页读 screenshots.json),录像是本 Release 的资产,都不进 npm 包
(所以 npm i 拿到的仍然只有 ~200KB)。
· 验证
| 脚本 | 结果 |
| --- | --- |
| maintain/verify-ui-fix.mjs | 29/29 |
| maintain/verify-controls.mjs(浅色 + 深色各一轮) | 72/72 ×2 |
其中可证伪的硬指标:每帧 rotate/translate = 0/0、save = 1 对(原来 4000+ 对)、
fillStyle = 4001 次 = 点数(原来 ≈8001);60Hz 假时钟跑一秒:跟随显示器 60 帧、
30 档 30 帧、60 档 59 帧,连跑两秒不断流;自动档在 4K@2x 上把 dpr 压到 0.982(8.0MP)。
---
· English
Frame-rate selection plus the five real reasons it stuttered. The settings panel gains a
Performance group: a frame-rate cap (follow-display / 120 / 90 / 60 / 45 / 30, factory default
follow display), a render-resolution limit (auto / 1× / 1.5× / 2×), and a live FPS readout.
Capping skips whole frames — skipped frames do not advance the physics, so the motion looks identica
v0.5.02026-10-13
0.5.0 —— 粒子可以调色、可以发光,顺手修掉一个"滑条数字不跟着走"的老 bug。
· ① 调色
粒子颜色不再写死在代码里。主题色降级为出厂值,设置里新增「颜色」组:
| 控件 | 作用 |
| --- | --- |
| 调色方式 | 🎨 跟随主题 / 🎯 自定义(分段控件,高亮当前项) |
| 粒子颜色 | 原生取色器(跟随主题时置灰) |
| 快捷配色 | 8 档预设色,点一下自动切到自定义 |
| 双色渐变 + 渐变副色 | 主色沿主体从左到右渐到副色 |
| 粒子浓度 | 不透明度倍率 0.2 – 1 |
| 网格跟随 / 网格颜色 | 网格点阵跟着粒子走,或单独指定颜色 |
颜色只在挂载 / 切主题 / 改参数时算一次(解析结果放进 COL),不在每帧解析十六进制;
渐变的取色按 17 档量化缓存字符串。所以调色本身不增加每帧开销。
· ② 发光
每颗粒子外面加一层光晕,强度和扩散范围可调;光晕默认跟随粒子颜色(含双色渐变),也可以单独指定。
实现上没有用 ctx.shadowBlur —— 那是逐次绘制的模糊,4000 颗粒子就是每帧 4000 次高斯,直接掉帧。
这里改成整幅 bloom:把粒子按 1/div 画到一块离屏小画布,再放大叠回主画布 —— 放大时的双线性插值
本身就是模糊,模糊量 ≈ div px,代价只有两次整屏 drawImage。而且光晕范围越大 → 离屏越小 → 越省,
正好和"越糊越便宜"同向。
两个细节:
· 先铺光晕、再画清晰本体,所以调好的颜色不会被加法混合冲淡;
· 深色主题用加法(lighter,真发光),浅色主题自动改用乘法(multiply,柔和暗晕)——
浅色底上做加法会直接饱和成白,等于看不见。
想看性能:把「光晕强度」拉到 0 或取消勾选「粒子发光」,就完全回到 0.4.1 的开销。
· ③ 修:滑条旁边的数字不跟着走
现象是"拖滑条效果会变,但数字不动,关掉设置再打开才显示当前值"。
根因:rangeControl(k, min, max, step, valEl) 把显示数字的元素当参数收,但 13 个调用点全都传了
null —— 因为那个 是在后面的 withValue() 里才创建的。于是
if (valEl) valEl.el.textContent = … 是死代码。重开设置之所以正常,是因为控件按 CFG 重建了一遍。
现在改成"谁建 span 谁绑监听",并顺手去掉 0.30000000000000004 这类浮点噪声。
· 验证
| 脚本 | 结果 |
| --- | --- |
| maintain/verify-ui-fix.mjs(透明化 / 结构自愈 / 视口看门狗) | 29/29 通过 |
| maintain/verify-controls.mjs(新增:面板 55 项,浅色 + 深色两轮) | 55/55 通过 ×2 |
| maintain/simulate-client.js | 正常(13 行 / 16 滑杆 / 9 勾选 / 4 取色器) |
新增的 verify-controls.mjs 是纯 Node、不用浏览器:它像宿主一样把设置面板挂起来,然后对每一个滑条
发真的 input 事件,断言数字在第一次事件就跟上、新值写进了 localStorage、连拖两次都对、勾选框也会
持久化。跑在 0.4.1 上是 13 个滑条全部卡住(FAIL 16/17)—— 也就是这个 bug 被精确复现;跑在 0.5.0 上全过。
调试接口也补齐了:__dshWhale.appearance()(配置值 + 实际算出的颜色/光晕颜色/混合模式 + 离屏画布尺寸)、
__dshWhale.frame()(立刻重画一帧)。
---
· English
Colour. Particle colour is no longer hard-coded: the theme colours become factory defaults and a new
Colour group adds a native picker with eight presets, a two-colour gradient across the subject,
particle opacity, and a grid that either follows the particle colour or takes its own. Colours resolve
once per change into COL (and the gradient is quantised into 17 cached strin
v0.4.12026-10-09
补一个会让点阵整幅跑到画面外的坑。
· 现象
照片模式(或任何主体)的图形整体偏右下、还被窗口边缘切掉,看起来像"掉到界面下面去了"。
重启客户端就恢复 —— 但这只是重新挂载了一次,不是修复:同样的条件再出现还会复现。
· 成因
图案的大小与位置完全由视口宽高决定:
var unit = (W * CFG.whaleScale) / bw; // 图形宽度 ≈ 0.4 × W
var cxp = contentCX || W / 2, cyp = H * CFG.baseY; // 水平居中内容区,垂直中心 0.44 × H
而 W/H 只在 resize 事件里更新。所以只要视口尺寸变了而没有 resize 事件到达,
图案就会按旧尺寸画到画面外,并且永远不会自己恢复。已知会触发的场景:
· 客户端插件被热重载(安装 / 升级任何插件都会触发)时,窗口正处于尺寸变动的间隙;
· 窗口在不同缩放比例的显示器之间移动 —— CSS 视口宽度会成倍变化,而 resize 不一定触发
(这一条最符合实测"两个方向的偏差都约 2 倍");
· 外接屏插拔、系统缩放松改;
· 挂载发生在窗口定型之前。
这和 0.4.0 修的结构遮挡是同一类教训:不要假设"事件会来"。
· 0.4.1 修法
mount() 里加一层视口看门狗:
var vpIv = setInterval(function () { if (viewportStale()) onResize(); }, 500);
每 500ms 对一次账,window.innerWidth / innerHeight / devicePixelRatio 与记录不符就重跑
onResize() —— 同时修好 canvas 后备缓冲与 ctx 变换。视口一变就自愈,不再依赖事件。
顺带把运行时几何暴露出来,这类问题以后不用靠截图反推:
__dshWhale.geometry()
// { W, H, dpr, innerWidth, innerHeight, stale, canvas:[w,h], layerRect,
// contentCX, subject, photoMaskReady, whaleScale, baseY, points }
· 验证
maintain/verify-ui-fix.mjs 现在 29 项断言全过,其中新增三条:
①能识别"视口已过期";②不需要 resize 事件即可重算;③canvas 后备缓冲跟着新视口变化。
---
· English
The pattern is sized and placed entirely from the viewport metrics (W/H), but those were only
refreshed inside a resize event. When the viewport changes without one — a client-plugin hot
reload (any plugin install/upgrade triggers it), moving the window between displays with different
scaling, plugging in a monitor — the whole artwork was drawn at the old metrics, i.e. off-screen,
and never recovered on its own. Restarting the client "fixed" it only because that remounts the
plugin.
0.4.1 adds a viewport watchdog that reconciles every 500 ms and re-measures on any drift
(width, height or device pixel ratio), plus __dshWhale.geometry() for diagnosis.
maintain/verify-ui-fix.mjs now runs 29 assertions, including "re-measures without a resize event".
数据来自仓库的 GitHub Release,可能与插件实际版本不一致。
README
由 DeepSeek 最新模型翻译生成dsh-whale-particles
npm version
npm downloads
license
把“点阵鲸鱼/照片点阵”作为 DSH Web 界面背景的浏览器端插件。
dsh-whale-particles 效果示例
上图为界面示例(点阵主体 + 界面透明化后的观感)。
- 每颗粒子都有自己独立、低频、平滑的“外力”(非统一流场、非逐帧白噪声),像官网鲸鱼一样:每颗各自动作柔和、彼此不齐;
- 手动模式:光标靠近时圈内各点柔和躁动,移开即平滑归位;
- 自动模式(屏保):“波”沿 360° 任意方向扫过主体(自动避开与上一道过近的方向,斜向按系数减速)+ “全屏呼吸”(缓缓起、维持、缓缓落),间隔默认 0(波连着波);
- 主体可切换:
- 🐋 鲸鱼(默认剪影);
- 🖼 照片:导入透明 PNG,引擎按 alpha 取主体、内部压成几 KB 小蒙版,仅存本地(localStorage),不上传;
- 参数面板(设置 → 插件 → 「鲸鱼点阵背景」标签页,直接铺开、无需展开):按「鼠标扰动 / 自动模式 / 外观 / 主体来源 / 轮廓 / 模式」六组排列;手动·自动、鲸鱼·照片都是高亮分段控件(当前选中项一眼可见);全部即时生效并自动保存,底部带「恢复默认」与版本号;
- 主界面不占位:没有右下角悬浮条,参数与手动/自动切换都在设置页里;
展开完整文档(README 剩余 1 节)
dsh-whale-particles
npm version
npm downloads
license
把“点阵鲸鱼/照片点阵”作为 DSH Web 界面背景的浏览器端插件。
dsh-whale-particles 效果示例
上图为界面示例(点阵主体 + 界面透明化后的观感)。
- 每颗粒子都有自己独立、低频、平滑的“外力”(非统一流场、非逐帧白噪声),像官网鲸鱼一样:每颗各自动作柔和、彼此不齐;
- 手动模式:光标靠近时圈内各点柔和躁动,移开即平滑归位;
- 自动模式(屏保):“波”沿 360° 任意方向扫过主体(自动避开与上一道过近的方向,斜向按系数减速)+ “全屏呼吸”(缓缓起、维持、缓缓落),间隔默认 0(波连着波);
- 主体可切换:
- 🐋 鲸鱼(默认剪影);
- 🖼 照片:导入透明 PNG,引擎按 alpha 取主体、内部压成几 KB 小蒙版,仅存本地(localStorage),不上传;
- 参数面板(设置 → 插件 → 「鲸鱼点阵背景」标签页,直接铺开、无需展开):按「鼠标扰动 / 自动模式 / 外观 / 主体来源 / 轮廓 / 模式」六组排列;手动·自动、鲸鱼·照片都是高亮分段控件(当前选中项一眼可见);全部即时生效并自动保存,底部带「恢复默认」与版本号;
- 主界面不占位:没有右下角悬浮条,参数与手动/自动切换都在设置页里;
- 附带调整:空会话(hero)输入栏整体下移,避免盖住主体;有对话后自动恢复贴底布局;鲸鱼中心自动跟随左侧栏宽窄(内容区居中,平滑补间)。
安装
方式一:npm(推荐,之后可在插件市场里一键更新)
dsh plugin --profile desktop add dsh-whale-particles
装好后 profile 会把它记成依赖,npm 上发了新版本时,DSH 插件市场 (设置 → 插件)就能检测到并一键更新。
方式二:本地目录
dsh plugin --profile desktop add ./dsh-whale-particles
方式三:离线包(免命令行)
见 release/ 目录:解压 dsh-whale-particles-offline-*.zip 后双击 install-whale.bat,脚本会自动备份 profile 的 package.json、拷入插件并注册 bundle。
不借助 dsh CLI 手动安装(与离线包内部做法相同):
1. 把 dsh-whale-particles 文件夹复制到 %USERPROFILE%\.dsh\profiles\\node_modules\dsh-whale-particles;
2. 在 …\profiles\\package.json 的 dsh.profile.bundles 里追加
"dsh-whale-particles"(改前先备份);
3. 重启 DSH Desktop。
注意:手动拷进去的副本不会出现在插件市场的"已安装"列表里,也就没有一键更新; 想走市场更新请用方式一。
profile 名默认 desktop(桌面版);若你的 profile 不叫这个,换成实际的即可。
安装/更新后需要重启 DSH Desktop(客户端 bundle 在启动时装载)。
版本适配(重要)
插件的“界面透明化”与“空会话输入栏下移”依赖 DSH Web 界面里 CSS Module 哈希类名; 不同 DSH/Desktop 版本这些前缀会变。点阵引擎本身不依赖界面类名,任何版本都能渲染, 变了的只是“让界面透明、露出背景”那几条规则和 composer 下移规则。
需要调整时,编辑 lib/client.js 中 STYLE 常量开头几条与
measureContentCenter() 里的选择器,把哈希前缀换成本机实际类名:
| 作用 | 选择器(0.1.5-rc.1 / Desktop v2.0.9,与 0.1.2-rc.1 / v2.0.5 相同) |
| 主框架透明 | ._1qAH1q_frame |
| 会话/根容器透明 | .uPhUma_root |
| 侧栏半透明 | ._1qAH1q_sidebarCol |
| 内容区中心测量 | ._1qAH1q_sidebarCol、[data-slot="sidebar"] |
| 空会话输入栏下移 | .uPhUma_root[data-phase=hero] .uPhUma_composerSeat |
实测:DSH Desktop v2.0.5(web 前端 0.1.2-rc.1)的哈希前缀是 _1qAH1q (主框架/侧栏,来自 @deepseek-ai/dsh-client-ui-layout)与 uPhUma (会话/根容器/输入栏,来自 @deepseek-ai/dsh-client-ui-conversation);旧的
v2.0.3(0.1.1-rc.2)使用 pI_x6G、wSkVaW、ydkMvW。换版本后按上述办法
重新取值(DevTools 选中元素,取 _frame、_sidebarCol、_composerSeat
对应项的新前缀;全局替换这两处前缀即可)。改动后重启生效。
卸载 / 临时隐藏
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),每台机器各自保存,不随插件文件迁移。
仓库结构
package.json dsh.bundle.patch(bundle 资格)+ dsh.client(Web 客户端半边) cordis.patch.yml 把本插件 insert 进 profile 的层栈 lib/index.js 宿主半边(空实现,纯浏览器插件) lib/client.js 全部实现:点阵引擎 + 界面透明化 CSS + 参数面板(免构建) assets/ README 用示例图 release/ 发行物:最新 tgz、离线安装 zip、一键安装/卸载脚本预览分享卡片长什么样 ↓
分享 · DeepSeek Harness Hub
fewoot/dsh-whale-particles
用点阵鲸鱼或照片粒子装点界面背景
相关插件 · 市场 / 管理
插件精选列表awesome-dsh-plugin/awesome-dsh-plugin
DeepSeek Harness(dsh)插件精选列表
★ 22,399未汉化DSH
73.6
新词雷达zhuyansen/new-term-radar
new-term-radar新词雷达
★ 2,049已汉化MCP
72.8
插件生态导航0xsline/awesome-deepseek-harness
安装 贡献指南 DeepSeek Docs 公开插件目录 Issues
★ 1,188已汉化DSH
72.6
技能注册中心iflytek/skillhub
企业级开源智能体技能注册中心——发布、发现并管理组织内可复用的技能包。
★ 5,384已汉化DSH
71.9
插件市场目录imsai-sh/awesome-deepseek-harness-plugins
面向 DeepSeek Harnessdsh生态的社区插件目录,共收录 13950 个插件含 PR 收录与…
★ 360已汉化DSH
71.9
插件精选清单Anil-matcha/awesome-dsh-plugin
DeepSeek Harnessdsh精选指南——DeepSeek…
★ 1,013已汉化DSH
71.7
这个插件是你维护的吗?
作者本人可认领并核对本条目;认领通过后,详情页会显示「作者已认领」标记。