# HoneyGUI-Plugin

**Repository Path**: realmcu/honey-gui-plugin

## Basic Information

- **Project Name**: HoneyGUI-Plugin
- **Description**: HoneyGUI vscode 插件
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-07
- **Last Updated**: 2025-11-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HoneyGUI VS Code 插件

## 功能特性

- **可视化界面编辑器**：拖拽式设计界面，支持多种组件库（RealGUI C/C++、LVGL、ARM-2D）
- **多语言代码生成**：自动生成 C/C++、JavaScript 等多种语言的代码
- **设计预览**：实时预览设计效果，支持多种分辨率和主题
- **项目管理**：创建、构建和运行项目，支持模板选择
- **组件库管理**：自定义组件和复用组件库

## 安装方法

1. 从 VS Code 扩展市场搜索 "HoneyGUI"
2. 点击 "安装" 按钮
3. 重启 VS Code 以激活插件

## 使用指南

### 打开可视化编辑器

1. 点击左侧活动栏中的 HoneyGUI 图标
2. 选择 "打开可视化编辑器"
3. 开始设计您的界面

### 生成代码

1. 在可视化编辑器中完成设计
2. 点击 "生成代码" 按钮
3. 选择目标语言和平台
4. 代码将自动生成到当前工作区

### 预览设计

1. 在 VS Code 中打开 .hgd 设计文件
2. 点击右上角的预览按钮
3. 或使用命令面板运行 "HoneyGUI: 预览设计"

## 项目结构

```
├── src/
│   ├── features/          # 核心功能模块
│   │   ├── visualEditor.ts # 可视化编辑器
│   │   ├── codeGenerator.ts # 代码生成器
│   │   ├── preview.ts      # 预览功能
│   │   └── projectManager.ts # 项目管理
│   ├── ui/                # Webview 界面
│   │   ├── editor.html    # 编辑器界面
│   │   └── preview.html   # 预览界面
│   └── extension.ts       # 插件入口
├── package.json           # 插件配置
└── README.md              # 插件说明
```

## 配置选项

在 VS Code 设置中搜索 "HoneyGUI" 可配置以下选项：

- **默认代码生成语言**：设置默认的代码生成目标语言
- **默认预览分辨率**：设置默认的预览窗口分辨率
- **组件库路径**：自定义组件库的路径

## 支持的组件与 API

### 基础组件
- 按钮（Button）
- 标签（Label）
- 文本框（TextField）
- 复选框（Checkbox）
- 单选按钮（RadioButton）
- 列表视图（ListView）
- 进度条（ProgressBar）
- 滑块（Slider）
- 图像（Image）
- 面板（Panel）

### 支持的平台
- RealGUI C/C++
- LVGL
- ARM-2D
- JavaScript-XML

## 技术栈

- TypeScript
- VS Code API
- Webview API

## 许可证

MIT

## 联系我们

如有问题或建议，请在 GitHub 仓库提交 Issue 或 Pull Request。