企业官网建设流程全解析

项目简介

纯静态页面，无需部署后端接口服务，数据持久化依赖浏览器存储。

下载项目执行构建将打包到./dist目录，可自行挂载至相应服务器上浏览使用。

注意：对于设置比较严格的图片服务器，可能出现图片跨域无法展示的问题。

技术栈

• React- 开发框架
• Three-3D效果实现
• Zustand- 状态管理
• Dexie-IndexedDB极简封装库
• Antd-UI组件库
• Exceljs-Excel文件操作管理

线上地址

预览地址：https://bratrindersteak.github.io/party-lottery/
项目地址：https://github.com/Bratrindersteak/party-lottery/

本地开发

# 克隆项目gitclone https://github.com/Bratrindersteak/party-lottery.git# 安装依赖pnpmi 或pnpminstall# 启动本地服务pnpmrun dev# 打包pnpmrun build

抽奖流程

1.初始状态没有数据，可以选择手动录入，也可选择使用默认数据快速开始并熟悉游戏流程。

2.这里我们选择【使用默认数据】，可以看到成员、奖项、标题都有了数据。
有了这些数据，就可以进行抽奖了。

3.通过单击左侧的奖项列表项选取所要抽取的奖项。奖项也支持拖拽调整顺序。
奖项抽取的顺序是自上而下循环抽取的，所以调整奖项顺序也就可以控制抽奖顺序。

4.点击底部的【进入抽奖】按钮就会进入抽奖环节。成员卡片墙会组成卡片球并水平逆时针自转。同时会播放【开场音乐】。

5.点击【开始抽奖】按钮，卡片球高速旋转。同时高亮提示当前正在抽取的奖项。并切换播放【抽奖音乐】。

6.点击【开奖】按钮，卡片球停止旋转，并选出获奖者。并播放【开奖音效】。
开奖之后可以选择保留本次结果并【继续抽取】其他奖项，也可以选择放弃本次结果并【重新抽取】。

7.顶部右侧的操作栏提供少数辅助功能，依次是静音切换、语言切换、进入后台设置界面。

后台配置

通用配置功能

由于数据持久化依赖浏览器存储，且数据量可能会很大，所以这里添加了【一键清空数据】的功能，用于抽奖页面不再使用后手动释放存储空间。
注：算法暂不支持切换，默认使用随机算法。

成员录入管理

支持excel文件批量导入数据，但请使用本页面提供的模板。

奖项配置管理

已经抽取完毕的奖项在这里可以重置为未抽取，同时也会清除对应的抽奖记录。

获奖记录管理

支持导出为excel文件保存。

音乐配置管理

内置3个默认音效，也支持自行上传。

使用说明介绍