DeepSeek Harness 侧边栏面板折叠插件

前言

在 DeepSeek Harness(DSH)的客户端界面中,侧边栏顶部的「全局面板条目」会占用固定高度。宿主 @deepseek-ai/dsh-client-ui-sidebar 的渲染结构里,nav.panelList 使用 flex:none,条目越多它越高,下方的工作区 div.regionArea 就会被挤压。手机端抽屉本身很矮,条目一多直接把工作区挤没了;桌面端条目数一样,只是相对没那么明显。为了在不改动核心、不覆盖其他插件的前提下解决这个问题,出现了 dsh-sidebar-panels-fold 插件。

这是什么

dsh-sidebar-panels-fold 是一个客户端插件,把侧边栏左上角的全局面板条目折叠成一行,并提供勾选「只显示哪几个」的能力。手机端与桌面端使用同一套规则。插件通过 slot 数据与 DOM 属性工作,不注册、不覆盖任何 slot,只控制显示状态——被收起的条目仍然注册、仍然可以按 id 选中,插件功能完全不变。

核心功能

  1. 折叠显示:把侧边栏的全局面板条目收起到一行,减少占用高度。
  2. 筛选面板:通过勾选方式指定只显示哪些面板,其余隐藏。
  3. 自动模式:根据侧边栏宽度自动保留前 N 条,无需手动配置。
  4. 持久化存储:选择保存在 localStorage['dsh.sidebar-panels-fold.v1'],下次打开保持状态。
  5. 多端统一:手机端与桌面端使用同一套规则和存储。

工作机制

插件通过五层机制实现上述功能:

数据面:读取权威清单 ctx.slots.entriesOfSlot('sidebar.panellist'),返回 [{ id, order, label }],其中 label 支持 thunk,跟随语言。

定位面:通过三级策略定位目标 DOM 元素:
- L1:命中 nav[data-dsh-pf-nav] 标记
- L2:直接子 <button> 的 aria-label 与槽位 label 集合匹配
- L3:结构兜底,父级 flex 且 flex-direction:column、自身 ≥2 个直接 button 子节点、且存在 overflow:hidden 的兄弟

呈现面:给每个行 <button> 打上 data-dsh-pf-row、data-dsh-pf-id、data-dsh-pf-shown="0|1" 属性,插件自身的 <style> 用 [data-dsh-pf-row][data-dsh-pf-shown="0"]{display:none!important} 收起。

交互面:在 nav 末尾挂一个自有触发器(data-dsh-pf-trigger),点击后弹出自建弹层,提供全部显示/全部收起/恢复默认/逐项勾选选项,选择存入 localStorage。

守护面:使用 MutationObserver(React 重渲染会抹掉属性)、ResizeObserver、matchMedia 监听变化。手机抽屉↔桌面常驻列、宽态↔56px 轨道、语言切换、面板动态注册后都会重新收敛。

策略与默认值

自动模式下(未做显式选择),插件会根据形态保留前 N 条:

形态 判定 保留
轨道(rail) nav 宽度 ≤ 72px 3
窄屏 matchMedia('(max-width: 1023px)') 命中 2
宽屏 其余 4

当前正在使用的面板(aria-current="page")永远可见,避免「面板在用、行却不见了」。

存储

localStorage['dsh.sidebar-panels-fold.v1'] = { pinned: string[] \| null, showAll: boolean }

  • pinned: null → 自动模式
  • pinned: string[] → 只显示这些 id
  • showAll: true → 全部显示

读失败(隐私模式/脏数据)一律回落默认,不影响页面。

降级策略

  • 4 秒内找不到 nav:不隐藏任何条目(页面行为 = 原样),期间低频重试。
  • 超过宽限期仍找不到:console.warn 一次,说明「折叠能力暂不可用,其余不受影响」。
  • localStorage 不可用:选择只在本次会话生效。

卸载

移除触发器/弹层/<style>,并摘掉所有 data-dsh-pf-* 属性,侧边栏回到宿主原样。

安装与启用

在命令行中执行:

dsh plugin add github:xintingcui/dsh-sidebar-panels-fold

或在插件市场的 UI / 界面增强分类里直接安装。仓库是纯 JS,无构建步骤、无运行时依赖。

适用场景与注意

适合需要精简侧边栏、避免面板条目过多挤压工作区的 DSH 用户。插件以当前 dsh 进程权限运行,安装前应检查源码与许可证。

短结尾

dsh-sidebar-panels-fold 通过数据面、定位面、呈现面、交互面、守护面五层机制,在不改动核心、不覆盖其他插件的前提下实现侧边栏面板折叠与筛选功能,帮助在手机和桌面端都获得更充裕的工作区空间。目录页:https://www.skillhub.cn/plugins/xintingcui/dsh-sidebar-panels-fold
GitHub:https://github.com/xintingcui/dsh-sidebar-panels-fold

羽毛球分组比赛记分
小程序二维码

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

小夜