前言¶
在移动端或窄屏视口下，DSH 的默认布局会自动折叠侧边栏，但留下的 56px 图标栏依然占用大量空间。在 390px 宽度的屏幕上，这 56px 占据了约 14% 的宽度，却没有任何可读内容。dsh-mobile-sidebar 插件的目标是在 1024px 以下的断点，完全移除这个不可用的图标栏，并将侧边栏以抽屉形式打开。
插件定位¶
这是一个 DSH 客户端插件，由 wilsonchengassistant 维护。它修改了 @deepseek-ai/dsh-client-ui-layout 在窄屏下的行为，将左侧栏轨道宽度置为 0，让对话占据整个可用宽度。侧边栏以覆盖层抽屉的形式打开，点击遮罩可关闭。
核心功能¶
窄屏下移除图标栏¶
在 1024px 以下的断点，插件将左侧轨道宽度设为 0px，同时隐藏 56px 的图标栏。对比变化如下：
| 默认行为 | 插件行为 | |
|---|---|---|
| 390px 视口轨道 | 56px 334px 0px | 0px 390px 0px |
| 侧边栏折叠 | 56px 图标栏 | 无轨道，无绘制 |
| 打开侧边栏 | 压缩中间列至 110px | 300px 抽屉覆盖 390px 中间列，点击外部关闭 |
| 头部 | 无切换按钮 | 左侧面板按钮 |
侧边栏作为抽屉打开¶
侧边栏列保持在 0px 轨道中，通过 position: relative + 显式宽度实现溢出显示，中间列宽度不变。抽屉打开时，遮罩层覆盖整个区域，点击遮罩即可关闭。
切换按钮¶
在对话面板头部，插件在 conversation.header.leading 槽中插入一个 Button 组件，使用 IconPanelLeftOutlineRegular 图标，调用 ctx.layout.toggleSidebar() 切换侧边栏。
全局面板的切换控制¶
其他全局面板（Plugins、Automation tasks 等）没有头部插槽，无法直接注入切换按钮。插件在 shell.overlay 中放置一个固定控制，通过 [frame]:not(:has([data-dsh-mobile-sidebar-button])) 选择器隐藏对话页面的控制，避免重复显示。同时为这些面板的标题添加 40px 的 padding-inline-start，确保控制不与标题重叠。
大屏保持不变¶
在 1024px 以上的断点，插件不会修改布局，按钮也会隐藏，保持默认行为。
安装与启用¶
安装命令如下：
dsh plugin --profile web add file:/path/to/dsh-mobile-sidebar
dsh plugin add 会将包追加到 dsh.profile.bundles 并热挂载，浏览器刷新即可加载新的客户端组合。无需重启 dsh web。
卸载时，从 ~/.dsh/profiles/<profile>/package.json 的 bundles 中删除 "dsh-mobile-sidebar" 条目，或在插件页面禁用该 bundle。
典型用法¶
安装后，在 1024px 以下的视口下，左侧栏图标 rail 会消失，对话占据全屏宽度。点击对话头部的左侧面板按钮，侧边栏以抽屉形式展开，点击遮罩或再次点击按钮即可关闭。
在 Plugins、Schedules 等全局面板中，切换按钮会以固定控制的形式出现在 shell.overlay 中，点击可打开侧边栏。
适用场景与注意¶
该插件适用于需要在移动端或窄屏设备上使用 DSH 的开发者。它通过浏览器端修改实现，不涉及 Host 端逻辑。
安装前应检查插件源码与许可证。插件使用 MIT 许可证，依赖 @deepseek-ai/cordis ~4.0.4，需要 Node.js >= 22。
结语¶
dsh-mobile-sidebar 解决了 DSH 在窄屏下的布局问题，将左侧栏完全交还给对话，让移动端体验更接近原生应用。通过浏览器端零化轨道、隐藏图标栏、抽屉式打开等手段，在不修改 DSH 核心代码的前提下实现了这一效果。
插件目录：https://www.skillhub.cn/plugins/wilsonchengassistant/dsh-mobile-sidebar
GitHub：https://github.com/wilsonchengassistant/dsh-mobile-sidebar
