# 抽奖系统产品需求文档

## 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分辨率设计，桌面优先适配。支持触摸交互优化，屏幕键盘具备触觉反馈效果。在较小屏幕上自动调整布局比例，确保核心功能可用性。