# vform2-project

**Repository Path**: sun-guowei_admin/vform2-project

## Basic Information

- **Project Name**: vform2-project
- **Description**: 更好的表单设计器，放心使用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-10
- **Last Updated**: 2025-10-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VForm2 可视化表单设计器

基于 Vue2 和 VForm2 的可视化表单设计器，支持拖拽设计、模板管理、表单预览和页面生成功能。

## ✨ 功能特性

### 🎨 可视化表单设计
- **拖拽式设计**：支持从组件库拖拽组件到画布进行表单设计
- **实时预览**：设计过程中可实时预览表单效果
- **响应式布局**：支持PC、平板、手机三种设备预览模式
- **组件丰富**：包含输入框、选择器、日期时间、开关、评分等20+种表单组件

### 📋 模板管理
- **模板保存**：将设计好的表单保存为可复用的模板
- **模板列表**：统一管理所有保存的模板
- **模板编辑**：支持编辑现有模板
- **模板预览**：快速预览模板效果
- **模板搜索**：支持按名称和创建人搜索模板

### 📄 页面管理
- **页面生成**：基于模板快速生成独立页面
- **页面列表**：管理所有生成的页面
- **页面编辑**：支持编辑现有页面
- **页面预览**：支持动态页面和纯页面两种预览模式
- **页面统计**：统计页面数量和创建情况

### 📊 数据统计
- **首页概览**：展示模板、页面、用户等统计数据
- **图表可视化**：使用ECharts展示数据趋势
- **用户统计**：统计用户创建的内容和活跃度
- **实时更新**：数据实时同步更新

## 🚀 快速开始

### 环境要求
- Node.js >= 14.0.0
- npm >= 6.0.0

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

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

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

## 🏗️ 项目结构

```
vform2-project/
├── public/                 # 静态资源
├── src/
│   ├── components/         # 组件
│   │   ├── FormDesigner.vue    # 表单设计器组件
│   │   ├── FormPreview.vue     # 表单预览组件
│   │   ├── FormRender.vue      # 表单渲染组件
│   │   └── GeneratedPage.vue   # 生成页面组件
│   ├── views/              # 页面视图
│   │   ├── Home.vue            # 首页
│   │   ├── FormDesigner.vue    # 表单设计器页面
│   │   ├── FormRender.vue      # 表单渲染页面
│   │   ├── FormPreview.vue     # 表单预览页面
│   │   ├── GeneratedPage.vue   # 生成页面
│   │   ├── TemplateManager.vue # 模板管理页面
│   │   ├── PageManager.vue     # 页面管理页面
│   │   ├── DynamicPageView.vue # 动态页面视图
│   │   └── PurePageView.vue    # 纯页面视图
│   ├── router/             # 路由配置
│   │   └── index.js
│   ├── styles/             # 样式文件
│   │   └── vform-fix.css   # VForm2样式修复
│   ├── App.vue             # 根组件
│   └── main.js             # 入口文件
├── package.json            # 项目配置
└── README.md              # 项目说明
```

## 🛠️ 技术栈

### 前端框架
- **Vue 2.6.14** - 渐进式JavaScript框架
- **Vue Router 3.5.4** - 官方路由管理器

### UI组件库
- **Element UI 2.15.13** - 基于Vue的桌面端组件库

### 表单设计器
- **VForm2 2.2.9** - 可视化表单设计器

### 数据可视化
- **ECharts 5.4.3** - 数据可视化图表库
- **vue-echarts 6.6.1** - ECharts的Vue组件

### 开发工具
- **Vue CLI 5.0** - Vue.js开发的标准工具
- **Babel** - JavaScript编译器
- **ESLint** - 代码质量检查工具

## 📱 页面功能

### 首页 (/)
- 系统数据统计概览
- 模板、页面、用户数量统计
- ECharts图表展示数据趋势
- 快速操作入口

### 表单设计器 (/designer)
- 可视化表单设计界面
- 组件库拖拽功能
- 实时预览功能
- 模板保存和加载
- 页面生成功能

