# myVite

**Repository Path**: cainiao_web/my-vite

## Basic Information

- **Project Name**: myVite
- **Description**: nodejs前台项目
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-06-26
- **Last Updated**: 2025-09-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vite, vue3, TypeScript, element-plus, xiecheng

## README

# 低代码表单构建器

基于 Vue 3 + TypeScript + Element Plus 开发的拖拽式表单构建器。

## 功能特性

- 拖拽式组件库
- 可视化画布
- 实时属性配置
- 智能对齐
- 碰撞检测
- 组件操作工具栏

## 安装

```bash
npm install
npm run dev
```

## 技术栈

- Vue 3 + TypeScript
- Element Plus
- Vite
- SCSS

## 支持的组件类型

### 基础组件
- 输入框：支持文本输入，可配置占位符和必填验证
- 文本域：多行文本输入，可配置行数
- 单选框：单选选项，支持自定义选项
- 多选框：多选选项，支持自定义选项
- 下拉选择：下拉选择框，支持自定义选项
- 日期选择：日期选择器
- 数字输入：数字输入框，支持最小值和最大值限制

### 布局组件
- 分割线：用于分隔表单区域
- 静态文本：显示静态文本内容

## 属性配置系统

### 基础属性配置
- 标题：组件的显示标签
- 字段名：用于数据绑定的字段名
- 占位符：输入提示文本
- 是否必填：设置组件是否必填
- 是否禁用：设置组件是否禁用
- 是否只读：设置组件是否只读

### 样式属性配置
- 字体大小：设置字体大小 (12-32px)
- 字体颜色：使用颜色选择器设置字体颜色
- 背景颜色：设置背景颜色
- 边框样式：选择边框样式 (无边框、实线、虚线、点线)
- 边框颜色：设置边框颜色
- 边框宽度：设置边框宽度 (1-10px)
- 圆角：设置圆角半径 (0-50px)
- 内边距：设置内边距 (0-50px)
- 外边距：设置外边距 (0-50px)

### 验证规则配置
- 最小长度：设置最小字符长度
- 最大长度：设置最大字符长度
- 正则表达式：自定义正则验证规则
- 自定义验证：编写JavaScript验证函数

## 组件操作工具栏

当组件被选中时，会在组件上方显示操作工具栏，包含以下功能：

- 删除按钮：删除当前选中的组件
- 复制按钮：复制当前选中的组件
- 置顶按钮：将组件移动到最顶层
- 置底按钮：将组件移动到底层

### 工具栏样式变体
- 默认样式：蓝色渐变背景，半透明按钮效果
- 现代样式：白色背景设计，简洁的视觉效果
- 极简样式：黑色背景，最小化设计
- 浮动样式：紫色渐变背景，更强的视觉层次

## 碰撞检测

系统使用精确的碰撞检测算法，通过计算重叠区域来判断组件是否碰撞：

```typescript
// 计算重叠区域
const overlapX = Math.max(0, Math.min(x + width, comp.position.x + comp.size.width) - Math.max(x, comp.position.x))
const overlapY = Math.max(0, Math.min(y + height, comp.position.y + comp.size.height) - Math.max(y, comp.position.y))

// 如果有重叠区域，则发生碰撞
return overlapX > 0 && overlapY > 0
```

## 快速设置功能

### 样式预设
- 默认样式：标准样式配置
- 圆角样式：圆角边框样式
- 无边框：无边框样式
- 强调样式：突出显示样式

### 尺寸预设
- 小尺寸：200×32
- 标准尺寸：300×40
- 大尺寸：400×48
- 全宽：500×40

### 验证预设
- 必填验证：设置必填验证
- 邮箱验证：邮箱格式验证
- 手机号验证：手机号格式验证
- 长度限制：字符长度限制

## 使用方法

### 基本操作
1. 添加组件：从左侧组件库拖拽组件到中间画布
2. 配置属性：选中组件后在右侧面板配置属性
3. 调整位置：拖拽组件到合适位置，利用对齐线精确定位
4. 预览测试：点击"预览表单"按钮测试表单交互
5. 导出配置：点击"导出JSON"保存表单配置

### 组件操作
1. 选择组件：点击画布中的任意组件
2. 查看工具栏：组件被选中后，上方会显示操作工具栏
3. 执行操作：点击工具栏中的按钮执行相应操作
4. 取消选择：点击画布空白区域取消选择，工具栏自动隐藏

## 配置说明

### 组件和图标按需引入配置

#### 1. 安装插件
```bash
npm install -D unplugin-vue-components unplugin-auto-import unplugin-icons
```

#### 2. Vite配置
参考 `vite.config.ts` 文件进行配置

#### 3. 图标使用
- 图标名称前面需要加 `IEp` 前缀
```vue
<el-icon><IEpSearch /></el-icon>
```

#### 4. 按钮内图标使用
- 使用 slot 方式
- 或先引入图标，然后按官网方式使用

## 项目结构

```
src/views/lowCode/
├── components/
│   ├── CanvasArea.vue          # 画布区域组件
│   ├── ComponentLibrary.vue    # 组件库
│   ├── ComponentToolbar.vue    # 组件操作工具栏
│   ├── FormComponent.vue       # 表单组件渲染器
│   ├── PropertyPanel.vue       # 属性配置面板
│   ├── PropertyPreview.vue     # 属性预览组件
│   ├── QuickSettings.vue       # 快速设置组件
│   └── PreviewDialog.vue       # 预览弹窗
├── FormBuilder.vue             # 主构建器组件
├── index.vue                   # 入口页面
├── types.ts                    # 类型定义
└── README.md                   # 功能文档
```

## 注意事项

### 使用注意
- 组件拖拽时会显示蓝色对齐线，帮助精确定位
- 当组件位置重叠时，会自动回退到上次位置并显示提示
- 选项类组件（单选、多选、下拉）支持动态添加和删除选项
- 导出的JSON文件可用于表单配置的保存和恢复

### 性能考虑
- 工具栏只在选中时渲染，避免性能影响
- 大量组件时注意性能影响
- 自定义验证函数需要安全处理

### 兼容性
- 确保样式在不同浏览器中兼容
- 事件处理函数需要错误处理

## 扩展性

系统具有良好的扩展性：
- 添加新组件：可以轻松添加新的组件类型
- 自定义样式：支持多种预设样式和自定义样式
- 属性扩展：可以轻松添加新的属性类型
- 验证规则：支持自定义验证规则
- 主题系统：支持样式主题系统
- 权限控制：可以基于用户权限显示或隐藏特定功能

## 未来计划

### 功能增强
- [ ] 添加撤销/重做功能
- [ ] 支持批量操作多个组件
- [ ] 添加组件锁定功能
- [ ] 支持自定义工具栏布局
- [ ] 添加快捷键支持
- [ ] 添加更多组件类型支持
- [ ] 支持样式主题系统
- [ ] 添加属性配置模板
- [ ] 支持属性配置导入导出
- [ ] 添加属性配置历史记录

### 技术优化
- [ ] 性能优化和代码分割
- [ ] 更好的错误处理机制
- [ ] 单元测试覆盖
- [ ] 文档完善

## 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

## 许可证

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

---

这个系统为用户提供了一个直观、易用的表单设计工具，无需编码即可创建复杂的问卷表单。通过丰富的配置选项和智能的操作体验，让表单设计变得更加简单高效。