自定义表单设计器

项目介绍

自定义表单设计器是一个基于Vue 3的拖拽式表单生成工具，让用户能够通过简单的拖拽操作来创建复杂的表单。

技术栈

• Vue 3 - 渲染框架
• TypeScript - 类型系统
• Vite - 构建工具
• TailwindCSS - 样式框架
• shadcn/vue - UI组件库
• Tanstack Query - 数据请求
• Pinia - 状态管理

核心功能

1. 拖拽式表单设计

   • 支持多种表单组件
   • 实时预览
   • 组件属性配置

2. 表单管理

   • 表单模板保存
   • 表单数据收集
   • 数据导出(Excel等)

3. 响应式设计

   • 适配多种设备
   • 自适应布局

4. 用户系统

   • 表单权限管理
   • 数据访问控制

项目结构

apps/form/
├── src/                # 源代码
│   ├── components/     # 组件
│   ├── stores/        # 状态管理
│   ├── hooks/         # 自定义Hook
│   └── types/         # 类型定义
├── public/            # 静态资源
└── components/        # 通用组件

开发指南

1. 安装依赖

pnpm install

2. 启动开发服务器

pnpm dev

3. 构建生产版本

pnpm build

部署要求

• Node.js 18+
• 现代浏览器支持