# 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 - 使用 `