界面尺寸编辑 Summer-Perilla/dsh-ui-custom

dsh-ui-custom

DSH Web GUI 的「尺寸编辑模式」插件：进入编辑模式后，可以调整三列布局宽度（重点：左侧栏）以及任意元素的宽 / 高 / 位置 / 字号，支持多选、批量、撤销、吸附对齐与元素隐藏；控制面板本身可拖动、可缩放、可收起。

它做了什么

- 布局列宽接管：覆盖 [class=_frame] 的 grid-template-columns，接管左侧栏宽度、收起态轨道宽度、中栏最小宽度。原生 clampWidth(sidebar, 264, 420) 把侧栏锁在 264–420，本插件放宽到 200–760。
- 通用元素尺寸：拾取容器元素，给它的 width / height 打 !important 覆盖，存为选择器规则。宽度覆盖会同时输出 min-width: 0、高度覆盖同时输出 min-height: 0 —— 不加这两条，flex / grid item 的 min-content 下限会让元素「怎么拖都缩不小」。
- 缩放带字号：拖尺寸把手时，若「缩放时字号等比变化」打开（默认开），字号按拖动方向的比例同步放大缩小（两个方向都拖时取几何平均），并限制在 6–96px。也可在 F 里手填字号。
- 大元素带小元素：面板上有「元素缩放时子元素等比变化」勾选框（默认开）。改一个容器的宽 / 高时（拖把手或填 W / H），它内部已经有覆盖的子元素按同一比例一起缩放；拖动过程中比例始终以「拖动开始时」的尺寸为基准重算，不会因反复回调累积误差。关掉则各调各的。无覆盖的子元素本来就会跟着布局自适应，不需要处理。
- 移动位置：每个元素可加位移 offsetX / offsetY，用独立的 CSS translate 属性输出（不是 transform，因此可与元素自身既有的 transform 叠加而不互相覆盖）。可拖选择框左上角的 ✥ 把手，也可在面板里填 X / Y 数值或「归零」。
- 移动后不被压住 / 原位真的让出：translate 不脱流，所以位移项会同时抬高层级（z-index，后动的元素压住先动的）；原本是 static 的元素再补一条 position: relative（否则 z-index 不生效；原本就是 absolute / fixed 的不改，免得跑位）。若想让原位真正让给兄弟元素，在「位置偏移」区勾上「脱离文档流」（新建元素默认已勾选）：改成 position: absolute 且不指定 left / top，静态位置仍是它原来的地方 —— 视觉上不动，但不再占位，别的元素移过来也不会互相遮挡。
- 吸附 / 对齐：面板上有「拖动时吸附（网格 + 元素对齐）」「网格」「显示对齐参考线」三项（默认开 / 3px / 开）。拖动位移时，元素的左 / 中 / 右、上 / 中 / 下若与参考线相差 6px 以内就吸附过去，并画一条蓝色细线；参考线取自视口边缘、三层祖先容器、以及同父的兄弟元素。拖尺寸把手时右边缘 / 下边缘同样吸附。浮窗拖动与缩放按网格取整。网格填 0 即关闭取整。
- 浮窗可拖动 / 可缩放 / 可收起：拖表头 ⠿ 移动面板、拖右下角缩放面板、点「收起」缩成只剩表头的一条；位置、尺寸、收起状态随存档持久化，避免遮住要调的目标元素。面板几何不进撤销栈（「恢复默认」也不会把面板位置清掉）。
- 同种元素一起调（跨对话 / 跨工作区）：开启后，规则改用元素自身的 css-modules 哈希类或 data-slot 锚点做精确匹配，例如 div[class~="mP3x-q_item"]、[data-slot="conversation.chat.node"]。哈希前缀是构建期生成的组件标识，同一组件在任何对话、任何工作区、任何挂载时刻都一致，所以「此刻只挂了一份 DOM」也不会退化成唯一路径 —— 这是「换个对话就不认同种」的根因。识别兼容三种前缀形态：mP3x-q_frame、V4vHZW_flowItem、SyUHSa_terminal（不要求前缀带数字）。[class~=] 是整串精确匹配，不会像 [class="_item"] 那样串到 _itemInner；多个候选按「命中数 → slot 优先 → 非状态类 → 短类名」取优，所以 …ItemActive 这类状态类会被自动排除。旧版本留下的窄规则在重新选中时会就地升级成同种选择器，并保留已有尺寸。面板里显示命中数 ×N。
- 多选与批量：Ctrl/⌘ + 点击 加选；选中 ≥2 项时出现「批量调整」区，一次改宽 / 高 / 隐藏。
- 撤销栈：50 步，Ctrl+Z 撤销、Ctrl+Shift+Z / Ctrl+Y 重做，面板头部也有按钮。
- 隐藏元素：对选中项打 display: none !important，可逆。
- 恢复：单条「恢复」（清宽高与隐藏）、列宽「恢复原生」、全局「恢复默认」（回到出厂状态，可撤销）。
- 文字不参与调整：内部没有元素子节点的纯文本叶子（span / b / em 等）不可选，点击自动上浮到最近的可调容器 —— 避免把正文文字压扁。输入框、按钮等容器仍可调。
- 持久化：配置存 localStorage["dsh.ui-custom.v1"]，刷新后自动恢复覆盖（编辑模式本身不恢复）。