### 模板管理 (/templates)
- 模板列表展示
- 模板搜索和筛选
- 模板编辑和删除
- 模板预览功能
- 模板使用功能

### 页面管理 (/pages)
- 页面列表展示
- 页面搜索和筛选
- 页面编辑和删除
- 页面预览功能
- 页面统计信息

### 表单预览 (/preview)
- 表单预览模式
- 支持模板预览
- 表单数据展示

### 动态页面 (/view/:pageId)
- 基于页面ID的动态页面
- 完整的页面UI展示
- 页面元数据展示

### 纯页面 (/pure/:pageId)
- 纯表单内容展示
- 无额外UI元素
- 适合嵌入其他系统

## 🔧 核心功能

### 表单设计
- 支持20+种表单组件
- 拖拽式组件布局
- 实时属性配置
- 响应式设计支持

### 数据管理
- 基于localStorage的数据持久化
- 模板和页面的CRUD操作
- 用户信息管理
- 数据导入导出

### 路由管理
- 单页应用路由
- 动态路由加载
- 页面参数传递
- 路由守卫

### 样式定制
- VForm2样式修复
- 响应式布局适配
- 自定义主题支持
- 组件样式覆盖

## 📊 数据存储

### localStorage存储结构
```javascript
// 模板数据
localStorage['vform-templates'] = [
  {
    id: 'template_id',
    templateName: '模板名称',
    creator: '创建人',
    createTime: '2024-01-01T00:00:00.000Z',
    updateTime: '2024-01-01T00:00:00.000Z',
    formJson: { /* 表单JSON数据 */ }
  }
]

// 页面数据
localStorage['vform-generated-pages'] = [
  {
    id: 'page_id',
    pageName: '页面名称',
    routeName: 'page_route',
    description: '页面描述',
    creator: '创建人',
    createTime: '2024-01-01T00:00:00.000Z',
    updateTime: '2024-01-01T00:00:00.000Z',
    formJson: { /* 表单JSON数据 */ }
  }
]

// 用户信息
localStorage['current-user'] = {
  name: '用户名',
  username: '用户名'
}
```

## 🎯 使用指南

### 创建表单
1. 进入表单设计器页面
2. 从左侧组件库拖拽组件到画布
3. 在右侧属性面板配置组件属性
4. 点击"保存为模板"保存设计

### 管理模板
1. 进入模板管理页面
2. 查看所有保存的模板
3. 使用搜索功能查找特定模板
4. 点击"使用"按钮加载模板到设计器

### 生成页面
1. 在设计器中设计好表单
2. 点击"生成页面"按钮
3. 填写页面名称和描述
4. 确认生成，页面将保存到页面列表

### 预览表单
1. 在设计器中点击"预览表单"
2. 在弹窗中查看表单效果
3. 测试表单交互功能

## 🔍 开发说明

### 样式修复
项目包含对VForm2的样式修复，主要解决：
- 工具栏按钮遮挡问题
- 中间区域宽度不足问题
- 响应式布局适配问题
- 组件样式冲突问题

### 组件定制
- 隐藏了VForm2的导入/导出按钮
- 自定义了工具栏布局
- 优化了组件间距和排列

### 数据流
1. 用户在设计器中操作
2. 数据保存到localStorage
3. 各页面从localStorage读取数据
4. 实时更新UI显示

## 🐛 常见问题

### Q: 表单设计器无法正常显示？
A: 检查VForm2依赖是否正确安装，确保版本兼容。

### Q: 保存的模板无法加载？
A: 检查localStorage中是否有数据，确保JSON格式正确。

### Q: 页面预览功能不工作？
A: 确保页面数据完整，包含formJson字段。

### Q: 样式显示异常？
A: 检查vform-fix.css是否正确引入，确保样式优先级。

## 📄 许可证

本项目基于 MIT 许可证开源。

## 🤝 贡献

欢迎提交 Issue 和 Pull Request 来帮助改进项目。

## 📞 联系方式

如有问题或建议，请通过以下方式联系：
- 提交 Issue
- 发送邮件
- 项目讨论区

---

**VForm2 可视化表单设计器** - 让表单设计变得简单高效！ 🎉