# yunFDrag

**Repository Path**: whp_lyf_admin/yunFDrag

## Basic Information

- **Project Name**: yunFDrag
- **Description**: uniapp的一个设计器
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-18
- **Last Updated**: 2026-06-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# YunFDrag - 拖拉拽小程序构建平台

基于 uni-app 的可视化拖拉拽小程序构建平台，支持组件库管理、主题切换、自定义组件上传等功能。

## 功能特性

- 🎨 **可视化拖拽编辑**：实时预览小程序页面，支持组件拖拽、调整位置和尺寸
- 📦 **组件库管理**：内置 uni-app 官方组件，支持自定义组件上传和管理
- 🎨 **主题系统**：支持浅色/深色主题切换，可自定义主题配置
- 📱 **响应式布局**：支持绝对定位和 Flex 布局两种模式
- 💾 **数据持久化**：页面结构 JSON 序列化，支持保存、加载和版本管理
- 🔌 **组件扩展**：支持上传和管理自定义 Vue 组件

## 技术栈

### 前端
- Vue 3 + TypeScript
- uni-app
- Pinia (状态管理)
- Vite (构建工具)
- CSS Variables (主题系统)

### 后端
- Node.js + Express
- Sequelize (ORM)
- MySQL (数据库)
- JWT (认证)
- Multer (文件上传)

## 项目结构

```
YunFDrag/
├── src/                    # 前端源码
│   ├── components/         # 组件
│   │   ├── canvas/        # 画布组件
│   │   ├── properties/    # 属性面板
│   │   ├── sidebar/       # 侧边栏
│   │   ├── toolbar/       # 工具栏
│   │   └── common/        # 公共组件
│   ├── stores/            # Pinia 状态管理
│   ├── utils/             # 工具函数
│   ├── constants/         # 常量定义
│   └── App.vue
├── server/                # 后端服务
│   ├── config/           # 配置文件
│   ├── controllers/      # 控制器
│   ├── models/           # 数据模型
│   ├── routes/           # 路由
│   └── middleware/       # 中间件
└── package.json
```

## 快速开始

### 前置要求

- Node.js >= 16.x
- MySQL >= 5.7
- uni-app CLI

### 安装依赖

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

# 安装后端依赖
cd server
npm install
```

### 配置环境变量

```bash
# 前端 .env
VITE_API_URL=http://localhost:8080/api

# 后端 .env
PORT=8080
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=your_password
DB_NAME=yun_fdrag
JWT_SECRET=your_jwt_secret
```

### 数据库设置

```sql
CREATE DATABASE yun_fdrag CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

### 启动服务

```bash
# 启动后端服务
cd server
npm run dev

# 启动前端服务
npm run dev:mp-weixin
```

## API 文档

### 认证接口

- `POST /api/auth/register` - 用户注册
- `POST /api/auth/login` - 用户登录
- `POST /api/auth/logout` - 用户登出
- `GET /api/auth/me` - 获取当前用户信息

### 页面接口

- `GET /api/pages` - 获取页面列表
- `POST /api/pages` - 创建页面
- `GET /api/pages/:id` - 获取页面详情
- `PUT /api/pages/:id` - 更新页面
- `DELETE /api/pages/:id` - 删除页面
- `POST /api/pages/:id/clone` - 克隆页面
- `GET /api/pages/:id/preview` - 获取页面预览
- `GET /api/pages/:id/history` - 获取页面历史
- `POST /api/pages/:id/restore` - 恢复页面版本

### 主题接口

- `GET /api/themes` - 获取主题列表
- `POST /api/themes` - 创建主题
- `GET /api/themes/:id` - 获取主题详情
- `PUT /api/themes/:id` - 更新主题
- `DELETE /api/themes/:id` - 删除主题
- `POST /api/themes/current` - 设置当前主题
- `POST /api/themes/import` - 导入主题
- `POST /api/themes/export/:id` - 导出主题

### 组件接口

- `GET /api/components` - 获取组件列表
- `POST /api/components` - 创建组件
- `GET /api/components/:id` - 获取组件详情
- `PUT /api/components/:id` - 更新组件
- `DELETE /api/components/:id` - 删除组件
- `POST /api/components/upload` - 上传组件

## 开发指南

### 添加新组件

1. 在 `src/constants/componentTypes.js` 中添加组件类型定义
2. 在 `src/components/sidebar/ComponentList.vue` 中添加组件到列表
3. 在 `src/components/properties/PropertiesPanel.vue` 中添加属性编辑器

### 自定义组件上传

1. 创建符合 uni-app 规范的 `.vue` 文件
2. 点击侧边栏的"上传组件"按钮
3. 选择 `.vue` 文件上传
4. 组件将自动注册到组件库

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request！