Dev (#151)

* feat: 更新依赖，解决启动报错

* feat: 依赖升级后的样式修改

* refactor: 首页提取样式至单独的文件

* refactor: 重构首页代码，提取处理函数

* feat: 使用web worker来进行文件导入计算

* refactor: 提取组件，优化代码

* refactor: 人员列表代码结构重组

* feat: ✨ 修复问题

* feat: 添加Loading效果

* feat: indexdb存储人员名单，使用dexie

* feat(config): 重构界面配置项布局与样式

将原有的线性表单布局调整为分组的 fieldset 布局，提升视觉层次和可维护性。
新增文本设置、布局设置、主题设置、图案设置和其他设置等分类区域。
优化部分输入控件的结构和样式类名，增强用户体验和代码可读性。

* feat(data): 调整默认图案列表顺序

2025改为2026

feat(ui): 添加配置项注释说明

为 FaceConfig.vue 中的各个设置字段添加了 HTML 注释，便于识别和维护不同功能区域。包括：
- 文本设置（主标题、语言、文字大小）
- 布局设置（列数、卡片宽度、卡片高度）
- 主题设置（主题、背景图片）
- 图案设置
- 其他设置（是否常显奖项列表、是否显示头像）

* feat(PageHeader): 新增 PageHeader 组件并应用于多个配置页面

新增了 PageHeader 通用组件，用于统一页面标题和操作按钮区域的布局。
该组件包含 title 属性以及 buttons 和 alerts 两个具名插槽，便于复用和维护。
已在以下页面中集成使用：
- 图片管理页（ImageConfig.vue）
- 音乐管理页（MusicConfig.vue）
- 人员管理页（PersonAll/index.vue）
- 中奖者管理页（PersonAlready.vue）
- 奖品管理页（PrizeConfig.vue）

* fix(style): 调整 markdown 样式以支持主题变量

移除 media 查询，统一使用 CSS 变量定义颜色；修复组件中 i18n 导入位置问题。

* ```
fix(Config): 注释掉设置卡片颜色的逻辑

将设置卡片颜色的相关代码注释掉，完全使用用户使用的颜色，避免在主题切换时出现异常。
```

* ```
refactor(FaceConfig): 移除未使用的颜色验证工具函数

从 FaceConfig 组件中移除了不再需要的 isHex 和 isRgbOrRgba 工具函数导入，
因为这些函数当前并未在组件中使用。这有助于减少不必要的代码依赖并提高
组件的简洁性。
```

* fix(MusicConfig): 优化本地音乐列表项的显示样式

移除列表项中的 divide-y 类，为音乐名称添加 title 属性以显示完整名称，
并将音乐名称渲染为可点击的链接样式。

* build(workflow): 更新Node.js版本到22.x

将GitHub Actions工作流中的Node.js版本从20.x升级到22.x，
以使用最新的稳定版Node.js环境进行构建和测试。

* feat(router、config): 更新配置页面组件路径

将 FaceConfig、ImageConfig 和 MusicConfig 组件的导入路径从直接引用 `.vue` 文件改为引用 `index.vue`。

* build(eslint): 更新 ESLint 配置以忽略更多文件并添加警告规则

在原有忽略文件列表中新增了 '*.config.js' 文件类型，同时添加了
'no-console' 和 'no-debugger' 规则，并将其设置为警告级别，以提高
代码质量和一致性。

* feat(components): 添加图片上传组件及对话框功能

新增 `ImageUpload` 组件用于文件选择与预览，并集成到 `UploadDialog` 中实现图片上传逻辑。
更新了 `Dialog` 组件以支持可选属性和 model 绑定，增强其灵活性和可用性。
引入 `lucide-vue-next` 图标库支持图标渲染。
重构图片配置页面，移除旧上传逻辑，使用新的弹窗方式进行图片上传操作。

* feat(imgConfig): 优化图片存储结构

新增uuid依赖用于生成唯一ID，改进图片上传功能中的本地存储结构，
使用uuid替代时间戳作为键名以避免冲突，并调整从indexedDB读取数据的方式。

* feat: 音乐管理功能优化

* fix(MusicConfig): 移除上传对话框中的图片上传提示功能

移除了 UploadDialog 组件中不再使用的图片上传状态提示逻辑，
包括相关的响应式变量 imgUploadToast 及其对应的模板代码。
此变更简化了组件结构并移除了未使用的错误提示功能。

* fix(Config): 添加图片上传提示信息

在全局人脸配置页面添加了图片上传提示文本，提醒用户需要先上传图片到图片管理模块。

* feat(layout): 重构页面布局与音乐播放组件

将 PlayMusic 组件迁移至 layout/RightButton 并重构成通用右下角按钮组件，
提取音乐播放逻辑到独立 hook `usePlayMusic`，优化模态框提示逻辑并统一滚动行为。

* feat(prize-config): 引入拖拽功能并优化奖品配置界面

- 添加 `vue-draggable-plus` 和 `lodash-es` 依赖以支持列表拖拽排序
- 使用 `cloneDeep` 深拷贝奖品列表，避免直接修改原始数据
- 移除原有的手动排序逻辑（上下移动按钮），改用可视化拖拽方式
- 调整 UI 布局和样式，增强用户体验与可操作性
- 在 Demo 页面中添加 draggable 示例用于验证功能实现

* feat(Config): 动态显示当前年份并更新版权信息

将页脚中的版权年份从硬编码的 2024 改为动态获取的当前年份，并将作者名称添加跳转到 GitHub 主页的链接。

* fix(ui): 优化图片列表下拉选择器及表单项的样式与布局

* feat(person): 导入人员时添加uuid唯一标识字段 #91

* feat(utils): 添加安全洗牌与随机抽样函数 Feature #91

* test(random): 添加随机元素抽取函数的全面测试用例 Test #91

- 新增 Random.test.ts 文件，对 getRandomElements 函数进行详尽测试
- 包括基础功能、边界情况（count 为 0、负数、超出数组长度）
- 支持空数组、单元素数组、字符串数组、对象数组等多种数据类型
- 增加概率性测试，验证多次调用结果不完全一致
- 20万次循环验证各元素被抽中概率接近理论值，确保算法公平性

* feat(home): 重构抽奖逻辑并优化初始化流程 Feature #91

* feat(Home): 添加初始化完成状态控制头部标题显示 Fix #91

* feat(HeaderTitle): 添加加载状态显示 #91

* feat(store): 调整默认人员列表类型定义

* feat(deps): 添加tauri打包（遗留pnpm build:file打包好的文件跨域无法访问） #94

* feat(icons): 添加tauri多种平台的应用图标资源

* fix(tauri): 更新 Cargo.toml 配置格式 #94

* build(workflow): 更新 GitHub Actions 工作流配置 #94

* build(workflow): 更新发布流程并移除旧的构建文件

* chore(release): 调整 GitHub Actions 工作流中的缩进格式

* build(deps): 固定 three.js 相关依赖版本

* build(workflows): 添加 fast-glob 依赖到 GitHub 工作流

* build(release): 添加发布名称和文件名以包含版本信息

* build(github): 升级下载构件操作到v4版本

* ci(release): 上传web构建产物作为GitHub Actions工件

* feat(Config): 支持多语言 README 文档展示

* feat(Global/FaceConfig): 添加跳转到图片管理页面的链接 #96

* chore: 格式化

* feat(i18n): 更新抽奖配置相关国际化文案 #96

* build: git钩子

* build: pre-psuh

* feat(components): 添加 shadcn-vue 组件配置文件及配套组件库 #96

* feat(font): 添加本地字体选择功能（not done） #96

* feat: 更换字体v，以及页面加载之前就设置字体 #96

* chore: 删除v console.log #96

* build: pre-push

* feat(globalConfig): 设置默认字体为微软雅黑 #96

* feat: 设置标题字体与全局字体同步 #96

* build(.gitignore): 添加 husky 目录到忽略文件

* docs(readme): 格式

* docs(readme): 移除关于build:file命令的过时文档

* build: 🏗️ 使用低版本node会报错，强制限制使用node 22.x版本

可在.npmrc里面修改为不强制使用

* feat: ✨ 上传文件时校验是否模板文件，否则提示 #96

* feat(layout): 添加全屏切换功能 #96

* refactor: ♻️ 界面设置页面重构，抽离逻辑 #96

* fix(background): 修复从本地存储获取图片数据的问题 #96

* refactor: ♻️ 重构奖项配置模块 #96

* feat(personalready): ✨ 已中奖的员页面修改switch组件 #96

* refactor(personalready): ♻️ 已中奖的界面代码重构 #96

* style: 💄 删除shadcn-vue的样式预设，只使用daisyui的样式 #96

* feat: ✨ 标题样式跟随主题，设置文本颜色会覆盖主题的标题颜色 #96

* fix(Global/FaceConfig): 调整主题设置中文本颜色按钮的高度样式 #96

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

卸载路由时清除requestAnimationFrame

* 96 UI optimization (#122)

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

卸载路由时清除requestAnimationFrame

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

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

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

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

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

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

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

* Confilct dev date 12 22 (#131)

* 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: 🐛 上传文件、解析数据与存储/读取数据的处理

、

* 96 UI optimization (#132)

* 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): 更新备案信息链接样式

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

* 96 UI optimization (#136)

* 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

* 96 UI optimization (#137)

* 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: 💄 下载模板成功后进行提示

* 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版本时执行

* Feature action (#143)

* ci: 👷 整合github action配置文件

* docs: 📝 贡献文档修改

* Feature action (#144)

* ci: 👷 整合github action配置文件

* docs: 📝 贡献文档修改

* style: 💄 更新版本

* style: 💄 cargo.lock版本更新

* Feature action (#149)

* ci: 👷 整合github action配置文件

* docs: 📝 贡献文档修改

* style: 💄 更新版本

* style: 💄 cargo.lock版本更新

* feat(husky): 增强Git标签版本校验脚本

添加了对Git标签指向提交与release分支一致性的校验功能。
脚本现在会检查tag指向的提交是否与当前或任何release分支的最新提交一致，
确保发布流程的准确性。如果当前在release分支上，直接比较分支HEAD与tag指向的提交；
如果不在release分支上，则遍历所有release分支查找匹配的提交。

* feat: ✨ 国际化

* Feature action (#150)

* ci: 👷 整合github action配置文件

* docs: 📝 贡献文档修改

* style: 💄 更新版本

* style: 💄 cargo.lock版本更新

* feat(husky): 增强Git标签版本校验脚本

添加了对Git标签指向提交与release分支一致性的校验功能。
脚本现在会检查tag指向的提交是否与当前或任何release分支的最新提交一致，
确保发布流程的准确性。如果当前在release分支上，直接比较分支HEAD与tag指向的提交；
如果不在release分支上，则遍历所有release分支查找匹配的提交。

* feat: ✨ 国际化

* fix: 🐛 修复国际化问题；修复字体大小未生效问题

* fix: 🐛 修复部分问题

* docs: 📝 update readme

src/views/Home/PrizeList.vue

@@ -1,459 +0,0 @@
-<script setup lang='ts'>
-import type { IPrizeConfig } from '../../types/storeType'
-import defaultPrizeImage from '@/assets/images/龙.png'
-import ImageSync from '@/components/ImageSync/index.vue'
-
-import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
-import i18n from '@/locales/i18n'
-import useStore from '@/store'
-
-import { storeToRefs } from 'pinia'
-
-import { onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-const prizeConfig = useStore().prizeConfig
-const globalConfig = useStore().globalConfig
-const system = useStore().system
-const { getPrizeConfig: localPrizeList, getCurrentPrize: currentPrize, getTemporaryPrize: temporaryPrize } = storeToRefs(prizeConfig)
-const { getIsShowPrizeList: isShowPrizeList, getImageList: localImageList } = storeToRefs(globalConfig)
-const { getIsMobile: isMobile } = storeToRefs(system)
-const prizeListRef = ref()
-const prizeListContainerRef = ref()
-
-const temporaryPrizeRef = ref()
-const selectedPrize = ref<IPrizeConfig | null>()
-// 获取prizeListRef高度
-function getPrizeListHeight() {
-  let height = 200
-  if (prizeListRef.value) {
-    height = (prizeListRef.value as HTMLElement).offsetHeight
-  }
-
-  return height
-}
-const prizeShow = ref(structuredClone(isShowPrizeList.value))
-
-function addTemporaryPrize() {
-  temporaryPrizeRef.value.showModal()
-}
-
-function deleteTemporaryPrize() {
-  temporaryPrize.value.isShow = false
-  prizeConfig.setTemporaryPrize(temporaryPrize.value)
-}
-function submitTemporaryPrize() {
-  if (!temporaryPrize.value.name || !temporaryPrize.value.count) {
-    // eslint-disable-next-line no-alert
-    alert(i18n.global.t('error.completeInformation'))
-    return
-  }
-  temporaryPrize.value.isShow = true
-  temporaryPrize.value.id = new Date().getTime().toString()
-  prizeConfig.setCurrentPrize(temporaryPrize.value)
-}
-function selectPrize(item: IPrizeConfig) {
-  selectedPrize.value = item
-  selectedPrize.value.isUsedCount = 0
-  selectedPrize.value.isUsed = false
-
-  if (selectedPrize.value.separateCount.countList.length > 1) {
-    return
-  }
-  selectedPrize.value.separateCount = {
-    enable: true,
-    countList: [
-      {
-        id: '0',
-        count: item.count,
-        isUsedCount: 0,
-      },
-    ],
-  }
-}
-function submitData(value: any) {
-  selectedPrize.value!.separateCount.countList = value
-  selectedPrize.value = null
-}
-function changePersonCount() {
-  temporaryPrize.value.separateCount.countList = []
-}
-function setCurrentPrize() {
-  for (let i = 0; i < localPrizeList.value.length; i++) {
-    if (localPrizeList.value[i].isUsedCount < localPrizeList.value[i].count) {
-      prizeConfig.setCurrentPrize(localPrizeList.value[i])
-
-      return
-    }
-  }
-}
-onMounted(() => {
-  prizeListContainerRef.value.style.height = `${getPrizeListHeight()}px`
-  setCurrentPrize()
-})
-</script>
-
-<template>
-  <div class="flex items-center">
-    <dialog id="my_modal_1" ref="temporaryPrizeRef" class="border-none modal">
-      <div class="modal-box">
-        <h3 class="text-lg font-bold">
-          {{ t('dialog.titleTemporary') }}
-        </h3>
-        <div class="flex flex-col gap-3">
-          <label class="flex w-full max-w-xs">
-            <div class="label">
-              <span class="label-text">{{ t('table.name') }}:</span>
-            </div>
-            <input
-              v-model="temporaryPrize.name" type="text" :placeholder="t('placeHolder.name')"
-              class="max-w-xs input-sm input input-bordered"
-            >
-          </label>
-          <label class="flex w-full max-w-xs">
-            <div class="label">
-              <span class="label-text">{{ t('table.fullParticipation') }}</span>
-            </div>
-            <input
-              type="checkbox" :checked="temporaryPrize.isAll"
-              class="mt-2 border-solid checkbox checkbox-secondary border-1"
-              @change="temporaryPrize.isAll = !temporaryPrize.isAll"
-            >
-          </label>
-          <label class="flex w-full max-w-xs">
-            <div class="label">
-              <span class="label-text">{{ t('table.setLuckyNumber') }}</span>
-            </div>
-            <input
-              v-model="temporaryPrize.count" type="number" :placeholder="t('placeHolder.winnerCount')" class="max-w-xs input-sm input input-bordered"
-              @change="changePersonCount"
-            >
-          </label>
-          <label class="flex w-full max-w-xs">
-            <div class="label">
-              <span class="label-text">{{ t('table.luckyPeopleNumber') }}</span>
-            </div>
-            <input
-              v-model="temporaryPrize.isUsedCount" disabled type="number" :placeholder="t('placeHolder.winnerCount')"
-              class="max-w-xs input-sm input input-bordered"
-            >
-          </label>
-          <label v-if="temporaryPrize.separateCount" class="flex w-full max-w-xs">
-            <div class="label">
-              <span class="label-text">{{ t('table.onceNumber') }}</span>
-            </div>
-            <div class="flex justify-start h-full" @click="selectPrize(temporaryPrize)">
-              <ul
-                v-if="temporaryPrize.separateCount.countList.length"
-                class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
-              >
-                <li
-                  v-for="se in temporaryPrize.separateCount.countList"
-                  :key="se.id" class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
-                >
-                  <div
-                    class="flex items-center justify-center w-full h-full tooltip"
-                    :data-tip="`${t('tooltip.doneCount') + se.isUsedCount}/${se.count}`"
-                  >
-                    <div
-                      class="absolute left-0 z-50 h-full bg-blue-300/80"
-                      :style="`width:${se.isUsedCount * 100 / se.count}%`"
-                    />
-                    <span>{{ se.count }}</span>
-                  </div>
-                </li>
-              </ul>
-              <button v-else class="btn btn-secondary btn-xs">{{ t('button.setting') }}</button>
-            </div>
-          </label>
-          <label class="flex w-full max-w-xs">
-            <div class="label">
-              <span class="label-text">{{ t('table.image') }}</span>
-            </div>
-            <select v-model="temporaryPrize.picture" class="flex-1 w-12 select select-warning select-sm">
-              <option v-if="temporaryPrize.picture.id" :value="{ id: '', name: '', url: '' }">❌
-              </option>
-              <option disabled selected>{{ t('table.selectPicture') }}</option>
-              <option v-for="picItem in localImageList" :key="picItem.id" class="w-auto" :value="picItem">{{
-                picItem.name }}
-              </option>
-            </select>
-          </label>
-        </div>
-        <div class="modal-action">
-          <form method="dialog" class="flex gap-3">
-            <button class="btn btn-sm" @click="submitTemporaryPrize">
-              {{ t('button.confirm') }}
-            </button>
-            <button class="btn btn-sm">
-              {{ t('button.cancel') }}
-            </button>
-          </form>
-        </div>
-      </div>
-    </dialog>
-    <EditSeparateDialog
-      :total-number="selectedPrize?.count" :separated-number="selectedPrize?.separateCount.countList"
-      @submit-data="submitData"
-    />
-    <div ref="prizeListContainerRef">
-      <div v-if="temporaryPrize.isShow" class="h-20 w-72" :class="temporaryPrize.isShow ? 'current-prize' : ''">
-        <div class="relative flex flex-row items-center justify-between w-full h-full shadow-xl card bg-base-100">
-          <div
-            v-if="temporaryPrize.isUsed"
-            class="absolute z-50 w-full h-full bg-gray-800/70 item-mask rounded-xl"
-          />
-          <figure class="w-10 h-10 rounded-xl">
-            <ImageSync v-if="temporaryPrize.picture.url" :img-item="temporaryPrize.picture" />
-            <img v-else :src="defaultPrizeImage" alt="Prize" class="object-cover h-full rounded-xl">
-          </figure>
-          <div class="items-center p-0 text-center card-body">
-            <div class="tooltip tooltip-left" :data-tip="temporaryPrize.name">
-              <h2 class="p-0 m-0 overflow-hidden w-28 card-title whitespace-nowrap text-ellipsis">
-                {{
-                  temporaryPrize.name }}
-              </h2>
-            </div>
-            <p class="absolute z-40 p-0 m-0 text-gray-300/80 mt-9">
-              {{ temporaryPrize.isUsedCount }}/{{
-                temporaryPrize.count }}
-            </p>
-            <progress
-              class="w-3/4 h-6 progress progress-primary" :value="temporaryPrize.isUsedCount"
-              :max="temporaryPrize.count"
-            />
-            <!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->
-          </div>
-          <div class="flex flex-col gap-1 mr-2">
-            <div class="tooltip tooltip-left" :data-tip="t('tooltip.edit')">
-              <div class="cursor-pointer hover:text-blue-400" @click="addTemporaryPrize">
-                <svg-icon name="edit" />
-              </div>
-            </div>
-            <div class="tooltip tooltip-left" :data-tip="t('tooltip.delete')">
-              <div class="cursor-pointer hover:text-blue-400" @click="deleteTemporaryPrize">
-                <svg-icon name="delete" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <transition name="prize-list" :appear="true">
-        <div v-if="prizeShow && !isMobile && !temporaryPrize.isShow" class="flex items-center">
-          <ul ref="prizeListRef" class="flex flex-col gap-1 p-2 rounded-xl bg-slate-500/50">
-            <li
-              v-for="item in localPrizeList" :key="item.id"
-              :class="currentPrize.id === item.id ? 'current-prize' : ''"
-            >
-              <div
-                v-if="item.isShow"
-                class="relative flex flex-row items-center justify-between w-64 h-20 shadow-xl card bg-base-100"
-              >
-                <div
-                  v-if="item.isUsed"
-                  class="absolute z-50 w-full h-full bg-gray-800/70 item-mask rounded-xl"
-                />
-                <figure class="w-10 h-10 rounded-xl">
-                  <ImageSync v-if="item.picture.url" :img-item="item.picture" />
-                  <img
-                    v-else :src="defaultPrizeImage" alt="Prize"
-                    class="object-cover h-full rounded-xl"
-                  >
-                </figure>
-                <div class="items-center p-0 text-center card-body">
-                  <div class="tooltip tooltip-left" :data-tip="item.name">
-                    <h2
-                      class="w-24 p-0 m-0 overflow-hidden text-center card-title whitespace-nowrap text-ellipsis"
-                    >
-                      {{ item.name }}
-                    </h2>
-                  </div>
-                  <p class="absolute z-40 p-0 m-0 text-gray-300/80 mt-9">
-                    {{ item.isUsedCount }}/{{
-                      item.count }}
-                  </p>
-                  <progress
-                    class="w-3/4 h-6 progress progress-primary" :value="item.isUsedCount"
-                    :max="item.count"
-                  />
-                  <!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->
-                </div>
-              </div>
-            </li>
-          </ul>
-          <div class="flex flex-col gap-3">
-            <div class="tooltip tooltip-right" :data-tip="t('tooltip.prizeList')">
-              <div
-                class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
-                @click="prizeShow = !prizeShow"
-              >
-                <svg-icon name="arrow_left" class="w-full h-full" />
-              </div>
-            </div>
-            <div class="tooltip tooltip-right" :data-tip="t('tooltip.addActivity')">
-              <div
-                class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
-                @click="addTemporaryPrize"
-              >
-                <svg-icon name="add" class="w-full h-full" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </transition>
-    </div>
-
-    <transition name="prize-operate" :appear="true">
-      <div v-show="!prizeShow" class="tooltip tooltip-right" :data-tip="t('tooltip.prizeList')">
-        <div
-          class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
-          @click="prizeShow = !prizeShow"
-        >
-          <svg-icon name="arrow_right" class="w-full h-full" />
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<style lang='scss' scoped>
-.label {
-    width: 120px;
-}
-
-.prize-list-enter-active {
-    -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-    animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-}
-
-.prize-list-leave-active {
-    -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-    animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-}
-
-.prize-operate-enter-active {
-    // 延时显示
-    animation: show-operate 0.6s;
-    -webkit-animation: show-operate 0.6s;
-}
-
-.current-prize {
-    position: relative;
-    display: block;
-    overflow: hidden;
-    isolation: isolate;
-
-    border-radius: 20px;
-    padding: 3px;
-}
-
-.current-prize::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 400%;
-    height: 100%;
-    background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
-    background-size: 25% 100%;
-    animation: an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop .75s linear infinite;
-    // animation-play-state: paused;
-    translate: -5% 0%;
-    transition: translate 0.25s ease-out;
-    animation-play-state: running;
-    transition-duration: 0.75s;
-    translate: 0% 0%;
-}
-
-.current-prize::after {
-    content: "";
-    position: absolute;
-    inset: 4px;
-    border-top-left-radius: 20px;
-    border-bottom-right-radius: 20px;
-    z-index: -1;
-}
-
-@keyframes an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop {
-    to {
-        transform: translateX(-25%);
-    }
-}
-
-@-webkit-keyframes slide-right {
-    0% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-    }
-
-    100% {
-        -webkit-transform: translateX(30px);
-        transform: translateX(30px);
-    }
-}
-
-@keyframes slide-right {
-    0% {
-        -webkit-transform: translateX(-200px);
-        transform: translateX(-200px);
-    }
-
-    100% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-    }
-}
-
-@-webkit-keyframes slide-left {
-    0% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-    }
-
-    100% {
-        -webkit-transform: translateX(-100px);
-        transform: translateX(-100px);
-    }
-}
-
-@keyframes slide-left {
-    0% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-    }
-
-    100% {
-        -webkit-transform: translateX(-400px);
-        transform: translateX(-400px);
-    }
-}
-
-@-webkit-keyframes show-operate {
-    0% {
-        opacity: 0;
-    }
-
-    99% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-@keyframes show-operate {
-    0% {
-        opacity: 0;
-    }
-
-    99% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-</style>

src/views/Home/components/HeaderTitle/index.vue

@@ -0,0 +1,115 @@
+<script setup lang='ts'>
+import type { CSSProperties } from 'vue'
+import { computed, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { rgbToHex } from '@/utils/color'
+
+interface Props {
+  textSize: number
+  textColor: string
+  topTitle: string
+  tableData: any[]
+  setDefaultPersonList: () => void
+  isInitialDone: boolean
+  titleFont: string
+  titleFontSyncGlobal: boolean
+}
+
+const props = defineProps<Props>()
+const router = useRouter()
+const { tableData, textSize, textColor, topTitle, setDefaultPersonList, titleFont, titleFontSyncGlobal } = toRefs(props)
+const isTextColor = computed(() => {
+  return rgbToHex(textColor.value) !== '#00000000'
+})
+const titleStyle = computed(() => {
+  const style: CSSProperties = {
+    fontSize: `${textSize.value * 1.5}px`,
+  }
+  if (!titleFontSyncGlobal.value) {
+    style.fontFamily = titleFont.value
+  }
+  if (isTextColor.value) {
+    style.color = textColor.value
+  }
+
+  return style
+})
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="absolute z-10 flex flex-col items-center justify-center -translate-x-1/2 left-1/2">
+    <h2
+      class="pt-12 m-0 mb-12 tracking-wide text-center leading-12"
+      :class="{ 'animate-pulse bg-linear-to-r from-primary via-secondary to-accent bg-clip-text text-transparent': !isTextColor }"
+      :style="titleStyle"
+    >
+      {{ topTitle }}
+    </h2>
+    <div v-if="isInitialDone" class="flex gap-3">
+      <button
+        v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
+        @click="router.push('config')"
+      >
+        {{ t('button.noInfoAndImport') }}
+      </button>
+      <button
+        v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
+        @click="setDefaultPersonList"
+      >
+        {{ t('button.useDefault') }}
+      </button>
+    </div>
+    <!-- 加载中 -->
+    <div v-else class="flex gap-3 items-center">
+      <span class="loading loading-spinner loading-xl" />
+      <span>{{ t('button.loading') }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.header-title {
+    -webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
+    animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
+}
+
+@-webkit-keyframes tracking-in-expand-fwd {
+    0% {
+        letter-spacing: -0.5em;
+        -webkit-transform: translateZ(-700px);
+        transform: translateZ(-700px);
+        opacity: 0;
+    }
+
+    40% {
+        opacity: 0.6;
+    }
+
+    100% {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        opacity: 1;
+    }
+}
+
+@keyframes tracking-in-expand-fwd {
+    0% {
+        letter-spacing: -0.5em;
+        -webkit-transform: translateZ(-700px);
+        transform: translateZ(-700px);
+        opacity: 0;
+    }
+
+    40% {
+        opacity: 0.6;
+    }
+
+    100% {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        opacity: 1;
+    }
+}
+</style>

src/views/Home/components/OptionsButton/index.scss

@@ -0,0 +1,335 @@
+#menu {
+    position: absolute;
+    z-index: 100;
+    width: 100%;
+    bottom: 50px;
+    text-align: center;
+    margin: 0 auto;
+    font-size: 32px;
+
+    .start {
+        // 居中
+        display: flex;
+        justify-content: center;
+    }
+
+    .btn-stars {
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 13rem;
+        overflow: hidden;
+        height: 3rem;
+        background-size: 300% 300%;
+        backdrop-filter: blur(1rem);
+        border-radius: 5rem;
+        transition: 0.5s;
+        animation: gradient_301 5s ease infinite;
+        border: double 4px transparent;
+        background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%, #FE53BB 45%, #8F51EA 67%, #0044ff 87%);
+        background-origin: border-box;
+        background-clip: content-box, border-box;
+        -webkit-animation: pulsate-fwd 1.2s ease-in-out infinite both;
+        animation: pulsate-fwd 1.2s ease-in-out infinite both;
+
+        &:hover #container-stars {
+            z-index: 1;
+            background-color: #212121;
+        }
+
+        &:hover {
+            transform: scale(1.1)
+        }
+
+        &:active {
+            border: double 4px #FE53BB;
+            background-origin: border-box;
+            background-clip: content-box, border-box;
+            animation: none;
+        }
+
+        &:active .circle {
+            background: #FE53BB;
+        }
+
+        strong {
+            z-index: 2;
+            font-family: 'Avalors Personal Use';
+            font-size: 12px;
+            letter-spacing: 5px;
+            color: #FFFFFF;
+            text-shadow: 0 0 4px white;
+        }
+
+        #container-stars {
+            position: absolute;
+            z-index: -1;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            transition: 0.5s;
+            backdrop-filter: blur(1rem);
+            border-radius: 5rem;
+
+            #stars {
+                position: relative;
+                background: transparent;
+                width: 200rem;
+                height: 200rem;
+
+                &::after {
+                    content: "";
+                    position: absolute;
+                    top: -10rem;
+                    left: -100rem;
+                    width: 100%;
+                    height: 100%;
+                    animation: animStarRotate 90s linear infinite;
+                }
+
+                &::after {
+                    background-image: radial-gradient(#ffffff 1px, transparent 1%);
+                    background-size: 50px 50px;
+                }
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    top: 0;
+                    left: -50%;
+                    width: 170%;
+                    height: 500%;
+                    animation: animStar 60s linear infinite;
+                }
+
+                &::before {
+                    background-image: radial-gradient(#ffffff 1px, transparent 1%);
+                    background-size: 50px 50px;
+                    opacity: 0.5;
+                }
+            }
+
+
+        }
+
+        #glow {
+            position: absolute;
+            display: flex;
+            width: 12rem;
+
+            .circle {
+                width: 100%;
+                height: 30px;
+                filter: blur(2rem);
+                animation: pulse_3011 4s infinite;
+                z-index: -1;
+
+                &:nth-of-type(1) {
+                    background: rgba(254, 83, 186, 0.636);
+                }
+
+                &:nth-of-type(2) {
+                    background: rgba(142, 81, 234, 0.704);
+                }
+            }
+        }
+    }
+
+    .btn-neon {
+        --glow-color: rgb(217, 176, 255);
+        --glow-spread-color: rgba(191, 123, 255, 0.781);
+        --enhanced-glow-color: rgb(231, 206, 255);
+        --btn-color: rgb(100, 61, 136);
+        -webkit-animation: pulsate-fwd 0.9s ease-in-out infinite both;
+        animation: pulsate-fwd 0.9s ease-in-out infinite both;
+        cursor: pointer;
+        border: .25em solid var(--glow-color);
+        padding: 1em 3em;
+        color: var(--glow-color);
+        font-size: 15px;
+        font-weight: bold;
+        background-color: var(--btn-color);
+        border-radius: 1em;
+        outline: none;
+        box-shadow: 0 0 1em .25em var(--glow-color),
+            0 0 4em 1em var(--glow-spread-color),
+            inset 0 0 .75em .25em var(--glow-color);
+        text-shadow: 0 0 .5em var(--glow-color);
+        position: relative;
+        transition: all 0.3s;
+        -webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
+        animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
+
+        &::after {
+            pointer-events: none;
+            content: "";
+            position: absolute;
+            top: 120%;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            background-color: var(--glow-spread-color);
+            filter: blur(2em);
+            opacity: .7;
+            transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
+        }
+
+        &:hover {
+            color: var(--btn-color);
+            background-color: var(--glow-color);
+            box-shadow: 0 0 1em .25em var(--glow-color),
+                0 0 4em 2em var(--glow-spread-color),
+                inset 0 0 .75em .25em var(--glow-color);
+        }
+
+        &:active {
+            box-shadow: 0 0 0.6em .25em var(--glow-color),
+                0 0 2.5em 2em var(--glow-spread-color),
+                inset 0 0 .5em .25em var(--glow-color);
+        }
+    }
+
+    .btn-cancel {
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 13rem;
+        overflow: hidden;
+        height: 3rem;
+        background-size: 300% 300%;
+        backdrop-filter: blur(1rem);
+        border-radius: 5rem;
+        transition: 0.5s;
+        animation: gradient_301 5s ease infinite;
+        border: double 4px transparent;
+        background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%, #FE53BB 45%, #8F51EA 67%, #0044ff 87%);
+        background-origin: border-box;
+        background-clip: content-box, border-box;
+    }
+}
+
+@keyframes animStar {
+    from {
+        transform: translateY(0);
+    }
+
+    to {
+        transform: translateY(-135rem);
+    }
+}
+
+@keyframes animStarRotate {
+    from {
+        transform: rotate(360deg);
+    }
+
+    to {
+        transform: rotate(0);
+    }
+}
+
+@keyframes gradient_301 {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+@keyframes pulse_3011 {
+    0% {
+        transform: scale(0.75);
+        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
+    }
+
+    70% {
+        transform: scale(1);
+        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+    }
+
+    100% {
+        transform: scale(0.75);
+        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+    }
+}
+
+// 按钮动画
+@-webkit-keyframes pulsate-fwd {
+    0% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+
+    50% {
+        -webkit-transform: scale(1.1);
+        transform: scale(1.1);
+    }
+
+    100% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+}
+
+@keyframes pulsate-fwd {
+    0% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+
+    50% {
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+
+    100% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+}
+
+@-webkit-keyframes tracking-in-expand-fwd {
+    0% {
+        letter-spacing: -0.5em;
+        -webkit-transform: translateZ(-700px);
+        transform: translateZ(-700px);
+        opacity: 0;
+    }
+
+    40% {
+        opacity: 0.6;
+    }
+
+    100% {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        opacity: 1;
+    }
+}
+
+@keyframes tracking-in-expand-fwd {
+    0% {
+        letter-spacing: -0.5em;
+        -webkit-transform: translateZ(-700px);
+        transform: translateZ(-700px);
+        opacity: 0;
+    }
+
+    40% {
+        opacity: 0.6;
+    }
+
+    100% {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        opacity: 1;
+    }
+}

src/views/Home/components/OptionsButton/index.vue

@@ -0,0 +1,79 @@
+<script setup lang='ts'>
+import { toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { LotteryStatus } from '@/views/Home/type'
+
+interface Props {
+  currentStatus: LotteryStatus
+  tableData: any[]
+  enterLottery: () => void
+  startLottery: () => void
+  stopLottery: () => void
+  continueLottery: () => void
+  quitLottery: () => void
+}
+const props = defineProps<Props>()
+
+const { currentStatus, tableData, enterLottery, startLottery, stopLottery, continueLottery, quitLottery } = toRefs(props)
+const { t } = useI18n()
+</script>
+
+<template>
+  <div id="menu">
+    <button v-if="currentStatus === LotteryStatus.init && tableData.length > 0" class="btn-neon" @click="enterLottery">
+      {{ t('button.enterLottery') }}
+    </button>
+
+    <div v-if="currentStatus === LotteryStatus.ready" class="start">
+      <button class="btn-stars" @click="startLottery">
+        <strong>{{ t('button.start') }}</strong>
+        <div id="container-stars">
+          <div id="stars" />
+        </div>
+
+        <div id="glow">
+          <div class="circle" />
+          <div class="circle" />
+        </div>
+      </button>
+    </div>
+
+    <button v-if="currentStatus === LotteryStatus.running" class="btn-neon btn glass btn-lg" @click="stopLottery">
+      {{ t('button.selectLucky') }}
+    </button>
+
+    <div v-if="currentStatus === LotteryStatus.end" class="flex justify-center gap-6 enStop">
+      <div class="start">
+        <button class="btn-stars" @click="continueLottery">
+          <strong>{{ t('button.continue') }}</strong>
+          <div id="container-stars">
+            <div id="stars" />
+          </div>
+
+          <div id="glow">
+            <div class="circle" />
+            <div class="circle" />
+          </div>
+        </button>
+      </div>
+
+      <div class="start">
+        <button class="btn-stars btn-cancel" @click="quitLottery">
+          <strong>{{ t('button.cancel') }}</strong>
+          <div id="container-stars">
+            <div id="stars" />
+          </div>
+
+          <div id="glow">
+            <div class="circle" />
+            <div class="circle" />
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './index.scss'
+</style>

src/views/Home/components/PrizeList/index.scss

@@ -0,0 +1,97 @@
+.label {
+    width: 120px;
+}
+
+.prize-list-enter-active {
+    -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+.prize-list-leave-active {
+    -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+.prize-operate-enter-active {
+    // 延时显示
+    animation: show-operate 0.6s;
+    -webkit-animation: show-operate 0.6s;
+}
+
+
+
+@-webkit-keyframes slide-right {
+    0% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+
+    100% {
+        -webkit-transform: translateX(30px);
+        transform: translateX(30px);
+    }
+}
+
+@keyframes slide-right {
+    0% {
+        -webkit-transform: translateX(-200px);
+        transform: translateX(-200px);
+    }
+
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+
+@-webkit-keyframes slide-left {
+    0% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+
+    100% {
+        -webkit-transform: translateX(-100px);
+        transform: translateX(-100px);
+    }
+}
+
+@keyframes slide-left {
+    0% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+
+    100% {
+        -webkit-transform: translateX(-400px);
+        transform: translateX(-400px);
+    }
+}
+
+@-webkit-keyframes show-operate {
+    0% {
+        opacity: 0;
+    }
+
+    99% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes show-operate {
+    0% {
+        opacity: 0;
+    }
+
+    99% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

src/views/Home/components/PrizeList/index.vue

@@ -0,0 +1,68 @@
+<script setup lang='ts'>
+import type { IPrizeConfig } from '@/types/storeType'
+import { ref } from 'vue'
+// import { useI18n } from 'vue-i18n'
+import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
+import OfficialPrizeList from './parts/OfficialPrizeList/index.vue'
+import OperationButton from './parts/OperationButton.vue'
+import TemporaryDialog from './parts/TemporaryDialog.vue'
+import TemporaryList from './parts/TemporaryList.vue'
+import { usePrizeList } from './usePrizeList'
+
+const temporaryPrizeRef = ref()
+const {
+  temporaryPrize,
+  changePersonCount,
+  selectPrize,
+  localImageList,
+  addTemporaryPrize,
+  submitTemporaryPrize,
+  submitData,
+  deleteTemporaryPrize,
+  prizeShow,
+  currentPrize,
+  localPrizeList,
+  isMobile,
+} = usePrizeList(temporaryPrizeRef)
+const selectedPrize = ref<IPrizeConfig | null>()
+</script>
+
+<template>
+  <div v-if="localPrizeList.length" class="flex h-2/3 items-center overflow-hidden">
+    <TemporaryDialog
+      ref="temporaryPrizeRef"
+      v-model:temporary-prize="temporaryPrize"
+      :change-person-count="changePersonCount"
+      :select-prize="selectPrize"
+      :local-image-list="localImageList"
+      :add-temporary-prize="addTemporaryPrize"
+      :submit-temporary-prize="submitTemporaryPrize"
+    />
+    <EditSeparateDialog
+      :total-number="selectedPrize?.count" :separated-number="selectedPrize?.separateCount.countList"
+      @submit-data="submitData"
+    />
+    <div class="h-full">
+      <TemporaryList
+        v-if="temporaryPrize.isShow"
+        :temporary-prize="temporaryPrize"
+        :add-temporary-prize="addTemporaryPrize"
+        :delete-temporary-prize="deleteTemporaryPrize"
+      />
+      <OfficialPrizeList
+        v-show="!temporaryPrize.isShow"
+        v-model:prize-show="prizeShow"
+        :temporary-prize-show="temporaryPrize.isShow"
+        :local-prize-list="localPrizeList"
+        :current-prize="currentPrize"
+        :is-mobile="isMobile"
+        :add-temporary-prize="addTemporaryPrize"
+      />
+    </div>
+    <OperationButton v-if="!temporaryPrize.isShow" v-model:prize-show="prizeShow" :add-temporary-prize="addTemporaryPrize" />
+  </div>
+</template>
+
+<style lang='scss' scoped>
+@use "./index.scss";
+</style>

src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.scss

@@ -0,0 +1,140 @@
+.scroll-button::before,
+.scroll-button::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    transform: translate(12px 12px);
+}
+
+.scroll-button::before {
+    transform: translate(0, -6px);
+    opacity: 0.6;
+}
+
+.scroll-button::after {
+    transform: translate(0, 6px);
+    opacity: 0.4;
+}
+
+/* 添加动画效果 */
+.scroll-button-down {
+    animation: bounce-down 2s infinite;
+}
+
+/* 添加动画效果 */
+.scroll-button-up {
+    animation: bounce-up 2s infinite;
+}
+
+.scroll-container {
+    &::before {
+        content: '';
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        border-radius: 12px;
+    }
+}
+
+.scroll-container-end {
+    height: 100%;
+
+    &::before {
+        content: '';
+        position: absolute;
+        height: 90%;
+        width: 100%;
+        border-radius: 12px;
+    }
+}
+
+.no-scroll {}
+
+@keyframes bounce-down {
+
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
+        transform: translateY(0);
+    }
+
+    40% {
+        transform: translateY(-5px);
+    }
+
+    60% {
+        transform: translateY(-2px);
+    }
+}
+
+@keyframes bounce-up {
+
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
+        transform: translateY(0);
+    }
+
+    40% {
+        transform: translateY(5px);
+    }
+
+    60% {
+        transform: translateY(2px);
+    }
+}
+
+.scroll-button:hover {
+    transform: translateY(-3px);
+}
+
+.current-prize {
+    position: relative;
+    display: block;
+    overflow: clip;
+    isolation: isolate;
+
+    border-radius: 20px;
+    padding: 3px;
+}
+
+.current-prize::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 400%;
+    height: 100%;
+    background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
+    background-size: 25% 100%;
+    animation: an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop .75s linear infinite;
+    // animation-play-state: paused;
+    translate: -5% 0%;
+    transition: translate 0.25s ease-out;
+    animation-play-state: running;
+    transition-duration: 0.75s;
+    translate: 0% 0%;
+}
+
+.current-prize::after {
+    content: "";
+    position: absolute;
+    inset: 4px;
+    border-top-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    z-index: -1;
+}
+
+@keyframes an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop {
+    to {
+        transform: translateX(-25%);
+    }
+}

src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.vue

@@ -0,0 +1,123 @@
+<script setup lang='ts'>
+import type { IPrizeConfig } from '@/types/storeType'
+import { ref, watch } from 'vue'
+import defaultPrizeImage from '@/assets/images/龙.png'
+import { useGsap } from './useGsap'
+
+const props = defineProps<{
+  isMobile: boolean
+  localPrizeList: IPrizeConfig[]
+  currentPrize: IPrizeConfig
+  temporaryPrizeShow: boolean
+  addTemporaryPrize: () => void
+}>()
+
+const prizeShow = defineModel<boolean>('prizeShow')
+const scrollContainerRef = ref<any>(null)
+const ulContainerRef = ref<any>(null)
+const isScroll = ref(false)
+const liRefs = ref([])
+
+const {
+  showUpButton,
+  showDownButton,
+  handleScroll,
+} = useGsap(scrollContainerRef, liRefs, isScroll, prizeShow, props.temporaryPrizeShow)
+
+// 获取ulContainerRef的高度
+function getUlContainerHeight() {
+  if (ulContainerRef.value) {
+    return ulContainerRef.value.offsetHeight
+  }
+  return 0
+}
+// 获取scrollContainerRef的高度
+function getScrollContainerHeight() {
+  if (scrollContainerRef.value) {
+    return scrollContainerRef.value.offsetHeight
+  }
+  return 0
+}
+
+function getIsScroll() {
+  const ulHeight = getUlContainerHeight()
+  const scrollHeight = getScrollContainerHeight()
+  if (ulHeight > scrollHeight + 20) {
+    isScroll.value = true
+  }
+  else {
+    isScroll.value = false
+    scrollContainerRef.value.style.height = `${ulHeight}px`
+  }
+}
+
+watch ([prizeShow, () => props.temporaryPrizeShow], (val) => {
+  if (!val[0]) {
+    return
+  }
+  setTimeout (() => {
+    getIsScroll()
+  }, 0)
+}, { immediate: true })
+</script>
+
+<template>
+  <transition name="prize-list" class="h-full" :appear="true">
+    <div v-show="prizeShow && !isMobile && !temporaryPrizeShow" class="flex items-center h-full relative ">
+      <div v-if="isScroll" class="w-full h-16 flex justify-center scroll-button scroll-button-up absolute top-0 z-50">
+        <SvgIcon v-show="showUpButton" name="chevron-up" size="64px" class="text-gray-200/80 cursor-pointer" @click="handleScroll(-150)" />
+      </div>
+      <div ref="scrollContainerRef" :class="isScroll ? (showDownButton ? 'scroll-container' : 'scroll-container-end') : 'no-scroll bg-slate-500/50'" class="h-full no-before overflow-y-auto overflow-x-hidden  scroll-smooth hide-scrollbar before:bg-slate-500/50 z-20 rounded-xl">
+        <ul ref="ulContainerRef" class="flex flex-col gap-1 p-2">
+          <li
+            v-for="item in localPrizeList"
+            ref="liRefs" :key="item.id"
+            :class="currentPrize.id === item.id ? 'current-prize' : ''"
+          >
+            <div
+              v-if="item.isShow"
+              class="relative flex flex-row items-center justify-between w-64 h-20 px-3 gap-6 shadow-xl card bg-base-100"
+            >
+              <div
+                v-if="item.isUsed"
+                class="absolute z-50 w-full left-0 h-full bg-gray-800/70 item-mask rounded-xl"
+              />
+              <figure class="w-10 h-10 rounded-xl">
+                <ImageSync v-if="item.picture.url" :img-item="item.picture" />
+                <img
+                  v-else :src="defaultPrizeImage" alt="Prize"
+                  class="object-cover h-full rounded-xl"
+                >
+              </figure>
+              <div class="items-center p-0 card-body">
+                <div class="tooltip tooltip-left w-full pl-1" :data-tip="item.name">
+                  <h2
+                    class="w-24 p-0 m-0 overflow-hidden card-title whitespace-nowrap text-ellipsis"
+                  >
+                    {{ item.name }}
+                  </h2>
+                </div>
+                <p class="absolute z-40 p-0 m-0 text-gray-300/80 mt-9">
+                  {{ item.isUsedCount }}/{{
+                    item.count }}
+                </p>
+                <progress
+                  class="w-full h-6 progress bg-[#52545b] progress-primary" :value="item.isUsedCount"
+                  :max="item.count"
+                />
+              </div>
+            </div>
+          </li>
+        </ul>
+        <div v-if="isScroll" class="h-24" />
+      </div>
+      <div v-if="isScroll" class="w-full h-16 flex justify-center scroll-button scroll-button-down absolute bottom-0 z-50">
+        <SvgIcon v-show="showDownButton" name="chevron-down" size="64px" class="text-gray-200/80 cursor-pointer" @click="handleScroll(150)" />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style scoped lang="scss">
+@use "./index.scss";
+</style>

src/views/Home/components/PrizeList/parts/OfficialPrizeList/useGsap.ts

@@ -0,0 +1,93 @@
+import type { Ref } from 'vue'
+import gsap from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import { onBeforeUnmount, onUnmounted, ref, watch } from 'vue'
+
+export function useGsap(scrollContainerRef: any, liRefs: any, isScroll: Ref<boolean>, prizeShow: any, temporaryPrizeShow: boolean) {
+    gsap.registerPlugin(ScrollTrigger)
+
+    const ctx = ref()
+    const showUpButton = ref(false)
+    const showDownButton = ref(true)
+    function initGsapAnimation() {
+        ctx.value = gsap.context(() => {
+            liRefs.value.forEach((box: any) => {
+                gsap.fromTo(box, { rotationX: -90, rotateZ: -20, opacity: 0 }, {
+                    rotationX: 0,
+                    rotateZ: 0,
+                    opacity: 1,
+                    scrollTrigger: {
+                        trigger: box,
+                        scroller: scrollContainerRef.value, // <- Specify the scroller!
+                        start: 'bottom 100%',
+                        end: 'top 70%',
+                        scrub: true,
+                    },
+                })
+            })
+        }, scrollContainerRef.value) // <- Scope!
+    }
+
+    function disposeGsapAnimation() {
+        if (!ctx.value) {
+            return
+        }
+        ctx.value.revert() // <- Easy Cleanup!
+    }
+    function scrollHandler() {
+        const scrollHeight = scrollContainerRef.value.scrollHeight
+        const scrollTop = scrollContainerRef.value.scrollTop
+        const containerHeight = scrollContainerRef.value.clientHeight
+        // 滚动滑到底部
+        if (scrollTop + containerHeight >= scrollHeight - 10) {
+            showDownButton.value = false
+            showUpButton.value = true
+        }
+        // 在中间
+        else if (scrollTop && scrollTop + containerHeight < scrollHeight) {
+            showDownButton.value = true
+            showUpButton.value = true
+        }
+        // 滚动滑到顶部
+        else {
+            showDownButton.value = true
+            showUpButton.value = false
+        }
+    }
+    function listenScrollContainer() {
+        scrollContainerRef.value.addEventListener('scroll', scrollHandler)
+    }
+    function removeScrollContainer() {
+        if (scrollContainerRef.value) {
+            scrollContainerRef.value.removeEventListener('scroll', scrollHandler)
+        }
+    }
+
+    function handleScroll(h: number) {
+        scrollContainerRef.value.scrollTop += h
+    }
+    watch([isScroll, prizeShow, temporaryPrizeShow], ([val1, val2, val3]) => {
+        if (val1 && val2 && !val3) {
+            setTimeout(() => {
+                initGsapAnimation()
+                listenScrollContainer()
+            }, 0)
+        }
+    })
+    onBeforeUnmount(() => {
+        if (!isScroll.value)
+            return
+        removeScrollContainer()
+    })
+    onUnmounted(() => {
+        if (!isScroll.value)
+            return
+        disposeGsapAnimation()
+    })
+
+    return {
+        showUpButton,
+        showDownButton,
+        handleScroll,
+    }
+}

src/views/Home/components/PrizeList/parts/OperationButton.vue

@@ -0,0 +1,49 @@
+<script setup lang='ts'>
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  addTemporaryPrize: () => void
+}>()
+const { t } = useI18n()
+const prizeShow = defineModel('prizeShow', {
+  type: Boolean,
+  default: false,
+})
+</script>
+
+<template>
+  <transition name="prize-operate" :appear="true">
+    <div>
+      <div v-show="prizeShow" class="tooltip tooltip-right flex flex-col gap-3" :data-tip="t('tooltip.prizeList')">
+        <div class="tooltip tooltip-right" :data-tip="t('tooltip.prizeList')">
+          <div
+            class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
+            @click="prizeShow = !prizeShow"
+          >
+            <svg-icon name="arrow_left" class="w-full h-full" />
+          </div>
+        </div>
+        <div class="tooltip tooltip-right" :data-tip="t('tooltip.addActivity')">
+          <div
+            class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
+            @click="addTemporaryPrize"
+          >
+            <svg-icon name="add" class="w-full h-full" />
+          </div>
+        </div>
+      </div>
+      <div v-show="!prizeShow" class="tooltip tooltip-right" :data-tip="t('tooltip.prizeList')">
+        <div
+          class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
+          @click="prizeShow = !prizeShow"
+        >
+          <svg-icon name="arrow_right" class="w-full h-full" />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style scoped>
+
+</style>

src/views/Home/components/PrizeList/parts/TemporaryDialog.vue

@@ -0,0 +1,127 @@
+<script setup lang='ts'>
+import type { IImage, IPrizeConfig } from '@/types/storeType'
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  changePersonCount: () => void
+  selectPrize: (prize: IPrizeConfig) => void
+  localImageList: IImage[]
+  submitTemporaryPrize: () => void
+  addTemporaryPrize: () => void
+}>()
+const { t } = useI18n()
+const dialogRef = ref<HTMLDialogElement | null>(null)
+const temporaryPrize = defineModel<IPrizeConfig>('temporaryPrize', { required: true })
+function showDialog() {
+  dialogRef.value?.showModal()
+}
+defineExpose({
+  showDialog,
+  closed,
+})
+</script>
+
+<template>
+  <dialog id="my_modal_1" ref="dialogRef" class="border-none modal">
+    <div class="modal-box">
+      <h3 class="text-lg font-bold">
+        {{ t('dialog.titleTemporary') }}
+      </h3>
+      <div class="flex flex-col gap-3">
+        <label class="flex w-full max-w-xs">
+          <div class="label">
+            <span class="label-text">{{ t('table.name') }}:</span>
+          </div>
+          <input
+            v-model="temporaryPrize.name" type="text" :placeholder="t('placeHolder.name')"
+            class="max-w-xs input-sm input input-bordered"
+          >
+        </label>
+        <label class="flex w-full max-w-xs">
+          <div class="label">
+            <span class="label-text">{{ t('table.fullParticipation') }}</span>
+          </div>
+          <input
+            type="checkbox" :checked="temporaryPrize.isAll"
+            class="mt-2 border-solid checkbox checkbox-secondary border"
+            @change="temporaryPrize.isAll = !temporaryPrize.isAll"
+          >
+        </label>
+        <label class="flex w-full max-w-xs">
+          <div class="label">
+            <span class="label-text">{{ t('table.setLuckyNumber') }}</span>
+          </div>
+          <input
+            v-model="temporaryPrize.count" type="number" :placeholder="t('placeHolder.winnerCount')" class="max-w-xs input-sm input input-bordered"
+            @change="changePersonCount"
+          >
+        </label>
+        <label class="flex w-full max-w-xs">
+          <div class="label">
+            <span class="label-text">{{ t('table.luckyPeopleNumber') }}</span>
+          </div>
+          <input
+            v-model="temporaryPrize.isUsedCount" disabled type="number" :placeholder="t('placeHolder.winnerCount')"
+            class="max-w-xs input-sm input input-bordered"
+          >
+        </label>
+        <label v-if="temporaryPrize.separateCount" class="flex w-full max-w-xs">
+          <div class="label">
+            <span class="label-text">{{ t('table.onceNumber') }}</span>
+          </div>
+          <div class="flex justify-start h-full" @click="selectPrize(temporaryPrize)">
+            <ul
+              v-if="temporaryPrize.separateCount.countList.length"
+              class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
+            >
+              <li
+                v-for="se in temporaryPrize.separateCount.countList"
+                :key="se.id" class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
+              >
+                <div
+                  class="flex items-center justify-center w-full h-full tooltip"
+                  :data-tip="`${t('tooltip.doneCount') + se.isUsedCount}/${se.count}`"
+                >
+                  <div
+                    class="absolute left-0 z-50 h-full bg-blue-300/80"
+                    :style="`width:${se.isUsedCount * 100 / se.count}%`"
+                  />
+                  <span>{{ se.count }}</span>
+                </div>
+              </li>
+            </ul>
+            <button v-else class="btn btn-secondary btn-xs">{{ t('button.setting') }}</button>
+          </div>
+        </label>
+        <label class="flex w-full max-w-xs">
+          <div class="label">
+            <span class="label-text">{{ t('table.image') }}</span>
+          </div>
+          <select v-model="temporaryPrize.picture" class="flex-1 w-12 select select-warning select-sm">
+            <option v-if="temporaryPrize.picture.id" :value="{ id: '', name: '', url: '' }">❌
+            </option>
+            <option disabled selected>{{ t('table.selectPicture') }}</option>
+            <option v-for="picItem in localImageList" :key="picItem.id" class="w-auto" :value="picItem">{{
+              picItem.name }}
+            </option>
+          </select>
+        </label>
+      </div>
+      <div class="modal-action">
+        <form method="dialog" class="flex gap-3">
+          <button class="btn btn-sm" @click="submitTemporaryPrize">
+            {{ t('button.confirm') }}
+          </button>
+          <button class="btn btn-sm">
+            {{ t('button.cancel') }}
+          </button>
+        </form>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<style scoped>
+
+</style>

src/views/Home/components/PrizeList/parts/TemporaryList.vue

@@ -0,0 +1,60 @@
+<script setup lang='ts'>
+import type { IPrizeConfig } from '@/types/storeType'
+import { useI18n } from 'vue-i18n'
+
+import defaultPrizeImage from '@/assets/images/龙.png'
+
+defineProps<{
+  temporaryPrize: IPrizeConfig
+  addTemporaryPrize: () => void
+  deleteTemporaryPrize: () => void
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="h-20 w-72" :class="temporaryPrize.isShow ? 'current-prize' : ''">
+    <div class="relative flex flex-row items-center justify-between w-full h-full shadow-xl card bg-base-100">
+      <div
+        v-if="temporaryPrize.isUsed"
+        class="absolute z-50 w-full h-full bg-gray-800/70 item-mask rounded-xl"
+      />
+      <figure class="w-10 h-10 rounded-xl">
+        <ImageSync v-if="temporaryPrize.picture.url" :img-item="temporaryPrize.picture" />
+        <img v-else :src="defaultPrizeImage" alt="Prize" class="object-cover h-full rounded-xl">
+      </figure>
+      <div class="items-center p-0 text-center card-body">
+        <div class="tooltip tooltip-left" :data-tip="temporaryPrize.name">
+          <h2 class="p-0 m-0 overflow-hidden w-28 card-title whitespace-nowrap text-ellipsis">
+            {{ temporaryPrize.name }}
+          </h2>
+        </div>
+        <p class="absolute z-40 p-0 m-0 text-gray-300/80 mt-9">
+          {{ temporaryPrize.isUsedCount }}/{{ temporaryPrize.count }}
+        </p>
+        <progress
+          class="w-3/4 h-6 progress progress-primary" :value="temporaryPrize.isUsedCount"
+          :max="temporaryPrize.count"
+        />
+        <!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->
+      </div>
+      <div class="flex flex-col gap-1 mr-2">
+        <div class="tooltip tooltip-left" :data-tip="t('tooltip.edit')">
+          <div class="cursor-pointer hover:text-blue-400" @click="addTemporaryPrize">
+            <svg-icon name="edit" />
+          </div>
+        </div>
+        <div class="tooltip tooltip-left" :data-tip="t('tooltip.delete')">
+          <div class="cursor-pointer hover:text-blue-400" @click="deleteTemporaryPrize">
+            <svg-icon name="delete" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/Home/components/PrizeList/usePrizeList.ts

@@ -0,0 +1,98 @@
+import type { IPrizeConfig } from '@/types/storeType'
+import { storeToRefs } from 'pinia'
+import { onMounted, ref } from 'vue'
+import i18n from '@/locales/i18n'
+
+import useStore from '@/store'
+
+export function usePrizeList(temporaryPrizeRef: any) {
+    const prizeConfig = useStore().prizeConfig
+    const globalConfig = useStore().globalConfig
+    const system = useStore().system
+    const {
+        getPrizeConfig: localPrizeList,
+        getCurrentPrize: currentPrize,
+        getTemporaryPrize: temporaryPrize,
+    } = storeToRefs(prizeConfig)
+    const {
+        getIsShowPrizeList: isShowPrizeList,
+        getImageList: localImageList,
+    }
+        = storeToRefs(globalConfig)
+    const { getIsMobile: isMobile } = storeToRefs(system)
+
+    const selectedPrize = ref<IPrizeConfig | null>()
+    const prizeShow = ref(structuredClone(isShowPrizeList.value))
+
+    function addTemporaryPrize() {
+        temporaryPrizeRef.value.showDialog()
+    }
+
+    function deleteTemporaryPrize() {
+        temporaryPrize.value.isShow = false
+        prizeConfig.setTemporaryPrize(temporaryPrize.value)
+    }
+    function submitTemporaryPrize() {
+        if (!temporaryPrize.value.name || !temporaryPrize.value.count) {
+            // eslint-disable-next-line no-alert
+            alert(i18n.global.t('error.completeInformation'))
+            return
+        }
+        temporaryPrize.value.isShow = true
+        temporaryPrize.value.id = new Date().getTime().toString()
+        prizeConfig.setCurrentPrize(temporaryPrize.value)
+    }
+    function selectPrize(item: IPrizeConfig) {
+        selectedPrize.value = item
+        selectedPrize.value.isUsedCount = 0
+        selectedPrize.value.isUsed = false
+
+        if (selectedPrize.value.separateCount.countList.length > 1) {
+            return
+        }
+        selectedPrize.value.separateCount = {
+            enable: true,
+            countList: [
+                {
+                    id: '0',
+                    count: item.count,
+                    isUsedCount: 0,
+                },
+            ],
+        }
+    }
+    function submitData(value: any) {
+        selectedPrize.value!.separateCount.countList = value
+        selectedPrize.value = null
+    }
+    function changePersonCount() {
+        temporaryPrize.value.separateCount.countList = []
+    }
+    function setCurrentPrize() {
+        for (let i = 0; i < localPrizeList.value.length; i++) {
+            if (localPrizeList.value[i].isUsedCount < localPrizeList.value[i].count) {
+                prizeConfig.setCurrentPrize(localPrizeList.value[i])
+
+                return
+            }
+        }
+    }
+    onMounted(() => {
+        setCurrentPrize()
+    })
+
+    return {
+        temporaryPrize,
+        changePersonCount,
+        selectPrize,
+        currentPrize,
+        localImageList,
+        addTemporaryPrize,
+        submitTemporaryPrize,
+        submitData,
+        deleteTemporaryPrize,
+        prizeShow,
+        localPrizeList,
+        isMobile,
+    }
+}

src/views/Home/components/StarsBackground/index.vue

@@ -0,0 +1,72 @@
+<script setup lang='ts'>
+import { useElementSize } from '@vueuse/core'
+import localforage from 'localforage'
+import Sparticles from 'sparticles'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const props = defineProps({
+  homeBackground: {
+    type: Object,
+    default: () => ({
+      id: '',
+      name: '',
+      url: '',
+    }),
+  },
+})
+const imageDbStore = localforage.createInstance({
+  name: 'imgStore',
+})
+const imgUrl = ref('')
+const starRef = ref()
+
+const { width, height } = useElementSize(starRef)
+const options = ref({ shape: 'star', parallax: 1.2, rotate: true, twinkle: true, speed: 10, count: 200 })
+function addSparticles(node: any, width: number, height: number) {
+  const sparticleInstance = new Sparticles(node, options.value, width, height)
+  return sparticleInstance
+}
+// 页面大小改变时
+function listenWindowSize() {
+  window.addEventListener('resize', () => {
+    if (width.value && height.value) {
+      addSparticles(starRef.value, width.value, height.value)
+    }
+  })
+}
+
+async function getImageStoreItem(item: any): Promise<string> {
+  let image = ''
+  if (item.url === 'Storage') {
+    const key = item.id
+    const imageData = await imageDbStore.getItem(key) as any
+    image = URL.createObjectURL(imageData.data)
+  }
+  else {
+    image = item.url
+  }
+
+  return image
+}
+onMounted(() => {
+  getImageStoreItem(props.homeBackground).then((image) => {
+    imgUrl.value = image
+  })
+  addSparticles(starRef.value, width.value, height.value)
+  listenWindowSize()
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', listenWindowSize)
+})
+</script>
+
+<template>
+  <div v-if="homeBackground.url" class="home-background w-screen h-screen overflow-hidden">
+    <img :src="imgUrl" class="w-full h-full object-cover" alt="">
+  </div>
+  <div v-else ref="starRef" class="w-screen h-screen overflow-hidden" />
+</template>
+
+<style lang='scss' scoped>
+
+</style>

src/views/Home/type.ts

@@ -0,0 +1,12 @@
+export enum LotteryStatus {
+    init = 0,
+    ready = 1,
+    running = 2,
+    end = 3,
+}
+export interface TargetType {
+    grid: any[]
+    helix: any[]
+    table: any[]
+    sphere: any[]
+}

src/views/Home/useViewModel.ts

@@ -0,0 +1,689 @@
+import type { Material, Object3D } from 'three'
+import type { TargetType } from './type'
+import type { IPersonConfig } from '@/types/storeType'
+import * as TWEEN from '@tweenjs/tween.js'
+import { storeToRefs } from 'pinia'
+import { PerspectiveCamera, Scene } from 'three'
+import { CSS3DObject, CSS3DRenderer } from 'three-css3d'
+import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { useToast } from 'vue-toast-notification'
+import enterAudio from '@/assets/audio/enter.wav'
+import { useElementPosition, useElementStyle } from '@/hooks/useElement'
+import i18n from '@/locales/i18n'
+import useStore from '@/store'
+import { selectCard } from '@/utils'
+import { rgba } from '@/utils/color'
+import { LotteryStatus } from './type'
+import { confettiFire, createSphereVertices, createTableVertices, getRandomElements, initTableData } from './utils'
+
+const maxAudioLimit = 10
+export function useViewModel() {
+    const toast = useToast()
+    // store里面存储的值
+    const { personConfig, globalConfig, prizeConfig } = useStore()
+    const {
+        getAllPersonList: allPersonList,
+        getNotPersonList: notPersonList,
+        getNotThisPrizePersonList: notThisPrizePersonList,
+    } = storeToRefs(personConfig)
+    const { getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
+    const {
+        getCardColor: cardColor,
+        getPatterColor: patternColor,
+        getPatternList: patternList,
+        getTextColor: textColor,
+        getLuckyColor: luckyColor,
+        getCardSize: cardSize,
+        getTextSize: textSize,
+        getRowCount: rowCount,
+        getIsShowAvatar: isShowAvatar,
+        getTitleFont: titleFont,
+        getTitleFontSyncGlobal: titleFontSyncGlobal,
+        getDefiniteTime: definiteTime,
+        getWinMusic: isPlayWinMusic,
+    } = storeToRefs(globalConfig)
+    // three初始值
+    const ballRotationY = ref(0)
+    const containerRef = ref<HTMLElement>()
+    const canOperate = ref(true)
+    const cameraZ = ref(3000)
+    const scene = ref()
+    const camera = ref()
+    const renderer = ref()
+    const controls = ref()
+    const objects = ref<any[]>([])
+    const targets: TargetType = {
+        grid: [],
+        helix: [],
+        table: [],
+        sphere: [],
+    }
+    // 页面数据初始值
+    const currentStatus = ref<LotteryStatus>(LotteryStatus.init) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态
+    const tableData = ref<any[]>([])
+    const luckyTargets = ref<any[]>([])
+    const luckyCardList = ref<number[]>([])
+    const luckyCount = ref(10)
+    const personPool = ref<IPersonConfig[]>([])
+    const intervalTimer = ref<any>(null)
+    const isInitialDone = ref<boolean>(false)
+    const animationFrameId = ref<any>(null)
+    const playingAudios = ref<HTMLAudioElement[]>([])
+    function initThreeJs() {
+        const felidView = 40
+        const width = window.innerWidth
+        const height = window.innerHeight
+        const aspect = width / height
+        const nearPlane = 1
+        const farPlane = 10000
+        const WebGLoutput = containerRef.value
+
+        scene.value = new Scene()
+        camera.value = new PerspectiveCamera(felidView, aspect, nearPlane, farPlane)
+        camera.value.position.z = cameraZ.value
+        renderer.value = new CSS3DRenderer()
+        renderer.value.setSize(width, height * 0.9)
+        renderer.value.domElement.style.position = 'absolute'
+        // 垂直居中
+        renderer.value.domElement.style.paddingTop = '50px'
+        renderer.value.domElement.style.top = '50%'
+        renderer.value.domElement.style.left = '50%'
+        renderer.value.domElement.style.transform = 'translate(-50%, -50%)'
+        WebGLoutput!.appendChild(renderer.value.domElement)
+
+        controls.value = new TrackballControls(camera.value, renderer.value.domElement)
+        controls.value.rotateSpeed = 1
+        controls.value.staticMoving = true
+        controls.value.minDistance = 500
+        controls.value.maxDistance = 6000
+        controls.value.addEventListener('change', render)
+
+        const tableLen = tableData.value.length
+        for (let i = 0; i < tableLen; i++) {
+            let element = document.createElement('div')
+            element.className = 'element-card'
+
+            const number = document.createElement('div')
+            number.className = 'card-id'
+            number.textContent = tableData.value[i].uid
+            if (isShowAvatar.value)
+                number.style.display = 'none'
+            element.appendChild(number)
+
+            const symbol = document.createElement('div')
+            symbol.className = 'card-name'
+            symbol.textContent = tableData.value[i].name
+            if (isShowAvatar.value)
+                symbol.className = 'card-name card-avatar-name'
+            element.appendChild(symbol)
+
+            const detail = document.createElement('div')
+            detail.className = 'card-detail'
+            detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].identity}`
+            if (isShowAvatar.value)
+                detail.style.display = 'none'
+            element.appendChild(detail)
+
+            const avatar = document.createElement('img')
+            avatar.className = 'card-avatar'
+            avatar.src = tableData.value[i].avatar
+            avatar.alt = 'avatar'
+            avatar.style.width = '140px'
+            avatar.style.height = '140px'
+            if (!isShowAvatar.value)
+                avatar.style.display = 'none'
+            element.appendChild(avatar)
+
+            element = useElementStyle(element, tableData.value[i], i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value)
+            const object = new CSS3DObject(element)
+            object.position.x = Math.random() * 4000 - 2000
+            object.position.y = Math.random() * 4000 - 2000
+            object.position.z = Math.random() * 4000 - 2000
+            scene.value.add(object)
+
+            objects.value.push(object)
+        }
+        // 创建横铺的界面
+        const tableVertices = createTableVertices({ tableData: tableData.value, rowCount: rowCount.value, cardSize: cardSize.value })
+        targets.table = tableVertices
+        // 创建球体
+        const sphereVertices = createSphereVertices({ objectsLength: objects.value.length })
+        targets.sphere = sphereVertices
+        window.addEventListener('resize', onWindowResize, false)
+        transform(targets.table, 1000)
+        render()
+    }
+    function render() {
+        if (renderer.value) {
+            renderer.value.render(scene.value, camera.value)
+        }
+    }
+    /**
+     * @description: 位置变换
+     * @param targets 目标位置
+     * @param duration 持续时间
+     */
+    function transform(targets: any[], duration: number) {
+        TWEEN.removeAll()
+        if (intervalTimer.value) {
+            clearInterval(intervalTimer.value)
+            intervalTimer.value = null
+            randomBallData('sphere')
+        }
+
+        return new Promise((resolve) => {
+            const objLength = objects.value.length
+            for (let i = 0; i < objLength; ++i) {
+                const object = objects.value[i]
+                const target = targets[i]
+                new TWEEN.Tween(object.position)
+                    .to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration)
+                    .easing(TWEEN.Easing.Exponential.InOut)
+                    .start()
+
+                new TWEEN.Tween(object.rotation)
+                    .to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
+                    .easing(TWEEN.Easing.Exponential.InOut)
+                    .start()
+                    .onComplete(() => {
+                        if (luckyCardList.value.length) {
+                            luckyCardList.value.forEach((cardIndex: any) => {
+                                const item = objects.value[cardIndex]
+                                useElementStyle(item.element, {} as any, i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value, 'sphere')
+                            })
+                        }
+                        luckyTargets.value = []
+                        luckyCardList.value = []
+                        canOperate.value = true
+                    })
+            }
+
+            // 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera
+            new TWEEN.Tween({})
+                .to({}, duration * 2)
+                .onUpdate(render)
+                .start()
+                .onComplete(() => {
+                    canOperate.value = true
+                    resolve('')
+                })
+        })
+    }
+    /**
+     * @description: 窗口大小改变时重新设置渲染器的大小
+     */
+    function onWindowResize() {
+        camera.value.aspect = window.innerWidth / window.innerHeight
+        camera.value.updateProjectionMatrix()
+
+        renderer.value.setSize(window.innerWidth, window.innerHeight)
+        render()
+    }
+
+    /**
+     * [animation update all tween && controls]
+     */
+    function animation() {
+        TWEEN.update()
+        if (controls.value) {
+            controls.value.update()
+        }
+        // 设置自动旋转
+        // 设置相机位置
+        animationFrameId.value = requestAnimationFrame(animation)
+    }
+    /**
+     * @description: 旋转的动画
+     * @param rotateY 绕y轴旋转圈数
+     * @param duration 持续时间，单位秒
+     */
+    function rollBall(rotateY: number, duration: number) {
+        TWEEN.removeAll()
+
+        return new Promise((resolve) => {
+            scene.value.rotation.y = 0
+            ballRotationY.value = Math.PI * rotateY * 1000
+            const rotateObj = new TWEEN.Tween(scene.value.rotation)
+            rotateObj
+                .to(
+                    {
+                        // x: Math.PI * rotateX * 1000,
+                        x: 0,
+                        y: ballRotationY.value,
+                        // z: Math.PI * rotateZ * 1000
+                        z: 0,
+                    },
+                    duration * 1000,
+                )
+                .onUpdate(render)
+                .start()
+                .onStop(() => {
+                    resolve('')
+                })
+                .onComplete(() => {
+                    resolve('')
+                })
+        })
+    }
+    /**
+     * @description: 视野转回正面
+     */
+    function resetCamera() {
+        new TWEEN.Tween(camera.value.position)
+            .to(
+                {
+                    x: 0,
+                    y: 0,
+                    z: 3000,
+                },
+                1000,
+            )
+            .onUpdate(render)
+            .start()
+            .onComplete(() => {
+                new TWEEN.Tween(camera.value.rotation)
+                    .to(
+                        {
+                            x: 0,
+                            y: 0,
+                            z: 0,
+                        },
+                        1000,
+                    )
+                    .onUpdate(render)
+                    .start()
+                    .onComplete(() => {
+                        canOperate.value = true
+                        // camera.value.lookAt(scene.value.position)
+                        camera.value.position.y = 0
+                        camera.value.position.x = 0
+                        camera.value.position.z = 3000
+                        camera.value.rotation.x = 0
+                        camera.value.rotation.y = 0
+                        camera.value.rotation.z = -0
+                        controls.value.reset()
+                    })
+            })
+    }
+
+    /**
+     * @description: 开始抽奖，由横铺变换为球体（或其他图形）
+     * @returns 随机抽取球数据
+     */
+    /// <IP_ADDRESS>description 进入抽奖准备状态
+    async function enterLottery() {
+        if (!canOperate.value) {
+            return
+        }
+        if (!intervalTimer.value) {
+            randomBallData()
+        }
+        if (patternList.value.length) {
+            for (let i = 0; i < patternList.value.length; i++) {
+                if (i < rowCount.value * 7) {
+                    objects.value[patternList.value[i] - 1].element.style.backgroundColor = rgba(cardColor.value, Math.random() * 0.5 + 0.25)
+                }
+            }
+        }
+        canOperate.value = false
+        await transform(targets.sphere, 1000)
+        currentStatus.value = LotteryStatus.ready
+        rollBall(0.1, 2000)
+    }
+    /**
+     * @description 开始抽奖
+     */
+    function startLottery() {
+        if (!canOperate.value) {
+            return
+        }
+        // 验证是否已抽完全部奖项
+        if (currentPrize.value.isUsed || !currentPrize.value) {
+            toast.open({
+                message: i18n.global.t('error.personIsAllDone'),
+                type: 'warning',
+                position: 'top-right',
+                duration: 10000,
+            })
+
+            return
+        }
+        personPool.value = currentPrize.value.isAll ? notThisPrizePersonList.value : notPersonList.value
+        // 验证抽奖人数是否还够
+        if (personPool.value.length < currentPrize.value.count - currentPrize.value.isUsedCount) {
+            toast.open({
+                message: i18n.global.t('error.personNotEnough'),
+                type: 'warning',
+                position: 'top-right',
+                duration: 10000,
+            })
+
+            return
+        }
+        luckyCount.value = 10
+        // 自定义抽奖个数
+
+        let leftover = currentPrize.value.count - currentPrize.value.isUsedCount
+        const customCount = currentPrize.value.separateCount
+        if (customCount && customCount.enable && customCount.countList.length > 0) {
+            for (let i = 0; i < customCount.countList.length; i++) {
+                if (customCount.countList[i].isUsedCount < customCount.countList[i].count) {
+                    leftover = customCount.countList[i].count - customCount.countList[i].isUsedCount
+                    break
+                }
+            }
+        }
+        luckyCount.value = leftover < luckyCount.value ? leftover : luckyCount.value
+        // 重构抽奖函数
+        luckyTargets.value = getRandomElements(personPool.value, luckyCount.value)
+        luckyTargets.value.forEach((item) => {
+            const index = personPool.value.findIndex(person => person.id === item.id)
+            if (index > -1) {
+                personPool.value.splice(index, 1)
+            }
+        })
+
+        toast.open({
+            // message: `现在抽取${currentPrize.value.name} ${leftover}人`,
+            message: i18n.global.t('error.startDraw', { count: currentPrize.value.name, leftover }),
+            type: 'default',
+            position: 'top-right',
+            duration: 8000,
+        })
+        currentStatus.value = LotteryStatus.running
+        rollBall(10, 3000)
+        if (definiteTime.value) {
+            setTimeout(() => {
+                if (currentStatus.value === LotteryStatus.running) {
+                    stopLottery()
+                }
+            }, definiteTime.value * 1000)
+        }
+    }
+    /**
+     * @description: 停止抽奖，抽出幸运人
+     */
+    async function stopLottery() {
+        if (!canOperate.value) {
+            return
+        }
+        //   clearInterval(intervalTimer.value)
+        //   intervalTimer.value = null
+        canOperate.value = false
+        rollBall(0, 1)
+
+        const windowSize = { width: window.innerWidth, height: window.innerHeight }
+        luckyTargets.value.forEach((person: IPersonConfig, index: number) => {
+            const cardIndex = selectCard(luckyCardList.value, tableData.value.length, person.id)
+            luckyCardList.value.push(cardIndex)
+            const totalLuckyCount = luckyTargets.value.length
+            const item = objects.value[cardIndex]
+            const { xTable, yTable } = useElementPosition(item, rowCount.value, totalLuckyCount, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index)
+            new TWEEN.Tween(item.position)
+                .to({
+                    x: xTable,
+                    y: yTable,
+                    z: 1000,
+                }, 1200)
+                .easing(TWEEN.Easing.Exponential.InOut)
+                .onStart(() => {
+                    item.element = useElementStyle(item.element, person, cardIndex, patternList.value, patternColor.value, luckyColor.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, textSize.value * 2, 'lucky')
+                })
+                .start()
+                .onComplete(() => {
+                    canOperate.value = true
+                    currentStatus.value = LotteryStatus.end
+                })
+            new TWEEN.Tween(item.rotation)
+                .to({
+                    x: 0,
+                    y: 0,
+                    z: 0,
+                }, 900)
+                .easing(TWEEN.Easing.Exponential.InOut)
+                .start()
+                .onComplete(() => {
+                    if (isPlayWinMusic.value) {
+                        playWinMusic()
+                    }
+                    confettiFire()
+                    resetCamera()
+                })
+        })
+    }
+    // 播放音频，中将卡片越多audio对象越多，声音越大
+    function playWinMusic() {
+        if (playingAudios.value.length > maxAudioLimit) {
+            console.log('音频播放数量已达到上限，请勿重复播放')
+            return
+        }
+        const enterNewAudio = new Audio(enterAudio)
+        playingAudios.value.push(enterNewAudio)
+        enterNewAudio.play()
+            .then(() => {
+                // 当音频播放结束后，从数组中移除
+                enterNewAudio.onended = () => {
+                    const index = playingAudios.value.indexOf(enterNewAudio)
+                    if (index > -1) {
+                        playingAudios.value.splice(index, 1)
+                    }
+                }
+            })
+            .catch((error) => {
+                console.error('播放音频失败:', error)
+                // 如果播放失败，也从数组中移除
+                const index = playingAudios.value.indexOf(enterNewAudio)
+                if (index > -1) {
+                    playingAudios.value.splice(index, 1)
+                }
+            })
+    }
+    /**
+     * @description: 继续,意味着这抽奖作数，计入数据库
+     */
+    async function continueLottery() {
+        if (!canOperate.value) {
+            return
+        }
+        const customCount = currentPrize.value.separateCount
+        if (customCount && customCount.enable && customCount.countList.length > 0) {
+            for (let i = 0; i < customCount.countList.length; i++) {
+                if (customCount.countList[i].isUsedCount < customCount.countList[i].count) {
+                    customCount.countList[i].isUsedCount += luckyCount.value
+                    break
+                }
+            }
+        }
+        currentPrize.value.isUsedCount += luckyCount.value
+        luckyCount.value = 0
+        if (currentPrize.value.isUsedCount >= currentPrize.value.count) {
+            currentPrize.value.isUsed = true
+            currentPrize.value.isUsedCount = currentPrize.value.count
+        }
+        personConfig.addAlreadyPersonList(luckyTargets.value, currentPrize.value)
+        prizeConfig.updatePrizeConfig(currentPrize.value)
+        await enterLottery()
+    }
+    /**
+     * @description: 放弃本次抽奖，回到初始状态
+     */
+    function quitLottery() {
+        enterLottery()
+        currentStatus.value = LotteryStatus.init
+    }
+
+    /**
+     * @description: 随机替换卡片中的数据（不改变原有的值，只是显示）
+     * @param {string} mod 模式
+     */
+    function randomBallData(mod: 'default' | 'lucky' | 'sphere' = 'default') {
+        // 两秒执行一次
+        intervalTimer.value = setInterval(() => {
+            // 产生随机数数组
+            const indexLength = 4
+            const cardRandomIndexArr: number[] = []
+            const personRandomIndexArr: number[] = []
+            for (let i = 0; i < indexLength; i++) {
+                // 解决随机元素概率过于不均等问题
+                const randomCardIndex = Math.floor(Math.random() * (tableData.value.length - 1))
+                const randomPersonIndex = Math.floor(Math.random() * (allPersonList.value.length - 1))
+                if (luckyCardList.value.includes(randomCardIndex)) {
+                    continue
+                }
+                cardRandomIndexArr.push(randomCardIndex)
+                personRandomIndexArr.push(randomPersonIndex)
+            }
+            for (let i = 0; i < cardRandomIndexArr.length; i++) {
+                if (!objects.value[cardRandomIndexArr[i]]) {
+                    continue
+                }
+                objects.value[cardRandomIndexArr[i]].element = useElementStyle(objects.value[cardRandomIndexArr[i]].element, allPersonList.value[personRandomIndexArr[i]], cardRandomIndexArr[i], patternList.value, patternColor.value, cardColor.value, { width: cardSize.value.width, height: cardSize.value.height }, textSize.value, mod, 'change')
+            }
+        }, 200)
+    }
+    /**
+     * @description: 键盘监听，快捷键操作
+     */
+    function listenKeyboard(e: any) {
+        if ((e.keyCode !== 32 || e.keyCode !== 27) && !canOperate.value) {
+            return
+        }
+        if (e.keyCode === 27 && currentStatus.value === LotteryStatus.running) {
+            quitLottery()
+        }
+        if (e.keyCode !== 32) {
+            return
+        }
+        switch (currentStatus.value) {
+            case LotteryStatus.init:
+                enterLottery()
+                break
+            case LotteryStatus.ready:
+                startLottery()
+                break
+            case LotteryStatus.running:
+                stopLottery()
+                break
+            case LotteryStatus.end:
+                continueLottery()
+                break
+            default:
+                break
+        }
+    }
+    /**
+     * @description: 清理资源，避免内存溢出
+     */
+    function cleanup() {
+        // 停止所有Tween动画
+        TWEEN.removeAll()
+
+        // 清理动画循环
+        if ((window as any).cancelAnimationFrame) {
+            (window as any).cancelAnimationFrame(animationFrameId.value)
+        }
+        clearInterval(intervalTimer.value)
+        intervalTimer.value = null
+        if (scene.value) {
+            scene.value.traverse((object: Object3D) => {
+                if ((object as any).material) {
+                    if (Array.isArray((object as any).material)) {
+                        (object as any).material.forEach((material: Material) => {
+                            material.dispose()
+                        })
+                    }
+                    else {
+                        (object as any).material.dispose()
+                    }
+                }
+                if ((object as any).geometry) {
+                    (object as any).geometry.dispose()
+                }
+                if ((object as any).texture) {
+                    (object as any).texture.dispose()
+                }
+            })
+            scene.value.clear()
+        }
+
+        if (objects.value) {
+            objects.value.forEach((object) => {
+                if (object.element) {
+                    object.element.remove()
+                }
+            })
+            objects.value = []
+        }
+
+        if (controls.value) {
+            controls.value.removeEventListener('change')
+            controls.value.dispose()
+        }
+        //   移除所有事件监听
+        window.removeEventListener('resize', onWindowResize)
+        scene.value = null
+        camera.value = null
+        renderer.value = null
+        controls.value = null
+    }
+    /**
+     * @description: 设置默认人员列表
+     */
+    function setDefaultPersonList() {
+        personConfig.setDefaultPersonList()
+        // 刷新页面
+        window.location.reload()
+    }
+    const init = () => {
+        const startTime = Date.now()
+        const maxWaitTime = 2000 // 2秒
+
+        const checkAndInit = () => {
+            // 如果人员列表有数据或者等待时间超过2秒，则执行初始化
+            if (allPersonList.value.length > 0 || (Date.now() - startTime) >= maxWaitTime) {
+                console.log('初始化完成')
+                tableData.value = initTableData({ allPersonList: allPersonList.value, rowCount: rowCount.value })
+                initThreeJs()
+                animation()
+                containerRef.value!.style.color = `${textColor}`
+                randomBallData()
+                window.addEventListener('keydown', listenKeyboard)
+                isInitialDone.value = true
+            }
+            else {
+                console.log('等待人员列表数据...')
+                // 继续等待
+                setTimeout(checkAndInit, 100) // 每100毫秒检查一次
+            }
+        }
+
+        checkAndInit()
+    }
+    onMounted(() => {
+        init()
+    })
+    onUnmounted(() => {
+        nextTick(() => {
+            cleanup()
+        })
+        clearInterval(intervalTimer.value)
+        intervalTimer.value = null
+        window.removeEventListener('keydown', listenKeyboard)
+    })
+
+    return {
+        setDefaultPersonList,
+        startLottery,
+        continueLottery,
+        quitLottery,
+        containerRef,
+        stopLottery,
+        enterLottery,
+        tableData,
+        currentStatus,
+        isInitialDone,
+        titleFont,
+        titleFontSyncGlobal,
+    }
+}

src/views/Home/util.ts

@@ -0,0 +1,131 @@
+import type { IPersonConfig } from '@/types/storeType'
+import confetti from 'canvas-confetti'
+import { Object3D, Vector3 } from 'three'
+import { filterData } from '@/utils'
+/**
+ * @description 初始化表格数据
+ * @param0 allPersonList 所有人的列表
+ * @param1 rowCount 行数，默认是7行
+ * @returns 表格数据
+ */
+export function initTableData({ allPersonList, rowCount }: { allPersonList: IPersonConfig[], rowCount: number }): IPersonConfig[] {
+    let tableData: IPersonConfig[] = []
+    if (allPersonList.length <= 0) {
+        return []
+    }
+    const totalCount = rowCount * 7
+    const allPersonLength = allPersonList.length
+    if (allPersonLength < totalCount) {
+        tableData = Array.from({ length: totalCount }, () => JSON.parse(JSON.stringify(allPersonList))).flat()
+    }
+    else {
+        tableData = allPersonList.slice(0, totalCount)
+    }
+    tableData = filterData(tableData.slice(0, totalCount), rowCount)
+    return tableData
+}
+
+/**
+ * @description 横铺图形：处理数据，把每个卡片在界面的位置写入
+ * @param0 tableData 表格数据
+ * @param1 rowCount 每行有多少个元素
+ * @param2 cardSize 卡片的大小
+ * @returns  Object3D[]
+ */
+export function createTableVertices({ tableData, rowCount, cardSize }: { tableData: IPersonConfig[], rowCount: number, cardSize: { width: number, height: number } }): Object3D[] {
+    const tableLen = tableData.length
+    const objects: Object3D[] = []
+    for (let i = 0; i < tableLen; i++) {
+        const object = new Object3D()
+
+        object.position.x = tableData[i].x * (cardSize.width + 40) - rowCount * 90
+        object.position.y = -tableData[i].y * (cardSize.height + 20) + 1000
+        object.position.z = 0
+        objects.push(object)
+        // targets.table.push(object)
+    }
+    return objects
+}
+/**
+ * @description 创建球体
+ * @param0 objectsLength 物体的个数
+ * @returns Object3D[]
+ */
+export function createSphereVertices({ objectsLength }: { objectsLength: number }): Object3D[] {
+    let i = 0
+    const resObjects: Object3D[] = []
+    // const objLength = objects.value.length
+    const vector = new Vector3()
+
+    for (; i < objectsLength; ++i) {
+        const phi = Math.acos(-1 + (2 * i) / objectsLength)
+        const theta = Math.sqrt(objectsLength * Math.PI) * phi
+        const object = new Object3D()
+
+        object.position.x = 800 * Math.cos(theta) * Math.sin(phi)
+        object.position.y = 800 * Math.sin(theta) * Math.sin(phi)
+        object.position.z = -800 * Math.cos(phi)
+
+        // rotation object
+        vector.copy(object.position).multiplyScalar(2)
+        object.lookAt(vector)
+        resObjects.push(object)
+    }
+    return resObjects
+}
+
+export function confettiFire() {
+    const duration = 3 * 1000
+    const end = Date.now() + duration;
+    (function frame() {
+        // launch a few confetti from the left edge
+        confetti({
+            particleCount: 2,
+            angle: 60,
+            spread: 55,
+            origin: { x: 0 },
+        })
+        // and launch a few from the right edge
+        confetti({
+            particleCount: 2,
+            angle: 120,
+            spread: 55,
+            origin: { x: 1 },
+        })
+
+        // keep going until we are out of time
+        if (Date.now() < end) {
+            requestAnimationFrame(frame)
+        }
+    }())
+    centerFire(0.25, {
+        spread: 26,
+        startVelocity: 55,
+    })
+    centerFire(0.2, {
+        spread: 60,
+    })
+    centerFire(0.35, {
+        spread: 100,
+        decay: 0.91,
+        scalar: 0.8,
+    })
+    centerFire(0.1, {
+        spread: 120,
+        startVelocity: 25,
+        decay: 0.92,
+        scalar: 1.2,
+    })
+    centerFire(0.1, {
+        spread: 120,
+        startVelocity: 45,
+    })
+}
+function centerFire(particleRatio: number, opts: any) {
+    const count = 200
+    confetti({
+        origin: { y: 0.7 },
+        ...opts,
+        particleCount: Math.floor(count * particleRatio),
+    })
+}

src/views/Home/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './random'
+export * from './table'

src/views/Home/utils/random.ts

@@ -0,0 +1,53 @@
+/**
+ * 浏览器端加密安全洗牌（无需指定抽取数量）
+ * @param array 要洗牌的数组
+ * @returns 洗牌后的新数组
+ */
+function shuffleBrowserCrypto<T>(array: T[]): T[] {
+    const newArray = [...array]
+    if (newArray.length <= 1)
+        return newArray
+
+    // 遍历数组，每轮生成一个随机索引
+    for (let i = newArray.length - 1; i > 0; i--) {
+        // 步骤1：生成一个 32 位无符号加密随机数（仅需1个）
+        const randomBuffer = new Uint32Array(1) // 长度1表示只生成1个随机数
+        crypto.getRandomValues(randomBuffer)
+
+        // 步骤2：将随机数映射到 [0, i] 范围（核心：动态适配当前i的范围）
+        const randomIndex = randomBuffer[0] % (i + 1);
+
+        // 步骤3：交换元素
+        [newArray[i], newArray[randomIndex]] = [newArray[randomIndex], newArray[i]]
+    }
+    return newArray
+}
+
+/**
+ * @description 从源数组中随机获取指定数量的元素
+ * @param {Array} sourceArray 源数组
+ * @param {number} count 要获取的元素数量
+ * @returns {Array} 随机获取的元素
+ */
+
+export function getRandomElements<T>(sourceArray: T[], count: number): T[] {
+    if (count <= 0)
+        return []
+    if (count >= sourceArray.length) {
+        return shuffleBrowserCrypto([...sourceArray])
+    } // 抽全部=洗牌
+
+    const newArray = [...sourceArray]
+    const result: T[] = []
+
+    // 抽取 count 个元素，每轮选一个随机索引加入结果，然后从原数组移除
+    for (let i = 0; i < count; i++) {
+        const randomBuffer = new Uint32Array(1)
+        crypto.getRandomValues(randomBuffer)
+        const randomIndex = randomBuffer[0] % newArray.length
+
+        result.push(newArray[randomIndex])
+    }
+
+    return result
+}

src/views/Home/utils/table.ts

@@ -0,0 +1,131 @@
+import type { IPersonConfig } from '@/types/storeType'
+import confetti from 'canvas-confetti'
+import { Object3D, Vector3 } from 'three'
+import { filterData } from '@/utils'
+/**
+ * @description 初始化表格数据
+ * @param0 allPersonList 所有人的列表
+ * @param1 rowCount 行数，默认是7行
+ * @returns 表格数据
+ */
+export function initTableData({ allPersonList, rowCount }: { allPersonList: IPersonConfig[], rowCount: number }): IPersonConfig[] {
+    let tableData: IPersonConfig[] = []
+    if (allPersonList.length <= 0) {
+        return []
+    }
+    const totalCount = rowCount * 7
+    const allPersonLength = allPersonList.length
+    if (allPersonLength < totalCount) {
+        tableData = Array.from({ length: totalCount }, () => JSON.parse(JSON.stringify(allPersonList))).flat()
+    }
+    else {
+        tableData = allPersonList.slice(0, totalCount)
+    }
+    tableData = filterData(tableData.slice(0, totalCount), rowCount)
+    return tableData
+}
+
+/**
+ * @description 横铺图形：处理数据，把每个卡片在界面的位置写入
+ * @param0 tableData 表格数据
+ * @param1 rowCount 每行有多少个元素
+ * @param2 cardSize 卡片的大小
+ * @returns  Object3D[]
+ */
+export function createTableVertices({ tableData, rowCount, cardSize }: { tableData: IPersonConfig[], rowCount: number, cardSize: { width: number, height: number } }): Object3D[] {
+    const tableLen = tableData.length
+    const objects: Object3D[] = []
+    for (let i = 0; i < tableLen; i++) {
+        const object = new Object3D()
+
+        object.position.x = tableData[i].x * (cardSize.width + 40) - rowCount * 90
+        object.position.y = -tableData[i].y * (cardSize.height + 20) + 1000
+        object.position.z = 0
+        objects.push(object)
+        // targets.table.push(object)
+    }
+    return objects
+}
+/**
+ * @description 创建球体
+ * @param0 objectsLength 物体的个数
+ * @returns Object3D[]
+ */
+export function createSphereVertices({ objectsLength }: { objectsLength: number }): Object3D[] {
+    let i = 0
+    const resObjects: Object3D[] = []
+    // const objLength = objects.value.length
+    const vector = new Vector3()
+
+    for (; i < objectsLength; ++i) {
+        const phi = Math.acos(-1 + (2 * i) / objectsLength)
+        const theta = Math.sqrt(objectsLength * Math.PI) * phi
+        const object = new Object3D()
+
+        object.position.x = 800 * Math.cos(theta) * Math.sin(phi)
+        object.position.y = 800 * Math.sin(theta) * Math.sin(phi)
+        object.position.z = -800 * Math.cos(phi)
+
+        // rotation object
+        vector.copy(object.position).multiplyScalar(2)
+        object.lookAt(vector)
+        resObjects.push(object)
+    }
+    return resObjects
+}
+
+export function confettiFire() {
+    const duration = 3 * 1000
+    const end = Date.now() + duration;
+    (function frame() {
+        // launch a few confetti from the left edge
+        confetti({
+            particleCount: 2,
+            angle: 60,
+            spread: 55,
+            origin: { x: 0 },
+        })
+        // and launch a few from the right edge
+        confetti({
+            particleCount: 2,
+            angle: 120,
+            spread: 55,
+            origin: { x: 1 },
+        })
+
+        // keep going until we are out of time
+        if (Date.now() < end) {
+            requestAnimationFrame(frame)
+        }
+    }())
+    centerFire(0.25, {
+        spread: 26,
+        startVelocity: 55,
+    })
+    centerFire(0.2, {
+        spread: 60,
+    })
+    centerFire(0.35, {
+        spread: 100,
+        decay: 0.91,
+        scalar: 0.8,
+    })
+    centerFire(0.1, {
+        spread: 120,
+        startVelocity: 25,
+        decay: 0.92,
+        scalar: 1.2,
+    })
+    centerFire(0.1, {
+        spread: 120,
+        startVelocity: 45,
+    })
+}
+function centerFire(particleRatio: number, opts: any) {
+    const count = 200
+    confetti({
+        origin: { y: 0.7 },
+        ...opts,
+        particleCount: Math.floor(count * particleRatio),
+    })
+}