97 lines
4.6 KiB
Markdown
97 lines
4.6 KiB
Markdown
# 抽奖系统产品需求文档
|
||
|
||
## 1. Product Overview
|
||
|
||
本产品是一个基于H5技术的学号抽奖系统，为学校活动提供公平、透明的抽奖服务。系统支持多级奖项设置、实时数据统计和离线缓存功能，确保在网络异常情况下也能正常运行。
|
||
|
||
- 解决传统抽奖方式不够透明、数据难以统计的问题，为学校师生提供现代化的抽奖解决方案。
|
||
- 目标是成为校园活动的标准抽奖工具，提升活动参与度和公信力。
|
||
|
||
## 2. Core Features
|
||
|
||
### 2.1 User Roles
|
||
|
||
| Role | Registration Method | Core Permissions |
|
||
|------|---------------------|------------------|
|
||
| 管理员 | 密码登录 | 系统配置、奖项设置、数据查看、背景管理 |
|
||
| 学生用户 | 学号输入 | 参与抽奖、查看中奖结果 |
|
||
|
||
### 2.2 Feature Module
|
||
|
||
我们的抽奖系统包含以下主要页面：
|
||
|
||
1. **登录页面**：密码验证、系统准入控制
|
||
2. **抽奖主界面**：三列布局展示、学号输入、屏幕键盘、抽奖操作
|
||
3. **后台管理页面**：奖项配置、抽奖次数设置、数据统计
|
||
4. **数据查询页面**：中奖记录查看、学号隐私保护
|
||
5. **系统设置页面**：背景图片管理、界面配置
|
||
|
||
### 2.3 Page Details
|
||
|
||
| Page Name | Module Name | Feature description |
|
||
|-----------|-------------|---------------------|
|
||
| 登录页面 | 密码验证模块 | 输入系统密码，验证通过后进入抽奖系统 |
|
||
| 抽奖主界面 | 奖项展示区 | 显示各级奖品名称、中奖概率、已中出数量（左侧2/9宽度） |
|
||
| 抽奖主界面 | 学号输入区 | 12位数字学号输入框、屏幕数字键盘（140px*140px，间距10px）、退格清空按钮（中间5/9宽度） |
|
||
| 抽奖主界面 | 开奖结果区 | 实时显示中奖情况、历史记录（右侧2/9宽度） |
|
||
| 抽奖主界面 | 抽奖动画模块 | 弹出浮窗、3秒滚动摇奖效果、中奖信息展示 |
|
||
| 后台管理页面 | 奖项配置模块 | 设置总奖数、一二三等奖名称数量、抽奖次数限制 |
|
||
| 后台管理页面 | 数据统计模块 | 查看所有中奖数据、学号记录、抽奖时间 |
|
||
| 数据查询页面 | 查询接口模块 | 实时查看出奖情况、学号隐私保护（*号替换） |
|
||
| 系统设置页面 | 背景管理模块 | 本地图片选择、背景大小位置调整 |
|
||
| 系统设置页面 | 缓存同步模块 | 本地缓存管理、网络恢复后数据同步 |
|
||
|
||
## 3. Core Process
|
||
|
||
**管理员流程：**
|
||
系统启动 → 密码登录 → 奖项配置 → 背景设置 → 启动抽奖 → 实时监控 → 数据导出
|
||
|
||
**学生用户流程：**
|
||
进入抽奖页面 → 输入12位学号 → 点击抽奖按钮 → 观看摇奖动画 → 查看中奖结果 → 结束或继续抽奖
|
||
|
||
**系统内部流程：**
|
||
学号验证 → 抽奖次数检查 → 本地缓存记录 → 概率计算 → 结果生成 → 数据同步
|
||
|
||
```mermaid
|
||
graph TD
|
||
A[系统启动] --> B[密码登录]
|
||
B --> C[抽奖主界面]
|
||
C --> D[学号输入]
|
||
D --> E[抽奖次数验证]
|
||
E --> F[抽奖动画]
|
||
F --> G[结果展示]
|
||
G --> H[数据记录]
|
||
H --> I[本地缓存]
|
||
I --> J[网络同步]
|
||
|
||
C --> K[后台管理]
|
||
K --> L[奖项配置]
|
||
K --> M[数据查询]
|
||
K --> N[系统设置]
|
||
```
|
||
|
||
## 4. User Interface Design
|
||
|
||
### 4.1 Design Style
|
||
|
||
- **主色调**：#1890FF（蓝色主题），#52C41A（成功绿色）
|
||
- **辅助色**：#FAAD14（警告黄色），#F5222D（错误红色）
|
||
- **按钮样式**：圆角矩形，3D立体效果，悬停渐变动画
|
||
- **字体**：微软雅黑 16px-24px，数字使用等宽字体
|
||
- **布局风格**：卡片式设计，顶部导航，响应式网格布局
|
||
- **图标风格**：线性图标配合实心填充，统一视觉风格
|
||
|
||
### 4.2 Page Design Overview
|
||
|
||
| Page Name | Module Name | UI Elements |
|
||
|-----------|-------------|-------------|
|
||
| 登录页面 | 密码输入框 | 居中卡片布局，深色背景，白色输入框，蓝色登录按钮 |
|
||
| 抽奖主界面 | 三列布局 | 1920*1080全屏，左中右2:5:2比例，无滚动条设计 |
|
||
| 抽奖主界面 | 屏幕键盘 | 3*4数字矩阵，140px*140px按钮，10px间距，触摸反馈 |
|
||
| 抽奖主界面 | 抽奖动画 | 模态弹窗，旋转滚动效果，3秒倒计时，结果高亮显示 |
|
||
| 后台管理页面 | 配置表单 | 表格布局，输入框验证，实时预览，保存确认 |
|
||
| 数据查询页面 | 数据表格 | 分页显示，搜索过滤，学号脱敏，导出功能 |
|
||
|
||
### 4.3 Responsiveness
|
||
|
||
系统主要针对1920*1080分辨率设计，桌面优先适配。支持触摸交互优化，屏幕键盘具备触觉反馈效果。在较小屏幕上自动调整布局比例，确保核心功能可用性。 |