dsh-theme-holo

dsh-theme-holo

《狼与香辛料》赫萝主题 —— 给 DeepSeek Harness Web GUI 的一层暖纸皮肤。

羊皮纸底色、麦金强调色、一段 12 秒实时渲染的开场动画、趴在输入框边偷看的她、 一张画像式的账户小卡、一枚可以自己摆位置的「狼与香辛料」字标， 以及只在你开始页亮着的右栏待机画面。

目录

章节 · 功能详解的十二个小节 这是什么 · 两套配色 界面预览 · 开场动画 功能一览 · 浮动字标 环境要求 · 偷看的她 安装 · 动态档案卡 功能详解 · 日志标签 插件设置项 · 侧栏脚下的麦田 目录结构与素材 · 插件详情页横幅 常见问题 · 右栏待机画面 实现要点 · 小鲸鱼挂件联动 已知边界 · 羊皮纸便笺 许可证与版权 · 语音与翻译气泡 出处声明 · 相关链接 · English ·

关于这个目录的方框：GitHub 的 Markdown 渲染器会剥掉所有 style 与 color，

没法给目录加自定义底色的圆角外框。表格是唯一既自带底色与边框、又保留可点击链接

的结构，所以这里用表格来画这个框——底色与线条是 GitHub 主题给的灰调，

不是插件的米色，这点无法改变。

这是什么

说明：上方这张横幅是图片，配色取自插件浅色「麦秋晨光」——米黄 #FBF7EF 底、

深米色 #DCC9A8 双线圆角外框、金色 #A2701F 分隔线，文字 #6E5D46。

GitHub 会剥掉 README 里所有的 style 与 color 属性，页面本身的底色和文字颜色改不了，

能承载配色的只有图片。

项 · 说明 形态 · 正规 DSH 插件：index.js（宿主半）+ client.js（浏览器半）+ assets/ + 素材/ + cordis.patch.yml 插件大小 · 约 21 MB（client.js 与 index.js 合计约 264 KB，其余全是素材；docs/ 的 1.7 MB 配图不参与运行时） 素材 · 图片 11 张、视频 6 组、音频 10 件，由宿主侧的 HTTP 路由送出 配色 · 浅色「麦秋晨光」与深色「星夜麦田」（开发中，测试功能） 依赖 · Node ≥ 22；无第三方运行时依赖

设计上有两条原则：

1. 不改宿主布局。 所有装饰要么是挂在 `` 上的独立浮动层，要么是纯 CSS 规则，

不改宿主的 flex 盒、尺寸与 overflow。

1. 能关的都给了开关，没开关的如实标出来。 插件设置里有七组开关——开场动画、偷看的她、

探头语音、黑夜模式、右栏待机动画、羊皮纸便笺（两个按钮：总开关 + 入口模式）、浮动字标显隐。 关掉即彻底移除，不留残余节点。 剩下三项是常驻的：动态档案卡、日志标签、侧栏麦田。它们只是静态样式或 纯展示层，不拦截点击、不占布局，因此没有做开关——这里不写「全部可关」。

界面预览

装上之后，整个 Web GUI 长这样（为保护隐私，余额、今日消耗金额与账号名已遮去，其余为原始截图）：

一眼能认出的几处：

位置 · 看到什么 顶部中间 · 「狼与香辛料」浮雕字标，可拖动、可关 右上 · 右栏待机画面（只在右栏自己的开始页亮；点她会说一句） 输入框右侧 · 偷看的她，只露兜帽和一双眼 左下角 · 侧栏脚下的麦田，宽度随侧栏走 整页 · 羊皮纸底色 + 麦金强调色，所有文字转暖棕

更多细节图见下方各功能小节。

功能一览

