rollingDraw/IFLOW.md

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 - 开始/停止抽奖

开发指南

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

预览生产构建

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
• 公司: 上海潘哆呐科技有限公司