前言¶
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
