You've already forked rollingDraw
252 lines
7.1 KiB
Markdown
252 lines
7.1 KiB
Markdown
# Rolling Draw - 抽奖系统
|
||
|
||
## 项目概述
|
||
|
||
Rolling Draw 是一个基于 Vue 3 的现代化抽奖系统，提供完整的管理后台和大屏展示功能。系统支持自定义字段、批量导入、多轮次抽奖、中奖记录导出等功能，适用于各类活动抽奖场景。
|
||
|
||
**作者：** 上海潘哆呐科技有限公司
|
||
**技术栈：** Vue 3 + Vite + Vue Router + Pinia + Element Plus + IndexedDB
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
rollingDraw/
|
||
├── src/
|
||
│ ├── views/
|
||
│ │ ├── Admin.vue # 管理后台布局
|
||
│ │ ├── Display.vue # 大屏展示页面
|
||
│ │ └── admin/
|
||
│ │ ├── Participants.vue # 参与者管理
|
||
│ │ ├── Prizes.vue # 奖品管理
|
||
│ │ ├── Rounds.vue # 轮次管理
|
||
│ │ └── Winners.vue # 中奖记录
|
||
│ ├── router/
|
||
│ │ └── index.js # 路由配置
|
||
│ ├── store/
|
||
│ │ └── index.js # Pinia 状态管理
|
||
│ ├── styles/
|
||
│ │ ├── element-plus.css # Element Plus 样式覆盖
|
||
│ │ ├── global.css # 全局样式
|
||
│ │ └── variables.css # CSS 变量定义
|
||
│ ├── App.vue # 主应用组件
|
||
│ └── main.js # 应用入口
|
||
├── utils/
|
||
│ └── indexedDB.js # IndexedDB 工具封装
|
||
├── index.html # HTML 模板
|
||
├── package.json # 项目配置
|
||
├── vite.config.js # Vite 配置
|
||
└── .gitignore # Git 忽略文件
|
||
```
|
||
|
||
## 技术栈
|
||
|
||
### 核心框架
|
||
- **Vue 3** (v3.4.0) - 渐进式 JavaScript 框架
|
||
- **Vite** (v5.0.0) - 下一代前端构建工具
|
||
- **Vue Router** (v4.2.5) - 官方路由管理器
|
||
- **Pinia** (v2.1.7) - Vue 状态管理库
|
||
|
||
### UI 组件库
|
||
- **Element Plus** (v2.5.0) - Vue 3 组件库
|
||
- **@element-plus/icons-vue** (v2.3.1) - Element Plus 图标库
|
||
|
||
### 数据持久化
|
||
- **IndexedDB** - 浏览器本地数据库，用于存储抽奖数据
|
||
- **localStorage** - 用于跨标签页通信
|
||
|
||
## 主要功能
|
||
|
||
### 1. 参与者管理
|
||
- ✅ 单个添加参与者
|
||
- ✅ 批量导入（CSV 格式）
|
||
- ✅ 导出参与者名单
|
||
- ✅ 自定义字段配置
|
||
- ✅ 删除参与者
|
||
- ✅ 清空名单
|
||
- ✅ 分页显示（支持大数据量）
|
||
|
||
### 2. 奖品管理
|
||
- ✅ 添加奖品
|
||
- ✅ 设置库存数量
|
||
- ✅ 实时库存管理
|
||
- ✅ 删除奖品
|
||
- ✅ 库存进度条显示
|
||
|
||
### 3. 轮次管理
|
||
- ✅ 创建抽奖轮次
|
||
- ✅ 关联奖品
|
||
- ✅ 设置抽取人数
|
||
- ✅ 轮次状态跟踪
|
||
- ✅ 轮次序号显示
|
||
|
||
### 4. 抽奖控制
|
||
- ✅ 开始/停止抽奖
|
||
- ✅ Fisher-Yates 洗牌算法
|
||
- ✅ 防重复中奖
|
||
- ✅ 库存自动扣减
|
||
- ✅ 重置抽奖数据
|
||
|
||
### 5. 中奖记录
|
||
- ✅ 实时记录中奖信息
|
||
- ✅ 导出中奖名单
|
||
- ✅ 按轮次筛选
|
||
- ✅ 动态显示所有字段
|
||
- ✅ 分页显示（支持大数据量）
|
||
|
||
### 6. 大屏展示
|
||
- ✅ 滚动动画效果
|
||
- ✅ 结果展示模式
|
||
- ✅ 自定义背景图片
|
||
- ✅ 快捷键控制
|
||
- ✅ 多列布局支持
|
||
- ✅ 显示设置（字体颜色、字体大小、显示字段）
|
||
- ✅ 字段标签控制
|
||
- ✅ 人名按抽取数量显示
|
||
- ✅ 刷新后不显示历史结果
|
||
|
||
### 7. 显示设置
|
||
- ✅ 每行显示人数设置
|
||
- ✅ 字体颜色设置（轮次名称、人名、奖品名称）
|
||
- ✅ 字体大小设置（轮次名称、奖品名称、人名）
|
||
- ✅ 显示字段选择
|
||
- ✅ 字段标签显示/隐藏
|
||
|
||
### 8. 数据同步
|
||
- ✅ IndexedDB 本地存储
|
||
- ✅ 跨标签页实时同步
|
||
- ✅ 数据持久化
|
||
|
||
## 路由配置
|
||
|
||
| 路径 | 组件 | 说明 |
|
||
|------|------|------|
|
||
| `/` | 重定向到 `/admin/participants` | 默认路由 |
|
||
| `/admin/participants` | Participants.vue | 参与者管理 |
|
||
| `/admin/prizes` | Prizes.vue | 奖品管理 |
|
||
| `/admin/rounds` | Rounds.vue | 轮次管理 |
|
||
| `/admin/winners` | Winners.vue | 中奖记录 |
|
||
| `/display` | Display.vue | 大屏展示 |
|
||
|
||
## 数据存储
|
||
|
||
### IndexedDB 数据结构
|
||
- **lottery_fields** - 字段配置
|
||
- **lottery_participants** - 参与者列表
|
||
- **lottery_prizes** - 奖品列表
|
||
- **lottery_rounds** - 轮次列表
|
||
- **lottery_winners** - 中奖记录
|
||
- **lottery_isRolling** - 抽奖状态
|
||
- **lottery_currentRound** - 当前轮次
|
||
- **lottery_displayMode** - 显示模式
|
||
- **lottery_backgroundImage** - 背景图片
|
||
- **lottery_columnsPerRow** - 每行列数
|
||
- **lottery_displayFontColor** - 大屏端字体颜色
|
||
- **lottery_prizeNameFontColor** - 奖品名称字体颜色
|
||
- **lottery_roundNameFontSize** - 轮次名称字体大小
|
||
- **lottery_prizeNameFontSize** - 奖品名称字体大小
|
||
- **lottery_participantFontSize** - 人名字体大小
|
||
- **lottery_displayFields** - 大屏端显示的字段列表
|
||
- **lottery_showFieldLabels** - 是否显示字段标签
|
||
|
||
## 快捷键
|
||
|
||
### 大屏展示端
|
||
- **← →** - 切换轮次
|
||
- **Space** - 开始/停止抽奖
|
||
|
||
## 开发指南
|
||
|
||
### 安装依赖
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 启动开发服务器
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### 构建生产版本
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 预览生产构建
|
||
```bash
|
||
npm run preview
|
||
```
|
||
|
||
## 项目特性
|
||
|
||
### 响应式设计
|
||
- 支持桌面端和大屏展示
|
||
- 自适应布局
|
||
- 流畅的动画效果
|
||
|
||
### 数据安全
|
||
- 本地存储，无需服务器
|
||
- 数据持久化
|
||
- 防止重复中奖
|
||
|
||
### 扩展性
|
||
- 自定义字段配置
|
||
- 可配置的轮次和奖品
|
||
- 灵活的展示布局
|
||
|
||
### 性能优化
|
||
- 分页显示支持大数据量
|
||
- 虚拟滚动优化
|
||
- 延迟加载
|
||
|
||
## 注意事项
|
||
|
||
1. **数据备份**：建议定期导出参与者名单和中奖记录进行备份
|
||
2. **浏览器兼容性**：需要支持 IndexedDB 的现代浏览器
|
||
3. **图片限制**：背景图片最大支持 10MB
|
||
4. **CSV 格式**：导入文件第一行为字段名，后续行为数据
|
||
5. **性能建议**：单次导入建议不超过 1000 人，大量数据请分批导入
|
||
|
||
## 技术亮点
|
||
|
||
- **Vue 3 Composition API** - 更好的代码组织和复用
|
||
- **Pinia 状态管理** - 轻量级、类型友好的状态管理
|
||
- **IndexedDB** - 大容量本地数据存储
|
||
- **Fisher-Yates 洗牌算法** - 公平的随机抽取
|
||
- **跨标签页同步** - 实时数据更新
|
||
- **CSS 变量** - 主题定制和样式管理
|
||
- **分页优化** - 大数据量性能优化
|
||
- **动态字段系统** - 灵活的自定义字段支持
|
||
|
||
## 开发规范
|
||
|
||
### 代码风格
|
||
- 使用 Vue 3 Composition API
|
||
- 使用 `<script setup>` 语法糖
|
||
- 遵循 ESLint 规则
|
||
- 组件命名使用 PascalCase
|
||
|
||
### 命名规范
|
||
- 文件名：PascalCase (组件) / kebab-case (工具)
|
||
- 变量名：camelCase
|
||
- 常量名：UPPER_SNAKE_CASE
|
||
- 函数名：camelCase
|
||
|
||
### 目录结构
|
||
- 组件放在 `src/views/` 目录
|
||
- 工具函数放在 `utils/` 目录
|
||
- 样式文件放在 `src/styles/` 目录
|
||
|
||
### 组件设计原则
|
||
- 单一职责：每个组件只负责一个功能
|
||
- 可复用：提取公共逻辑为可复用组件
|
||
- 可测试：组件逻辑易于测试
|
||
- 性能优先：避免不必要的重渲染
|
||
|
||
## 许可证
|
||
|
||
版权所有 © 上海潘哆呐科技有限公司
|
||
|
||
## 联系方式
|
||
|
||
- **邮箱**: work@pandorastudio.cn
|
||
- **公司**: 上海潘哆呐科技有限公司 |