lokih1028/dsh-plugin-canvas-pro

dsh-plugin-canvas-pro

面向 DeepSeek Harness 的 Canvas-Pro：一个 Web 抽屉，外加八个用于创建、修补、版本管理和导出 canvas 产物的模型工具。

它做什么

安装后，Web 会话标题栏会出现一个 Canvas 按钮。智能体可以创建 HTML、Markdown、Mermaid、SVG 或 React 产物；抽屉会在沙箱化 iframe 中预览它们。

模型工具：

| 工具 | 用途 |
| --- | --- |
| create_canvas_artifact | 创建一个产物 |
| update_canvas_artifact | 按选区、行范围或覆盖方式修补 |
| get_canvas_selection | 读取最新的预览选区 |
| get_canvas_artifact | 读取当前内容 |
| list_canvas_versions | 列出快照 |
| revert_canvas_artifact | 将之前的快照恢复为新版本 |
| diff_canvas_artifact | 版本之间的统一或拆分 diff |
| export_canvas_artifact | 导出 markdown、html、svg、png data URL 或 json |

在预览中选择文本会打开 Explain / Refactor / Fix / 自定义提示词操作，并将它们提交到当前聊天中。

与开源 DSH 插件的比较

来源是这些插件在 awesome-dsh-plugin 上的自身列表。此表仅涵盖这些列表所声称且本仓库已实现的内容。

| | dsh-live-canvas | dsh-canvas-preview | dsh-generative-ui | Canvas-Pro |
| --- | --- | --- | --- | --- |
| 它是什么 | 用于 HTML / React / Vue / SVG / Mermaid / Markdown 的实时沙箱 | 预览工作区 HTML 的对话标签页 | 内联或侧边 canvas 中的流式 TSX UI | 产物工作区：抽屉 + 八个模型工具 |
| 智能体工具 | 面向预览 | canvas_preview 风格的 HTML 预览 | 智能体编写 TSX；卡片可以运行 bash / curl / model / files | create / update / get / get_selection / list_versions / revert / diff / export |
| 局部编辑 | 不是产品重点 | 通常是整个 HTML | 新的 TSX 帧 | replace_selection、replace_range、full_overwrite |
| 选区 → 下一轮 | DOM 点击检查器 | 未列出 | 点击卡片驱动下一轮聊天 | 从文本选区进行 Explain / Refactor / Fix / 自定义提示词 |
| 版本 | 并排视觉 diff | 未列出 | 状态跨流式帧保留 | 快照历史、以新版本形式回退、统一和拆分行 diff |
| 导出 | Vite ZIP | 本地 PNG / JPG / SVG | 未列出 | Markdown、独立 HTML、SVG、PNG 栅格化（SVG 回退）、JSON 归档 |
| 持久化 | 会话 / HMR | 工作区 HTML 文件 | 内存中的 UI 状态 | $DSH_HOME/storages/canvas-pro/artifacts.json |
| 抽屉 | 预览界面 | 对话标签页 | 内联 + 侧边 canvas | 可调整大小的覆盖层；聊天轮次不会强制打开它 |

同名插件在这里不是竞争对手：
- dsh-agent-canvas — Agent / Subagent / Workflow 图，而非文档产物。
- dsh-ark9canvas — 图像生成工作台。
- dsh-web-artifact-designer — 一个编写 HTML/SVG 文件的技能，而非实时绘图器。

其他工具更强的地方：

- live-canvas：真正的 React / Vue / Mermaid 运行时、SSE 热重载、设备矩阵、Vite ZIP。
- canvas-preview：从工作区 HTML 直接导出 PNG / JPG。
- generative-ui：流式 TSX 编译，无需额外工具 schema，卡片内点击即可开始下一轮。

Canvas-Pro 在 DSH 产物工作上更强的地方：

1. 补丁而非重新生成。 Agent 可以替换选中的片段或行范围。预览插件通常需要一份全新的完整文档。
2. 文本选择是一等 Agent 输入。 绘图器将片段发送到当前 composer；宿主也可以通过 get_canvas_selection 读取它。
3. 版本时间机器。 每个补丁都是一个快照；Agent 可以列出、对比和回滚，而无需从头重写文件。
4. 导出是一个模型工具，而不仅仅是 UI 按钮：通过 export_canvas_artifact 导出 markdown / html / svg / png / json。
5. 本地产物存储在 Web 重启后依然保留，位于 $DSH_HOME 下。

未声称：比 live-canvas 更丰富的实时 React/Mermaid；比 generative-ui 更强的流式 TSX；比 canvas-preview 更可靠的栅格 PNG/JPG。

安装

dsh plugin --profile web add github:lokih1028/dsh-plugin-canvas-pro

重启 Web profile，然后刷新 GUI。

配置

- id: canvas-pro
name: dsh-plugin-canvas-pro
config:
maxHistoryPerArtifact: 50
enableReactPreview: true

当设置了 DSH_HOME 时，产物存储在 $DSH_HOME/storages/canvas-pro/artifacts.json 下。

限制

- React 产物目前在预览沙箱中显示源代码；它们不会作为实时 React 树执行。
- Mermaid 产物显示源代码，除非你将其转换为 HTML。
- PNG 导出会尝试对 SVG 预览进行浏览器栅格化；如果失败，则回退到 SVG。
- 选择行号来自渲染后的预览，并不总是来自源代码行。当两者不一致时，优先使用 replace_selection 而非 replace_range。

许可证

MIT