功能 · 一句话 两套配色 · 浅色羊皮纸 / 深色暖墨（深色为测试功能） 开场动画 · 12 秒 canvas 实时绘制：暗里的红眼 → 狼影描红 → 光炸开 → 标题解码 → 就绪 浮动字标 · 「狼与香辛料」字标，位置 / 大小 / 不透明度可调，可整个关掉 偷看的她 · 输入框边只露兜帽和一双眼，指针靠近会升起；可左右拖动 探头语音 · 点她会「疑惑」一声，探头右上角浮出中文译文（可关） 动态档案卡 · 悬停左下账户行，升起一张 Steam 式小卡 日志标签 · 「思考 / 读取 / 运行命令」等行内标签各一档暖色 侧栏麦田 · 侧栏脚下的一片麦穗，宽度跟着侧栏走，高度锚在账号行 插件详情页横幅 · 插件管理器里点进本插件时，内容顶部一张 1920×620 的封面 右栏待机画面 · 只在右栏自己的开始页亮的一段动画，六片可换，一进去干活就熄；点她会应答一句 羊皮纸便笺 · 右下角一枚麦穗环徽章，点开是一张能打字、能粘图的便笺；入口可改成顶部按钮 语音与翻译气泡 · 按钮、她、挂件、便笺徽章、待机画面各接一句台词，译文浮在探头右上角 小鲸鱼联动 · 一键把两个角色 + 一条语音装进 dsh-whale-widget；点挂件鲸鱼也有译文气泡

环境要求

项 · 要求 · 说明 DeepSeek Harness · >=0.2.0-rc.1 =22 · DSH 自带运行时即满足 操作系统 · Windows / macOS / Linux · 已在 Windows 11 + DSH 0.2.1-rc.2 实测 磁盘空间 · 约 21 MB · 其中素材约 15 MB（素材/动画/ 六段视频占 12.6 MB） 第三方依赖 · 无 · 没有 npm 依赖，安装后不需要 pnpm install 网络 · 安装时需要 · 从 GitHub 取包；运行时不联网

这些版本约束同时写进了 package.json：

"engines": { "node": ">=22", "dsh": ">=0.2.0-rc.1 <0.3.0-0" },
"dsh": {
  "compatibility": {
    "dsh": ">=0.2.0-rc.1 <0.3.0-0",
    "dshReleases": {
      "0.2.0-rc.1": "compatible",
      "0.2.0-rc.2": "compatible",
      "0.2.1-alpha.5": "compatible",
      "0.2.1-rc.1": "compatible",
      "0.2.1-rc.2": "compatible"
    }
  }
}

dshReleases 是逐个版本标注的兼容表——与 dsh-cost-meter 等官方插件的写法一致。

安装

最短的一条路——在 DSH 里打开 设置 → 插件 → 添加插件，填入：

github:1015677515/dsh-theme-holo

点安装，等它下载完，立即启用，然后重启 DSH。

【未验证】 这条 github: 路径没有在隔离环境里逐步实测过。若解析失败

（提示找不到包、或装完不出现在列表里），改用下面这条一定可用的本地安装。

本地安装的核心是三行：profile 的 package.json 里加 link: 依赖、在 dsh.profile.bundles 里登记插件名、再到 node_modules 下建一个目录链接。

完整的三种安装方式、自检步骤、卸载与故障排查，都在 INSTALL.md。

装好之后：开场动画播完、界面变成羊皮纸色就是生效了。如果检测到小鲸鱼挂件， 会弹一次「要不要把赫萝装进挂件」的对话框；不想装就选「暂不安装」，之后不再弹 （见小鲸鱼挂件联动）。

功能详解

两套配色

浅色「麦秋晨光」与深色「星夜麦田」（开发中，测试功能），两套值键一一对应。

• 浅色规则挂在 html body:not([data-ds-dark-theme]) 下；
• 深色规则挂在 html body[data-ds-dark-theme] 下。

两套值分别在 client.js 顶部的 PALETTE 与 PALETTE_DARK 两张表里，由同一个循环展开成 CSS 变量。 两张表的键名与顺序必须完全一致，改了一个就要改另一个。

