移动端顶栏 pureexe/dsh-mobile-topbar

dsh-mobile-topbar

一个 DeepSeek Harness Web UI 插件，在手机屏幕上把侧边栏变成紧凑的顶栏，为小屏幕设备省下一点宝贵的空间。

为什么做这个

DSH 的左侧边栏（会话列表、工作区、设置）即使收成「轨道」状态，也仍然占着一列真实的网格空间。在手机上，这等于永久让出一块不小的地方。这个插件在窄视口下取消这块预留空间，换成一条小巧、眼熟的顶栏。

它做什么

在宽度 768px 及以下的屏幕上：

- 侧边栏不再占网格空间，变成抽屉式面板（收起时不显示，打开才出现）。
- 原位置出现一条顶栏，包含：
- 左侧：汉堡按钮，点开侧边栏抽屉
- 中间：DeepSeek Harness 品牌标识和文字标（就是侧边栏自己渲染的那套 SVG）
- 右侧：新会话按钮（侧边栏自带的新对话图标）
- 打开抽屉会出现遮罩；点遮罩（或再点一次汉堡按钮）关闭抽屉。
- 右侧面板（文件／文档预览）变成顶栏下方的全宽固定面板。在移动端，它本来待在一列零宽网格里，自身的内联宽度还会塌成 0px——角落的展开按钮一隐藏，就只剩一条零宽细缝，按钮看起来「凭空消失」，既没有面板也没有报错。现在这个面板由对话自带的展开控件打开，由面板自带的收起按钮或汉堡按钮关闭。
- 设置弹窗重新定位，不再渲染到顶栏下面。
- 右侧面板开着时打开侧边栏，会先通过右侧面板自己的动作把它收起，这样真正露出来的是抽屉。

宽度大于 768px 的屏幕完全不受影响——这个插件只改动该断点以下的行为。

安装

在 DSH 配置档目录下执行（也可以用 dsh plugin --profile <name> add，它会转发到配置档内的 pnpm）：

dsh plugin --profile web add github:pureexe/dsh-mobile-topbar
or, from a local checkout:
dsh plugin --profile web add /path/to/dsh-mobile-topbar

然后在该配置档的 package.json 里，把它列进 dsh.profile.bundles：

{
"dsh": {
"profile": {
"bundles": [
"@deepseek-ai/dsh-base",
"@deepseek-ai/dsh-web-app",
"dsh-mobile-topbar"
]
}
}
}

重启配置档（例如 dsh web）即可生效。

工作原理

这是一个小巧的双面 DSH 插件：

- index.js —— 宿主侧的加载行（空操作；这个插件只改浏览器端）。
- client.js —— 浏览器端那一半。它注入作用域 CSS，在移动端重新摆放侧边栏、右侧面板和设置弹窗的外层结构（右侧面板变成固定定位的全宽面板），并挂载一个小的 React 渲染顶栏。顶栏调用现有的 layout 和 uiWorkspace 服务（toggleSidebar、closeRightbar、startSession），并在点击时按需调用 sidebarRight 服务（isExpanded、toggleExpanded），通过右侧面板自己的动作来收起它，而不是重新实现这套逻辑。
- cordis.patch.yml —— 当配置档把这个包列为 bundle 时，将它作为单行 loader 插入。

没有复制或分叉任何侧边栏/框架内部实现；插件只添加 CSS 覆盖（针对应用现有的、带版本号的类名），并复用应用自己的图标/品牌组件和布局服务。

DSH 版本

已验证可用的版本：

| DSH 版本 | 结果 |
| 0.1.5-rc.3 | ✅ 完整 —— 图标名称、CSS 类哈希、layout/uiWorkspace 服务均与 0.1.7 相同 |
| 0.1.6-alpha.x | ✅ 完整 —— 客户端接口与 0.1.5 相同 |
| 0.1.7-rc.x | ✅ 完整 —— 这一版本线里新聊天图标的导出名改了；client.js 按顺序解析 IconNewChatOutline16 / IconNewChatOutlineRegular / IconNewChatOutlineMedium，所以两代版本上按钮都能显示正确的图标 |
| 0.2.0-rc.2 | ✅ 完整 —— 客户端模块图与 layout/uiWorkspace 服务与 0.1.7 相比没有变化；右侧面板（.P3OORG_panel，哈希相同）在顶栏下方渲染为全宽固定面板，由会话自己的展开控件打开，由面板的收起按钮或汉堡按钮关闭 |

- 更早的 DSH（0.1.5 之前，还没有 dsh.profile.bundles / dsh.client 机制）： 插件根本不会被加载；它只是配置档 package.json 里一行不起作用的内容。不会出问题。
- 本插件刻意不声明 peerDependencies： 它用到的包（dsh-client-ui-primitives，以及来自 dsh-client-ui-layout / dsh-client-ui-workspace 的 layout/uiWorkspace 服务）随宿主 DSH 安装一起提供，不在配置档的依赖树里，所以带版本范围的 peer 依赖会解析失败，在完全正常的宿主上也会挡住安装。
- 将来改名也能优雅降级： 如果未来的 DSH 再次改图标名，按钮会回退到鱼形 logo；如果改了 CSS module 的哈希名，移动端抽屉 CSS 就不再匹配，插件降级为普通的固定顶栏。这两种情况都不会让应用外壳崩溃（顶栏挂载在自己的 React 根里，在应用的组件树之外）。

注意事项

这些 CSS 覆盖针对的是当前 DSH 构建生成的特定类名（如 .hHd-Xa_root、.pI_x6G_frame、.P3OORG_panel、.VOzbGW_overlay）。这些类名属于 DSH 客户端打包产物的内部实现细节，没有版本保证——未来 DSH 版本可能重命名它们，悄悄破坏本插件的移动端布局。升级 DSH 后如果顶栏或抽屉行为异常，先查这里。（0.1.6 到 0.1.7 之间的图标重命名，已由上面的回退链处理。）

还有一点：要在 0.1.7 宿主上禁用本插件，不要在配置档的 cordis.patch.yml 里加 disabled: true 覆盖——0.1.7 会把禁用行完全排除在客户端模块图之外，导致顶栏悄悄变空白。正确做法是从 dsh.profile.bundles 里移除该 bundle，然后重新安装。

License

MIT