Appearance
Vue3 低代码编辑器
基于Vue3+TypeScript+Element Plus的低代码页面编辑器，支持组件拖拽、属性配置、实时预览等功能。
项目简介
这是一个基于Vue3和TypeScript开发的低代码页面编辑器，使用Element Plus组件库构建界面，支持多种组件的拖拽、调整大小、属性编辑等操作，可用于快速搭建页面原型或简单页面。
界面布局
编辑器界面分为三个主要区域：
正在加载图表...
ASCII版界面布局：
+------------------------------------------+
| 顶部控制栏 |
+----------+-----------------+-------------+
| | | |
| 组件列表 | 画布区域 | 属性设置面板 |
| | | |
| | | |
| | | |
+----------+-----------------+-------------+- 左侧组件列表：显示可用的组件，支持拖拽到画布
- 中间画布区域：主要编辑区域，可以放置和编辑组件
- 右侧属性设置面板：当选中组件时，显示并编辑组件属性
技术栈
- Vue 3
- TypeScript
- Element Plus
- vue3-sketch-ruler
- SCSS
功能特性
- 组件拖拽：从左侧组件列表拖拽组件到画布
- 可视化编辑：实时预览组件样式和布局
- 组件属性配置：在右侧面板配置组件的各项属性
- 组件选择：点击选中组件进行编辑
- 组件调整：调整组件位置和大小
- 组件删除：多种方式删除不需要的组件
- 选中后按Delete键
- 在属性面板点击删除按钮
- 右键菜单选择删除选项
- 组件复制：右键菜单选择复制选项
- 画布尺寸调整：调整画布宽高以适应不同设备
- 编辑/预览模式切换：支持预览模式查看实际效果
- 本地存储：自动保存编辑内容到本地浏览器存储
项目结构
src/
├── assets/ // 静态资源
├── components/ // 组件
│ ├── config/ // 组件配置
│ │ ├── schemas/ // 各个组件的配置模式
│ │ └── PropertyEditor.vue // 属性编辑器组件
│ └── editor/ // 编辑器组件
│ ├── ContextMenu.vue // 右键菜单组件
│ ├── ElButtonComponent.vue // Element Plus按钮组件
│ ├── ElInputComponent.vue // Element Plus输入框组件
│ └── ... // 其他组件
├── utils/ // 工具函数
│ ├── componentConfig.ts // 组件配置生成
│ ├── componentResolver.ts // 组件解析器
│ ├── debounce.ts // 防抖函数
│ └── storage.ts // 本地存储工具
├── views/ // 视图
│ └── layout/ // 布局视图
│ ├── compMenu.vue // 左侧组件菜单
│ ├── content.vue // 中间画布内容区
│ ├── index.vue // 主布局
│ └── setting.vue // 右侧设置面板
└── App.vue // 根组件流程图
基本使用流程
正在加载图表...
如果无法查看Mermaid图表，以下是简化的ASCII流程图：
加载编辑器 --> 恢复/空白画布 --> 编辑模式
|
v
+----------------+
| |<-----+
| 编辑模式 | |
+----------------+ |
| |
v |
+----------------+ |
| - 添加组件 |------+
| - 选择组件 |
| - 调整画布 |
| - 切换预览 |
+----------------+
|
v
+----------------+
| 预览模式 |
+----------------+
|
v
自动保存到本地存储组件操作流程
正在加载图表...
简化的ASCII组件操作流程：
选择组件 --> 组件被选中
|
v
+------------------+
| 操作选项: |
| - 拖拽移动 |---> 位置更新 ---+
| - 调整大小 |---> 尺寸更新 ---+
| - 编辑属性 |---> 属性更新 ---+--> 保存变更 --> 自动保存
| - 右键菜单 |----------------+ ^
| - Delete键删除 |----------------+ |
+------------------+ |
|
右键菜单: |
+------------------+ |
| - 复制组件 |---> 创建新组件 -----+
| - 删除组件 |---> 组件被删除 -----+
+------------------+组件选择数据流转过程
正在加载图表...
ASCII版组件选择数据流程：
用户点击组件 --> 鼠标事件触发 --> 阻止事件冒泡
|
v
更新selectedComponent状态 --> 触发select事件 --> 父组件接收事件
|
v
右侧面板显示组件属性 --> 显示调整大小的控制点和选中状态边框
|
v
用户编辑属性 --> 属性值变更 --> 触发update事件
|
v
父组件更新数据 --> 组件重新渲染 --> 自动保存到本地存储添加新组件数据流过程
正在加载图表...
ASCII版添加新组件数据流程：
用户拖拽组件 --> 拖拽事件开始 --> 设置拖拽数据(组件类型)
|
v
拖拽经过画布 --> 拖拽释放在画布 --> 获取放置位置坐标
|
v
创建新组件配置 --> 分配唯一ID --> 设置组件层级
|
v
触发addComponent事件 --> 父组件添加组件 --> 选中新添加的组件
|
v
组件渲染到画布 --> 自动保存到本地存储使用流程
1. 添加组件
- 从左侧组件列表中选择需要的组件
- 拖动组件到中间画布区域
- 组件会自动添加到画布并处于选中状态
2. 选择与编辑组件
- 点击画布中的组件进行选择
- 选中后，组件周围会显示蓝色边框和调整大小的控制点
- 右侧属性面板会显示当前组件的所有可配置项
- 修改右侧面板中的属性，组件会实时更新
3. 调整组件位置与大小
- 拖动组件可以改变其位置
- 拖动组件四角的控制点可以调整大小
- 也可以在右侧面板中输入精确的坐标和尺寸值
4. 组件操作
删除组件：
- 选中组件后按键盘Delete键
- 在右侧属性面板点击"删除组件"按钮
- 右键点击组件，在弹出的菜单中选择"删除组件"
复制组件：
- 右键点击组件，在弹出的菜单中选择"复制组件"
- 系统会创建一个相同的组件，并略微偏移位置
右键菜单操作示意图
正在加载图表...
ASCII版右键菜单操作示意图：
+----------------------------+
| 组件 (鼠标右键点击) |
+----------------------------+
|
v
+----------------------------+
| [右键菜单] |
| +-----------------------+ |
| | 复制组件 | |
| +-----------------------+ |
| | 删除组件 | |
| +-----------------------+ |
+----------------------------+
|
v
+----------------------------+
| - 复制: 创建偏移副本 |
| - 删除: 移除组件 |
+----------------------------+右键菜单操作流程：
- 选择画布中的组件
- 在组件上点击鼠标右键
- 从弹出的上下文菜单中选择所需操作:
- 复制组件: 将创建一个组件副本，位置略微偏移
- 删除组件: 移除组件后自动保存变更
删除组件时系统会弹出确认对话框，防止误操作。复制组件生成的新组件会具有相同的属性和样式，但位置会有一定的偏移以便于区分和后续编辑。
5. 画布操作
- 调整画布尺寸：通过顶部控制栏设置画布的宽度和高度
- 切换模式：通过顶部的模式开关在编辑模式和预览模式之间切换
- 清空画布：点击顶部的"清空画布"按钮可以移除所有组件
6. 预览与保存
- 切换到预览模式查看最终效果
- 所有编辑自动保存到浏览器本地存储中
- 页面刷新后会自动恢复之前的编辑状态
Demo预览
本地开发
安装依赖
bash
npm install启动开发服务器
bash
npm run dev构建生产版本
bash
npm run build