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.yaml 的 chat-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-widthsettings 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.json 的 dsh.profile.bundles 加入 @zink_ning/dsh-chat-width,依赖用 link: 指向本目录;
或使用 dev_install_package 热装(junction + loader.create,免重启)。
License
MIT © zink-ning (zink_ning)