You've already forked rollingDraw
文档: 添加项目README文档并优化配置文件
- 新增README.md，包含项目简介、技术栈、功能说明和使用指南 - 优化package.json格式，添加作者信息（上海潘哆呐科技有限公司） - 更新.gitignore，添加.playwright-mcp测试工具目录
This commit is contained in:
yuantao
1
.gitignore
vendored
1
.gitignore
vendored
@@ -11,6 +11,7 @@ yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
.playwright-mcp
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
163
README.md
Normal file
163
README.md
Normal file
@@ -0,0 +1,163 @@
|
||||
# 抽奖系统
|
||||
|
||||
基于 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
|
||||
|
||||
## 许可证
|
||||
|
||||
私有项目
|
||||
27
package.json
27
package.json
@@ -1 +1,26 @@
|
||||
{"name": "rolling-draw", "version": "1.0.0", "type": "module", "scripts": {"dev": "vite", "build": "vite build", "preview": "vite preview"}, "dependencies": {"vue": "^3.4.0", "vue-router": "^4.2.5", "pinia": "^2.1.7", "element-plus": "^2.5.0", "@element-plus/icons-vue": "^2.3.1"}, "devDependencies": {"@vitejs/plugin-vue": "^5.0.0", "vite": "^5.0.0"}}
|
||||
{
|
||||
"name": "rolling-draw",
|
||||
"version": "1.0.0",
|
||||
"private": "true",
|
||||
"type": "module",
|
||||
"author": {
|
||||
"name": "上海潘哆呐科技有限公司",
|
||||
"email": "work@pandorastudio.cn"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.4.0",
|
||||
"vue-router": "^4.2.5",
|
||||
"pinia": "^2.1.7",
|
||||
"element-plus": "^2.5.0",
|
||||
"@element-plus/icons-vue": "^2.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.0",
|
||||
"vite": "^5.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user