Back to home

zink-ning

dsh-chat-width

DSH Web GUI 对话区宽度调节插件:聊天内容区/用户气泡宽度滑块即时生效

Stars
1
Language
JavaScript
Created
Aug 16, 2026
Updated
Aug 16, 2026

Introduction

dsh-chat-width

对话区宽度调节插件(DSH Web GUI)。

功能

  • 对话区宽度:滑块调节消息列与输入框的整体内容宽度(480–1680px),拖动即时生效。
  • 用户气泡宽度:滑块调节用户气泡最大宽度(320–1200px,不超过容器 82%)。
  • 恢复默认:一键清空配置,回到官方原值(748px / 525px)。

原理

官方对话区宽度由 CSS 变量 --dsh-chat-content-width(默认 748px)控制,定义在会话根元素上; 输入框卡片宽度是它的衍生值(calc(+32px))。插件扫描样式表定位声明该变量的规则 → 命中 会话根元素 → inline 重设变量,消息列与输入框整体联动。用户气泡栈([data-time-hover-root] > :first-child) 注入变量驱动规则(min(var(--dsh-user-bubble-max), 82%))覆盖官方 525px 上限。

类名是构建混淆名,但变量名稳定——以变量名为锚,不依赖混淆类。若根元素定位失败,降级为 直接覆盖 [data-chat-flow] 的 max-width(输入框不联动,主体仍生效)。

配置存储

写入 ~/.dsh/settings.yamlchat-width 命名空间(可手改):

chat-width:
  width: 748      # 480–1680
  bubbleMax: 525  # 320–1200

读写走插件自带的 loopback 桥接(/api/dsh-chat-width/settings/describe|mutate)。 远程浏览器(remote-web-ui)不是 loopback 连接,配置自动降级为默认值。

结构

  • lib/index.js — Node half:注册 chat-width settings namespace + loopback 桥接路由。
  • lib/client.js — 浏览器 half:宽度控制器 + 设置 Tab(官方 slots 通道)。

安装 / 下载

从 npm 安装(推荐)

dsh plugin --profile web add @zink_ning/dsh-chat-width

也可以手动安装依赖并装配:

npm install @zink_ning/dsh-chat-width

然后在 profile 的 package.json 中把 @zink_ning/dsh-chat-width 加入 dsh.profile.bundles

从 GitHub Release 下载

Releases 下载 dsh-chat-width-0.1.0.tgz,然后安装:

dsh plugin --profile web add ./dsh-chat-width-0.1.0.tgz

本地开发 / 热装

profile package.jsondsh.profile.bundles 加入 @zink_ning/dsh-chat-width,依赖用 link: 指向本目录; 或使用 dev_install_package 热装(junction + loader.create,免重启)。

License

MIT © zink-ning (zink_ning)