前言¶
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 的场景。
