dsh-ui-custom:DSH Web GUI 的尺寸编辑模式

前言

DeepSeek Harness(DSH)的 Web 界面默认布局与组件尺寸由框架写死:侧栏宽度被 clampWidth 限制在 264–420px,对话区、工具条等元素的 flex / grid 下限也常让「想缩一点」变成拖不动。改 CSS 或写主题插件可以长期定制,但只想临时腾出空间、隐藏一块 UI、或把某个面板挪开时,成本偏高。

dsh-ui-custom 是面向 DSH Web GUI 的客户端注入插件:进入编辑模式后,可在页面上直接拾取元素,调整列宽、宽高、位移、字号与可见性,规则写入 localStorage 并在刷新后恢复。下面介绍它的能力边界、安装方式与典型操作步骤。

这是什么

  • 仓库: Summer-Perilla/dsh-ui-custom
  • 维护者:Summer-Perilla
  • 分类(社区目录):趣味换装
  • 版本(package.json):1.0.0,MIT 许可证
  • 定位:DSH Web GUI 的「尺寸编辑模式」插件;通过 cordis.patch.yml 注册 loader 条目 ui-custom,客户端模块注入在 @deepseek-ai/dsh-client-ui-layout 之后加载。host 侧 lib/index.js 的 apply 为空,逻辑集中在 lib/client.js。

插件以当前 DSH 进程在浏览器中执行的 JavaScript 运行;安装前建议自行查看源码与许可证,再决定是否启用。

核心功能

布局列宽接管

覆盖 [class*=_frame] 的 grid-template-columns,接管左侧栏宽度、收起态轨道宽度、中栏最小宽度。原生侧栏约 264–420px,本插件允许约 200–760px。宽度覆盖仅在 @media (min-width: 1025px) 生效;窄屏仍走原生收起逻辑。右栏宽度从现有 grid 解析透传,本版不提供右栏调节。

通用元素尺寸与字号

拾取容器元素,对 width / height 写入带 !important 的规则;宽度同时输出 min-width: 0,高度同时输出 min-height: 0,避免 flex / grid 子项缩不下去。拖尺寸把手时,若开启「缩放时字号等比变化」(默认开),字号按拖动比例变化(两向同时拖时取几何平均),限制在 6–96px;也可在元素清单里填 F 手填字号。

「元素缩放时子元素等比变化」默认开:改容器宽 / 高时,内部已有覆盖的子元素按同一比例缩放,基准为拖动开始时的尺寸,避免累积误差;关闭则各调各的。

位置、层级与脱离文档流

位移使用独立的 CSS translate 属性(不与元素自身 transform 互相覆盖)。可拖选中框左上角 ✥ 把手,或在面板填 X / Y、「归零」。位移项会抬升 z-index;原为 static 的元素会补 position: relative 以使层级生效。

勾选「脱离文档流」时改为 position: absolute 且不指定 left / top,视觉位置不变但不再占位,兄弟元素可占用原空间。新建元素的该选项默认勾选。

吸附、多选、批量与撤销

面板支持「拖动时吸附(网格 + 元素对齐)」「网格」步长(默认 3,填 0 关闭取整)、「显示对齐参考线」。多选为 Ctrl/⌘ + 点击;选中两项及以上时出现批量调整区。撤销栈 50 步,Ctrl+Z / Ctrl+Shift+Z / Ctrl+Y 与面板按钮可用;刷新后栈清空,但已持久化的覆盖仍保留。

同种元素一起调

默认开启时,规则用 css-modules 哈希类或 data-slot 做精确匹配(如 div[class~="mP3x-q_item"]、[data-slot="conversation.chat.node"]),同一组件在不同对话、工作区仍共用规则;面板显示命中数 ×N。DSH 大版本若改类名或 slot,旧规则可能失效,需重新拾取。

隐藏、恢复与持久化

可对选中项打 display: none !important;支持单条「恢复」、列宽「恢复原生」、全局「恢复默认」。纯文本叶子(无子节点的 span 等)不可选,点击会上浮到最近可调容器。配置键为 localStorage["dsh.ui-custom.v1"];编辑模式本身不持久化,退出后 CSS 覆盖仍生效。

控制面板

