dsh-skin

DeepSeek Harness 首页风格聊天背景皮肤 —— 对照 deepseek.com/harness 首页逐行移植，用于 dsh web 界面（http://127.0.0.1:3080）。

A homepage-style chat background skin for DeepSeek Harness: WebGL fluid + dot-line grid + digital point-cloud whale, ported line-by-line from the official harness landing page.

效果 / Features

• 首页同款 WebGL 流体背景（5 色噪声场 + 流场笔刷 + 光源/辉光/暗角/颗粒，原样移植官方 shader）
• 白色 90px 点线网格（鼠标扰动 + 弹簧回弹，官方同款物理）
• 鲸鱼 = 数字点云（HeroDigitileR3F 移植）：粒子聚成鲸形、呼吸游动、鼠标径向推开、光标光束提亮
• 深色主题生效；reduced-motion 自动停用；不监听点击事件

文件 / Files

文件	说明
harness-fluid.js	流体 + 网格 + 鲸鱼点云脚本（含全部交互与参数）
harness-bg.css	背景 CSS 补丁（渐变底、侧边栏半透明、输入区玻璃化、移除黑色遮罩）
hero-whale.svg	鲸鱼轮廓原图（DeepSeek 官方资源）

安装 / Install

以 dsh 实际安装目录为准，下面用 <DSH> 表示 node_modules\@deepseek-ai\dsh 所在位置（本例为 D:\ProgramMyset\node-v24.19.0-win-x64\node-v24.19.0-win-x64\node_modules\@deepseek-ai\dsh）。

1. 复制脚本与鲸鱼图：
   • harness-fluid.js → <DSH>\node_modules\@deepseek-ai\dsh-web-frontend\dist\assets\harness-fluid.js
   • hero-whale.svg → <DSH>\node_modules\@deepseek-ai\dsh-web-frontend\dist\assets\hero-whale.svg
2. 注入脚本：编辑 <DSH>\node_modules\@deepseek-ai\dsh-web-frontend\dist\index.html， 在 </head> 前加一行（只加一次）：

   <script src="/assets/harness-fluid.js" defer></script>
   

3. 应用 CSS：把 harness-bg.css 全部内容追加到
   • <DSH>\node_modules\@deepseek-ai\dsh-web-frontend\dist\assets\index-*.css（主入口）
   • <DSH>\node_modules\@deepseek-ai\dsh-client-ui-theme\lib\styles\base.css （若末尾已有旧的 “DeepSeek Harness 首页风格聊天背景” 补丁块，先整块删除再追加）
4. 浏览器打开 http://127.0.0.1:3080，按 Ctrl+F5 强制刷新。 服务器无需重启；重启后依然生效。

参数调节 / Tuning

均位于 harness-fluid.js，改完复制到 dist 并 Ctrl+F5：

效果	位置	当前值
鲸鱼基础透明度	baseAlpha	0.25 + 0.28 * D
鲸鱼粒子大小	size = 0.09 * unit	0.09
鲸鱼大小	whaleW = Math.min(W, H) * 0.52	0.52
鲸鱼位置	cx = contentCX / cy = H * 0.45	内容区居中
鼠标提亮范围	BEAM_R	10
鼠标提亮强度	alpha 行 (1 + 0.35 * beam)	0.35
粒子推开半径/强度	MOUSE_R / MOUSE_STR	4.9 / 0.8
流体是否被鼠标扭曲	flowmap brushStrength 后的值	0（关闭）

注意 / Notes

• 重装/升级 @deepseek-ai/dsh 会覆盖 dist 目录，需重新执行安装步骤。
• 皮肤仅在深色主题（body[data-ds-dark-theme]）下生效。

License / 开源协议

MIT © 2026 changan0617