chat-share-card
Manifest validChat Screenshot Beautifier (Share Card): One-click turn AI conversations into beautiful share cards. Supports custom background, font, color scheme, and rounded corners, with PNG export.
dsh-share-card · 对话分享卡片
把 DeepSeek Harness 里的一段问答,一键变成可以发群的精美分享卡片(PNG)。 不截屏、不带界面皮肤和侧栏,而是把回答重新排版画出来:渐变背景、圆角、字体、配色、 代码块高亮都在卡片里,导出的图干净、清晰、可直接发微信 / 群聊 / 论坛。
纯前端实现:零第三方依赖、纯浏览器半插件(无需宿主服务)、不联网、不上传任何内容。

截图
| 工作台(在 DSH 里点「分享卡片」打开) | 纸感米黄 · 浅色 | 赛博霓虹 · 深色 |
|---|---|---|
![]() | ![]() | ![]() |
安装
dsh plugin add --profile desktop github:samsam560/chat-share-card
装完完全重启 DSH 生效(桌面端走 .generations/staging)。重启后在设置里能看到
「分享卡片」一栏。
用法
- 把鼠标移到任意一条已生成的回答上 → 动作行里出现 「分享卡片」 按钮(和原生的 「好的回答 / 有问题的回答」并排)。
- 点它 → 打开工作台浮层:左边是实时预览,右边是全部参数,改哪一项预览立刻重画。
- 满意后点 导出 PNG(文件名
share-card-<时间戳>.png)或 复制到剪贴板 直接粘贴进聊天窗口。 Esc或点遮罩 / 「关闭」退出。
设置 → 分享卡片 里是同一套参数的常驻面板(改完自动保存在浏览器本地
localStorage["dsh-share-card:config"],下次打开还是你的偏好)。
参数
| 参数 | 说明 | 默认 |
|---|---|---|
| 预设 | 8 套渐变配色(见下) | 深空蓝紫 |
| 主题 | 深色 / 浅色(浅色系预设会自动用浅底深字) | 深色 |
| 字体 | 无衬线 / 衬线 / 等宽 | 无衬线 |
| 宽度 | 720 / 880 / 1080 逻辑像素 | 880 |
| 圆角 | 0–48 | 28 |
| 内边距 | 24–80 | 48 |
| 正文字号 | 14–22 | 16 |
| 行高 | 1.2–2.0 | 1.7 |
| 导出倍率 | 1× / 2× / 3×(2× 即 880 → 1760px 宽,发群足够清晰) | 2× |
| 代码折行 / 代码高亮 | 代码块是否折行、是否语法着色 | 开 / 开 |
| 代码行号 | 代码块左侧显示行号 | 关 |
| 画入图片 | 回答里的图片是否画进卡片(默认关闭,用 [图片] 占位以免画布被污染) | 关 |
| 显示头部 / 页脚 / 提问框 / 时间 / 水印 | 各区域的开关 | 全开 |
| 标题 / 页脚文字 / 提问标签 / 水印 | 自定义文案;标题留空时自动取会话标题 | — |
8 套预设:深空蓝紫 deepseek、暗夜石墨 midnight、日落橙粉 sunset、薄荷青绿 mint、
纸感米黄 paper、纯白极简 snow、赛博霓虹 neon、深海鲸蓝 ocean。
卡片里有什么
- 标题(会话名或自定义)+ 右上角时间
- 提问(可选,带「提问」标签的引用框)
- 回答正文:段落、标题、有序 / 无序列表(含嵌套)、引用块、表格(含表头与自动列宽)、
代码块(语言名 + 语法高亮 + 可选行号)、行内
代码、粗体 / 斜体 / 链接、分割线 - 页脚:自定义文案 + 水印
排版用 canvas 2D 逐块规划(先量再画、两遍布局),中日韩文字按字符断行、英文按词断行, 所以长回答不会被截成锯齿或溢出。
技术实现
- 入口:注册在客户端插槽
conversation.chat.assistant-actions(id: share-card,order: 55) 与settings.section(order: 620)。 - 提取:从被点击那条回答的渲染 DOM 读取结构化内容。DSH 聊天区是一列扁平的
flow item,每个 item 自带
data-chat-turn属性,同一回合的多行是兄弟节点而不是父子 —— 所以提取顺序是:从按钮找到[data-turn-tail]→ 取回合号 → 全文档找该回合[data-chat-flow-kind="assistant-step"][data-chat-group-part="response"]的最后一条非空回答行; 推理(reasoning)行与工具调用行按data-chat-group-part/ flow-key 排除。 - 渲染:纯数据模型 → 两遍布局(测量 → 绘制)→
canvas→toBlob/toDataURL导出。 没有任何html2canvas之类的依赖,也没有把 DOM 交给浏览器截图。 - 自动化接口:
window.__dshShareCard = { version, config, set, reset, open, close, extractLast, render, extractAndRender, renderBlocks, presets, state },方便脚本化验证与二次开发。
已知限制
- DSH 的聊天区是虚拟化列表:很久以前、当前没有渲染在页面里的回合取不到内容;请 先滚到那条回答可见再点「分享卡片」。
- 图片默认不画入卡片(用
[图片]占位)——打开「画入图片」时,跨域图片可能让画布被污染, 导致导出失败。 - 超长回答有高度防呆(极端情况会在卡片底部标注「内容过长已截断」)。
许可
MIT © 2026 samsam560
版本记录
- 0.1.0 — 首个版本:回答动作按钮 + 工作台浮层(实时预览 / 8 套预设 / 尺寸与排版参数 /
显示开关)+ 导出 PNG / 复制剪贴板 + 设置页常驻面板 +
window.__dshShareCard自动化接口。
Comments
Loading…
From the same category
by awesome-dsh-plugin
A curated list of plugins for DeepSeek Harness (dsh) · DeepSeek Harness 插件精选列表
★ 18.3k
CC0-1.0
Python
Oct 10, 2026
by 0xsline
DeepSeek Harness (DSH) ecosystem: curated plugins, tools, and infrastructure from dsh-external/hub and the public dsh-plugin topic.
★ 1.2k
CC0-1.0
Python
Oct 10, 2026
by pax-beehive
Open-source CLI, schemas, resolver, and DSH agent tools for DSH Plugin Hub
★ 450
MIT
TypeScript
Oct 6, 2026
by xiajiajun516
DeepSeek Harness (DSH) backup & restore plugin — export, import, migrate and sync your complete DSH configuration, plugins, MCP servers, skills and workspace. One-click migration to another machine.
★ 176
MIT
TypeScript
Oct 8, 2026
dsh plugin --profile web add dsh-config-managerby yjh051108
推荐组件(非必须):DeepSeek Harness 运行时注入器;已随 dsh-routing-suite 单仓库化保留,本仓库继续维护/发布。
★ 164
TypeScript
Sep 18, 2026
dsh plugin --profile web add @dsh-external/dsh-super-injectorby jigjoy-ai
A CLI that turns a goal into a pull request - and a sandbox for testing concurrent AI coding agents on the Mozaik runtime.
★ 124
MIT
TypeScript
Oct 2, 2026


