chen-001/dsh-chat-width

Name: chen-001/dsh-chat-width
Author: chen-001

插件Plugin 原生Native ⭐ 5 BSD-3-Clause Web 界面Web UI

中 / EN：DSH Web 消息宽度调节插件 —— AI 回复的消息列固定宽度、屏幕再宽也是左右留白，本插件让你拖动即可调整展示宽度。 A DSH Web plugin for adjusting the message column width: AI replies render in a fixed-width centered column with empty gutters on wide screens — drag to resize.

catalog 简介 / catalog descriptioncatalog description：Adjust the width of dsh's reply.

项目介绍Project Overview

由知微Agent(zhiwei)编辑Edited by Zhiwei Agent (zhiwei)

DSH Web 消息宽度调节插件，纯浏览器侧，零内核改动。拖动输入框边缘手柄即可调整消息列宽度，提供 640/960/1280 三档预设与自定义像素输入，localStorage 持久化。适用于宽屏阅读表格或截取长对话。注意：手柄钉在输入框侧，调整的却是正文消息列，首次使用需刷新 Web 挂载。

A browser-side DSH Web plugin for resizing the message column. Drag the grips on the input box edges to widen or narrow the conversation area; presets at 640/960/1280 plus custom pixel values, persisted via localStorage. Use it on wide screens for table reading or long-conversation screenshots. Caveat: the grips sit on the input box but resize the message column, and the Web UI must be refreshed to mount it on first install.

在 GitHub 查看View on GitHub

发给你的 DSH 安装Send to your DSH

请帮我了解并安装插件：【dsh-chat-width】【https://github.com/chen-001/dsh-chat-width】

把上面这条消息直接发给当前会话里的 DSH，让它帮你了解并安装。安装命令不一定准确，发给 DSH 更稳。Send this message to DSH in your current session. CLI install commands may not be accurate across systems — DSH will figure it out for you.

或使用命令行安装（适合开发者）Or use CLI install (for developers)

命令行安装CLI Install

dsh plugin --profile web add github:chen-001/dsh-chat-width

把 chen-001/dsh-chat-width 加入你的 DSH 配置（web profile）即可启用。

READMEREADME

9.2 KB · 缓存于 2026-08-23 03:41:44 · 9.2 KB

dsh-chat-width

中 / EN：DSH Web 消息宽度调节插件 —— AI 回复的消息列固定宽度、屏幕再宽也是左右留白，本插件让你拖动即可调整展示宽度。 A DSH Web plugin for adjusting the message column width: AI replies render in a fixed-width centered column with empty gutters on wide screens — drag to resize.


_{项目概览 / Project Overview}	_{插件介绍 / Plugin Introduction}

简介 / Introduction

中：chat-width 是 DSH Web 的一个客户端插件（纯浏览器侧），解决 AI 回复消息列固定宽度导致"表格要左右滑动、一屏信息量少、不便截图"的痛点——让用户拖动即可调整消息展示宽度。

EN: chat-width is a client-side plugin (browser-only) for DSH Web. It solves the pain of a fixed-width message column — wide tables need horizontal scrolling, one screen shows too little information, and screenshots are hard to compose — by letting you drag to resize the message column.

原本的痛点 / The Original Pain Points

中文	English
很多表格需要左右滑动才能看到完整信息	Many tables need horizontal scrolling to show their full content
一个屏幕下显示的信息量不够多，不方便截图	A single screen shows too little information to fit into one screenshot

用法 / Usage

中：鼠标移到输入框左右边缘（出现竖线），按住左右拖动即可调宽——手柄虽在输入框两侧，但调整的是正文消息的宽度，正文会同步变宽/变窄。双击恢复默认。

EN: Move the mouse to either edge of the input box (a vertical line appears), press and drag left/right to resize — the grips sit on the input box, but they resize the message column, so the conversation content follows. Double-click to restore the default.

核心功能 / Core Features

功能 / Feature	说明 / Description
拖动手柄调宽 / Drag grips	输入框左右边缘出现手柄，拖动即调整正文消息列宽度（手柄在输入框两侧，调的却是消息列） Grips appear on the input box edges; dragging resizes the message column (the grips sit on the input box, but resize the column)
双击恢复默认 / Double-click reset	双击手柄恢复官方默认宽度 Double-click a grip to restore the official default width
设置页预设 / Presets in settings	紧凑 640 / 宽 960 / 超宽 1280 三个预设（8px 步进，320–2560px 范围） Three presets: Compact 640 / Wide 960 / Ultra 1280 (8px step, 320–2560px range)
自定义输入 / Custom input	设置页可手动输入任意像素值，非法输入自动钳制/拒绝 Type any pixel value in the settings page; invalid input is clamped or rejected
持久化 / Persistence	localStorage 持久化；拖动时 300ms 节流写入，操作结束立即写入 Persisted via localStorage; writes are throttled at 300ms while dragging and flushed immediately on release
会话内即时生效 / Live effect	宽度实时作用于文档样式表，无需刷新页面 Width applies to the live stylesheets instantly — no page refresh needed

安装 / Installation

方式一：plugin-registry（推荐，需宿主已集成 plugin-registry）

中：通过 dsh plugin 命令安装与管理，安装默认禁用、显式启用，Web 刷新后实时挂载。

EN: Install and manage via the dsh plugin command. Installed disabled by default, enabled explicitly, mounted live after a Web refresh.

