# 抽奖系统

基于 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

## 许可证

私有项目