黑夜模式开关走的是主题服务的 setTheme('dark' | 'light')，和「设置 → 外观」用的是同一个 偏好字段，所以两处是同一个状态，不会出现「设置里是深色、插件里写着浅色」的分裂。 宿主没有 theme 服务时回退为直接切 body[data-ds-dark-theme]。

首次安装默认浅色：DSH 的外观偏好出厂值是「跟随系统」，系统本身是深色的机器，一装好就落在 深色 GUI 上，再叠上「星夜麦田」很容易被误读成「装了插件就被切成黑夜模式」。所以插件在首次 运行（localStorage['dsh-theme-holo.dark-defaulted'] 尚未落闩时）若发现宿主已解析为深色， 会通过主题服务把偏好改回 light 一次并落闩；此后只有设置卡片里的开关能再打开深色，插件不会 跟你后来的选择对着干。本来就是浅色的机器不会被碰，只落闩。

黑夜模式尚未完全适配：深色下仍有若干细节是按浅色调的，观感不如浅色完整。设置卡片里为此 加了一行提示——「黑夜模式未完全做好适配，请谨慎打开」。

深色下暖色装饰整体收起：麦穗纹、飘落的麦粒、偷看的她、连接线这些按浅色羊皮纸调的装饰， 压到深色上会脏，所以用一条规则统一隐藏，只留深色外壳与星夜麦田的 token 值。 浮动字标与联动弹窗不在其列——字标是品牌标识，两套配色下都该在。

开场动画（12 秒，实时渲染）

不是视频，是 canvas 2D 逐帧绘制，用 requestAnimationFrame 按真实时间推进。 画布固定 1920×1080，帧率 30 fps，总时长 12 秒。

时间轴：

秒 · 画面 0.8 · 全黑，闭着的眼睑先透出红光 1.15 – 1.95 · 缓缓睁眼（先半睁，再完全睁开） 2.45 / 2.92 · 两次眨眼，每次 0.2 秒 3.25 – 3.6 · 视线移向左边的狼影 3.4 – 6.1 · 镜头在黑暗中后拉 3.75 – 5.15 · 狼影轮廓被红光从背脊描到吻部 4.85 · 狼影的眼睛亮起 5.2 – 7.0 · 狼嚎 6.35 · 她眨一只眼 6.55 – 7.95 · 光从双眸炸开，照亮整张画 7.9 / 8.45 · DEEPSEEK 逐字解码出现，HARNESS 字距收拢 8.55 – 9.25 · 拉出一根「缰绳」，线头一颗红点 9.05 – 9.85 · 三行启动日志逐字打出 9.9 – 10.45 · 进度条走满 10.5 / 10.75 · 就绪闪光、标语 11.3 – 12 · 只淡出声音，画面停住

操作

• 任意点击 / 按键立刻结束，0.55 秒淡出后交还屏幕。
• 右下角有 跳过动画 按钮，效果等同于点画面任意处。
• 系统开了「减少动态效果」（prefers-reduced-motion: reduce）时直接停在收尾帧。
• 音轨默认关闭，右下角开关是 ♪ 音效 开 / ♪ 音效 关。打开后会立刻播放并自动对齐当前画面时间，

选择记在本地，下次启动沿用。点开关不会跳过片头。

• 插件设置里可以永久关闭开场动画（见插件设置项）。关掉后连 canvas 都不创建，

下一帧就把屏幕交回。

调试入口（写在 URL 里）

• #boot-hold 把片头停在关键帧；#boot-hold=11.4 可指定任意秒数，缺省停在 10.2 秒。
• #videocap 停在片头供录屏，#videocap=tail 额外多留 5 秒画面。

浮动字标

「狼与香辛料」字标（assets/logo.png，591×125 透明 PNG）是一块自己定位的图： position: fixed + 视口百分比，挂在 `` 上，位置和大小由插件说了算。