顶部浮窗可拖动表头、缩放右下角、收起为表头条;几何信息持久化且不进撤销栈。左下角半透明 ⌗ 为编辑入口,位置可拖动并在面板中精确设置。

安装与启用

本包无需构建;lib/client.js 为手写客户端模块。声明的 @deepseek-ai/dsh peer 范围为 >=0.2.0-rc.2 <0.3.0-0,超出会提示不兼容。

方式一:插件管理器(推荐)

  1. 打开 设置 → 插件 → 添加插件。
  2. 在「包名或地址」填入:
github:Summer-Perilla/dsh-ui-custom

也可填 https://github.com/Summer-Perilla/dsh-ui-custom。

  1. 确认安装。管理器会用 profile 自带的 pnpm 拉包,并将 dsh-ui-custom 写入 dsh.profile.bundles 并激活,无需手改 package.json 或 cordis.patch.yml。
  2. 左下角出现 ⌗ 即表示就绪;若无,刷新页面或重启 dsh。

方式二:手动安装

第 1 步,在 desktop profile 安装依赖:

cd ~/.dsh/profiles/desktop
pnpm add github:Summer-Perilla/dsh-ui-custom

第 2 步,编辑 ~/.dsh/profiles/desktop/package.json,在 dsh.profile.bundles 数组中追加:

"dsh-ui-custom"

第 3 步,重启 dsh。左下角出现 ⌗ 即装好。

卸载

插件管理器安装的:在 设置 → 插件 中删除即可。手动安装的:

cd ~/.dsh/profiles/desktop
pnpm remove dsh-ui-custom

并从 dsh.profile.bundles 移除 "dsh-ui-custom"。

本地 link: 开发装法见仓库 README,需手写 cordis.patch.yml loader 条目,此处不展开。

典型用法

  1. 点击左下角 ⌗ 或按 Ctrl+Shift+E 进入编辑模式。
  2. 在顶部面板调整「布局列宽」或吸附 / 同种元素 / 字号联动等开关;左栏右缘拖拽条可横向改侧栏宽。
  3. 悬停目标 → 蓝色高亮 → 点击选中;用右 / 下 / 右下角把手改尺寸,用左上角 ✥ 改位置;在「位置偏移」区填 X / Y 或切换「脱离文档流」。
  4. 在「元素清单」中改 W / H / F、隐藏 / 显示、恢复或定位到元素。
  5. Esc 或「退出编辑」结束;覆盖保持生效。

常用快捷键:

按键 作用
Ctrl+Shift+E 进入 / 退出编辑模式
Ctrl/⌘ + 点击 加选 / 减选
Ctrl+Z 撤销
Ctrl+Shift+Z、Ctrl+Y 重做
Esc 退出编辑模式

适用场景与注意

适合:希望在不动主题仓库的前提下,为 DSH Web 界面腾出侧栏或对话区空间;临时隐藏不用的区块;微调浮层位置并与主题类插件并存(覆盖为注入 CSS,不替换主题包)。

注意(摘自 README 已知限制):

  • 手动设过左侧栏宽后,原生分隔条拖动会被覆盖值压回;用「恢复原生」恢复跟随。
  • 目标元素若已用 CSS translate 做居中,本插件的位移覆盖可能导致跳变;用「归零 / 恢复」还原。
  • 同种判定不区分文本内容;共用类名的两组元素可能被一起修改。
  • 浮窗拖过后宽高变为固定像素,不再随窗口自适应。

DSH 生态强调「一切皆插件」;社区目录页 skillhub.cn 上的 dsh-ui-custom 为独立站点收录,与 DeepSeek / 幻方无官方从属关系。

结尾

dsh-ui-custom 把 DSH Web GUI 的布局列宽与任意容器元素的尺寸、位置、字号、可见性变成可点选、可撤销、可持久化的编辑流程,适合需要更多界面空间或个性化排版的本地 GUI 用户。细节与限制以仓库 README 为准。

  • 目录页:https://www.skillhub.cn/plugins/Summer-Perilla/dsh-ui-custom
  • GitHub:https://github.com/Summer-Perilla/dsh-ui-custom
羽毛球分组比赛记分
小程序二维码

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

小夜