使用

1. 打开 GUI，左下角出现半透明 ⌗ 圆钮：点击（或 Ctrl+Shift+E）进入编辑模式，按住拖动可把它挪到别处（位置会记住，面板里也能填「左 / 下」精确值或「复位」）。
2. 顶部控制面板：
- 布局列宽：左侧栏 / 收起轨道 / 中栏最小宽 直接填数字；「恢复原生」清掉本插件的列宽接管。
- 编辑入口按钮：左 / 下 直接填数字，「复位」回左下角；也可以直接按住 ⌗ 拖动。
- 同种元素一起调：勾选框，默认开。
- 缩放时字号等比变化：勾选框，默认开。
- 元素缩放时子元素等比变化：勾选框，默认开（关掉即各调各的）。
- 拖动时吸附（网格 + 元素对齐）：勾选框，默认开；旁边的 网格 填步长（默认 3，填 0 表示关闭网格取整）；显示对齐参考线：勾选框，默认开。
- 左栏右边缘的拖拽条横向拖动即改宽度，数值实时回填。
3. 鼠标悬停元素 → 蓝色高亮 → 点击选中。选中后出现虚线框与四个把手：
- 右把手 = 只改宽，下把手 = 只改高，右下角 = 同时改宽高，左上角 ✥ = 拖动移动位置。
- 多选时拖动尺寸把手，所有已选项各自按同一增量变化（✥ 只作用于主选中项）。
4. 「位置偏移」区（单选时出现）：X / Y 直接填像素值，归零 复位；offsetX 与 offsetY 都为 0 时自动视为「无位移」，不输出 CSS。下方的 脱离文档流（原位让出给其它元素） 默认勾选 —— 勾上后元素不再占位，原位让给兄弟元素，别的元素移过来不会互相遮挡。
5. 元素清单（N，已改 M）：列出点过的元素，没改过的标 ·未改，点到下一个元素时会自动清掉；每行可改 W / H / F（字号）、隐藏 / 显示、恢复、定位（滚动到该元素）、✕ 删除。
6. Esc 或「退出编辑」结束。覆盖继续生效。

快捷键

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

安装

本包无需构建（lib/client.js 是手写的客户端模块 factory）。

方式一：插件管理器一键安装（推荐）

1. 打开 设置 → 插件 → 添加插件。
2. 在「包名或地址」里填入本仓库地址：

github:Summer-Perilla/dsh-ui-custom

也可以填完整的 https://github.com/Summer-Perilla/dsh-ui-custom。
3. 确认安装。插件管理器会调用 profile 自带的 pnpm 拉包，装好后自动把 dsh-ui-custom 加进 dsh.profile.bundles 并激活 —— 不需要手改 package.json，也不需要手写 cordis.patch.yml。
4. 左下角出现 ⌗ 即装好；若没出现，刷新页面或重启 dsh。

