前言¶
DeepSeek Harness (DSH) 和 DSH Desktop 支持插件化扩展。对于开发者或重度使用者而言,界面不仅是交互容器,也是工作流的一部分。在保持技术克制的前提下,为 DSH 添加一个具有沉浸感且不影响性能的动态背景,是提升使用体验的有效手段。
dsh-particle-whale 是一个基于 Three.js 和 WebGL 的 3D 粒子鲸鱼背景插件,由 zepeng-jin 维护。它解决了通用 UI 背景静态、缺乏交互反馈的问题,提供了一种高帧率、可响应状态的视觉增强方案。
核心功能¶
该插件在 dsh 框架的 web 平台上运行,主要包含以下能力:
- 体积 3D 粒子网格
使用距离变换映射技术,将 DeepSeek 的 2D 矢量轮廓转化为 3D 棒状体。粒子具有弯曲的背部/腹部厚度、表面法线、高光以及菲涅尔边缘光效果。 - 头朝前游动
模拟真实的海洋生物运动,头部引导航向,波浪沿脊柱向尾鳍传播。在窗口切换时,鲸鱼会平滑转向。 - 响应式智能状态
- 空闲状态:鲸鱼以 1.05 倍缩放和 1.1 倍速度在全屏巡航,尾鳍轻微摆动。
- 活跃状态:当处于思考、流式输出或工具执行阶段时,鲸鱼游向右上角,缩小至 0.45 倍作为迷你指示器,并伴随高能生物发光脉冲。
- 新会话散开效果
仅在创建新会话(Cmd+N/Ctrl+N或点击“新聊天”按钮)时触发星云爆炸与重组动画,普通点击忽略,避免干扰阅读。 - 毛玻璃合成器
为聊天输入卡片添加 88% 透明度的毛玻璃效果(backdrop-filter: blur(20px)),确保鲸鱼在输入框下方可见,同时保持文字对比度。 - 主题自适应
深色模式下使用银青色发光粒子(加法混合);浅色模式下使用高对比度的深蓝宝石色粒子。 - 性能优化
通过pointer-events: none处理遮罩层,使用预计算抖动缓冲、实例化网格渲染和异步状态轮询,维持 60–120 FPS 的帧率。
安装与启用¶
安装该插件需在 DSH Desktop 的 Web 配置目录下操作。建议开发者使用符号链接进行本地开发与测试。
方式一:符号链接(推荐用于本地开发)¶
- 进入 DSH Desktop 的 Web 配置
node_modules目录:
cd ~/Library/Application\ Support/dsh-desktop/harness/profiles/web/node_modules
- 建立项目符号链接:
ln -s /path/to/dsh-particle-whale dsh-particle-whale
- 在
~/Library/Application Support/dsh-desktop/harness/profiles/web/package.json中注册插件:
{
"dependencies": {
"dsh-particle-whale": "*"
},
"dsh": {
"profile": {
"bundles": [
"dsh-particle-whale"
]
}
}
}
- 重启或重新加载 DSH Desktop。
方式二:通过 npm 安装¶
直接在 Web 配置目录下执行安装命令:
cd ~/Library/Application\ Support/dsh-desktop/harness/profiles/web
npm install dsh-particle-whale
典型用法¶
安装完成后,插件会自动读取 dsh 配置中的通用设置页开关。在正常使用中:
- 默认巡航:鲸鱼在屏幕中央偏下位置以正常游动姿态出现。
- 交互反馈:当你开始提问或模型开始思考时,鲸鱼会游向右上角并缩小,此时它充当了一个状态指示器。
- 新会话:点击新建按钮,鲸鱼会炸裂成粒子并重组,提供明确的会话开始视觉提示。
适用场景与注意¶
- 平台:Web 平台。
- 性能:插件通过
pointer-events: none确保 UI 层不会阻挡鼠标事件,适合高负载场景。 - 依赖要求:安装前需确保已满足以下对等依赖:
react ^18.2.0@deepseek-ai/cordis ^4.0.1@deepseek-ai/dsh-client-runtime ^0.1.0-rc.6@deepseek-ai/dsh-client-locale ^0.1.0-rc.6@deepseek-ai/dsh-client-ui-slots ^0.1.0-rc.6
- 安全性:插件开源且遵循 MIT 许可证。安装前建议查阅源码以确认无恶意行为。
总结¶
dsh-particle-whale 提供了一种轻量级、高性能的 3D 视觉增强方案,通过模拟海洋生物的游动状态和粒子特效,丰富了 DSH Desktop 的交互反馈层。