前言¶

DSH Web UI 的對話流裏，助手消息默認不帶頭像和名字，聊天記錄一長，讀起來不容易分清每條消息的來源。想在界面上補上這一塊，直接改 DOM 的做法在 React 重渲染後容易失效。DSH 的理念是「一切皆插件」，界面定製同樣可以交給插件來做。下面介紹的 dsh-whale-avatar 走的就是這條路：純 CSS 注入，重渲染不會丟效果。

這是什麼¶

dsh-whale-avatar 是一個面向 DSH Web UI 的純 client 插件，由 lhjlol 維護，代碼託管在 GitHub（地址見文末）。它只做一件事：給每條助手消息加上頭像與名字——頭像是 App 圖標，配上「喫白飯的藍色大肥魚」的形象。

按倉庫 package.json 的信息，當前版本爲 0.1.0，private: true，平臺爲 web。

實現方式¶

插件的實現可以拆成四點：

1、目標元素是官方 web 應用的助手消息節點，選擇器爲 [data-chat-flow-kind="assistant-step"]；
2、注入方式是往頁面放一個 style 標籤，裏面只有一條 CSS 規則，用 ::before 僞元素渲染「頭像 + 名字」，不做任何 DOM 改動；
3、因爲只動 CSS，React 重渲染後效果依然在，樣式跟隨日間/夜間主題令牌；
4、頭像是 56px 的 PNG 包進 28×28 SVG 的 data URI，Retina 屏下依然清晰。

不碰 DOM 結構，意味着安裝和卸載都乾淨：卸載時 CSS 移除，界面即恢復原樣。

安裝與啓用¶

兩種方式：通過 Oh-DSH Desktop 插件市場安裝，或者用命令行：

dsh plugin --profile <name> add github:lhjlol/dsh-whale-avatar

命令裏的 <name> 是資料原文中的佔位符，替換成你自己的 profile 名即可。安裝完成後運行時會自動重啓，重啓結束即生效。

卸載¶

從市場的插件列表裏卸載即可，注入的 CSS 會隨之移除，不需要手動清理。

插件結構¶

想讀源碼的話，倉庫結構很直接：

• lib/client.js：瀏覽器半，__ModuleLoader__ 格式，全部邏輯在這裏；
• lib/index.mjs：Node 半，空 apply，也就是說這是純 client 插件；
• cordis.patch.yml：bundle patch，負責向組合插入本插件行。

package.json 中與注入相關的配置如下：

{
  "dsh": {
    "bundle": {
      "patch": "./cordis.patch.yml"
    },
    "client": {
      "inject": [
        "@deepseek-ai/dsh-client-connection",
        "@deepseek-ai/dsh-client-runtime",
        "@deepseek-ai/dsh-api-remotes"
      ],
      "platform": "web"
    }
  },
  "peerDependencies": {
    "cordis": "^4.0.0-rc.7"
  }
}

也就是 client 側注入目標爲 @deepseek-ai/dsh-client-connection、@deepseek-ai/dsh-client-runtime、@deepseek-ai/dsh-api-remotes 三個包，peer 依賴爲 cordis ^4.0.0-rc.7。

適用場景與注意¶

適合想讓 DSH Web UI 的助手消息帶上頭像和名字、又不想修改前端源碼的用戶：裝上生效，卸掉還原。

安裝前有兩點提醒：

1、插件以當前 dsh 進程的權限運行，client 部分的代碼會跑在你的瀏覽器裏，建議先通讀一遍倉庫源碼再決定是否安裝；
2、資料中未提及許可證，使用前請到倉庫自行確認授權條款。

小結¶

dsh-whale-avatar 用一條 CSS 規則解決了助手消息沒有頭像和名字的問題：實現輕、可逆、重渲染不丟。代碼與說明見 GitHub 倉庫：https://github.com/lhjlol/dsh-whale-avatar ，也可以在 Oh-DSH Desktop 插件市場中查找安裝。