dsh-conversation-screenshot — dsh 会话截图插件

dsh 插件：在 dsh Web 界面里把「用户与模型的对话」渲染成一张 PNG 长图并写入系统剪贴板；浏览器拒绝剪贴板写入时自动回退为 PNG 下载。

纯前端实现：克隆已加载的对话 DOM，读取浏览器自身的布局（盒子 + 逐字符光标矩形），直接绘制到一张 canvas 上，不依赖任何第三方渲染库；界面图标（内联 SVG）序列化后一并绘入。跟随 dsh 主题（深色/浅色）与中英文界面语言。

本项目由 AI 生成：由 DeepSeek-V4.1-Flash 与 GLM-5.3-Flash 两个模型协作完成，人类负责提出需求、调整方向并验收成果。提示词与模型分工详见文末 AI 生成说明。

功能

• 整段长截图：输入框工具栏右侧的相机按钮。截取当前会话已加载的全部对话。
  • 若会话顶部还有未加载的历史（出现「加载更早」按钮），会自动反复点击拉全历史后再截图；dsh 拉取失败时持续重试，确实拉不动则如实提示「仅含已加载的对话轮次」。
  • 内容超过浏览器画布上限（约 16000px 边长 / 44M 像素）时自动降采样，并用提示语说明实际缩放倍数。
• 单轮截图：每条已完成回复下方操作行（悬停可见）里的相机按钮。截取这一轮问答——从该轮的用户提问气泡开始，到该轮回复结束（含用量/时间行），不混入相邻轮次。

截图范围

只截当前打开会话的对话区（含用户气泡、模型回复、工具调用行、文件卡片、用量行），不包含侧栏、输入框和其他会话。

安装

本地目录安装（推荐，便于改代码即时生效——dsh 以符号链接方式引用）：

dsh plugin --profile web add /path/to/dsh-plugin/screenshot

删除：

dsh plugin --profile web remove dsh-conversation-screenshot

安装后刷新 dsh Web 页面即可。插件名：dsh-conversation-screenshot。

使用

1. 打开任意会话；
2. 截整段：点输入框工具栏的相机按钮，等待「已复制长截图」提示；
3. 截单轮：鼠标悬停到目标回复，点该轮操作行里的相机按钮，等待「已复制本轮截图」提示；
4. 到任意支持粘贴图片的地方（聊天窗口、文档、画图工具）Ctrl+V 粘贴。

复制成功时按钮图标会短暂变为对钩（与 dsh 复制成功的反馈一致）；剪贴板不可用时回退为下载 PNG，按钮不变。

已知限制

• dsh 自身拉取历史偶发崩溃（控制台可见 session-controller event feed subscriber failed），插件会持续重试并在确实无法继续时诚实降级为部分截图。
• 界面图标随实况渲染：鼠标悬停才显示的按钮图标（复制/分叉等），在截图里同样保持隐藏；超过 256px 或通过 <use> 引用外部符号的 SVG 会跳过，以避免渲染挂起或画布污染。

文件结构

├── client.js         # 全部逻辑：Canvas 绘制、历史分页、单轮定位、两个 UI 入口
├── index.js          # Host 侧占位
├── package.json      # 插件清单（client 注入项、exports）
├── cordis.patch.yml  # 服务注册补丁
├── icon.svg
└── locale/           # 插件管理器里的标题/描述翻译
    ├── en.json
    └── zh.json

开发

改 client.js 后刷新页面即可生效；若改动 package.json（如 inject 列表），dsh 服务端会重算 bundle revision。调试时注意浏览器 HTTP 缓存可能滞留旧 bundle——清缓存或改清单字段强制刷新。

验证方式：chromium --remote-debugging-port=9222 打开页面，用 CDP Input.dispatchMouseEvent 派发受信任点击，再 navigator.clipboard.read() 读回 PNG 检查尺寸与内容。

AI 生成说明

本项目由 AI 生成。两个大模型先后接力完成，人类只在需求、方向与验收上介入，未直接编写代码。

提示词摘要

项目起于一句需求：「帮我做一个 dsh 插件，实现可以对 dsh 内的会话内容进行截图复制到剪切板的功能，可以在网页内长截图用户与模型的对话」——DeepSeek-V4.1-Flash 据此从零搭出插件初版（bundle 骨架、Canvas 直接绘制管线——期间历经 SVG foreignObject 污染画布、离屏渲染挂起等弯路——以及 CDP 实机验证环境）。随后人类以三句话调整方向：先澄清「主要是单次会话截图，而不是全部截图」，划定了只截当前会话的边界；再要求「截单轮的问答」，催生了每轮回复操作行里的单轮截图入口；最后指示打包到新目录、写 README、初始化 git 仓库并采用 CC0 许可证，形成了本仓库的发布形态。

模型分工

模型	阶段	主要工作
DeepSeek-V4.1-Flash（dsh 内置 agent）	v1.0.0 初版	从零搭出插件：slots 注入、clone + 布局读取 + Canvas 绘制方案、剪贴板复制与下载回退、在真实浏览器里用 CDP 调试并迭代多轮渲染方案
GLM-5.3-Flash（ZCode 代理）	v1.0.1–v1.1.1	端到端验证并修复两个渲染缺陷（克隆丢失祖先 CSS 自定义属性导致列宽错误、measureText 拟合断行漂移导致丢字）、实现单轮截图、历史加载改为人工式持续重试并诚实降级、补上界面图标的 SVG 渲染、打包与仓库

人工参与

人类提出原始需求与两次方向调整（截图范围、单轮粒度），选定许可证，并对每个功能在真实 dsh 会话中验收截图效果。

许可证

CC0 1.0（公有领域贡献）——作者已尽可能放弃全部版权，可任意使用、修改、分发，无需署名。