# genui-css-editor

**Repository Path**: wangjian0423/genui-css-editor

## Basic Information

- **Project Name**: genui-css-editor
- **Description**: css代码在线编辑，在线预览效果
- **Primary Language**: HTML/CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-16
- **Last Updated**: 2026-04-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# GenUI CSS Editor

智能CSS编辑器与低代码组件生成平台

## 项目简介

GenUI CSS Editor 是一个基于React技术栈的低代码平台，提供两种核心工作模式：
1. 手动编码模式：支持代码实时编辑与右侧沙箱实时渲染预览
2. AI生成模式：通过自然语言提示词生成多种前端框架的组件代码

## 技术栈

- React 18 + TypeScript
- Vite 构建工具
- Ant Design UI组件库
- Monaco Editor 代码编辑器
- MySQL 8.0 本地数据存储

## 功能特性

### 手动编码模式
- 实时代码编辑与语法高亮
- 右侧实时预览沙箱
- 响应式设计预览
- 多标签页管理

### AI生成模式
- 自然语言提示词生成组件
- 支持多种前端框架（React、Vue2、Vue3等）
- 在线代码编辑与优化
- 代码导出功能

## 本地开发

### 环境要求
- Node.js >= 16.0.0
- MySQL 8.0
- npm 或 yarn

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

## 目录结构
```
src/
├── components/     # 公共组件
├── views/          # 页面组件
├── services/       # API服务
├── store/          # 状态管理
├── utils/          # 工具函数
├── hooks/          # 自定义Hooks
├── assets/         # 静态资源
├── styles/         # 样式文件
└── types/          # TypeScript类型定义
```

## 数据库配置

项目使用本地MySQL 8.0数据库存储用户数据和项目信息。

## 贡献指南

欢迎提交Issue和Pull Request来改进项目！

## 许可证

MIT License