Chuyển đến nội dung chính

dsh-whale-galaxy

Đã xác minh

@agentbuff/dsh-whale-galaxy · v0.1.2 · MIT · Giao diện web

DSH web background plugin 「鲸落星河」: a DeepSeek whale swimming through a particle galaxy — canvas starfield, drifting nebula, stardust whale wake, dark/light adaptive.

Cài đặt

dsh plugin add @agentbuff/dsh-whale-galaxy

Xác nhận layer đã áp bằng dsh --profile default --dump-config — xem hướng dẫn cài plugin.

Mã nguồn

Phát hành lên npm mà không có repository công khai. Hãy kiểm tra nội dung package trước khi cài.

Thẻ

Tác giả

Readme

🐋 @agentbuff/dsh-whale-galaxy 「鲸落星河」

一个为 DeepSeek Harness 打造的 Web 视觉插件:全屏 Canvas 粒子星河、一条会游动和响应鼠标的粒子鲸鱼,以及在 AI 对话期间从星河跃迁而来的小鲸鱼伙伴。

一鲸落,万物生。 鲸鱼游过之处,尾迹化作新的星辰 —— 这条星河,由鲸落而生。

效果

image imageimage
  • 🌌 深空星河背景:深蓝 → 靛 → 紫 的渐变天幕,缓慢漂移的星云光晕(DeepSeek 品牌蓝 + 青色 + 紫色),暗角聚焦;星河透过所有界面表面(侧边栏、面板、消息气泡、输入框)隐隐浮现。
  • ✨ 颗粒星海:数千颗 1px 星尘铺满天幕(newmixcoffee 同款栅格采样),底层流体网格带着它们缓慢卷动。
  • 🖱️ 鼠标搅拌(参考 newmixcoffee.com):光标划过时沿路径注入速度场,星尘像粉末被搅开;停下后弹簧回到原位,停驻时仍有一圈柔和空腔。
  • ☄️ 流星:偶尔划过,顺带扰动附近星尘。
  • 🐋 粒子鲸鱼:DeepSeek logo 被栅格化成上万颗明暗不均的颗粒,以星尘构成形体横穿星河;游到边缘淡出,从另一侧淡入。
  • 💫 星尘尾迹:鲸尾持续洒落颗粒,汇入身后的星河。
  • 💬 对话鲸鱼伙伴:当 Harness 进入 Deep diving...,星河中的同一条鲸鱼沿弧线游向流式输出行,收束为与 DeepSeek Logo 同方向的小鲸鱼;并不会同时出现两条鲸鱼。
  • 🧠 自动状态反馈:等待模型时环绕星点思考;流式输出时尾鳍持续摆动、扫描环流转;完成时绽放星点;空闲后恢复安静游弋。无需额外设置。
  • 🌗 明暗自适应:跟随 DSH 主题(body[data-ds-dark-theme]);深色主题下星河绚烂,浅色主题下保持素雅,文字始终可读。
  • 🖱️ 与 可访问性:右下角浮动小鲸鱼按钮可随时开关(localStorage 记忆);尊重 prefers-reduced-motion;隐藏标签页自动暂停渲染;DPR 上限 2、粒子数按面积自适应。

安装

# 在 dsh 的 web profile 中安装本插件
dsh plugin --profile web add @agentbuff/dsh-whale-galaxy

或从本地路径安装(开发时):

dsh plugin --profile web add file:/path/to/dsh-whale-galaxy

安装后重启 web 应用使新插件行进入启动图(plugin-set 变更需要重启):

dsh web
# 或 dsh --profile web

打开界面后即可看到鲸落星河的背景;右下角小鲸鱼按钮可关闭/开启。

对话交互

  1. 空闲时,鲸鱼在星河里缓慢游动,鼠标只会在触及鲸鱼粒子时将它们沿移动方向夸张地带开,并缓慢归位。
  2. 当 AI 进入对话处理阶段,这同一条鲸鱼会仰头画弧游向当前流式输出行的右端,并在途中缩小。
  3. 落位后,小鲸鱼保持 DeepSeek Logo 的原始朝向;在思考或流式输出期间持续轻摆尾鳍,结束后回到安静状态。

开发

npm install          # 安装 esbuild / typescript(仅开发依赖)
npm run build        # 产出 lib/index.js(Node 半部)与 lib/client.js(浏览器 bundle)
npm run watch        # 监听重建 —— 安装后重建 client.js 会经 HMR 自动热更新
npm run preview      # 截图独立预览页(scripts/shot.mjs)
node scripts/analyze.mjs   # 像素级自检(星海/鲸鱼/动画)

本地迭代:dsh plugin --profile web add "link:..." 装好一次并重启后,npm run watch 每次重建都会触发 client-modules 的 HMR 轮询(500ms),页面自动重载 bundle,无需再重启服务。

提示:link: 安装(符号链接)适合开发;发布到 registry 后用户用 dsh plugin --profile web add @agentbuff/dsh-whale-galaxy 安装正式版本即可。

工作原理

与 DSH 的插件契约完全一致(参考 dsh-better-sidebar):

声明 位置 作用
dsh.bundle.patch cordis.patch.yml 向 profile 的 cordis 配置插入一行插件(行 name = 包名),使 client-modules 扫描能解析到本包
dsh.client.platform: "web" package.json 声明这是一个 web client 包,进入 window.__DSH_BOOT__ 启动图
exports["./client"] package.json 指向构建产物 lib/client.js,由 DSH 的插件静态资源端点提供
apply(ctx) / inject lib/client.js client 插件入口:挂载 canvas、注入样式、注册开关

背景层级:canvas 固定在 z-index: -1,并覆盖 --dsw-alias-bg-base 为半透明,让星河从应用面板背后透出 —— 不改任何组件代码,只动主题 token,因此与 DSH 的升级天然兼容。

许可

MIT