dsh-plugin-sidebar-polish:侧边栏样式与布局优化

前言

DeepSeek Harness(DSH)的侧边栏整合了品牌标识、工作区列表和会话树。官方设计在品牌行、浮动的新会话按钮和折叠行为之间存在视觉不一致。dsh-plugin-sidebar-polish 通过纯 CSS(加上一个按钮钩子)修复这些不一致,统一行高和对齐,而无需构建工具。

核心功能

该插件主要针对侧边栏的视觉体验进行优化:

  • 移除品牌行:隐藏顶部的鲸鱼图标和“deepseek HARNESS”文字,让工作区与会话列表直接顶到顶部。
  • 重画新会话按钮:将原本的 38px 独立卡片隐藏,改画成与下方面板行同款的一行样式(32px 高度、胶囊形状)。
  • 统一行高:将面板行、工作区行、会话行以及新会话行的行高统一为 32px。
  • 对齐 Pill 与文字:调整列表项的 padding 和 gap,使图标、文字与右侧的 pill 标签在垂直方向上对齐。
  • 标记空闲会话:为状态为 idle 的会话行左侧添加一个灰色圆点(官方仅在运行/审批/完成状态显示彩色点)。
  • 钉住折叠开关:将侧边栏的折叠开关在展开和收起两种状态下都固定在红绿灯按钮的右侧,避免位置横跳。
  • 添加设置入口:在工作区列表下方添加一个齿轮图标按钮,点击可直接打开设置面板。
  • 调整布局细节:将侧边栏左右内边距从 12px 调整为 8px,去掉了侧边栏的渐变染色,并根据深色/浅色模式调整了填充色。

安装与卸载

插件目录即为本仓库。安装时二选一,不要同时启用同名插件。

安装

# 从 GitHub 安装
dsh plugin --profile desktop add "github:daoyu1993-lab/dsh-plugin-sidebar-polish"

# 或使用本地目录(clone 后)
dsh plugin --profile desktop add "link:$PWD"

安装后,插件会进入 ~/.dsh/profiles/desktop/package.json 的 dependencies 与 dsh.profile.bundles 中,并在 node_modules/ 下建立软链接。利用软链接机制,修改 client.js 后可由 DSH 实时热更新读取,无需重新构建。

卸载

dsh plugin --profile desktop remove dsh-plugin-sidebar-polish

卸载后界面立即恢复原样,样式表由 ctx.effect 管理,不会残留。

实现方式与注意事项

实现逻辑

该插件仅包含一个样式表和少量 JS 逻辑。它没有接管整个侧边栏组件,而是利用 DSH 的 CSS Modules 哈希特性,通过稳定的锚点(如 [data-slot="sidebar"])来覆盖样式。

  • 样式覆盖:利用 :has() 选择器隐藏品牌行,并重画新会话按钮。
  • 组件注入:在“设置行”右侧注册了一个真实的 <button> 元素到 sidebar.footer.action 座位,以实现独立的点击热区和打开设置面板的功能。

注意事项

  • 刷新生效:首次安装或修改 client.js 后,需要刷新页面(桌面端快捷键 ⌘R)才能看到效果。
  • 热更新:插件支持热更新,无需构建工具,直接修改源码即可。
  • 自动清理:卸载后样式表由 ctx.effect 自动移除。
羽毛球分组比赛记分
小程序二维码

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

小夜