# （低代码）可视化拖拽组件

**Repository Path**: NineteenForty1s/vDrag

## Basic Information

- **Project Name**: （低代码）可视化拖拽组件
- **Description**: 一个低代码拖拽组件，用于创建、编辑和导出各类设计稿。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-03-31
- **Last Updated**: 2025-08-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, 拖拽组件, 组件

## README

# 设计工作台 (Design Workbench)

一个基于 Vue.js 2.x 的低代码设计平台，提供直观的可视化编辑界面，支持组件拖拽、实时预览和高质量导出等功能。本项目特别适合用于创建各类展示设计稿，如数字标牌、广告展示、信息展示等场景。

![image-20250401134812195](README.assets/image-20250401134812195.png)

![版本](https://img.shields.io/badge/version-1.0.0-blue.svg)
![许可证](https://img.shields.io/badge/license-MIT-green.svg)
![Vue](https://img.shields.io/badge/Vue-2.x-4FC08D.svg)
![Element UI](https://img.shields.io/badge/Element%20UI-2.15.6-409EFF.svg)

## 项目亮点

- 🎨 直观的可视化编辑界面
- 🖱️ 流畅的拖拽体验
- 📱 响应式设计
- 🎯 高精度组件定位
- 🔄 实时预览功能
- 💾 自动保存功能
- 📦 丰富的组件库
- 🖼️ 高质量图片导出

## 技术栈

- **前端框架**：Vue.js 2.x
- **UI组件库**：Element UI 2.15.6
- **状态管理**：Vuex 3.4.0
- **路由管理**：Vue Router 3.2.0
- **图片导出**：html2canvas 0.5.0-beta4
- **组件拖拽**：vue-draggable-resizable 2.0.0-rc2
- **数据传递**：portal-vue 2.1.7
- **HTTP客户端**：axios 0.21.1
- **时间处理**：moment 2.29.1

## 核心功能

### 1. 可视化编辑器

- 基于画布的编辑模式，支持自由拖拽和精确定位
- 多组件选择与对齐功能，提高设计效率
- 完整的撤销/重做操作历史，支持多级回退
- 右键菜单上下文操作，提供快捷功能
- 组件层级管理，支持置顶/置底操作
- 快捷键支持，提升操作效率

### 2. 组件系统

- **文本组件**
  - 支持富文本编辑
  - 字体样式调整
  - 文本对齐方式
  - 行高和字间距控制
- **图片组件**
  - 支持图片上传
  - 自由缩放和旋转
  - 图片滤镜效果
  - 透明度调整
- **号码组件**
  - 自定义号码格式
  - 动态更新支持
  - 样式自定义
- **队列信息组件**
  - 实时数据展示
  - 自定义布局
  - 动态更新支持

### 3. 模板管理

- 模板保存与加载
- 本地存储支持
- 云端同步（开发中）
- 模板分类管理
- 模板预览功能

### 4. 预览功能

- 独立预览窗口
- 实时查看设计效果
- 支持多种分辨率预览
- 导出高质量图片
- 支持透明背景

## 项目结构

```
vue-restored/
├── public/               # 静态资源
│   ├── index.html       # HTML入口文件
│   └── static/          # 静态JS文件
├── src/                  # 源代码
│   ├── assets/          # 资源文件
│   ├── components/      # 通用组件
│   │   └── widgets/     # 设计组件
│   ├── router/          # 路由配置
│   ├── store/           # Vuex状态管理
│   ├── views/           # 页面视图
│   │   ├── Edit.vue     # 编辑页面
│   │   └── Screen.vue   # 预览页面
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
└── package.json         # 项目依赖
```

## 快速开始

### 环境要求

- Node.js >= 12.0.0
- npm >= 6.0.0

### 安装步骤

1. 克隆项目
```bash
git clone
cd vue-restored
```

2. 安装依赖
```bash
npm install
```

3. 启动开发服务器
```bash
npm run serve
```

4. 构建生产版本
```bash
npm run build
```

### 部署说明

1. 构建项目
```bash
npm run build
```

2. 部署 dist 目录下的文件到 Web 服务器

## 浏览器兼容性

- Chrome 60+
- Firefox 54+
- Safari 11+
- Edge 79+

## 贡献指南

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 更新日志

### [1.0.0] - 2025-04-08
- 初始版本发布
- 实现基础编辑功能
- 支持组件拖拽
- 添加预览功能

## 许可证

本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件


## 致谢

感谢所有为本项目做出贡献的开发者们！