dsh-splash:React 挂载前的赛博朋克启动画面

前言

用 DeepSeek Harness(DSH)做智能体或应用开发时,启动阶段往往先看到内核自带的加载卡片,再进入 React 界面。若希望在这一段空白里换成统一、可配置的「开机」体验,又不想引入打包链或额外依赖,就需要在框架挂载之前注入一层全屏浮层。dsh-splash 走的就是这条路径:在 BootHandoff 之前铺满屏幕,用一条时间轴同时驱动进度计与启动日志,并自带独立设置页。

这是什么

dsh-splash(GitHub:zfwoo/dsh-splash)由维护者 zfwoo 发布,在社区目录 SkillHub 中归类为 趣味换装。它是 DeepSeek Harness 的第三方插件(非 DeepSeek 官方出品),采用 MIT 许可证,当前 package 版本为 1.0.0,零 npm 依赖、无构建步骤,clone 或安装后即可作为纯 JS 插件运行。

一句话定位:赛博朋克风格的全屏启动画面——透视网格、CRT 扫描线、霓虹鲸鱼、逐行滚动的启动日志,进度与日志共用同一时间轴;默认约 10 秒播完,任意非纯修饰键或点击浮层可跳过;配置持久化在 $DSH_HOME/dsh-splash.json,并通过宿主路由提供读写与设置 UI。

核心功能

注入时机与两段启动

DSH 启动分两段:内核加载卡片(BootPage)→ React 挂载(BootHandoff)。本插件只能在第一段介入:宿主半侧 index.js 监听 webserver/index-inject,向索引页推入配置、样式、DOM 与内联控制器;在 React 挂载前隐藏 [data-dsh-boot] 并显示自定义浮层。客户端半侧 client.js 注册设置页,并向 shell.overlay 注册一个返回 null 的条目,作为「应用框架已渲染」的第二就绪信号。

动画与时间轴

默认动画时长 10 秒(minDurationMs: 10000):进度 = 已播时长 ÷ 动画时长,匀速 0→100%;日志第 n 行在进度跨过 n/(N+1) 时落下,与进度条同轴,避免旧方案里进度条先顶满、日志仍在滚动的脱节。收场在 100% 且就绪时以 CRT 塌缩移除浮层;若超时仍未就绪(默认兜底 30 秒,maxTimeoutMs: 30000),进入 stuck 态并显示「继续」,不淡出,以便看到底层真实界面或报错。

日志文案按工具链输出风格编写(如 resolve profile bundles、mount application frame),面向人的状态行与跳过提示则按 navigator.language 中英切换。支持 @media (prefers-reduced-motion: reduce) 关闭大部分动效。

跳过与失败

跳过:除 Shift/Ctrl/Alt/Meta/CapsLock/Tab 及带修饰键组合外,按键或点击即可跳过;跳过后移除 data-dsh-splash-state,内核加载卡片重新可见。若内核卡片出现 Failed to load plugins,控制器会立即收场。

配色预设

id 说明
cyber(默认) 青 + 品红,近黑底
synthwave 紫罗兰 + 橙
matrix 磷光绿
amber 琥珀 / CRT 暖黄
mono 跟随亮暗主题,关闭网格与故障效果

设置页上的预设列表来自宿主广播,非客户端硬编码。

独立设置页

导航中与「通用设置」同级,id: splash。主要项:启用开关、霓虹配色、动画时长与兜底超时(界面以秒显示,存储为毫秒)、预览、恢复默认、只读配置文件路径。写配置仅通过 POST /dsh-splash.set;启用开关只在下次启动生效(避免实时打开全屏且无法关闭)。预览调用 globalThis.__DSH_SPLASH__.preview(),开关关闭时仍可用;桌面端若宿主注入未生效需重启应用,浏览器端刷新页面。

环境与质量

同一份代码支持 Electron 桌面与 dsh web。仓库提供冒烟、设置页真渲染、控制器真执行三道测试,npm test 一条命令;CI 在 Ubuntu 与 Windows 上跑 Node 20/22。

安装与启用

前提:dsh 可用,Node ≥ 20,无其它依赖与构建。

官方 README 给出的 web profile 一行安装如下:

dsh plugin --profile web add github:zfwoo/dsh-splash

dsh plugin 会转发给 pnpm,github: 为合法 spec。维护者说明:该 github 装法未做端到端验证;若出现 cannot resolve profile bundle,可在插件目录执行 node tools/link-profile.mjs web 补 pnpm 未创建的 junction(README 将此列为常见必要步骤)。

另外两条硬要求来自文档:

  1. 插件 bundle 须排在 profile bundles 列表末尾,以便 patch 最后写入。
  2. 安装后按需运行 node tools/link-profile.mjs web(或 desktop)。

生效方式:web 端刷新页面;桌面端须重启 DSH 应用(注入行为 Host 就绪时快照,持久化变更需重启才可见)。

卸载 web 侧示例(README):

dsh plugin --profile web remove @local/dsh-splash

典型用法

通过设置页调整

  1. 打开 DSH 设置,进入与「通用设置」同级的 启动画面(splash)页。
  2. 选择配色 chip、输入动画时长与兜底超时(二者在 UI 上互相约束:动画上限为兜底超时减 1 秒)。
  3. 点 预览 重播约 5.2 秒的演示动画;改预设时预览会跟随当前选中配色。
  4. 关闭「启用启动画面」后,下次启动不再覆盖内核卡片;预览仍可用来查看效果。

直接编辑配置文件

路径默认为 $DSH_HOME/dsh-splash.json。可只写部分字段,例如:

{
  "enabled": true,
  "preset": "synthwave",
  "minDurationMs": 10000,
  "maxTimeoutMs": 30000
}

Web 端改文件后下次索引渲染即生效(刷新页面);越界数值在读取路径会被夹成合法值,路由写入则会拒绝并返回 400。「恢复默认」会删除该文件而非写入默认值。

开发侧快速目视

在插件源码目录:

npm run preview

会重新生成 preview.html,在 iframe 中跑真实注入行与控制器,便于改 index.js 后目视各预设。

适用场景与注意

适合:希望在 DSH 启动阶段统一品牌感或「开发者终端」氛围、又不愿维护前端构建链的用户;需要在 web 与桌面共用一套启动体验时。

务必知晓:

  • 插件在 当前 DSH 进程权限 下运行;安装前应阅读 源码 与 MIT 许可证,并知悉 README 中的 NOTICE.md(非官方、鲸鱼标识权利归属等)。
  • 桌面端无法在 Host 就绪前消除原生加载卡片;web 端因 head 内联样式可做到内核卡片一帧不出现。这是架构约束,不是配置能绕开的。
  • controller.js 变更需 重启宿主;client.js 可走 HMR;dsh-splash.json 在 web 刷新即可,桌面端改注入相关项仍需重启。
  • SkillHub 为社区目录站点,与 DeepSeek / 幻方无官方从属关系;安装 spec 以 README 为准,其它 pnpm 可解析的包名装法维护者未全量验证,问题可开 GitHub issue。

结尾

dsh-splash 把启动画面做成「挂载前注入 + 单时间轴动画 + 独立设置页」的组合:零依赖、零构建,进度与日志对齐,失败与超时也不强行淡出。若要在 Harness 里换一层赛博朋克开机体验,可从目录页了解概况,并按 README 安装与 link 步骤接入。

  • 目录页:https://www.skillhub.cn/plugins/zfwoo/dsh-splash
  • 源码与完整文档:https://github.com/zfwoo/dsh-splash
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