为什么不做成标题栏里的水印：尺寸和位置会被宿主的 flex 盒、容器单位与 overflow 规则牵着走， 插件改不动；而且一开插件设置页（宿主会换掉主面板），整棵会话连同标题栏被卸载，水印得靠常驻观察器 才能回来。挂在 `` 上这两个问题都不存在。

位置以视口百分比存储（xPct / yPct / wPct），渲染时用 vw / vh 单位， 所以窗口缩放、最大化、换分辨率都不需要监听 resize，字标自动等比跟随。

日常不拦点击：图层常驻 pointer-events: none、aria-hidden="true"，不挂任何监听。 只有打开「更改 logo 位置」时才变成 pointer-events: auto，那时才能拖动。

调位置、调大小

1. 插件设置里点「更改 logo 位置」，字标出现一圈细线框、右下角小方块和实时坐标读数；
2. 拖图片移动，拖右下角小方块改大小，读数会实时显示 x, y · 高 Npx；
3. 按 Esc 也能退出；点「完成调整（固定下来）」把位置写进本地存储。

同一节里还有：

• 关闭 logo：整个图层收掉（不是把不透明度降到 0——隐藏的东西不该还能接点击）。

位置和大小原样保留，再点「显示 logo」就回到刚才停的地方。

• 恢复默认位置：位置、大小、不透明度、显隐四项一起回到出厂值。

不透明度：10%–100% 的滑块，出厂 50%，拖动即时生效、松手即存。 下限是 10% 而不是 0：一个几乎透明的字标等于一件找不回来的东西。

图层高度：z-index: 2。这个数字是调出来的——-1 会被宿主的 .BynINW_frame （不透明背景）整个吞掉；0 / auto 会和它同趟按文档序绘制，而插件在宿主渲染外框之前就挂载了， 反过来被盖住。2 压得过外框，但低于宿主自己浮起来的控件（缩放手柄、overlay 层等）。 编辑态会升到很高的 z-index 并开启 pointer-events。

代价是它会压在别的东西上——它本来就在 GUI 之上。这是有意的取舍：字标是一块可以挪的图，

不是垫在纸下面的水印。想让它让开就把图拖走，或者在设置里「关闭 logo」。

偷看的她

输入框边上只露兜帽和一双眼，指针靠近会升起。所有动作由一个状态机驱动： 露出多少、倾角、让位、点头四个量，行为只写目标值，循环以 0.14 的系数缓动过去， 所以永远不会「跳」。

状态 · 触发 · 表现 常态 · 无输入 · 露出 32%，只到眼睛；整体再下沉 10px，底边被输入框卡片裁掉 正在打字 · 输入框有内容 · 露出 58%，朝文字倾，并从她手边拉出一根金线接到输入框 生成中 · 出现「停止」按钮 · 露出 62%，朝文字方向倾，盯着看 长文看累 · 输入 > 420 字 · 沉下去、透明度降到 55%，歪头表示嫌弃 打瞌睡 · 空闲 170 秒（23:00–05:00 为 75 秒） · 只留帽檐，鼠标一动就醒 打开菜单 / 弹窗 · 有 [role=menu/dialog/listbox] 或 aria-modal · 往右让开自身宽度的 55% 并透明到 0 靠近 · 指针在 96px 内但没落在她身上 · 往下缩 5px、歪头 指针移动 · 以她自己的中心算方向 · 整颗头朝指针倾斜，位移上限 ±10px / ±3px，倾角上限 ±2.2° 点击她 · 点 · 纵向压扁一下 + 6 粒金麦从卡片后面飘起，并播一句应答语音 悬停 5 秒 · 一直指着她 · 一枚小苹果从帽檐后滚出来（纯 CSS 画） 发送 · 点发送或回车 · 往下点一下头（320ms）

麦粒和苹果都是临时节点，动画结束即移除；金线是 SVG 路径，只在「打字且没有弹窗」时出现。 「减少动态效果」时所有缓动系数置 1，麦粒和苹果直接不出现。