dsh-conversation-flat
Document-flow conversation layout for DeepSeek Harness web GUI — full-width column, user message bars, sender label, full-width tables. 纯 CSS 的 dsh 对话区通栏布局插件
- Stars
- 1
- Language
- JavaScript
- Created
- Aug 30, 2026
- Updated
- Aug 30, 2026
Introduction
dsh-conversation-flat
中文 | English
把 DeepSeek Harness 的 Web 对话区从「居中窄气泡」改成「文档流」布局,并附带会话小地图与个人资料(头像 + 名字)功能的 dsh 插件。
效果
| 默认 | 本插件 |
|---|---|
| 对话内容居中限宽(748px),两侧大片空白 | 对话列铺满整个内容区 |
| 用户消息是右对齐、限宽 525px 的聊天气泡 | 用户消息变成通栏浅色圆角条,文字靠左 |
| AI 回复没有署名 | 回复上方显示灰色发送者标签 DeepSeek |
| Markdown 表格按内容收缩、漂浮在中间 | 表格撑满列宽、与文字左对齐 |
| 侧边栏列表底部悬浮一块突兀的渐变提示层 | 已移除,玻璃列平滑延伸到底部 |
| —— | 会话小地图:消息区左侧竖向刻度尺,每条消息一个刻度(用户消息高亮),悬停显示预览、点击跳转、滑块实时跟随滚动位置 |
| —— | 个人资料:设置面板新增「个人资料」分区,设置名字和头像后,你的每条消息上方显示圆形头像 + 名字,AI 回复上方显示对称的徽标 + DeepSeek 标签 |
会话小地图(v0.2.0+,v0.3.3 起仿 ZCode 风格)
- 每条消息一个刻度:统一样式的细灰线,按消息顺序均匀分布(不按篇幅比例聚簇),视口位置用亮色滑块实时标识
- 悬停刻度弹出该条消息的文字预览(自动跳过思考过程和大表格)
- 点击刻度平滑滚动到对应消息
- 纯 DOM 实现,随消息流式输出自动更新,禁用插件即完整移除
个人资料(v0.3.0+)
打开 设置 → 个人资料:
- 名字:填好后,你的每条用户消息上方都会显示「圆形头像 + 名字」;留空则保持原样不显示
- 头像:点「上传图片」选一张图,插件会自动居中裁剪并压缩到 128×128(一张几 MB 的照片会变成 ~20KB),未上传时显示名字的首字符圆形徽标
- 名字首字符徽标的颜色由名字哈希生成,与主题深浅色自动适配;助手侧保持原有的灰色 DeepSeek 文字标签不变
配置通过 dsh 的设置服务保存在服务端 ~/.dsh/settings.yaml(插件的 host 侧注册 conversation-flat-profile 命名空间),换浏览器、清缓存都不丢;局域网内其他设备(平板/手机访问 dsh web --host 0.0.0.0)因设置通道仅限本机,会自动改用该设备浏览器的 localStorage 保存个人资料,各设备独立配置。消息上的头像行随消息流式输出自动重建,禁用插件即完整移除。
布局部分是纯 CSS;小地图和个人资料头像行是轻量的 DOM 注入(幂等,React 重渲染后自动补回)。所有副作用都通过 ctx.effect 注册,在插件设置里禁用/删除即可完整还原页面。已与 dsh-kimino-theme 等主题插件共存验证,颜色全部引用主题 token,自动适配深浅色主题。
安装
dsh plugin --profile web add github:Idreamxkl/dsh-conversation-flat
装完重启 dsh web(会话是持久化的,放心重启)。
卸载
- 临时关闭:设置 → 插件 → 禁用
dsh-conversation-flat - 彻底删除:从 profile 的
package.json删除对应依赖与 bundles 条目后执行pnpm install(或直接dsh plugin --profile web remove dsh-conversation-flat)
自定义
所有规则都在 bundle/client.js 里,每组规则前有注释说明作用对象。常用的改法:
- 觉得太宽?把「conversation column」规则里的
max-width: none改成折中值(如1400px) - 不想要头像/名字行?设置 → 个人资料,清空名字和头像即可;不想要 DeepSeek 文字标签?删掉
bundle/client.js里「assistant messages」那组::before规则 - 用户消息条颜色深浅:调
color-mix()里的45%
兼容性与维护说明
适配 dsh 0.1.1-rc.2。选择器匹配 @deepseek-ai/dsh-client-ui-conversation 的 CSS-module 内容哈希(gdEzaW_、Sxvs8a_、Md3f7G_、_tableScroll_)。dsh 大版本更新后哈希可能变化,届时打开 bundle/client.js,按文件顶部维护注释重新对一次类名即可(几分钟的事)。注:社区主题插件(如 kimino-theme)同样硬编码这些哈希,这是 dsh 插件生态的通行做法。
表格那条规则的原理:dsh 渲染器会给表格打内联 max-width: max-content(可滚动表格模式),样式表的 !important 恰好能覆盖非重要的内联样式,因此表格永远撑满列宽。
English
A dsh plugin that turns the DeepSeek Harness web conversation area from a centered narrow bubble layout into a document-flow layout — full-width content column, user messages as full-width neutral bars, a sender label above assistant replies, and markdown tables that stretch to fill the column — plus a conversation minimap and a personal profile (circular avatar + display name above your messages, configured from a new section in the settings panel).
Install, uninstall, and customization are described above (in Chinese; the commands are copy-paste ready). Compatible with dsh 0.1.1-rc.2; selectors match CSS-module content hashes of dsh-client-ui-conversation — see the maintenance note at the top of bundle/client.js after major dsh upgrades.