first commit

.trae/documents/抽奖系统产品需求文档.md

@@ -0,0 +1,97 @@
+# 抽奖系统产品需求文档
+
+## 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分辨率设计，桌面优先适配。支持触摸交互优化，屏幕键盘具备触觉反馈效果。在较小屏幕上自动调整布局比例，确保核心功能可用性。