You've already forked rollingDraw
f19b1427b5
- 新增README.md，包含项目简介、技术栈、功能说明和使用指南 - 优化package.json格式，添加作者信息（上海潘哆呐科技有限公司） - 更新.gitignore，添加.playwright-mcp测试工具目录
163 lines
4.3 KiB
Markdown
163 lines
4.3 KiB
Markdown
# 抽奖系统
|
||
|
||
基于 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 # 项目配置
|
||
```
|
||
|
||
## 快速开始
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 开发模式
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
访问 http://localhost:5173
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 预览生产版本
|
||
|
||
```bash
|
||
npm run preview
|
||
```
|
||
|
||
## 功能说明
|
||
|
||
### 管理端（/admin）
|
||
|
||
#### 名单管理
|
||
- **单个添加**：通过表单逐个添加参与者
|
||
- **批量导入**：支持 CSV 文件批量导入
|
||
- 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
|
||
|
||
## 许可证
|
||
|
||
私有项目 |