可视化前端开发 IDE 工具
基于 Electron + React + Puck 构建的现代化前端可视化开发环境
--- ## 功能特性 ### 核心功能 - **可视化编辑器** - 基于 Puck 的拖拽式页面设计 - **代码生成** - 一键生成 React TSX 代码 - **项目管理** - 创建、管理多个前端项目 - **Mock 数据** - 本地 Mock 数据配置，无需后端即可开发 ### 组件支持 内置 17 个 Ant Design 组件： | 基础组件 | 布局组件 | 数据展示 | 反馈组件 | 表单组件 | |----------|----------|----------|----------|----------| | Button | Card | Table | Alert | Form | | Input | Divider | Tag | Progress | Checkbox | | Select | Space | Badge | | Radio | | Typography | | Avatar | | Switch | --- ## 技术栈 | 类别 | 技术 | |------|------| | 框架 | Electron 33 + React 18 | | 语言 | TypeScript 5.5 | | UI | Ant Design 5.20 | | 编辑器 | Puck Editor 0.21 | | 状态管理 | Zustand 4 | | 构建工具 | Vite 5 + electron-vite | --- ## 快速开始 ### 环境要求 - Node.js >= 20.0.0 - npm >= 9.0.0 ### 安装依赖 ```bash npm install ``` ### 开发模式 ```bash # 启动 Electron 开发模式 npm run electron:dev ``` ### 构建打包 ```bash # 构建生产版本 npm run electron:build # 打包安装程序 npm run electron:dist ``` --- ## 项目结构 ``` ui-ide/ ├── electron/ # Electron 主进程 │ ├── main/ # 主进程代码 │ └── preload/ # 预加载脚本 ├── src/ # 渲染进程（React） │ ├── components/ # React 组件 │ ├── pages/ # 页面组件 │ ├── services/ # 业务服务 │ ├── stores/ # 状态管理 │ ├── editor/ # Puck 配置 │ └── types/ # TypeScript 类型 ├── resources/ # 应用资源（图标等） └── docs/ # 文档 ``` --- ## 使用指南 ### 创建项目 1. 启动应用后，点击「新建项目」 2. 输入项目名称，选择技术栈（React/Vue） 3. 点击创建，进入编辑器 ### 页面编辑 1. 从左侧组件面板拖拽组件到画布 2. 选中组件，在右侧属性面板调整属性 3. 实时预览效果 ### 导出代码 1. 点击工具栏「导出代码」按钮 2. 查看生成的 React TSX 代码 3. 复制或下载代码文件 ### Mock 数据 1. 进入「设置」页面 2. 在 Mock 数据部分添加接口 3. 配置请求路径、方法和响应数据 4. 启用 Mock 开关 --- ## 开发命令 | 命令 | 说明 | |------|------| | `npm run dev` | 启动 Vite 开发服务器 | | `npm run electron:dev` | 启动 Electron 开发模式 | | `npm run electron:build` | 构建生产版本 | | `npm run electron:dist` | 打包安装程序 | | `npm run lint` | 运行 ESLint 检查 | | `npm run format` | 格式化代码 | | `npm run type-check` | TypeScript 类型检查 | --- ## 许可证 [MIT](LICENSE) --- ## 贡献 欢迎提交 Issue 和 Pull Request！