@goodandready/dsh-live-canvas

dsh plugin --profile web add @goodandready/dsh-live-canvas

📦 @goodandready/dsh-live-canvas

<div align="center">

<h3>交互式前端开发工作室、Retool 风格 CRUD 数据看板引擎、Time-Travel 时间旅行调试器、多平台一键部署 (Vercel, Cloudflare, Netlify, Gist)、Figma 矢量桥接、UI 音效及 31 个智能体工具 (适用于 DeepSeek Harness)</h3>

<p align="center">

<a href="https://www.npmjs.com/package/@goodandready/dsh-live-canvas"><img src="https://img.shields.io/npm/v/@goodandready/dsh-live-canvas.svg?style=for-the-badge&color=6366f1&labelColor=1e1b4b" alt="npm version"></a>

<a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-10b981.svg?style=for-the-badge&color=10b981&labelColor=064e3b" alt="license"></a>

<a href="https://github.com/topics/dsh-plugin"><img src="https://img.shields.io/badge/DSH-Plugin-8b5cf6.svg?style=for-the-badge&labelColor=2e1065" alt="DSH Plugin"></a>

<a href="https://nodejs.org"><img src="https://img.shields.io/badge/Node-20%2B-f59e0b.svg?style=for-the-badge&labelColor=451a03" alt="Node version"></a>

</p>

<p align="center">

<a href="https://goodandready.app/"><img src="https://img.shields.io/badge/🌐_作者全部插件项目-goodandready.app-ff4500.svg?style=for-the-badge&logo=rocket&logoColor=white&labelColor=1a1a2e" alt="GoodAndReady Showcase"></a>

</p>

<p align="center">

<a href="README.md"><b>🇬🇧 English</b></a> •

<a href="README.ru.md"><b>🇷🇺 Русский</b></a> •

<a href="README.zh.md"><b>🇨🇳 中文说明</b></a>

</p>

<table align="center">

<tr>

<td align="center">

⭐ <strong>如果您喜欢这个插件，请在 GitHub 上为它点亮 Star</strong> — 这能让我知道插件对您有用，并鼓励我继续开发和维护它。

<br><br>

🐛 <strong>如果您发现 Bug 或希望增加功能</strong>，请使用任意语言在 GitHub 上提交 Issue — 我会评估您的建议，并在后续版本中实现有价值的改进。

</td>

</tr>

</table>

</div>

---

⚡ 概述与核心解决痛点

🚀 v0.2.14 新增核心体验

• 🏠 项目仪表盘与最近会话 (Projects Hub): 聚合所有历史预览会话与工作区前端组件 (React, HTML, Vue, SVG, Markdown)，按最近活动排序，内置即时过滤搜索，一键加载至画布。
• ↕️ 对话预览卡片高度自由调节: 底部拖拽把手平滑调整高度 (160px - 800px)，提供 S (200px) / M (320px) / L (480px) 快速预设与宽屏模式 (⤢ Wide View)。
• 🔄 画布独立即时刷新: 工具栏新增刷新按钮，支持框架内快捷键 <kbd>F5</kbd> / <kbd>Ctrl+R</kbd>，无需刷新整个 DSH 页面即可重载预览。
• 🛡️ 智能体工具防御性输出契约: 当路径访问越界时返回结构化拒绝字段 (code, allowedRoots, reason, valid: false)，使智能体能够自主纠正路径。

在传统的终端与对话框环境中，代码智能体通常仅输出静态的代码片段或 Markdown 文本。这会导致：

1. 缺乏即时交互反馈：开发者无法直接测试按钮点击、表单校验、动画转场或响应式屏幕断点，必须手动复制代码到本地工程。

2. 上下文严重割裂：进行 UI 评审时需要在 IDE、终端、浏览器和设计工具间反复横跳。

3. 文本信息过载：用长篇纯文本描述系统架构与项目路线图难以直观审阅。

解决方案：dsh-live-canvas

受 The Unreasonable Effectiveness of HTML、Plannotator 与现代可视化设计平台启发，@goodandready/dsh-live-canvas 将 DeepSeek Harness 升级为完整的独立前端开发与构件运行环境。提供内存级 ESM 模块打包、SSE 热重载、对话框内实时预览卡片、分屏代码编辑器、版本时间旅行、多平台一键部署及 30 个专用智能体工具。

---

🧭 侧边栏布局与兼容性 (Sidebar Compatibility)

@goodandready/dsh-live-canvas 无缝支持所有 DSH 导航布局，且无需任何外部插件依赖：

DSH 环境 · 支持的界面组件 · 功能特性

DSH 0.1.5-alpha.1+ (原生) · 原生右侧边栏 (sidebarRightTabs, sidebar.right.pane.tab) · 完整的 Live Canvas 工作区标签页 + dsh-resource://file 原生文件查看器。

