dsh-uisketch

Readme

# dsh-uisketch —— UI Sketch to AI 画板编辑器 × DSH

把 **ui-sketch-to-ai**（React + Konva 的 UI 草图画板编辑器）完整嵌入 DeepSeek
Harness Web 界面：侧栏一键开关，全屏画板浮层，组件拖拽、属性编辑、JSON 导出
全部可用。构建产物已内置在包内，**开箱即用**，无需额外配置。

![预览](assets/hero.png)

## 特性

- 🎨 **完整编辑器**：组件面板拖拽、Konva 画布、属性面板、项目名、画布尺寸、背景图上传
- 📋 **导出 JSON → 剪贴板**：布局结构 + 标注（背景图仅保留存在性标记，不携带 base64）
- 🖥️ **全屏浮层**：iframe 同源加载，行为与 `vite preview` 完全一致
- 🐳 **常驻开关**：侧栏底部「UI 画板」按钮（窄轨道自动变图标），关闭按钮在浮层右上角

## 安装

### 方式 A：npm 发布后安装

```bash
dsh plugin --profile web add dsh-uisketch
```

### 方式 B：本地开发安装

在仓库根目录执行：

```bash
dsh plugin --profile web add link:<本仓库绝对路径>
```

安装完成后**重启 `dsh web`**，浏览器 F5 刷新，侧栏底部出现「UI 画板」按钮。

## 使用

1. 点击侧栏底部「UI 画板」（窄轨道时是 📐）打开全屏编辑器
2. 从左侧组件面板把组件拖到画布，用右侧属性面板调整
3. 点「导出 JSON → 剪贴板」得到布局描述（可直接喂给 AI）
4. 右上角「✕ 关闭」退出

## 配置

| 环境变量 | 作用 |
| --- | --- |
| `DSH_UISKETCH_DIST` | 指向本地重新构建的 ui-sketch-to-ai `dist/` 目录；缺省使用包内内置产物 |

重新构建应用后想立即生效，设置 `DSH_UISKETCH_DIST=/path/to/ui-sketch-to-ai/dist` 并重启 dsh。

## 卸载

```bash
dsh plugin --profile web remove dsh-uisketch
```

## 开发

- `lib/index.js`：host 半区，webServer 路由托管构建产物
- `lib/client.js`：client 半区（`dsh.client` 双面包），侧栏开关 + 全屏浮层
- `dist/`：ui-sketch-to-ai 的构建产物（`npm run build` 后同步进来再发版）

## License

MIT