将 DSH 侧边栏头像从底部移出

前言

DeepSeek Harness(DSH)在左侧边栏底部固定了一个页脚条带:账户头像(同时也是设置入口)和 sidebar.footer.action 下的插件组件(例如 dsh-cost-meter)都挂在这里。这个布局在会话列表很长时会占用垂直空间,而会话列表本身在桌面端又是可折叠的,因此底部条带的空间可以腾出来给会话。

dsh-avatar-top 插件把账户行从底部条带移出,只移动这一行,保持其他插件在底部的位置不变。

插件定位

  • 名称:dsh-avatar-top
  • 维护者:kiefeng
  • 仓库:https://github.com/kiefeng/dsh-avatar-top
  • 分类:趣味换装
  • Star 数:1

它是一个 DSH 插件,通过 Plugins 页面的设置卡片调整头像行的放置、高度和间距,支持零高度的 inline 模式。

核心功能

移动账户行

插件将左侧边栏的页脚条带设为 display: contents,使其两个子元素(账户行和 _footerActions)直接参与侧边栏的 flex 列布局。账户行通过 order 属性重新排序,_footerActions 保持默认顺序并继续固定在底部。

这样做的结果是:只有账户头像(以及它旁边的账号名)被移出底部条带,其他插件(如成本仪表盘)保持在底部不动。

放置位置(4 种)

  • Top:放在侧边栏顶部。
  • Below brand row:品牌 Logo 行下方。
  • Below New Session:新建会话按钮下方。
  • Inline brand row:嵌入品牌 Logo 行内,零垂直高度成本,在 Windows 桌面端定位在行尾右侧。

行高(3 种)

  • Full 44:完整高度 44px,显示头像和账号名。
  • Compact 32:紧凑高度 32px。
  • Avatar only 28:仅头像,高度 28px,头像缩小到 20px,隐藏账号名。

间距

设置「Spacing below」为 0–24px,控制当前放置位置与下方元素的间距。

开关

启用/禁用开关可以快速恢复默认布局,无需卸载插件。

安装与启用

安装命令

dsh plugin add dsh-avatar-top

安装后重启 DSH 客户端,再打开 Plugins → dsh-avatar-top 进行配置。

Git 安装(可选)

dsh plugin add git+https://github.com/kiefeng/dsh-avatar-top

验证样式

插件在 /dsh-avatar-top.css 提供公共的只读样式文件,可在无会话时检查布局问题:

http://127.0.0.1:<dsh-port>/dsh-avatar-top.css

配置字段

在 Plugins 页面打开 dsh-avatar-top 卡片后,可以调整:

Setting Values Default
Enabled on / off on
Position top / below brand / below New Session / inline brand row top
Height full 44 / compact 32 / avatar only 28 full 44
Spacing below 0–24 px 4
Restore defaults button —

设置会持久化在用户配置文件的 cordis.patch.yml 中,浏览器端通过订阅配置文档实时应用样式。

技术实现

注入渠道

Host 通过 webserver/index-inject 提供一个结构化的 style 行,浏览器和桌面端都渲染它:

  • 浏览器 / dsh web:通过 SPA 的 HTTP 服务器获取 index。
  • 桌面端:Electron 通过 IPC 将注入表传递给页面,页面端解释器将 style 行追加到 <head>。

桌面端快照在 Host 启动时生成,浏览器端则通过 <style id="dsh-avatar-top-live"> 实时应用样式。

选择器与布局

侧边栏是 flex 列,放置通过 order 实现。插件使用稳定的 CSS 模块类名后缀(_root, _footArea, _settingsArea, _trigger, _label, _avatar, _logoRow, _newSession, _panelList)而非哈希前缀,以避免构建差异。

inline 模式在 Windows 下使用 position: absolute 定位在品牌行右侧,其他平台回退到 top 位置。

设置管线

Config 声明了四个 volatile() 字段(用户设置),Host 为 avatar-top 命名空间提供服务。浏览器端通过 ctx.configForms.get('avatar-top') 绑定表单,写入通过 config.set() / config.unset() 到 remote.settings.mutate,并将卡片注册到 plugins.bundle.config 下的包名键值槽。

已知限制

  • 只移动账户行。如果其他插件挂载在 sidebar.settings(而非 sidebar.footer.action),它们会跟着移动;目前没有 shipped 插件这样做。
  • 布局依赖 ui-sidebar 的 flex 列。如果上游将页脚改为绝对定位或移出列,规则变为空操作,不会报错也不会错位。
  • inline 模式需要 Windows 标题栏(html[data-windows-titlebar]),其他平台回退到 top。
  • 诊断路由是公开只读的,仅返回当前插件的 CSS 文本。

适用场景与注意

适合希望腾出侧边栏底部空间、或想调整账户头像与品牌行/新建会话之间布局的开发者。

插件以当前 DSH 进程的权限运行。安装前建议查看源码与许可证(MIT),确认符合你的使用场景。

小结

dsh-avatar-top 通过注入样式和设置管线,将账户头像从底部条带移出,支持多种放置位置、高度和间距,并提供开关快速恢复默认布局。它不改变 DSH 的核心逻辑,仅调整侧边栏布局。

  • 目录页:https://www.skillhub.cn/plugins/kiefeng/dsh-avatar-top
  • 仓库:https://github.com/kiefeng/dsh-avatar-top
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye