前言¶
在 DeepSeek Harness 的标准对话流程中，AI 生成的内容通常以静态代码片段或 Markdown 文本块呈现。这种形式存在显著的使用摩擦：开发者无法在生成后立即验证交互逻辑、表单验证或响应式布局，必须手动将代码复制到本地构建工具链中。此外，多窗口切换也增加了上下文碎片化的风险。
@goodandready/dsh-live-canvas 旨在解决上述问题。它将 DSH 转变为一个独立的前端开发套件，提供内存中的 ESM 打包、实时 SSE 热重载、内联代码编辑器、时间旅行调试器以及 30 个专用代理工具。
系统要求¶
在使用前，请确保环境满足以下条件：
- DeepSeek Harness 版本：支持 DSH 0.1.5-alpha.1+ (Native)，同时兼容 Legacy DSH Profiles 和 Minimal / Standalone Profiles。
- Node.js 版本：需要 Node 20 或更高版本。
- 导航布局：支持所有 DSH 导航布局，无外部依赖。
核心功能¶
该插件提供了一套完整的前端开发工作流，主要包含以下模块：
1. Retool-Style CRUD 管理引擎¶
这是插件的核心组件之一，允许在画布中直接生成完整的数据管理微应用。
- 数据网格与交互：支持实时搜索、列排序和状态过滤（如 Active、Pending、Suspended）。
- 表单验证：在创建和编辑记录时提供即时验证。
- 数据持久化：自动将记录变更同步至
localStorage，刷新页面后数据依然存在。 - 数据导出：支持一键将表格数据导出为可下载的
.csv文件。
2. 时间旅行调试器¶
该工具（Tool 27）允许开发者回溯会话历史。
- 历史时间轴：提供可视化的时间轴滑块，用于浏览历史会话快照。
- 快照对比与回滚：可以快速恢复到任意之前的快照状态，无需手动操作 Git。
3. 可视化开发环境¶
插件集成了现代开发工具的特性，以提升开发效率。
- 即时预览：在聊天中直接生成可交互的预览卡片，支持拖拽调整高度（160px 至 800px）。
- 热重载：利用 SSE 技术实现实时的代码热更新，无需刷新页面。
- 代码编辑器：提供分屏视图，允许直接在画布内编辑代码。
- Figma 向量桥：支持从 Figma 获取矢量资源。
4. 多平台一键部署¶
插件集成了部署引擎，用于静态站点分发。
- 平台支持：支持 Vercel 和 Cloudflare Pages。
- 配置生成：自动生成路由规则（如
vercel.json或_routes.json）和安全头配置（如_headers）。
典型用法¶
通过以下步骤，可以在 DSH 中完成从开发到部署的准备：
- 生成 CRUD 应用：利用插件工具生成包含搜索、排序和状态过滤的数据管理界面。
- 交互与验证：在画布中直接测试表单验证逻辑和用户交互流程。
- 导出数据：当数据结构确认无误后，使用导出功能获取
.csv文件。 - 版本回溯：如果开发过程出现回退需求，拖动时间轴滑块恢复到上一个稳定快照。
- 部署准备：通过一键部署功能，生成适用于 Vercel 或 Cloudflare Pages 的静态分发配置。
注意事项¶
- 该插件以当前 DSH 进程的权限运行。
- 安装前建议检查源码与许可证（MIT）。
- 插件支持 Projects Hub 和 Recent Sessions 管理，方便开发者切换项目。