传统配置文件 · dsh-better-sidebar 适配 · 独立标签页 (live-canvas) 与文件查看器 (live-canvas-viewer)。

双边栏同时启用 · 完美共存 · 确定性独立 ID，杜绝重复挂载，具备幂等清理功能。

无边栏环境 · 独立抽屉与模态窗口 · 纯自包含 slide-over 抽屉及快捷键 (Alt+C)。

🏛️ 系统架构关系图

graph TD
    classDef agent fill:#1e1b4b,stroke:#6366f1,stroke-width:2px,color:#fff;
    classDef core fill:#064e3b,stroke:#10b981,stroke-width:2px,color:#fff;
    classDef ui fill:#451a03,stroke:#f59e0b,stroke-width:2px,color:#fff;
    classDef sandbox fill:#18181b,stroke:#71717a,stroke-width:2px,color:#fff;

    Agent[🤖 DeepSeek Harness Agent / 30 个工具]:::agent
    Store[💾 PreviewStore LRU 缓存与历史快照]:::core
    Watcher[📁 WorkspaceWatcher 文件监控与同步]:::core
    Bundler[⚡ Smart 递归 ESM 打包器与编译器]:::core
    Deployer[🌍 多平台一键部署引擎]:::core
    FigmaBridge[🎨 Figma 矢量桥接与转换]:::core
    SoundEngine[🔊 Web Audio 交互音效引擎]:::core
    Themes[🎨 AI 设计系统令牌引擎]:::core

    WebUI[💻 DSH WebUI BetterSidebar 工作区]:::ui
    ChatCards[💬 对话流内嵌交互式预览卡片]:::ui
    EditorDrawer[📝 Split-View 分屏代码编辑器]:::ui
    TimeTravelUI[⏳ Time-Travel 历史时间轴]:::ui
    DeployModal[🌍 一键部署配置弹窗]:::ui

    SandboxFrame[🛡️ 沙箱 Iframe 独立预览环境]:::sandbox
    WYSIWYG[✏️ 双击行内 WYSIWYG 文本编辑]:::sandbox
    DnD[↕️ 拖拽重排页面区块]:::sandbox
    Blueprint[📐 蓝图黑白草图模式]:::sandbox

    Agent --> Store
    Watcher --> Store
    Store --> Bundler
    Deployer --> Store
    FigmaBridge --> Store
    Themes --> SandboxFrame
    Bundler --> SandboxFrame
    SoundEngine --> SandboxFrame

    WebUI --> EditorDrawer
    WebUI --> TimeTravelUI
    WebUI --> DeployModal
    WebUI --> SandboxFrame
    ChatCards -->|一键唤起工作区| WebUI

    SandboxFrame --> WYSIWYG
    SandboxFrame --> DnD
    SandboxFrame --> Blueprint

---

🛠️ 30 个智能体工具完整速查表

# · 工具名称 · 功能描述 · 核心参数 · 返回输出 / 触发动作

1 · live_canvas_preview · 渲染或更新 HTML/React/SVG/Mermaid 预览会话 · content, componentType, title, theme · previewUrl, canvasId, success

2 · live_canvas_inspect · 获取用户点击的 DOM 元素、CSS 选择器与属性 · canvasId, limit · inspections: [...], count

3 · live_canvas_reload · 强制向当前打开的预览画布广播 SSE 热重载事件 · canvasId · reloaded, timestamp

4 · live_canvas_diagnose · 查询沙箱控制台错误与异常，实现智能体自主修复 · canvasId, level · logs: [...], hasErrors

5 · live_canvas_export · 导出包含预渲染标记及渐进式运行时的独立 HTML 演示包 · canvasId, saveToDisk · downloadUrl, savedPath

6 · live_canvas_annotations · 检索或清除画布上的矩形批注与用户反馈 · canvasId, action · annotations: [...], count

7 · live_canvas_gallery · 渲染多组件状态 Storybook 并排对比矩阵 · variants, title · variantsCount, previewUrl

8 · live_canvas_watch · 扫描工作区文件并绑定实时文件监控器 · subDir, exts · files: [...], watchedFiles

9 · live_canvas_controls · 调整 Storybook 风格的交互式 Props 滑块与开关 · canvasId, values, schema · values: {...}, schema: {...}

10 · live_canvas_diff · 分屏滑块对比两个版本快照的视觉差异 · canvasId, fromId, toId · diffUrl, snapshotCount

11 · live_canvas_matrix · 渲染多设备响应式屏幕矩阵 (手机、平板、桌面) · canvasId · matrixUrl

12 · live_canvas_mock · 配置沙箱内部拦截的 Mock REST API 接口及数据集 · canvasId, endpoints · endpointsCount, mockData

13 · live_canvas_pack · 一

…(truncated)