Files

yuantao f19b1427b5 文档: 添加项目README文档并优化配置文件

- 新增README.md，包含项目简介、技术栈、功能说明和使用指南
- 优化package.json格式，添加作者信息（上海潘哆呐科技有限公司）
- 更新.gitignore，添加.playwright-mcp测试工具目录

2026-01-16 13:43:48 +08:00

4.3 KiB

Raw Blame History

抽奖系统

基于 Vue 3 + Vite + Element Plus 开发的现代化抽奖系统，支持名单管理、奖品配置、多轮抽奖等功能。

项目简介

这是一个功能完整的抽奖系统，适用于年会、活动抽奖等场景。系统采用前后端分离架构，数据存储在浏览器本地 IndexedDB 中，无需后端服务器即可运行。

主要特性

📋 名单管理：支持CSV批量导入/导出，支持自定义字段配置
🎁 奖品管理：灵活配置奖品和库存数量
🔄 多轮抽奖：支持多轮次抽奖，每轮可设置不同奖品和人数
📺 大屏展示：独立的展示端，支持滚动动画效果
⌨️ 快捷键操作：支持键盘快捷键控制抽奖流程
🎨 背景自定义：支持自定义大屏背景图片
💾 本地存储：使用 IndexedDB 本地存储，无需服务器

技术栈

框架：Vue 3.4.0
构建工具：Vite 5.0.0
路由：Vue Router 4.2.5
状态管理：Pinia 2.1.7
UI组件库：Element Plus 2.5.0
数据存储：IndexedDB

项目结构

rollingDraw/
├── src/                      # 主应用源码
│   ├── views/               # 页面组件
│   │   ├── admin/          # 管理端页面
│   │   │   ├── Participants.vue  # 名单管理
│   │   │   ├── Prizes.vue        # 奖品管理
│   │   │   ├── Rounds.vue        # 轮次管理
│   │   │   └── Winners.vue       # 中奖记录
│   │   ├── Admin.vue       # 管理端入口
│   │   ├── Display.vue     # 展示端入口
│   │   └── AdminLayout.vue # 管理端布局
│   ├── router/             # 路由配置
│   ├── store/              # 状态管理
│   └── styles/             # 样式文件
├── admin/                  # 独立管理端应用
├── display/                # 独立展示端应用
├── utils/                  # 工具类
│   └── indexedDB.js        # IndexedDB封装
├── index.html              # 入口HTML
├── vite.config.js          # Vite配置
└── package.json            # 项目配置

快速开始

安装依赖

npm install

开发模式

npm run dev

访问 http://localhost:5173

构建生产版本

npm run build

预览生产版本

npm run preview

功能说明

管理端（/admin）

名单管理

单个添加：通过表单逐个添加参与者
批量导入：支持 CSV 文件批量导入
- CSV 格式：第一行为字段名，后续行为数据
- 示例：
```
姓名,部门,工号
张三,技术部,001
李四,市场部,002
```
字段配置：自定义参与者字段（姓名、部门、工号等）
导出名单：将当前名单导出为 CSV 文件
清空名单：一键清空所有参与者

奖品管理

添加奖品（名称、库存数量）
查看奖品使用情况（已用/总库存）
删除奖品

轮次管理

创建抽奖轮次
为每个轮次配置奖品和抽取人数
查看轮次完成状态
删除轮次

中奖记录

查看所有中奖记录
导出中奖名单
清空中奖记录（重置抽奖）

背景设置

上传自定义背景图片（支持 JPG、PNG、GIF）
预览背景效果
清除背景图片

展示端（/display）

显示模式

滚动模式：抽奖时名单滚动显示
结果模式：展示中奖者名单，支持多列布局

快捷键

← →：切换抽奖轮次
Space：开始/停止抽奖

数据存储

系统使用浏览器本地 IndexedDB 存储数据，数据库名称为 LotteryDB，包含以下数据：

participants：参与者名单
prizes：奖品列表
rounds：抽奖轮次
winners：中奖记录
fields：字段配置
backgroundImage：背景图片

注意：清除浏览器数据会导致所有抽奖数据丢失，请定期导出备份。

开发说明

路径别名

@：指向 src/ 目录
@utils：指向 utils/ 目录

样式变量

项目使用 CSS 变量定义主题颜色和样式，可在 src/styles/variables.css 中修改。

作者

上海潘哆呐科技有限公司

邮箱：work@pandorastudio.cn

许可证

私有项目

4.3 KiB Raw Blame History Unescape Escape