96 UI optimization (#141)

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

卸载路由时清除requestAnimationFrame

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

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

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

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

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

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

* style: 💄 奖项列表中的图片类型修复

* fix(globalConfig): 修复当前音乐项类型缺失问题

* feat:  single person not done

* feat:  可添加单人 #96

* build(.gitignore): 添加 auto-imports.d.ts 到忽略文件

* fix: 🐛 上传、下载excel文件时修复路径错误

打包成应用和网页端的baseUrl不一样,使用环境变量来表示

* fix: 🐛 导入人员列表时处理有值为空的情况

* style: 💄 改变toaster的组件

* fix: 🐛 上传文件、解析数据与存储/读取数据的处理

、

* fix(Config): 更新备案信息链接样式

将备案信息的段落标签替换为可点击的链接标签,使用户能够直接跳转到工信部备案查询页面。同时添加了悬停效果样式,提升用户体验。

* feat:  首页奖项列表样式修改 not done #96

* chore(deps): ✏️ 更新依赖版本

* chore: ✏️ gsap list demo

* build: 🏗️ docker构建优化

* chore: ✏️ gsap scroll demo

* style: 💄 gsap demno

* feat:  demo smooth scroll gsap scrolltrigger

* feat(Demo): 添加更多颜色选项并注释GSAP动画

* refactor(PrizeList): 重构奖品列表组件结构

* feat(PrizeList): 重构奖品列表组件并添加滚动动画

* feat:  增加定时抽取功能 #96

* feat:  添加定时抽取功能的说明

* feat:  优化gsap #96

项数不多时不触发gsap

* style: 💄 文本修改

* feat:  优化

* feat:  优化奖项列表

* fix(Home): 修复奖品列表滚动检测逻辑

* fix(home): 修复抽奖停止逻辑避免重复执行;调整卡片垂直居中位置计算

* feat:  播放中奖音频 #96

* style: 💄 下载模板成功后进行提示

* docs: 📝 readme更新

* ci: 👷 git action触发改为推送release版本时执行
This commit is contained in:
LOG1997
2025-12-29 15:44:56 +08:00
committed by GitHub
parent da91b95c54
commit 5fe2279586
4 changed files with 46 additions and 31 deletions

View File

@@ -69,33 +69,27 @@ or
## 预览
首页
![image_home](./static/images/home.png)
![image_home_prize_list](./static//images/home_prizelist.png)
<div align="center">
<img src="./static/images/home.png" alt="img2-1" width="400" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="./static//images/home_prizelist.png" alt="img2-2" width="400" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
</div>
抽奖
![image_lottery](./static/images/lottery-enter.png)
![image_lottery_done](./static/images/lottery-done.png)
<div align="center">
<img src="./static/images/lottery-enter.png" alt="img2-1" width="400" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="./static/images/lottery-done.png" alt="img2-2" width="400" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
</div>
配置
![image_config_person_all](./static/images/config_personall.png)
![image_config_prize_list](./static/images/config_prize.png)
![image_config_view](./static/images/config-view.png)
![image_config_pattern](./static/images/config_pattern.png)
<div align="center">
<img src="./static/images/config_personall.png" alt="img2-1" width="400" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="./static/images/config_prize.png" alt="img2-1" width="400" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="./static/images/config-view.png" alt="img2-1" width="400" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="./static/images/config_pattern.png" alt="img2-1" width="400" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
</div>
图片音乐配置
![image_config_img](./static/images/image_config.png)
![image_music](./static/images/music_music.png)
## 技术
- vue3
@@ -136,7 +130,7 @@ npm run build
以下任意方式选一种即可
1. 拉取镜像
1. 拉取镜像从Docker Hub拉取镜像[log-lottery](https://hub.docker.com/r/log1997/log-lottery)
```bash
docker pull log1997/log-lottery:latest
@@ -160,7 +154,24 @@ npm run build
docker run -d -p 9279:80 log-lottery
```
容器运行成功后即可在本地通过<http://localhost:9279/log-lottery/>访问
容器运行成功后即可在本地通过<http://localhost:9279/log-lottery/>访问
3. 软件安装包
可前往[Releases](https://github.com/LOG1997/log-lottery/releases)下载。
目前只支持windows平台使用跨平台安装包暂不支持如有需要请自行编译参照[贡献文档](https://github.com/LOG1997/log-lottery/blob/dev/.github/CONTRIBUTING.md)
## 支持项目
<h3>💝 赞助支持</h3>
<p><em>如果您觉得 log-lottery 对您有帮助,欢迎赞助支持,您的支持是我们不断前进的动力!</em></p>
<div>
<img src="./static/images/ZanShang.png" height="240" alt="WeChat Code">
</div>
<br>
## Star History