git clone https://github.com/chen-001/dsh-chat-width.git
cd chat-width && pnpm install && pnpm run build   # 产出 client.js（registry bundle）/ produces client.js (registry bundle)
dsh plugin install .           # 安装（默认禁用）/ install (disabled by default)
dsh plugin enable chen-001/dsh-chat-width   # 启用（实时挂载，Web 刷新后生效）/ enable (mounted live, active after Web refresh)
dsh plugin list                # 验证 enabled chen-001/dsh-chat-width@0.1.0 / verify enabled chen-001/dsh-chat-width@0.1.0

方式二：官方通道（config.yaml insert，未集成 registry 时用）

中：一键安装脚本自动装入 DSH 并写入配置。

EN: A one-command install script that links the plugin into DSH and writes the config.

git clone https://github.com/chen-001/dsh-chat-width.git
sh chat-width/install.sh   # 自动装入 DSH 并写入配置 / links into DSH and writes the config

重启 dsh web 生效。 / Restart dsh web to activate.

中：私有仓库，仅限 chen-001 组织成员使用。 EN: Private repository, for chen-001 org members only.

两种分发形态 / Two Distribution Forms

形态 / Form	清单 / Manifest	bundle	管理 / Management
registry 插件 / Registry plugin	`dsh.plugin.json`（`id: chen-001/dsh-chat-width`）	根目录 `client.js`（banner id = 插件 id，无 `@`） root `client.js` (banner id = plugin id, no `@`)	`dsh plugin` / Web 面板，安装默认禁用、显式启用 `dsh plugin` / Web panel, installed disabled, enabled explicitly
官方包 / Official package	`package.json#dshClient`	`lib/client.js`（banner id = 包名 `@chen-001/dsh-chat-width`）	`config.yaml` insert + pnpm link

中：两者是同一功能的两种发布形态，bundle 各自构建、互不影响；registry 通道启用后请从 config.yaml 移除旧 insert 行，避免双份注册。

EN: The two are two release forms of the same feature; each bundle is built independently and they do not interfere. After enabling the registry channel, remove the old insert line from config.yaml to avoid double registration.

技术实现要点 / Technical Highlights

要点 / Highlight	说明 / Description
零核心改动 / Zero core changes	不动 DSH 内核，仅操作文档样式表 + 插槽注册，配置即安装 No DSH core changes — only live stylesheets + slot registration; config is the install
手柄定位"实测不假设" / Measured, not assumed	手柄钉在输入卡（`[data-composer-seat]`）边缘，通过 `--dsh-composer-card-max-width` 的 live var() probe 实测宽度；无卡片时回退到滚动区中心公式并钳制 Grips pin to the composer card edges via a live `var()` probe; fall back to the scroll-area center formula with clamping when no card exists
可见性声明式 / Declarative visibility	`body:has([data-conversation-scroll])` + hover 透明度：仅聊天渲染时存在手柄、悬停才显示，页面上无永久竖线 `body:has(...)` + hover opacity: grips exist only while a chat renders and show only under the pointer — no permanent vertical lines
布局漂移跟随 / Layout drift tracking	window resize + MutationObserver（rAF 合并）重定位手柄，覆盖切会话/折叠侧栏等场景 window resize + MutationObserver (rAF-coalesced) re-pins the grips across session switches, sidebar collapses, etc.
Cordis 语义正确 / Correct Cordis semantics	`ctx.effect` 返回 disposer 闭包，保证手柄生命周期与插件一致、卸载时正确清理 `ctx.effect` returns a disposer closure so handle lifetime matches the plugin and cleanup is correct on unload
单源数据流 / Single source of truth	所有宽度写入经同一处理器 → 持久化 + 引擎 + store，store 是设置行的唯一渲染源 All width writes flow through one handler → persistence + engine + store; the store is the only render source

工程脚本与状态 / Scripts & Status

项 / Item	内容 / Content
`pnpm run build`	tsdown 构建两种 bundle / builds both bundles
`pnpm run typecheck`	tsc 类型检查 / TypeScript type check
`pnpm run test`	vitest 全量单测 / full unit test suite (vitest)
Git	15 个提交，最新：`0.1.0 npm 发版就绪`；工作区干净 / 15 commits, latest: `0.1.0 npm release-ready`; clean worktree
依赖 / Dependencies	peer 对齐 deepseek-ai 官方生态：dsh-client-runtime / locale / ui-slots + cordis + react 18（dev 依赖 link 到 `~/.dsh/source/current` 快照） peers aligned with the official deepseek-ai ecosystem: dsh-client-runtime / locale / ui-slots + cordis + react 18 (dev deps link to the `~/.dsh/source/current` snapshot)

一句话总结 / One-line Summary

中：这是一个"配置即安装、零内核改动"的 DSH Web 前端体验增强插件，用拖动手柄 + 设置页预设/自定义 + localStorage 持久化，解决消息列过窄的阅读与截图痛点，并同时支持 plugin-registry 与官方通道两种分发方式。

EN: A "config-is-install, zero core changes" DSH Web UX-enhancement plugin that fixes the narrow-column reading and screenshot pain points via drag grips + settings presets/custom input + localStorage persistence, shipped through both plugin-registry and the official channel.

渲染基于仓库 chen-001/dsh-chat-width 的 README.md。在 GitHub 查看原文 →

命令行安装CLI Install 复制安装命令Copy Install