前言¶
DeepSeek Harness(DSH)的側邊欄整合了品牌標識、工作區列表和會話樹。官方設計在品牌行、浮動的新會話按鈕和摺疊行爲之間存在視覺不一致。dsh-plugin-sidebar-polish 通過純 CSS(加上一個按鈕鉤子)修復這些不一致,統一行高和對齊,而無需構建工具。
核心功能¶
該插件主要針對側邊欄的視覺體驗進行優化:
- 移除品牌行:隱藏頂部的鯨魚圖標和“deepseek HARNESS”文字,讓工作區與會話列表直接頂到頂部。
- 重畫新會話按鈕:將原本的 38px 獨立卡片隱藏,改畫成與下方面板行同款的一行樣式(32px 高度、膠囊形狀)。
- 統一行高:將面板行、工作區行、會話行以及新會話行的行高統一爲 32px。
- 對齊 Pill 與文字:調整列表項的 padding 和 gap,使圖標、文字與右側的 pill 標籤在垂直方向上對齊。
- 標記空閒會話:爲狀態爲 idle 的會話行左側添加一個灰色圓點(官方僅在運行/審批/完成狀態顯示彩色點)。
- 釘住摺疊開關:將側邊欄的摺疊開關在展開和收起兩種狀態下都固定在紅綠燈按鈕的右側,避免位置橫跳。
- 添加設置入口:在工作區列表下方添加一個齒輪圖標按鈕,點擊可直接打開設置面板。
- 調整佈局細節:將側邊欄左右內邊距從 12px 調整爲 8px,去掉了側邊欄的漸變染色,並根據深色/淺色模式調整了填充色。
安裝與卸載¶
插件目錄即爲本倉庫。安裝時二選一,不要同時啓用同名插件。
安裝
# 從 GitHub 安裝
dsh plugin --profile desktop add "github:daoyu1993-lab/dsh-plugin-sidebar-polish"
# 或使用本地目錄(clone 後)
dsh plugin --profile desktop add "link:$PWD"
安裝後,插件會進入 ~/.dsh/profiles/desktop/package.json 的 dependencies 與 dsh.profile.bundles 中,並在 node_modules/ 下建立軟鏈接。利用軟鏈接機制,修改 client.js 後可由 DSH 實時熱更新讀取,無需重新構建。
卸載
dsh plugin --profile desktop remove dsh-plugin-sidebar-polish
卸載後界面立即恢復原樣,樣式表由 ctx.effect 管理,不會殘留。
實現方式與注意事項¶
實現邏輯
該插件僅包含一個樣式表和少量 JS 邏輯。它沒有接管整個側邊欄組件,而是利用 DSH 的 CSS Modules 哈希特性,通過穩定的錨點(如 [data-slot="sidebar"])來覆蓋樣式。
- 樣式覆蓋:利用
:has()選擇器隱藏品牌行,並重畫新會話按鈕。 - 組件注入:在“設置行”右側註冊了一個真實的
<button>元素到sidebar.footer.action座位,以實現獨立的點擊熱區和打開設置面板的功能。
注意事項
- 刷新生效:首次安裝或修改
client.js後,需要刷新頁面(桌面端快捷鍵 ⌘R)才能看到效果。 - 熱更新:插件支持熱更新,無需構建工具,直接修改源碼即可。
- 自動清理:卸載後樣式表由
ctx.effect自動移除。