dsh-open-card:在 DeepSeek Harness Web UI 里点选任意面板并拖拽改尺寸

前言

在 DeepSeek Harness(DSH)里装多个客户端插件后,常见情况是某个面板占满屏幕,挡住会话列表、输入区或工具栏。框架内部的列宽由 AppFrame 的 store 管理,ctx.layout 只提供导航与面板切换,没有公开接口让插件之间互相改尺寸。dsh-open-card 走另一条路:由你在页面上点选目标块,用内联样式直接写宽高与位移,改动可复位,状态记在浏览器里并在刷新后恢复。下面介绍它是什么、能做什么,以及如何安装使用。

这是什么

dsh-open-card 是 DeepSeek Harness Web UI 的客户端插件,维护者为 zenro21。它不猜第三方插件的 DOM,也不依赖别人的内部实现;选中块之前会先快照该块原有的内联样式,再写入 width、height、transform、z-index,因此对任意界面块都可用。插件在社区目录 skillhub.cn 归类为客户端;源码仓库为 github.com/zenro21/dsh-open-card,许可证 MIT,当前包版本为 1.0.0。

核心功能

README 中列出的能力如下,均通过右下角悬浮球或快捷键进入点选模式后操作。

能力 说明
点选块 悬停蓝框高亮,单击选中;Alt+R 进入或退出点选模式
拖拽改尺寸 八个方向控制点,任意拖长拖宽
收起 高度压为 0 让出空间,块仍在,可随时展开
滚动模式 缩小后内容保持原尺寸、内部滚动;缩到 50% 以下自动开启
上溯一层 点选常落在内层小节点上,一键选中外层容器
平移 拖动整块,位置一并记忆
置前 提高 z-index,避免被其他浮层盖住
复位 还原为插件改动前的样子
记忆 尺寸、位置、收起与滚动状态按元素写入 localStorage,刷新后自动重建
可拖动悬浮球 悬浮球位置可拖并记忆,靠边时收进视口

实现上,整套 UI 通过 ReactDOM.createPortal 挂到 document.body,使用 z-index: 2147483000,避免挂在 shell.overlay(z-index: 20)下被鲸鱼挂件等高层浮层压住。

安装与启用

安装步骤以仓库 README 为准:先把包放到本机目录,再通过 Harness 插件管理器安装该目录(DSH 会话里调用 plugin_manager,或在插件页使用「安装本地包」)。

# 1. 把本仓库放进任意目录,例如
git clone https://github.com/<you>/dsh-open-card.git

# 2. 用 Harness 的插件管理器安装这个包目录
plugin_manager({ action: "install_bundle", target: "<绝对路径>/dsh-open-card" })

安装后刷新页面;右下角会出现悬浮球。客户端插件在当前 DSH 进程、当前浏览器页面中注入脚本,安装前宜自行查看仓库源码与 MIT 许可证,确认与本地环境一致。

典型用法

  1. 点右下角悬浮球,或按 Alt+R。
  2. 鼠标移到要调整的块上,出现蓝框后单击选中。
  3. 拖八个控制点改长宽;顶部工具条提供收起、滚动、上溯、复位、置前、移动、取消。
  4. Esc 退出点选或取消选中。

持久化键名(便于排查或清理本地配置):

  • dsh-open-card.sizes.v1 — 按元素选择器(锚定最近的 id 或 data-slot)保存尺寸、位置、收起与滚动状态。
  • dsh-open-card.dock.v1 — 悬浮球位置。
  • 从旧插件名 dsh-resizer 升级时会读取旧键,避免丢配置。

适用场景与注意

适合谁: 经常在 DSH Web UI 里叠加多个第三方面板、需要临时把某一块缩小、挪开或置前的开发者或日常使用者;不打算改框架三列布局、只想动「这一块 DOM」时,这个插件与 ctx.layout 的职责边界是清晰的。

注意:

  • 改动写在选中元素的内联样式上;「复位」依赖安装时的样式快照,复杂动态样式仍以你亲自点选的那一块为准。
  • 状态只存在本浏览器 localStorage,换机器或清站点数据不会同步。
  • 社区目录与 DeepSeek / 幻方无官方从属关系,属于「一切皆插件」生态里的第三方包,按自有风险安装。

结尾

dsh-open-card 用点选 + 内联样式绕开布局 store 的限制,给任意面板加上可拖拽边框、收起与记忆能力。需要进一步了解分类与简介时,可看目录页 https://www.skillhub.cn/plugins/zenro21/dsh-open-card;安装与功能细节以 https://github.com/zenro21/dsh-open-card 的 README 为准。

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

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

Xiaoye