前言¶
DSH 的右側邊欄默認有拖拽手柄。在瀏覽器對整個界面進行縮放後，該手柄會失效：它仍然渲染在 DOM 中，但位置基於視口寬度而非佈局像素，導致在 zoom: 1.2 時它停在分割線內側約 320px 處，無法再拖拽。
這個問題在需要縮放界面的場景下會顯著影響操作體驗。下面介紹一個修復方案。
是什麼¶
dsh-plugin-rightbar-divider 是一個 DSH 插件，用於修復右側邊欄分割線拖拽在縮放後失效的問題。它由 1700563146 維護，通過以下方式恢復功能並改善交互：
- 使用
offsetLeft測量面板的左側邊緣（佈局像素），不受縮放和滑動變換影響，通過 CSS 變量將手柄位置校正到邊緣； - 將點擊區域從 8px 擴展到 12px，並在分割線兩側繪製 2px 的懸停/拖拽指示線；
- 保持寬度限制、持久化行爲和拖拽邏輯由宿主
setRightbar統一處理。
在 100% 縮放下，它主要表現爲更寬的點擊區域與懸停反饋。
安裝與啓用¶
通過 DSH 插件市場或 npm 安裝：
dsh plugin --profile desktop add dsh-plugin-rightbar-divider
安裝後，打開 Plugins → Add plugin 安裝 dsh-plugin-rightbar-divider，或在應用內的插件頁面安裝。打開右側邊欄，將鼠標懸停在聊天與側邊欄之間的分割線上：光標變爲 col-resize，並出現細線。
核心原理¶
DSH 的 AppFrame 定位兩個手柄的方式如下：
{ side: 'sidebar', left: cols.sidebar }
{ side: 'rightbar', left: viewport - normal.rightbar }
其中 viewport 來自 frame.getBoundingClientRect().width（視口像素），而 left 爲佈局像素。在 html { zoom } 下兩者不一致：左側手柄使用佈局像素保持對齊，右側手柄則偏離 viewport × (zoom − 1)。該插件通過測量佈局像素邊緣並重寫位置來糾正這一偏移。
已知限制¶
- 依賴宿主的私有屬性（
[data-side="rightbar"]、[data-rightbar-col]、[data-sidebar-right-open]）。若 DSH 未來重命名這些屬性，插件將靜默失效，而不是破壞佈局。 - 在縮放下，宿主仍會根據視口指針差值改變寬度，因此拖拽速度略快於光標移動（例如 120% 縮放時每 100px 光標移動對應 120px 寬度變化）。插件不接管指針事件。
- 全屏面板按設計沒有外部寬度手柄，不進行額外處理。
驗證¶
項目包含測試腳本，通過 node test.mjs 運行，覆蓋佈局像素數學、寬度變化時的重新測量、手柄消失時的停用、矩形與縮放回退，以及銷燬時的清理。
上游修復建議¶
在 AppFrame 中使用 frame.offsetWidth / clientWidth 作爲 viewportWidth，或從面板的 offsetLeft 推導右側手柄的 left，即可修復所有依賴 viewportWidth 的幾何關係，而不僅限於該手柄。
適用場景與注意事項¶
- 適合在 DSH 界面進行縮放後需要恢復右側邊欄分割線拖拽的場景。
- 插件以當前 DSH 進程權限運行，安裝前建議檢查源碼與許可證（MIT）。
結尾¶
該插件通過測量佈局像素邊緣並擴展交互區域，使右側邊欄分割線拖拽在縮放場景下恢復正常。如需更多信息，可訪問插件目錄頁或 GitHub 倉庫。
- 目錄頁：https://www.skillhub.cn/plugins/1700563146/dsh-plugin-rightbar-divider
- GitHub：https://github.com/1700563146/dsh-plugin-rightbar-divider
