前言¶
DSH 的 Web GUI 裏滾動條默認是細條、低對比，鼠標靠近時不好點也不好拖。把滾動條整體加粗是一個直接的解法，但 Chromium 裏 ::-webkit-scrollbar 的 width 是參與佈局的：懸停時從 5px 改成 10px，旁邊所有盒子會跟着重排，看起來就是正文向左縮一下。
下面介紹的這個插件用另一種做法解決：滾動槽寬度從一開始就恆定預留 10px，懸停時只把滑塊畫粗，佈局零變化。由 ThEmbrace 維護，目前在社區目錄 SkillHub 的分類是「趣味換裝」，定位是純 UI 調整，不改主題 token、不改 asar、不引入運行時依賴。
這是什麼¶
一句話：一個 DSH Web GUI 客戶端插件，讓縱向滾動容器的滾動條在鼠標靠近時臨時加粗到 10px，離開後立刻恢復原樣。
插件包名 dsh-thick-scrollbar，版本 0.1.1，許可證 MIT。職責邊界很窄——只改滾動條的繪製，不動任何業務邏輯。
核心功能¶
分三步理解它的行爲。
1、基線注入。插件加載時在 html body 上把 --dsh-scrollbar-width 定爲 10px、--dsh-scrollbar-thumb-border 定爲 2.5px。透明邊框把繪製的滑塊內縮回去，所以看起來和原來一樣細，但滾動槽已經永久預留了 10px 的佈局空間。
2、懸停加粗。指針進入容器右邊緣 13px 窄帶（ARM_DISTANCE）時，只給該容器加一個標記屬性 data-dsh-thick-scrollbar，由作用域規則把透明邊框清零，滑塊原地從細條畫成 10px。槽寬不變，周圍內容一格都不移動。
3、離開恢復。指針離開窄帶超過 21px（DISARM_DISTANCE，留 8px 遲滯防抖動）時刪掉該屬性。插件從不寫內聯樣式，所以不存在恢復原值失敗的風險。
滾輪滾動不改變狀態——鼠標還壓在滾動槽上就保持粗條，容器不會因爲滾動而位移。
實測寬度（headless Chromium，DPR 1 與 2 逐像素數過）：
| 狀態 | 滾動槽 | 實際繪製滑塊 |
|---|---|---|
| ui-theme 原始 | 5px | 5px |
| 插件靜止 | 10px | 6px |
| 插件懸停 | 10px | 10px |
靜止態繪製 6px 而不是 5px，是因爲 Chromium 繪製滾動條僞元素時把 border-width 向下取整：2.5px → 2px，於是 10 − 2×2 = 6。要靜止態嚴格 5px 就得換成「槽 9px + 邊框 2px」，代價是懸停只能到 9px。作者選擇保住 10px 的懸停寬度，靜止態多 1px。
安裝與啓用¶
README 給出的安裝命令如下：
# 從本地目錄安裝（開發態，改源碼立即生效）
plugin_manager install_bundle "link:<本目錄絕對路徑>"
# 從分發包安裝
plugin_manager install_bundle "file:<dsh-thick-scrollbar-0.1.1.tgz 絕對路徑>"
# 發佈到 npm / GitHub 之後
plugin_manager install_bundle "dsh-thick-scrollbar"
plugin_manager install_bundle "github:<賬號>/dsh-thick-scrollbar"
# 卸載
plugin_manager remove_bundle "dsh-thick-scrollbar"
裝完需要刷新頁面才生效，原因註釋裏寫明瞭：client bundle 惰性進圖，不隨 HMR 替換。
典型用法¶
插件裝好即生效，沒有運行時配置開關。要調參就改 lib/client.js 頂部的常量：
| 常量 | 默認 | 含義 |
|---|---|---|
GUTTER_PX |
10 |
永久預留的滾動槽寬度，也是懸停時的繪製寬度（px） |
REST_BORDER_PX |
2.5 |
靜止態透明邊框，決定默認可見細條寬度 = GUTTER_PX − 2×REST_BORDER_PX |
ARM_DISTANCE |
GUTTER_PX + 3 |
距右邊緣多近開始加粗 |
DISARM_DISTANCE |
GUTTER_PX + 11 |
距右邊緣多遠恢復 |
想讓加粗更明顯就抬 GUTTER_PX，同時要抬 REST_BORDER_PX 才能維持默認細條寬度。改完刷新頁面即可，不需要重新安裝。
改完跑一遍測試確認沒改壞：
node --test test/*.test.mjs
注意必須是 glob，在 Windows 上 node --test test/ 會報 Cannot find module。
適用場景與注意¶
適合在 DSH Web GUI 裏頻繁滾動長對話、長日誌或長面板的人。插件只做繪製層面的加粗，行爲可預測，沒有運行時依賴。
需要留意幾點，都寫在 README 的邊界一節：
- 只處理縱向可滾動容器（
overflow-y: auto|scroll|overlay且scrollHeight > clientHeight）。 - 會永久預留 10px 滾動槽，比主題默認 5px 窄 5px 正文，這是「懸停零重排」的代價。
- 自己重綁了槽寬的表面不受影響：
ui-input-trigger的菜單槽寬定成 6px、ui-schedule定成 9px，這些地方懸停也只到 6px / 9px。這是有意的，不覆蓋各組件自己的幾何決策。 - 加粗是瞬時的，Chromium 不爲
::-webkit-scrollbar僞元素執行transition，沒有漸變動畫。 - 只面向 Chromium 桌面端，不處理 Firefox 的分支。
另外，插件以當前 DSH 進程權限運行。安裝前建議打開倉庫確認源碼與許可證（MIT），也不要在生產環境未經測試就裝第三方客戶端 bundle。
結尾¶
這個插件的價值在於把「加粗滾動條」這件小事做到了不引發重排，代價寫清楚、邊界寫清楚、可調參數集中在文件頂部，適合想微調 GUI 手感的人直接上手。
目錄頁：https://www.skillhub.cn/plugins/ThEmbrace/dsh-thick-scrollbar
GitHub：https://github.com/ThEmbrace/dsh-thick-scrollbar
