前言¶
DSH 智能體開發者在構建 Web 界面交互時，通常需要直觀地設計 UI 佈局。手動編寫 HTML/CSS 或直接調用 API 既耗時又難以維護。該插件將 ui-sketch-to-ai（React + Konva）畫板編輯器直接集成到 DSH Web 界面中，通過側欄開關和全屏浮層提供開箱即用的繪圖能力。
插件簡介¶
- 名稱:
dsh-uisketch - 倉庫: https://github.com/chouyulanxia114514/dsh-uisketch
- 簡介: 把 ui-sketch-to-ai 畫板編輯器嵌入 DSH Web 界面。
- 許可: MIT
- 維護者: chouyulanxia114514
核心功能¶
- 畫布編輯: 組件面板拖拽、Konva 畫布、屬性面板、項目名、畫布尺寸、背景圖上傳。
- 數據導出: 導出 JSON 到剪貼板。包含佈局結構及標註，背景圖僅保留存在性標記（不含 Base64 數據）。
- 界面交互: 全屏浮層展示，側欄底部常駐開關（窄軌道自動切換爲圖標模式）。
安裝與啓用¶
安裝完成後需重啓 dsh web 才能生效。
方式 A：npm 發佈後安裝
dsh plugin --profile web add dsh-uisketch
方式 B：本地開發安裝
在倉庫根目錄執行：
dsh plugin --profile web add link:<本倉庫絕對路徑>
使用步驟¶
- 點擊側欄底部「UI 畫板」按鈕（窄軌道時顯示爲 📐）打開全屏編輯器。
- 從左側組件面板拖拽組件至畫布，使用右側屬性面板調整參數。
- 點擊「導出 JSON → 剪貼板」獲取佈局描述，可直接餵給 AI。
- 點擊浮層右上角「✕ 關閉」退出編輯器。
配置說明¶
環境變量 DSH_UISKETCH_DIST 用於指向本地重新構建的 dist/ 目錄。
若需立即使用本地構建產物，設置：
DSH_UISKETCH_DIST=/path/to/ui-sketch-to-ai/dist
缺省情況下使用包內內置的構建產物。
注意事項¶
- 插件以當前 DSH 進程權限運行，使用前請檢查源碼與許可證。
- 導出的 JSON 中背景圖僅包含存在性標記，不攜帶實際圖片數據。
總結¶
該插件爲 DSH 生態提供了一個輕量級的 UI 設計方案，適合需要在 Web 界面中快速生成佈局描述並傳遞給 AI 的場景。
