shishengliang/log-lottery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

96 UI optimization (#122)

Browse Source 
* fix(home): 🐛 解决多次切换路由后页面卡顿的问题 #96

卸载路由时清除requestAnimationFrame

* feat: ✨ 文件存储使用Blob格式

* style: 💄 修改部分类型any为具体类型

* feat: ✨ 界面设置中模块使用瀑布流布局 #96

* fix: 🐛 md文档更换文件夹解决控制台警告

* style: 💄 switch按钮改回使用daisyui组件

* refactor: ♻️ 所有人员列表提取tableColumn

* style: 💄 奖项列表中的图片类型修复
This commit is contained in:
LOG1997
2025-12-18 17:32:00 +08:00
committed by GitHub
parent 92254cb750
commit 5b8682bb7c
29 changed files with 351 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
public/readme-en.md
View File

@@ -1,31 +0,0 @@
# Operation Guide
## Steps
1. Upon first entry, no data will be displayed. You can choose to use default data to view the overall display effect. It is recommended to import your own data for operation. The steps are as follows:
a. Personnel Configuration - Personnel List - Download Template, download the data template and modify it with your data (please note that the header cannot be modified).
b. After modification, click 'Upload File' on the same page to upload the modified Excel table.
2. Enter the Prize Configuration to modify your prize information. Try to keep the name short for better display; "All Participants" indicates whether this award will be drawn from all participants (those who have already won can still participate); "Winners" refers to the number of people to be drawn for this award; "Already Won" cannot be edited; "Selected" means this award has been used, unselecting it will reset the award but not the winners; "Image" is the prize image displayed on the home page (you can upload images in the image list); "Left Icon" is used to adjust the order of prizes.
Completing the above two steps allows normal use.
## Function Description
1. Add Temporary Draw: There is a '+' button in the prize list on the draw page. Clicking it allows you to add a temporary draw. Note: Only one temporary draw can be added at a time. After adding successfully, the current prize will be set to the temporary prize, and after drawing, it will return to the normal prize list.
2. Music and Image List: You can upload files yourself for use. After uploading images successfully, you can select them in the prize configuration for display. After uploading music successfully, it will be added to the play list.
3. Music Playback: Left-click with the mouse to play/pause, right-click to play the next song.
4. Interface Configuration - Pattern Settings: You can use the mouse to click and customize the highlighted patterns on the home page.
5. If you do not want to display the prize list on the home page, uncheck 'Always Show Prize List' in the interface configuration.
6. When clicking buttons on the home page, the button value will not update immediately but will only update after the animation ends. This is a normal phenomenon.
## Shortcuts
Shortcuts are set up on the draw page.
| Shortcut | Description |
| --- | --- |
| Space | Enter Draw / Start / Draw Lucky Winner / Continue |
| Esc | Cancel |

31
public/readme-zhCn.md
View File

@@ -1,31 +0,0 @@
# 操作说明
## 步骤
1. 首次进入，没有数据展示，可以选择使用默认数据进行使用，查看整体展示效果。推荐导入自己的数据来进行操作。步骤如下：
a. 人员配置-人员名单-下载模板，下载数据模板并修改填入数据(请注意表头不可修改)。
b. 修改好后在同一个页面点击‘上传文件’，上传修改后的excel表格。
2. 进入奖品配置，修改自己的奖品信息。名称尽量短一点，方便展示；是否全员参加意指该项奖项是否从全体人员中抽取（已中奖的依然可以参与）；获奖人数指该奖项要抽取的人数；已获奖人数不可编辑；已抽取被选中时指该奖项已使用，取消选择会重置该奖项，但不会重置已获奖的人；图片是在首页展示时的奖品图片（可在图片列表自己上传）；左侧图标调整奖品顺序用。
完成上面两项已可以正常使用。
## 功能说明
1. 增加临时抽奖：抽奖页面的奖项列表有个‘+’号按钮，点击可临时增加抽奖，注意：一次只能增加一项临时抽奖，新增成功后当前奖项即设置为该临时奖项，抽取成功后返回正常奖项列表．
2. 音乐与图片列表，可自己上传文件进行使用，图片上传成功后就可以在奖项配置中进行选择图片展示，音乐上传成功后即加入了播放列表．
3. 音乐播放：使用鼠标左键点击是播放/暂停，使用鼠标右键点击是播放下一首．
4. 界面配置-图案设置中可使用鼠标点击自定义配置首页中的高亮图案．
5. 若不想在首页展示奖品列表,将界面配置中的'是否常显奖项列表'选中．
6. 首页点击按钮时按钮值不会立即更新，会等动画结束后才会更新为目标值，属于正常现象．
## 快捷键
在抽奖页面设置了快捷键。
| 快捷键 | 说明 |
| --- | --- |
| Space | 进入抽奖/开始/抽取幸运儿/继续 |
| Esc | 取消 |