dsh-logo-silhouette:給 DSH Web GUI 加一個不擋交互的鯨魚背景水印

前言

如果你在用 DeepSeek Harness(dsh)的 Web GUI,會發現界面樣式基本是默認的。想加一點視覺標識,通常只有兩條路:直接改 dsh 前端源碼,或者自己維護一套構建流程——兩者都要跟 dsh 的版本升級做鬥爭。

下面介紹的 dsh-logo-silhouette 走的是另一條路:利用 dsh 的插件機制,把一層純視覺的背景水印掛進 Web GUI,不改宿主邏輯,裝上就能用。

這是什麼

dsh-logo-silhouette 是 kami-mura 維護的 dsh 插件,把 DeepSeek 鯨魚 logo 剪影作爲全屏背景水印鋪在 Web GUI 上。當前版本 0.2.0,MIT 許可。

它是純視覺插件,沒有任何宿主邏輯:鯨魚圖形、顏色、透明度全在一個手寫的 client bundle 裏,與 dsh 的功能代碼互不干擾。

核心功能

背景層與交互

  • 固定鋪滿視口的背景層,z-index: 0,不擋點擊、不擋滾動
  • 整層設置 pointer-events: none,完全不擋交互
  • 大號鯨魚剪影固定在左下角,高度 min(56vh, 600px),帶 aria-hidden

明暗主題適配

  • 亮色模式使用 DeepSeek 品牌藍(設計令牌 --dsw-static-deepseek-500),opacity: .15
  • 夜間模式使用柔和淺藍(--dsw-static-deepseek-300),opacity: .12
  • 顏色和透明度隨主題 300ms 平滑過渡,切換不跳變

夜間模式細節

  • 鯨魚頂部有 mask 漸隱,上緣融入背景,去掉「貼紙感」
  • 暗色下進一步降低不透明度,減少深色底上的眩光
  • 窄屏自動縮小並修正定位(left/bottom
  • 尊重 prefers-reduced-motion,並有系統暗色 prefers-color-scheme 兜底

安裝與啓用

安裝命令只有一行:

dsh plugin --profile web add dsh-logo-silhouette

安裝後需重啓 dsh web 服務生效。

這個包是標準的 dsh bundle(dsh.bundle.patch),dsh plugin add 會自動把它加入 profile 的層棧(dsh.profile.bundles),不需要手改任何配置文件。

也可以直接從 GitHub 安裝:

dsh plugin --profile web add github:kami-mura/dsh-logo-silhouette

卸載同樣一行:

dsh plugin --profile web remove dsh-logo-silhouette

想改樣式怎麼辦

所有視覺和 CSS 都在 lib/client.js 裏。它是一個手寫的 client bundle(window.__ModuleLoader__ 格式),沒有構建依賴,直接改就能生效。

先打開 lib/client.js,找到裏面的 CSS 常量:

  • 顏色走 DSH 設計令牌 --dsw-static-deepseek-*,帶兜底色
  • 位置、尺寸、透明度直接改數值

如果需要改鯨魚圖形本身,走構建腳本:

npm run build

scripts/build.js 會從 assets/favicon.svg(從 deepseek-harness 倉庫 vendored 的 logo 源文件,MIT 許可)提取鯨魚路徑,並寫回 lib/client.js

倉庫裏另一個文件 lib/index.js 是 host 半體,因爲純視覺插件沒有宿主邏輯,它基本是空的。插件的結構就這兩部分,看完不需要更多上下文。

適用場景與注意

適合自託管 dsh web、想給界面加一點視覺標識或個人風格的人。因爲不擋交互、不碰宿主邏輯,裝上之後界面行爲不會有任何變化,只是多了一層背景。

兩點注意:

1、插件以當前 dsh 進程的權限運行,安裝前應先閱讀源碼、確認許可證。這個倉庫 MIT 許可,代碼量不大,lib/client.jslib/index.js 很快能過一遍。
2、DeepSeek 鯨魚 logo 是 DeepSeek 的品牌資產。本插件只是把它作爲裝飾性水印展示,不代表與 DeepSeek 官方有關聯,介意這點的可以不裝。

結尾

dsh-logo-silhouette 是一個典型的「小而純」的 dsh 插件:單一層視覺補丁、零宿主邏輯、MIT 許可。經過上面的步驟,重啓後的 Web GUI 左下角就會多出一隻低調的鯨魚剪影,明暗主題自動跟隨。

  • 目錄頁:https://www.skillhub.cn/plugins/kami-mura/dsh-logo-silhouette
  • GitHub:https://github.com/kami-mura/dsh-logo-silhouette
羽毛球分组比赛记分
小程序二维码

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

小夜