# 简易低代码编辑器

**Repository Path**: happy-goat/simple-low-code-editor

## Basic Information

- **Project Name**: 简易低代码编辑器
- **Description**: 一个基于 React + TypeScript + Vite 构建的可视化低代码编辑器，支持拖拽组件、可视化编辑和实时预览功能。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2025-07-24
- **Last Updated**: 2026-02-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, TypeScript

## README

# 低代码编辑器 (Lowcode Editor)

一个基于 React + TypeScript + Vite 构建的可视化低代码编辑器，支持拖拽组件、可视化编辑和实时预览功能。

## ✨ 特性

- 🎯 **拖拽式组件编辑** - 支持组件拖拽放置和嵌套布局
- 🎨 **可视化属性配置** - 实时编辑组件属性、样式和事件
- 👀 **实时预览模式** - 编辑和预览模式自由切换
- 📱 **响应式布局** - 基于 Allotment 的可调节面板布局
- 🔧 **代码编辑器** - 集成 Monaco Editor 支持样式和脚本编辑
- 📋 **组件大纲视图** - 树形结构展示组件层级关系
- 💾 **状态持久化** - 基于 Zustand 的状态管理和本地存储

## 🏗️ 项目架构

```
src/editor/
├── components/          # 编辑器核心组件
│   ├── EditArea/       # 编辑区域
│   ├── Header/         # 顶部导航
│   ├── Material/       # 物料面板
│   ├── Outline/        # 大纲视图
│   ├── Preview/        # 预览组件
│   └── Setting/        # 属性配置面板
├── materials/          # 可拖拽物料组件
│   ├── Button/         # 按钮组件
│   ├── Container/      # 容器组件
│   ├── Form/          # 表单组件
│   ├── Modal/         # 弹窗组件
│   ├── Page/          # 页面组件
│   └── Table/         # 表格组件
├── stores/            # 状态管理
│   ├── components.tsx  # 组件状态存储
│   └── component-config.tsx # 组件配置存储
└── hooks/             # 自定义 Hooks
    └── useMaterialDrop.ts # 拖拽逻辑
```

## 🚀 快速开始

### 环境要求

- Node.js >= 16
- npm 或 yarn

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览构建结果

```bash
npm run preview
```

## 🎮 使用指南

### 基础操作

1. **添加组件**: 从左侧物料面板拖拽组件到编辑区域
2. **选择组件**: 点击编辑区域中的组件进行选中
3. **配置属性**: 在右侧设置面板中修改组件属性和样式
4. **预览效果**: 点击顶部"预览"按钮查看最终效果

### 组件层级

- **Page**: 根容器，所有组件的顶级父组件
- **Container**: 通用容器，可嵌套其他组件
- **Form**: 表单容器，可包含表单项组件
- **Button**: 按钮组件，支持点击事件配置
- **Modal**: 弹窗组件，支持打开/关闭方法调用
- **Table**: 表格组件，支持列配置

### 高级功能

- **样式编辑**: 使用 CSS 编辑器自定义组件样式
- **事件配置**: 为组件配置点击、提交等交互事件
- **自定义脚本**: 支持编写自定义 JavaScript 代码
- **组件方法**: 调用组件的内置方法（如表单提交、弹窗打开等）

## 🛠️ 技术栈

- **前端框架**: React 18 + TypeScript
- **构建工具**: Vite
- **UI 组件库**: Ant Design
- **拖拽功能**: react-dnd
- **代码编辑**: Monaco Editor
- **状态管理**: Zustand
- **样式方案**: Tailwind CSS
- **布局组件**: Allotment

## 📦 核心依赖

```json
{
  "dependencies": {
    "react": "^18.x",
    "react-dnd": "^16.x",
    "antd": "^5.x",
    "@monaco-editor/react": "^4.x",
    "zustand": "^4.x",
    "allotment": "^1.x"
  }
}
```

## 🔧 开发说明

### 添加新组件

1. 在 `src/editor/materials/` 下创建组件文件夹
2. 实现 `dev.tsx`（开发时组件）和 `prod.tsx`（生产环境组件）
3. 在 `component-config.tsx` 中注册组件配置

### 自定义组件接口

代码位置：[interface.ts](src/editor/interface.ts)

所有物料组件需实现 `CommonComponentProps` 接口，包含基础的 id、name、styles 等属性。

### 状态管理

- **组件状态**: 使用 `useComponentStore` 管理组件树和当前选中状态
- **配置状态**: 使用 `useComponentConfigStore` 管理组件注册和配置信息

## 📄 许可证

MIT License