chat-share-card:把 DSH 里的一段回答排成可分享的 PNG 卡片

前言

在 DeepSeek Harness(DSH)里跑通一段问答后,想发到群聊或论坛,常见做法是系统截屏或手动裁图。截屏会带上界面皮肤、侧栏和滚动条;长回答还要拼多张图,代码块和小字号往往发出去就糊。社区插件 chat-share-card(包名 dsh-share-card)走另一条路:从当前这条已渲染的回答读出结构化内容,在浏览器里用 Canvas 重新排版,再导出 PNG 或复制到剪贴板。不依赖 html2canvas,也不把 DOM 交给浏览器整页截图;README 写明纯前端、零第三方依赖、不联网、不上传内容。

这是什么

chat-share-card 由维护者 samsam560 发布,在 SkillHub 目录中归类为「趣味换装」。定位是「对话截图美化器 / 分享卡片」:一键把 AI 对话中的单条回答生成带渐变背景、圆角、字体与配色的分享图,支持自定义背景/字体/配色/圆角,最终导出 PNG。当前 GitHub 星标为 0;首个版本 0.1.0,许可 MIT;要求 DSH >=0.1.5-rc.1(见 package.json)。

核心功能

下面介绍 README 中已写明的能⼒,不超出资料范围。

入口与交互

  • 在客户端插槽 conversation.chat.assistant-actions 注册动作「分享卡片」(id: share-card),与原生「好的回答 / 有问题的回答」并排出现在已生成回答的动作行。
  • 点击后打开工作台浮层:左侧实时预览,右侧全部参数;改一项预览立刻重画。
  • 设置 → 分享卡片 提供同一套参数的常驻面板;偏好保存在浏览器本地 localStorage["dsh-share-card:config"]。

导出

  • 导出 PNG:默认文件名 share-card-<时间戳>.png。
  • 复制到剪贴板,可直接粘贴进聊天窗口。
  • Esc、点遮罩或「关闭」退出浮层。

视觉与排版参数

参数 说明 默认
预设 8 套渐变配色 深空蓝紫
主题 深色 / 浅色 深色
字体 无衬线 / 衬线 / 等宽 无衬线
宽度 720 / 880 / 1080 逻辑像素 880
圆角 0–48 28
内边距 24–80 48
正文字号 14–22 16
行高 1.2–2.0 1.7
导出倍率 1× / 2× / 3× 2×
代码折行 / 代码高亮 代码块是否折行、是否语法着色 开 / 开
代码行号 代码块左侧行号 关
画入图片 回答内图片是否画进卡片 关(默认 [图片] 占位)
显示头部 / 页脚 / 提问框 / 时间 / 水印 各区域开关 全开
标题 / 页脚文字 / 提问标签 / 水印 自定义文案;标题留空时用会话标题 —

8 套预设:深空蓝紫 deepseek、暗夜石墨 midnight、日落橙粉 sunset、薄荷青绿 mint、纸感米黄 paper、纯白极简 snow、赛博霓虹 neon、深海鲸蓝 ocean。

卡片内容

标题(会话名或自定义)与右上角时间;可选带「提问」标签的提问引用框;回答正文支持段落、标题、有序/无序列表(含嵌套)、引用块、表格、代码块(语言名、语法高亮、可选行号)、行内代码、粗体/斜体/链接、分割线;页脚含自定义文案与水印。排版采用 Canvas 2D 两遍布局(先量再画);中日韩按字符断行、英文按词断行。

自动化接口

全局暴露 window.__dshShareCard(含 version、config、set、reset、open、close、extractLast、render、extractAndRender、renderBlocks、presets、state),便于脚本化验证与二次开发。

安装与启用

DSH 生态强调「一切皆插件」;社区目录 SkillHub 是独立站点,与 DeepSeek / 幻方无官方从属关系。安装插件前,建议自行查看 GitHub 仓库 源码与 MIT 许可证——插件在当前 DSH 进程权限下运行。

官方安装命令如下(桌面端 profile):

dsh plugin add --profile desktop github:samsam560/chat-share-card

装完后完全重启 DSH 才生效(桌面端走 .generations/staging)。重启后在设置里应能看到「分享卡片」一栏。

典型用法

  1. 将鼠标移到任意一条已生成的回答上,在动作行点击 「分享卡片」。
  2. 在工作台里调整预设、主题、宽度、圆角等;左侧预览随改随变。
  3. 满意后点 导出 PNG 或 复制到剪贴板。
  4. 若希望默认样式固定,可在 设置 → 分享卡片 中改参数,下次打开仍沿用本地保存的配置。

需要分享某一条具体回答时,务必先让该回答在聊天区可见再点按钮(见下文限制)。

适用场景与注意

适合谁

  • 要把 DSH 里某段回答发到微信、群聊、论坛,又不想带完整界面 UI 的开发者或使用者。
  • 需要统一渐变背景、代码高亮和圆角风格,且希望 2× 导出(例如 880 逻辑宽 → 1760px)足够清晰发群的用户。

已知限制(来自 README)

  • DSH 聊天区为虚拟化列表:未渲染在页面里的历史回合取不到内容;请先滚到目标回答可见再点「分享卡片」。
  • 「画入图片」默认关闭;开启后跨域图片可能导致 Canvas 被污染,导出失败。
  • 超长回答有高度防呆,极端情况卡片底部会标注「内容过长已截断」。

结尾

chat-share-card 用纯浏览器端 Canvas 把单条回答重排成 PNG,参数可细调、数据不出本机。目录页:SkillHub · chat-share-card;源码与完整参数说明:GitHub · samsam560/chat-share-card。

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