年会大屏抽奖

一个功能丰富的年会/活动抽奖系统，支持大屏展示、多奖项管理。

特性

• 单文件部署：构建后生成单个 HTML 文件，可直接用浏览器打开，无需服务器
• 大屏展示：精美的欢迎页、奖项页、抽奖页，支持全屏展示
• 滚动动画：抽奖时姓名滚动带有加速/减速效果，停止后有撒花庆祝特效
• 多奖项管理：支持自定义奖项名称、数量、奖品描述
• 数据持久化：所有数据保存在浏览器本地，刷新不丢失

快速开始

方式一：直接使用（推荐）

1. 下载 dist/index.html 文件
2. 用浏览器打开即可使用
3. 访问 index.html#/admin 进入后台管理

方式二：本地开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

使用说明

页面结构

路径	说明
#/	大屏展示页（用于投影/大屏幕）
#/admin	后台管理页

后台管理

默认密码：admin（可在系统设置中修改）

功能标签页：

• 抽奖控制：切换大屏场景、选择奖项、开始/停止抽奖
• 参与者：导入 CSV、查看/编辑参与者列表
• 奖项管理：添加/编辑/删除奖项
• 中奖记录：查看历史中奖名单、导出记录
• 系统设置：自定义标题、Logo、密码等

CSV 导入格式

基础格式（两列）：

姓名,部门
张三,技术部
李四,市场部
王五,人事部

大屏操作

支持键盘快捷键：

• 空格键：开始/停止抽奖
• 回车键：锁定当前结果（切换到下一轮）

高级功能

通过 URL 参数 ?controlled=1 解锁（注意参数要放在 # 之前）：

index.html?controlled=1#/admin

或本地开发时：

http://localhost:5173/?controlled=1#/admin

解锁后可使用：

• 必中奖项：指定某人必中特定奖项
• 禁止中奖：将某人加入黑名单
• 权重设置：调整中奖概率（1-10）

高级功能 CSV 格式

姓名,部门,必中奖项(奖项名称),禁止中奖(是/否),权重(1-10)
张三,技术部,一等奖,,
李四,市场部,,是,
王五,人事部,,,5

技术栈

• React 19 + TypeScript
• Tailwind CSS v4
• Zustand（状态管理）
• Framer Motion（动画）
• Wouter（路由，支持 hash 模式）
• Vite + vite-plugin-singlefile（单文件构建）

数据存储

所有数据存储在浏览器本地：

存储类型	内容	说明
localStorage	参与者、奖项、中奖记录、设置	持久保存
sessionStorage	登录状态	关闭浏览器后失效

注意事项：

• 后台和大屏需在同一浏览器中打开才能同步
• 清除浏览器数据会丢失所有记录
• 密码为明文存储，仅作为简单防误触保护

项目结构

src/
├── components/
│   └── RollingBoard.tsx    # 大屏展示组件
├── pages/
│   └── AdminPage.tsx       # 后台管理页
├── store/
│   └── useStore.ts         # Zustand 状态管理
├── lib/
│   ├── types.ts            # TypeScript 类型定义
│   └── lottery-logic.ts    # 抽奖算法
└── App.tsx                 # 路由入口

License

MIT

免责声明

本项目仅用于展示 AI 编程效果，开发者不对使用本项目产生的任何后果承担责任。使用者需自行承担使用风险。