前言¶
在 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 管理，方便開發者切換項目。
