前言¶
DSH 的原生界面是一套規整的灰白 / 深灰配色，功能上夠用，但要長期對着它寫代碼、跑會話，界面容易顯得「沒有自己的工作環境」。如果你想要一層更具體的視覺氛圍，但又不想改任何交互邏輯，下面介紹的這個插件可以作爲一條低成本路徑。
diy 皮膚的做法通常是自己寫一份 CSS 覆蓋宿主樣式，問題在於深淺色切換、WebGL 背景、與宿主原生主題開關同步這些事要單獨實現，而且改完還得處理資源釋放。dsh-official-skin 把這部分做成了標準 DSH 插件：給 Web 界面換上兩層「官網質感」的視覺，深色是深藍宇宙感（流體極光 + 粒子鯨魚 + 星座網格），淺色是官網首頁 hero 的藍色漸變加琉璃玻璃面板，並跟隨 DSH 自己的外觀設置一鍵切換。
它是非官方社區插件，維護者是 Klein（GitHub 賬號 kleinklein0824），當前版本 1.1.6，許可證爲 MIT。
這是什麼¶
一句話：一個只改視覺、不改行爲的 DSH 皮膚插件。
- 維護者：Klein（
kleinklein0824） - 分類：趣味換裝
- 當前版本：
1.1.6（README 與package.json中一致） - 許可證：MIT © 2026 Klein
- 平臺：DSH Web 與 DSH Desktop，包內聲明
dsh.client.platform = "web"，桌面端通過應用內嵌的 Web 界面加載同一套客戶端實現 - 渲染：WebGL2（極光與鯨魚）；不可用時自動降級爲純 CSS 背景
- 歸屬：非官方社區插件，與 DeepSeek 官方無隸屬或背書關係；DeepSeek 名稱、鯨魚圖形及相關品牌素材的權利歸各自權利人，不在 MIT 授權範圍內，具體見倉庫
NOTICE.md
它解決的痛點很具體：DSH 原生配色偏平，缺少層次；自寫 CSS 覆蓋時深淺色切換和主題同步要自己維護，且容易遺漏 WebGL 上下文的釋放。本插件把這些都做進了標準插件結構裏。
核心功能¶
深色主題：深藍宇宙感¶
深色模式由四層疊加：
- 底色：
radial-gradient(165% 115% at 50% -8%, #14385c 0%, #102a45 22%, #0b1a2b 45%, #080f18 70%, #06080c 100%)，頂部中深藍、底部近黑，整屏有縱深。 - 流體極光：WebGL flowmap，思路參考 deepseek.com 首頁的流體效果，由本項目重新移植、壓暗後適配 DSH 的層級，壓到
brightness(0.36)用screen疊加，只留一層緩慢流動的冷藍 / 琥珀光。 - 粒子鯨魚：GLSL 粒子構成的 DeepSeek 鯨魚 logo，白點發光，鼠標移動有視差反應。
- 星座網格：冷白光點加細連線（
rgba(190,214,255)，線 0.16 / 點 0.26），像一層很淡的星圖。
淺色主題：官網 hero + 琉璃玻璃¶
- 底色：
linear-gradient(180deg, #9cc1e7 0%, rgba(250,250,250,0) 100%), #f9f8f8，官網首頁同款藍色 hero。 - 粒子鯨魚：白色粒子，
normal混合，不搶文字。 - 玻璃擬態：側邊欄、輸入卡片、消息氣泡、代碼塊統一使用
backdrop-filter: blur() saturate()加內側高光邊，做出「一層玻璃」的厚度，而不是一團半透明灰。
共同保證¶
- 不干擾功能面板：對話框、菜單、列表、模態（
[role=dialog|menu|listbox]、[aria-modal]）保持原生不透明，不會被背景「穿透」成半透明。 - 切換絲滑：兩層底色交叉淡入 300ms，切換瞬間暫停 WebGL 循環 360ms，避免和合成搶主線程。
- 不泄漏資源：每次重載都會調用
WEBGL_lose_context.loseContext()釋放舊上下文、停掉舊 RAF、摘掉舊 DOM。 - 不改交互：插件只操作背景層和麪板視覺，不改對話框、菜單、列表的任何交互邏輯。
安裝與啓用¶
環境要求¶
| 項目 | 要求 |
|---|---|
| DSH Web / Desktop | ^0.2.1-rc.5 \|\| ^0.2.2-rc.1 |
| 插件 Node.js | >=20 |
DSH 0.2.2-rc.1 CLI 宿主 |
>=24.9.0 |
| 渲染 | WebGL2（不可用時自動降級） |
低於 0.2.1-rc.5 或進入 0.3.x 的宿主不在聲明範圍內。兼容範圍同時寫在 package.json 的 engines.dsh 中。
方式一：DSH Desktop（推薦）¶
打開 DSH Desktop，進入 插件 → 添加插件，輸入版本號：
dsh-official-skin@1.1.6
確認安裝後，按應用提示啓用插件，並完全退出、重新打開 DSH Desktop。桌面端的安裝、啓用和重啓都由應用管理。
如果當前桌面版的 npm 安裝不可用，也可以改用 GitHub 目標：
github:kleinklein0824/dsh-official-skin
方式二：DSH Web 直接安裝¶
終端執行：
dsh plugin --profile web add "dsh-official-skin@1.1.6"
安裝完成後刷新 DSH Web，或重新執行 dsh web。
方式三：通過 dsh-market 插件市場安裝¶
先安裝並啓用 dsh-market（npm 包名 dshmarket）：
dsh plugin --profile web add "dshmarket@latest"
然後打開 插件市場 → 發現 或 主題，搜索 dsh-official-skin，安裝或更新後按宿主提示重新加載。
兩點注意：
- dsh-market 已將本倉庫關聯到 npm 包
dsh-official-skin，會優先從 npm 安裝；僅推送 GitHub 不會更新市場用戶安裝到的 npm 包。 - 也可繼續使用獨立的 DSH 皮膚市場插件
dsh-skin-market，兩者是不同插件，安裝來源和更新方式以各自條目爲準。
本地調試（僅開發時用）¶
cd ~/.dsh/profiles/web
pnpm add link:"<本倉庫的絕對路徑>"
再把包名加進 profile 的 package.json：
{
"dsh": {
"profile": {
"bundles": ["...", "dsh-official-skin"]
}
}
}
重啓 DSH 生效。
卸載¶
dsh plugin --profile web remove "dsh-official-skin"
典型用法：跟隨 DSH 外觀設置切換¶
這個皮膚不自己做主題判斷，它跟隨 DSH 自己的主題開關。典型流程是：
- 打開 設置 → 通用設置 → 外觀，選「深色 / 淺色 / 跟隨系統」。
- DSH 把選擇寫到
<body data-ds-dark-theme>上。 - 插件用
MutationObserver加 2.5s 兜底對賬監聽這個屬性，把背景層、鯨魚、極光、玻璃全部切到對應那一套。
對應關係如下：
| 你在 DSH 裏的操作 | 皮膚的反應 |
|---|---|
| 外觀 → 深色 | 深藍漸變 + 極光 + 鯨魚 + 星座 |
| 外觀 → 淺色 | 藍色 hero + 白鯨魚 + 玻璃面板 |
| 外觀 → 跟隨系統 | 系統切深淺時，皮膚同步切換 |
右上角那顆按鈕是同一件事的快捷入口：它調用 DSH 的 theme 服務 setTheme("dark" | "light")，等價於你在設置裏點一次。所以按鈕切換後，設置頁裏的「外觀」選項也會跟着變——兩者是同一個狀態，不存在兩套開關。
如果在 DSH 底部看到「重新連接中…」，此時客戶端拿不到 theme 服務，點按鈕不會立刻生效（這是宿主斷鏈，不是按鈕壞了），重連完成後會自動應用。
源碼結構與調參¶
插件是標準 DSH 結構：package.json 裏的 dsh.bundle.patch 讓宿主把 cordis.patch.yml 插進 cordis 樹，dsh.client.platform = "web" 讓 lib/client.js 被 dsh-client-modules 掃出來、編進 window.__DSH_BOOT__，在頁面加載時一次性注入。皮膚本體是 lib/client.js，lib/index.js 只做宿主側的靜態審計，不拋錯。
背景分層：
#dsh-ds-bg (position:fixed; inset:0; z-index:-1)
├─ #dsh-ds-bg-light 藍色 hero 漸變 ← opacity 由 .dsh-ds-dark 切換
├─ #dsh-ds-bg-dark 深藍 radial 漸變 ← opacity 由 .dsh-ds-dark 切換
├─ #dsh-ds-aurora WebGL 流體極光（canvas）
├─ #dsh-ds-constellation 星座網格（canvas）
└─ #dsh-ds-whale 粒子鯨魚（canvas, screen 混合）
主題切換隻改兩層 opacity 和三個 canvas 的顯示狀態，不重建 DOM、不重新編譯着色器。
想改視覺不用讀完整份代碼，參數都集中在 lib/client.js：
以下爲 README 提供的默認值對照，改之前先覈對當前版本的
client.js。
| 想改什麼 | 搜什麼 | 默認值 |
|---|---|---|
| 深色底色 | dsh-ds-bg-dark 的 radial-gradient |
#14385c → #06080c |
| 極光強度 | #dsh-ds-aurora 的 filter |
brightness(0.36) saturate(1.45)（>0.4 會發灰） |
| 星座亮度 | DARK_CONSTELLATION / LIGHT_CONSTELLATION |
線 0.16 / 點 0.26 |
| 鯨魚透明度 | whaleLayer.style.opacity |
深色 1、淺色 0.72 |
| 切換速度 | transition: opacity .3s（四處）、dsAnimPauseUntil |
300ms / 360ms |
| 玻璃強度 | body:not([data-ds-dark-theme]) 下的 rgba(255,255,255,…) |
0.18 ~ 0.20 |
改完 lib/client.js 後必須重啓 DSH 應用（關閉後重新打開）：客戶端代碼是頁面加載時注入的，桌面端按 Ctrl+R / F5 不會重新 import（README 註明實測無效），set_plugin 啓停同樣不會重新 import。
兼容性與注意事項¶
已驗證範圍¶
- 聲明範圍：DSH Web / Desktop
^0.2.1-rc.5 || ^0.2.2-rc.1。0.2.1-rc.5已有實機驗證，Desktop 使用同一套內嵌 Web 客戶端。 0.2.2-rc.1：已覈對宿主兼容檢查、模塊加載器、主題服務、主題屬性和按鈕插槽；並在 Chromium 夾具中檢查加載、深淺色切換和重複加載。這不等同於完整 DSH Web / Desktop 場景迴歸，升級後仍應檢查會話切換、輸入框與其他插件面板。- 具體證據見倉庫
docs/compatibility.md。
WebGL2 降級¶
極光與鯨魚依賴 WebGL2；不可用時自動降級爲純 CSS 背景，界面仍可用。
宿主升級風險¶
主題判斷與主要定位優先使用 [data-ds-dark-theme]、[data-slot] 等屬性；部分視覺修補仍使用宿主的哈希類名，因此宿主升級後仍需檢查實際顯示效果。
常見問題¶
- 點了右上角按鈕沒反應：底部出現「重新連接中…」時，客戶端拿不到
theme服務，點擊會被靜默丟棄；等連接恢復後再點即可。 - 改了
client.js但界面沒變：客戶端 bundle 是頁面加載時注入的，必須重載頁面或重啓應用。 - 控制台報
Too many active WebGL contexts：Chromium 對同時存在的 WebGL 上下文有上限。本插件已在重載時主動釋放舊上下文；若仍出現，通常是別的插件也在開 GL 上下文。
性能與穩定性¶
- 切換會話和工作區時優先保證首幀顯示，避免不透明底板短暫蓋住背景。
- 深度界面掃描分幀執行，聊天流式輸出時不會因反覆全量掃描而明顯卡頓。
- 彈窗打開時暫停背景動畫，關閉後自動恢復。
- 輸入框玻璃模糊移到獨立圖層，鼠標停在發送鍵上時不再持續閃爍。
- 插件重載時會清理舊實例，避免動畫疊層和資源泄漏。
適用場景與注意¶
適合誰：
- 長期在 DSH Web / Desktop 裏工作的開發者，想把默認灰白界面換成有層次、有氛圍的視覺，又不想動交互。
- 希望皮膚跟隨 DSH 原生外觀開關（含「跟隨系統」）、而不是自己維護一套獨立主題邏輯的人。
- 想看一份結構清晰的皮膚實現源碼，學習
dsh.bundle.patch+dsh-client-modules注入方式的人。
注意事項：
- 權限與來源：插件以當前 dsh 進程權限運行，屬於社區第三方項目，安裝前應先讀一遍源碼（重點是
lib/client.js與lib/index.js），確認許可證爲 MIT，並檢查其對頁面 DOM 的實際影響。 - 兼容性：僅在聲明的宿主版本範圍內使用；
0.2.2-rc.1的驗證是夾具層面的，升級宿主後請自行迴歸會話切換、輸入框和其他插件面板。 - 資源佔用：極光、鯨魚、星座是 WebGL2 渲染，低端設備或多插件同時開 GL 上下文時需留意顯存，必要時在
lib/client.js裏調低極光強度或關閉某些層。 - 非官方身份：這是非官方社區插件，與 DeepSeek / 幻方無官方從屬關係；社區目錄站點同樣不是官方應用商店。
結尾¶
這個插件的價值在於把「官網質感皮膚」這件事做成了標準 DSH 插件：視覺分成背景層與玻璃面板兩層，主題切換隻改 opacity 和 canvas 顯示狀態，並跟隨 DSH 原生外觀開關，避免了自寫 CSS 覆蓋時常見的深淺色同步和資源泄漏問題。
相關鏈接：
- 社區目錄頁：https://www.skillhub.cn/plugins/kleinklein0824/dsh-official-skin
- GitHub 倉庫：https://github.com/kleinklein0824/dsh-official-skin
