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

抽奖系统产品需求文档

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位学号 → 点击抽奖按钮 → 观看摇奖动画 → 查看中奖结果 → 结束或继续抽奖

系统内部流程： 学号验证 → 抽奖次数检查 → 本地缓存记录 → 概率计算 → 结果生成 → 数据同步

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比例，无滚动条设计
抽奖主界面	屏幕键盘	34数字矩阵，140px140px按钮，10px间距，触摸反馈
抽奖主界面	抽奖动画	模态弹窗，旋转滚动效果，3秒倒计时，结果高亮显示
后台管理页面	配置表单	表格布局，输入框验证，实时预览，保存确认
数据查询页面	数据表格	分页显示，搜索过滤，学号脱敏，导出功能

4.3 Responsiveness

系统主要针对1920*1080分辨率设计，桌面优先适配。支持触摸交互优化，屏幕键盘具备触觉反馈效果。在较小屏幕上自动调整布局比例，确保核心功能可用性。