前言¶
DSH 的插件生態強調「一切皆插件」。社區目錄是獨立站點，與 DeepSeek / 幻方無官方從屬關係。日常使用 DSH Web UI 時，默認界面比較固定；如果要換配色、加整頁背景，或者把側欄、會話區、插件面板拆成可停靠、可浮動的卡片，就需要在 Web 客戶端側做 UI 擴展。
下面介紹 dsh-ui-beautify。它由 Zalpha263 維護，MIT 許可，面向 DSH 0.1.1-rc.2 及以上版本的 Web 界面，支持 Windows / Linux / macOS。
這是什麼¶
dsh-ui-beautify 是一個 DSH Web UI 插件，用來給 DeepSeek Harness（DSH）的 Web 界面增加外觀和佈局能力：
- 四套配色預設
- 整頁背景圖
- VSCode 式卡片佈局
- 插件面板統一入口
- 設置自動記憶
- 可撤銷、可還原
它主要作用於 Web UI 的樣式和麪板組織。實現上以 lib/client.js 爲客戶端主要腳本，Host 半區 lib/index.js 用於註冊；本包是手寫 loader 格式（__ModuleLoader__.load），不是 tsdown 產物。
核心功能¶
配色預設¶
提供四套預設：默認 / 深海藍 / 暖沙 / 松石綠。淺色 / 深色模式各有適配，一鍵切換。全局強調色會隨配色預設變化。
整頁背景圖¶
支持本地圖片一鍵上傳，自動壓縮並添加可讀遮罩，側邊欄與主區都會顯示背景。
背景圖以壓縮後的 data URL 保存在瀏覽器 localStorage 中，約 5MB 配額內；超大圖片上傳時會自動壓縮到最長邊 ≤2560px。
卡片佈局¶
側欄 / 會話 / 停靠卡三張卡片，可拖出浮動，也可吸附到上 / 下 / 左 / 中 / 右任一區域。
一個區域只能停一張卡；原區域已有卡片時，會被擠成浮動卡，區域空出後自動回位。
縮放與摺疊¶
- 停靠態：手柄拖寬；雙擊手柄重置默認寬度。
- 浮動態：四邊 / 四角拖動縮放。
- 側欄拖窄到 <240px 時自動摺疊成圖標欄。
- 中間欄（會話區）最小保底 480px。
- 會話區吸附到左側 / 右側後，空出的中間區域不再保底。
- 側欄 / 停靠卡均可縮到 120px；停靠卡拖到 <140px 會關閉。
插件面板¶
插件面板是統一入口。卡片模式佔停靠卡，經典模式爲右側停靠面板，支持插件列表與標籤頁宿主。
設置記憶與撤銷¶
配色、背景圖、佈局保存在瀏覽器本地，刷新頁面、重啓 DSH 後自動恢復。
清除、重置、切回經典模式可即時還原；卸載後無殘留。
安裝與啓用¶
前置要求¶
- DSH
0.1.1-rc.2及以上 - 官方安裝方式需要 pnpm
先安裝 pnpm：
npm install -g pnpm
安裝插件¶
安裝命令中會釘住提交號：
dsh plugin --profile web add github:Zalpha263/dsh-ui-beautify#<完整40位commit>
<完整40位commit> 是佔位符，需要替換爲倉庫中實際的完整提交號；已覈實資料未提供具體提交號。
安裝完成後重啓 DSH，打開「設置 → UI設置」即可使用。
典型用法¶
以下操作都從「設置 → UI設置」進入。
外觀美化¶
1、切換配色預設。
2、選擇本地圖片作爲全頁背景。
3、如需移除，點擊清除背景圖。
4、如需恢復默認，點擊重置全部。
佈局¶
1、切換經典佈局或卡片佈局。
2、打開 / 關閉插件面板。
3、如需恢復，點擊恢復默認佈局。
拖拽卡片¶
按住卡片頂部抓取條拖動。鬆手位置在停靠區（上 / 下 / 左 / 中 / 右）時，卡片吸附回位；不在停靠區時，就地浮動。Esc 可取消拖動。
縮放¶
- 浮動窗：四邊 / 四角拖動縮放。
- 停靠卡：手柄拖寬；雙擊手柄重置默認寬度。
升級¶
先推送新提交，再把 profile 的 package.json 中釘住的提交號改爲新提交（無 BOM），然後執行：
dsh plugin --profile web install
最後重啓 DSH 或硬刷新頁面。
卸載¶
dsh plugin --profile web remove dsh-ui-beautify
適用場景與注意¶
適合希望調整 DSH Web UI 外觀、背景或面板佈局的本地使用者。安裝前建議檢查源碼與許可證；插件以當前 dsh 進程權限運行，源碼、提交號和許可協議都應作爲安裝前確認項。
需要注意：
- 設置保存在瀏覽器
localStorage；清除瀏覽器站點數據會重置設置。 - 背景圖佔用瀏覽器本地存儲，存在約 5MB 配額限制。
- 部分樣式選擇器針對當前客戶端產物編寫；DSH 大版本升級後可能失效，升級後請在「外觀美化」裏複覈效果。
- 社區目錄頁鏈接未在已覈實資料中確認；本文只給出倉庫地址。
鏈接¶
GitHub：https://www.github.com/Zalpha263/dsh-ui-beautify
