dsh-happy:爲 DSH 對話區添加整屏動效背景

前言

DeepSeek Harness(DSH)的插件生態通過 patch 和 client 兩半區解耦,讓宿主與擴展互不干擾。在對話面板上增加一層動效背景,需要同時處理 Canvas 渲染、混合模式、可讀性遮罩,以及與宿主狀態機(工具運行、回合切換、窗口可見性)的同步。dsh-happy 就是爲此設計的一款插件:它在對話區底層畫 10 個 Canvas 場景,正文列覆蓋一層按列寬計算的紗罩,保證文字可讀,同時只在“幹活”時渲染,空閒即停。

它是什麼

  • 定位:爲 DSH 對話區提供整屏動效背景的插件,將對話畫布作爲 Canvas 畫布,內置 10 個場景。
  • 維護者:18383337799。
  • 解決的問題:讓 AI 對話在視覺上更有沉浸感,同時避免背景干擾正文閱讀;按回合隨機,又支持固定和一鍵隨機。
  • 曾用名:dsh-conversation-aurora(包名與插件目錄在 0.5.0 後統一爲 dsh-happy)。

安裝與啓用

從 npm 安裝(推薦):

  1. 在 DSH 插件頁點擊 添加插件。
  2. 輸入包名 dsh-happy。
  3. 安裝源選 npm 官方。
  4. 安裝後點擊 立即啓用。

國內鏡像(registry.npmmirror.com)同步有延遲;剛發佈時建議先用官方源。

開發調試可從本地目錄安裝:插件頁 → 添加插件 → 填本目錄絕對路徑 → 安裝 → 立即啓用。

卸載:在插件頁點擊卸載,效果隨插件 context 一起回收,頁面恢復原樣。

核心功能

10 個背景主題

插件內置 10 個 Canvas 場景,每個回合隨機選一個(不與上一輪重複):

主題 內容
星空躍遷 星點從中心向外飛出,長條紋
代碼雨 豎列字符下落,帶拖尾
電路脈衝 直角走線 + 沿線跑的光點
華山論劍 三層遠山視差 + 冷月 + 雲嵐 + 偶爾一道劍氣 + 落葉(沒有人物、沒有招式名,只有山水與光)
小貓散步 矢量剪影小貓走路、尾巴擺動、留下爪印
小女生 連衣裙剪影 + 馬尾 + 牽着氣球,一路小跑掉小心心
飛機大戰 我方戰機從畫面下方飛入、左右巡航連續開火,敵機從上方成批壓下來,擊中炸成火星
賽車 橫向速度線 + 小車剪影
飄雪 雪花慢落 + 搖擺
肥皂泡 徑向漸變薄膜 + 高光,緩緩升起

控制快捷鍵

  • Alt+T:切換到下一個背景並固定(10 個循環,選擇會記住)。
  • Alt+R:回到隨機並立刻換一個(清掉固定值)。
  • Alt+D:淺色 / 深色主題互換(走宿主 theme.setTheme,與「設置 → 外觀」同步)。

運行時機與性能

  • 背景只在“幹活”時出現:任何工具在跑、或回合進行中才播放;空閒、切會話、窗口隱藏時立刻停掉 requestAnimationFrame 並淡出,兩側恢復普通白紙。
  • 每個回合隨機一個主題:你發一條消息、我把這一輪做完 = 一個回合;回合內背景不變(中間停頓多久都不換),下一個回合重新隨機,且不會和上一個重複。
  • 固定值存儲在 localStorage 的 dsh.happy.theme(0.4.0 之前是 dsh.conversation-aurora.theme,首次啓動會自動搬過去)。
  • 性能優化:只有一張 canvas;每幀只做繪製,無 filter/backdrop-filter;空閒時 rAF 歸零。

可讀性保證

  • .dsh-stage__veil 是一條按 --dsh-chat-content-width 計算的橫向紗:正文列內 84% 遮蓋,列外 110px 內快速放開,兩側完全透明。
  • 淺色主題用 multiply(正片疊底)+ 墨色(靛藍 / 紫 / 青),像印在白紙上;深色主題用 lighter(加色)+ 亮色,纔有發光感。
  • 背景層是 z-index:-1,永遠在正文之下,pointer-events:none,不擋任何交互。

調參

視覺參數集中在 client.js 頂部:

位置 含義
TUNE.holdIdleMs 工具停下後多久淡出(默認 420ms,防抖)
TUNE.switchQuietMs 切會話後的靜默期(默認 600ms)
stagePalette() 淺色/深色兩套墨色 + 混合模式
THEMES 裏各主題的常量 數量、速度、尺寸
.dsh-stage__veil 的 .84 文字列遮蓋強度,調高更護眼、調低更炫

改完 client.js 後刷新頁面(Ctrl+R)即可生效。

已知限制

  1. 依賴宿主的 DOM 語義屬性:[data-conversation-content] / [data-tool][data-state] / [data-chat-running] / [data-streaming]。DSH 大版本升級後如果這些改名,插件會安靜地什麼都不做(不會報錯、不會擋交互)。
  2. 沒有“背景層”插槽:DSH 目前沒有這個擴展點,所以背景層是掛在對話畫布元素內部的(z-index:-1)。這是刻意偏離“只能註冊進 slot”的地方,隨插件停用一起消失。
  3. 切會話會靜默 600ms:避免把上一輪殘留的工具行當成“正在工作”,看到幾秒特效。
  4. 減少動態效果:系統開啓後只畫一幀靜止畫面,不跑 requestAnimationFrame。
  5. 性能:只有一張 canvas;每幀只做繪製,無 filter/backdrop-filter;空閒時 rAF 歸零。
  6. 不做設置項:沒有“設置”裏的面板,調參靠改常量。

適用場景與注意

適合希望在 DSH 對話區增加視覺沉浸感、又不希望背景喧賓奪主的使用者。插件以當前 dsh 進程權限運行,安裝前應檢查源碼與許可證。

總結

dsh-happy 通過 Canvas 場景與紗罩遮罩的組合,在 DSH 對話區提供 10 種風格各異的整屏動效背景,同時保證正文可讀性與性能。它只在“幹活”時渲染,空閒即停,支持回合隨機與快捷鍵固定,適合追求沉浸式對話體驗的開發者。

  • 目錄頁:https://www.skillhub.cn/plugins/18383337799/dsh-happy
  • GitHub:https://github.com/18383337799/dsh-happy
  • 官網:https://happy.yimeng.life/
羽毛球分组比赛记分
小程序二维码

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

小夜