安装时会做一次版本兼容检查。本包声明 @deepseek-ai/dsh 的 peer 范围是 >=0.2.0-rc.2 <0.3.0-0，超出这个范围会提示版本不兼容，需要同步放宽这个范围。

方式二：手动装（不经过插件管理器）

第 1 步：装进 profile

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

第 2 步：把包加进 bundles 名单

编辑 ~/.dsh/profiles/desktop/package.json，在 dsh.profile.bundles 数组里追加一项：

"dsh-ui-custom"

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

为什么需要第 2 步：dsh-app-boot 只对 dsh.profile.bundles 里列出的包应用各自的 dsh.bundle.patch（dsh-app-boot/lib/index.js:496、:1054），本包的 cordis.patch.yml 正是靠这条路径插入 loader 条目 ui-custom。加进 bundles 之后，不需要再手改 cordis.patch.yml。

方式三：本地开发（link: 装法）

cd ~/.dsh/profiles/desktop
pnpm add link:/path/to/dsh-ui-custom

link: 装进来的包不在 bundles 名单里，bundle patch 不会生效，需要手工写 loader 条目 —— 在 ~/.dsh/profiles/desktop/cordis.patch.yml 末尾追加：

- insert:
- id: ui-custom
name: dsh-ui-custom

浏览器端花名册由 dsh-client-modules 扫描 loader 条目生成（dsh-client-modules/lib/index.js:105-106），不看 bundles 名单，所以手写条目同样会被识别。link: 装法下改代码即时可见（profile 的 node_modules/dsh-ui-custom 是指向源码目录的符号链接），重启 dsh 即可，不必重装。

link: 装法下 pnpm 不会从目标目录解析 @deepseek-ai/cordis 等 peerDependencies（会告警）。本包 host 侧入口不 import 任何 cordis 符号，故不受影响；若将来 host 侧要加逻辑，改用 file: 协议或把依赖写实。

卸载

- 用插件管理器装的：在「设置 → 插件」里把它删掉，bundles 名单会一起清理。
- 手动装的：

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

再从 dsh.profile.bundles 里删掉 "dsh-ui-custom"；若之前用的是手写条目，一并删掉 cordis.patch.yml 末尾那段 - insert:。

已知限制

- 宽度覆盖只对 @media (min-width: 1025px) 生效，窄屏仍走原生自动收起逻辑。
- 一旦手动设过左侧栏宽度，原生分隔条拖动会被覆盖值「压回去」；用「恢复原生」回到跟随原生。
- 右栏宽度是从 frame.style.gridTemplateColumns 里解析出来透传的，本版不提供右栏调节。
- 元素选择器优先用 data-slot 与 css-modules 哈希类做整串精确匹配（div[class~="mP3x-q_item"]）。DSH 大版本升级若改了类名或 slot 名，旧规则会失效，需重新拾取。
- 同种判定是「同标签 + 同类名后缀集合」，不区分文本内容；若两组元素恰好共用同一组类名，会被一起改（这是该需求的固有取舍）。
- 隐藏 display: none 只对当前 DOM 生效；被条件渲染重新挂载的元素，因为选择器规则一直都在，重新挂载后仍是隐藏的。
- 撤销栈只存在内存里，刷新后清空；但刷新前的最终状态已持久化。
- 位移走 CSS translate：若目标元素自身已用 translate 做居中（如 translate: -50% -50%），本插件会覆盖掉它，元素位置会跳变 —— 用「归零 / 恢复」还原。
- 位移默认走「脱离文档流」（position: absolute 且不指定 left / top），视觉上不跳、也不占位；取消勾选后改回 translate，元素视觉上挪走但原位置仍占空间，周围元素不会重排。
- 浮窗的宽高一旦拖过就会写成固定像素，不再随窗口自适应；面板拖到屏幕外时会被钳制在可视区内。

文件

| 文件 | 作用 |
| lib/index.js | host 侧入口，空 apply |
| lib/client.js | 全部逻辑（注入、拾取、拖拽、多选、撤销、持久化） |
| cordis.patch.yml | 把自己插进 web 插件名单 |
| ../.probe/smoke.mjs | 无浏览器契约冒烟测试（工作区内，非发布物） |