Skip to content
dsh.fish
Bundle

@zink-ning-lkr/dsh-chat-width

对话区宽度调节——加宽/收窄聊天内容区与用户气泡,滑块配置即时生效(自渲染 DOM,官方 client 通道)

Source
zink-ning-lkr
stars
1 stars
License
MIT
Updated
Updated 15 days ago

Readme

# 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` 命名空间(可手改):

```yaml
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 通道)。
- `scripts/build.sh` — 构建/打包:校验双 half 语法并产出 npm pack tgz(插件生产线兼容)。

## 安装 / 下载

### 从 npm 安装(推荐)

```bash
dsh plugin --profile web add @zink-ning-lkr/dsh-chat-width
```

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

```bash
npm install @zink-ning-lkr/dsh-chat-width
```

然后在 profile 的 `package.json` 中把 `@zink-ning-lkr/dsh-chat-width` 加入 `dsh.profile.bundles`。

### 从 GitHub Release 下载

到 [Releases](https://github.com/zink-ning-lkr/dsh-chat-width/releases) 下载
当前版本的 `zink-ning-lkr-dsh-chat-width-<版本号>.tgz`,然后安装:

```bash
dsh plugin --profile web add ./zink-ning-lkr-dsh-chat-width-<版本号>.tgz
```

例如 v0.2.0 直链:
`https://github.com/zink-ning-lkr/dsh-chat-width/releases/download/v0.2.0/zink-ning-lkr-dsh-chat-width-0.2.0.tgz`

### 本地构建

```bash
bash scripts/build.sh   # 校验双 half 语法,产出 zink-ning-lkr-dsh-chat-width-<version>.tgz
```

或直接使用开发台的插件生产线(dev_build_plugin 构建、dev_release_plugin 发 GitHub Release)。

### 本地开发 / 热装

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

## License

[MIT](LICENSE) © zink-ning (zink_ning)

Install

dsh plugin --profile web add github:zink-ning-lkr/dsh-chat-width

Profile: web

  • This package builds from source on install. pnpm will ask you to allow its build script — that is permission to run the package’s code on your machine, outside the agent sandbox. Only allow sources you trust.
  • This source has no pinned commit, so a later push upstream changes what installs. Prefer pinning a commit.
Source