Dev (#151) (#152)

* 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/Config/Global/FaceConfig.vue

@@ -1,362 +0,0 @@
-<script setup lang='ts'>
-import i18n, { languageList } from '@/locales/i18n'
-
-import useStore from '@/store'
-import { themeChange } from '@/utils'
-import { isHex, isRgbOrRgba } from '@/utils/color'
-import daisyuiThemes from 'daisyui/src/theming/themes'
-import { storeToRefs } from 'pinia'
-import { onMounted, ref, watch } from 'vue'
-import { ColorPicker } from 'vue3-colorpicker'
-import { useI18n } from 'vue-i18n'
-import zod from 'zod'
-import PatternSetting from './components/PatternSetting.vue'
-import 'vue3-colorpicker/style.css'
-
-const { t } = useI18n()
-const globalConfig = useStore().globalConfig
-const personConfig = useStore().personConfig
-const prizeConfig = useStore().prizeConfig
-const { getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList, getLanguage: userLanguage, getBackground: backgroundImage, getImageList: imageList, getIsShowAvatar: isShowAvatar
-} = storeToRefs(globalConfig)
-const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
-const colorPickerRef = ref()
-const resetDataDialogRef = ref()
-interface ThemeDaType {
-  [key: string]: any
-}
-const isRowCountChange = ref(0) // 0未改变，1改变,2加载中
-const themeValue = ref(localTheme.value.name)
-const topTitleValue = ref(structuredClone(topTitle.value))
-const cardColorValue = ref(structuredClone(cardColor.value))
-const luckyCardColorValue = ref(structuredClone(luckyCardColor.value))
-const textColorValue = ref(structuredClone(textColor.value))
-const cardSizeValue = ref(structuredClone(cardSize.value))
-const textSizeValue = ref(structuredClone(textSize.value))
-const rowCountValue = ref(structuredClone(rowCount.value))
-const languageValue = ref(structuredClone(userLanguage.value))
-const isShowPrizeListValue = ref(structuredClone(isShowPrizeList.value))
-const isShowAvatarValue = ref(structuredClone(isShowAvatar.value))
-const patternColorValue = ref(structuredClone(patternColor.value))
-const themeList = ref(Object.keys(daisyuiThemes))
-const daisyuiThemeList = ref<ThemeDaType>(daisyuiThemes)
-const backgroundImageValue = ref(backgroundImage.value)
-const formData = ref({
-  rowCount: rowCountValue,
-})
-const formErr = ref({
-  rowCount: '',
-})
-const schema = zod.object({
-  rowCount: zod.number({
-    required_error: i18n.global.t('error.require'),
-    invalid_type_error: i18n.global.t('error.requireNumber'),
-  })
-    .min(1, i18n.global.t('error.minNumber1'))
-    .max(100, i18n.global.t('error.maxNumber100')),
-  // 格式化
-
-})
-type ValidatePayload = zod.infer<typeof schema>
-const payload: ValidatePayload = {
-  rowCount: formData.value.rowCount,
-}
-function parseSchema(props: ValidatePayload) {
-  return schema.parseAsync(props)
-}
-
-function resetPersonLayout() {
-  isRowCountChange.value = 2
-  setTimeout(() => {
-    const alreadyLen = alreadyPersonList.value.length
-    const notLen = notPersonList.value.length
-    if (alreadyLen <= 0 && notLen <= 0) {
-      return
-    }
-    const allPersonList = alreadyPersonList.value.concat(notPersonList.value)
-    const newAlreadyPersonList = allPersonList.slice(0, alreadyLen)
-    const newNotPersonList = allPersonList.slice(alreadyLen, notLen + alreadyLen)
-    personConfig.deleteAllPerson()
-    personConfig.addNotPersonList(newNotPersonList)
-    personConfig.addAlreadyPersonList(newAlreadyPersonList, null)
-
-    isRowCountChange.value = 0
-  }, 1000)
-}
-
-function clearPattern() {
-  globalConfig.setPatternList([] as number[])
-}
-function resetPattern() {
-  globalConfig.resetPatternList()
-}
-
-function resetData() {
-  globalConfig.reset()
-  personConfig.reset()
-  prizeConfig.resetDefault()
-  // 刷新页面
-  window.location.reload()
-}
-
-// const handleChangeShowFields = (fieldItem: any) => {
-//     formData.value.showField.map((item) => {
-//         if (item.label === fieldItem.label) {
-//             item.value = !item.value
-//         }
-//     })
-// }
-
-watch(() => formData.value.rowCount, () => {
-  payload.rowCount = formData.value.rowCount
-  parseSchema(payload).then((res) => {
-    if (res.rowCount) {
-      isRowCountChange.value = 1
-      globalConfig.setRowCount(res.rowCount)
-    }
-  }).catch((err) => {
-    formErr.value.rowCount = err.issues[0].message
-  })
-})
-
-watch(topTitleValue, (val) => {
-  globalConfig.setTopTitle(val)
-})
-watch(themeValue, (val: any) => {
-  const selectedThemeDetail = daisyuiThemeList.value[val]
-  globalConfig.setTheme({ name: val, detail: selectedThemeDetail })
-  themeChange(val)
-  if (selectedThemeDetail.primary && (isHex(selectedThemeDetail.primary) || isRgbOrRgba(selectedThemeDetail.primary))) {
-    globalConfig.setCardColor(selectedThemeDetail.primary)
-  }
-}, { deep: true })
-
-watch(cardColorValue, (val: string) => {
-  globalConfig.setCardColor(val)
-}, { deep: true })
-watch(luckyCardColorValue, (val: string) => {
-  globalConfig.setLuckyCardColor(val)
-}, { deep: true })
-watch(patternColorValue, (val: string) => {
-  globalConfig.setPatterColor(val)
-})
-watch(textColorValue, (val: string) => {
-  globalConfig.setTextColor(val)
-}, { deep: true })
-
-watch(cardSizeValue, (val: { width: number, height: number }) => {
-  globalConfig.setCardSize(val)
-}, { deep: true })
-
-watch(isShowPrizeListValue, () => {
-  globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
-})
-watch(backgroundImageValue, (val) => {
-  globalConfig.setBackground(val)
-})
-watch(languageValue, (val: string) => {
-  globalConfig.setLanguage(val)
-})
-watch(isShowAvatarValue, () => {
-    globalConfig.setIsShowAvatar(isShowAvatarValue.value)
-})
-onMounted(() => {
-})
-</script>
-
-<template>
-  <dialog id="my_modal_1" ref="resetDataDialogRef" class="border-none modal">
-    <div class="modal-box">
-      <h3 class="text-lg font-bold">
-        {{ t('dialog.titleTip') }}
-      </h3>
-      <p class="py-4">
-        {{ t('dialog.dialogResetAllData') }}
-      </p>
-      <div class="modal-action">
-        <form method="dialog" class="flex gap-3">
-          <!-- if there is a button in form, it will close the modal -->
-          <button class="btn" @click="resetDataDialogRef.close()">
-            {{ t(`button.cancel`) }}
-          </button>
-          <button class="btn" @click="resetData">
-            {{ t('button.confirm') }}
-          </button>
-        </form>
-      </div>
-    </div>
-  </dialog>
-  <div>
-    <h2>{{ t('viewTitle.globalSetting') }}</h2>
-    <div class="mb-8">
-      <button class="btn btn-sm btn-primary" @click="resetDataDialogRef.showModal()">
-        {{ t('button.resetAllData') }}
-      </button>
-    </div>
-    <label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
-      <div class="">
-        <div class="label">
-          <span class="label-text">{{ t('table.title') }}</span>
-        </div>
-        <input
-          v-model="topTitleValue" type="text" :placeholder="t('placeHolder.enterTitle')"
-          class="w-full max-w-xs input input-bordered"
-        >
-      </div>
-    </label>
-    <label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
-      <div class="">
-        <div class="label">
-          <span class="label-text">{{ t('table.columnNumber') }}</span>
-        </div>
-        <input
-          v-model="formData.rowCount" type="number" placeholder="Type here"
-          class="w-full max-w-xs input input-bordered"
-        >
-        <div class="help">
-          <span v-if="formErr.rowCount" class="text-sm text-red-400 help-text">
-            {{ formErr.rowCount }}
-          </span>
-        </div>
-      </div>
-      <div>
-        <div class="tooltip" :data-tip="t('tooltip.resetLayout')">
-          <button class="mt-5 btn btn-info btn-sm" :disabled="isRowCountChange !== 1" @click="resetPersonLayout">
-            <span>{{ t('button.setLayout') }}</span>
-            <span v-show="isRowCountChange === 2" class="loading loading-ring loading-md" />
-          </button>
-        </div>
-      </div>
-    </label>
-    <label class="w-full max-w-xs form-control">
-      <div class="label">
-        <span class="label-text">{{ t('table.language') }}</span>
-      </div>
-      <select v-model="languageValue" data-choose-theme class="w-full max-w-xs border-solid select border-1">
-        <option disabled selected>{{ t('table.language') }}</option>
-        <option v-for="item in languageList" :key="item.key" :value="item.key">{{ item.name }}</option>
-      </select>
-    </label>
-    <label class="w-full max-w-xs form-control">
-      <div class="label">
-        <span class="label-text">{{ t('table.theme') }}</span>
-      </div>
-      <select v-model="themeValue" data-choose-theme class="w-full max-w-xs border-solid select border-1">
-        <option disabled selected>{{ t('table.theme') }}</option>
-        <option v-for="(item, index) in themeList" :key="index" :value="item">{{ item }}</option>
-      </select>
-    </label>
-    <label class="w-full max-w-xs form-control">
-      <div class="label">
-        <span class="label-text">{{ t('table.backgroundImage') }}</span>
-      </div>
-      <select
-        v-model="backgroundImageValue" data-choose-theme
-        class="w-full max-w-xs border-solid select border-1"
-      >
-        <option disabled selected>{{ t('table.backgroundImage') }}</option>
-        <option
-          v-for="(item, index) in [{ name: '❌', url: '', id: '' }, ...imageList]" :key="index"
-          :value="item"
-        >{{ item.name }}</option>
-      </select>
-    </label>
-    <label class="w-full max-w-xs form-control">
-      <div class="label">
-        <span class="label-text">{{ t('table.cardColor') }}</span>
-      </div>
-      <ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue" />
-    </label>
-    <label class="w-full max-w-xs form-control">
-      <div class="label">
-        <span class="label-text">{{ t('table.winnerColor') }}</span>
-      </div>
-      <ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue" />
-    </label>
-
-    <label class="w-full max-w-xs form-control">
-      <div class="label">
-        <span class="label-text">{{ t('table.textColor') }}</span>
-      </div>
-      <ColorPicker ref="colorPickerRef" v-model="textColorValue" v-model:pure-color="textColorValue" />
-    </label>
-    <label class="flex flex-row w-full max-w-xs gap-10 mb-10 form-control">
-      <div>
-        <div class="label">
-          <span class="label-text">{{ t('table.cardWidth') }}</span>
-        </div>
-        <input
-          v-model="cardSizeValue.width" type="number" placeholder="Type here"
-          class="w-full max-w-xs input input-bordered"
-        >
-      </div>
-      <div>
-        <div class="label">
-          <span class="label-text">{{ t('table.cardHeight') }}</span>
-        </div>
-        <input
-          v-model="cardSizeValue.height" type="number" placeholder="Type here"
-          class="w-full max-w-xs input input-bordered"
-        >
-      </div>
-    </label>
-    <label class="w-full max-w-xs mb-10 form-control">
-      <div class="label">
-        <span class="label-text">{{ t('table.textSize') }}</span>
-      </div>
-      <input
-        v-model="textSizeValue" type="number" placeholder="Type here"
-        class="w-full max-w-xs input input-bordered"
-      >
-    </label>
-    <label class="w-full max-w-xs form-control">
-      <div class="label">
-        <span class="label-text">{{ t('table.highlightColor') }}</span>
-      </div>
-      <ColorPicker ref="colorPickerRef" v-model="patternColorValue" v-model:pure-color="patternColorValue" />
-    </label>
-    <label class="flex flex-row items-center w-full gap-24 mb-0 form-control">
-      <div>
-        <div class="label">
-          <span class="label-text">{{ t('table.patternSetting') }}</span>
-        </div>
-        <div class="h-auto">
-          <PatternSetting
-            :row-count="rowCount" :card-color="cardColor" :pattern-color="patternColor"
-            :pattern-list="patternList"
-          />
-        </div>
-      </div>
-    </label>
-    <div class="flex w-full h-24 gap-3 m-0">
-      <button class="mt-5 btn btn-info btn-sm" @click.stop="clearPattern">
-        <span>{{ t('button.clearPattern') }}</span>
-      </button>
-      <div class="tooltip" :data-tip="t('tooltip.defaultLayout')">
-        <button class="mt-5 btn btn-info btn-sm" @click="resetPattern">
-          <span>{{ t('button.DefaultPattern') }}</span>
-        </button>
-      </div>
-    </div>
-
-    <label class="w-full max-w-xs mb-10 form-control">
-      <div class="label">
-        <span class="label-text">{{ t('table.alwaysDisplay') }}</span>
-      </div>
-      <input
-        type="checkbox" :checked="isShowPrizeListValue" class="mt-2 border-solid checkbox checkbox-secondary border-1"
-        @change="isShowPrizeListValue = !isShowPrizeListValue"
-      >
-    </label>
-
-    <label class="w-full max-w-xs mb-10 form-control">
-        <div class="label">
-            <span class="label-text">{{ t('table.avatarDisplay') }}</span>
-        </div>
-        <input type="checkbox" :checked="isShowAvatarValue" @change="isShowAvatarValue = !isShowAvatarValue"
-          class="mt-2 border-solid checkbox checkbox-secondary border-1" />
-    </label>
-  </div>
-</template>
-
-<style lang='scss' scoped></style>

src/views/Config/Global/FaceConfig/components/SelectFont.vue

@@ -0,0 +1,129 @@
+<script setup lang='ts'>
+import { refDebounced } from '@vueuse/core'
+import { ChevronRight, ChevronsUpDownIcon } from 'lucide-vue-next'
+import { PopoverArrow } from 'reka-ui'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { useLocalFonts } from '@/hooks/useLocalFonts'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  disabled?: boolean
+}>()
+const selectedFont = defineModel('selectedFont', {
+  type: String,
+  required: true,
+})
+const { getFonts, disabled: browserDisabled, fonts } = useLocalFonts()
+const open = ref(false)
+const activeKey = ref('')
+const debouncedActiveKey = refDebounced(activeKey, 20)
+const { t } = useI18n()
+function selectFont(selectedValue: any) {
+  open.value = false
+  activeKey.value = ''
+  selectedFont.value = selectedValue
+}
+
+function handelActiveKey(val: string) {
+  activeKey.value = val
+}
+
+function handleScroll() {
+  activeKey.value = ''
+}
+const disabledStyle = computed(() => {
+  if (props.disabled || browserDisabled) {
+    return {
+      cursor: 'not-allowed',
+    }
+  }
+  return {}
+})
+</script>
+
+<template>
+  <div class="w-full h-full flex justify-center items-center max-w-xs" :style="disabledStyle">
+    <Popover v-model:open="open" class="w-full">
+      <PopoverTrigger as-child :disabled="browserDisabled || disabled">
+        <Button
+          variant="outline"
+          role="combobox"
+          :aria-expanded="open"
+          class="w-full justify-between truncate hover:bg-transparent hover:text-inherit"
+          @click="getFonts"
+        >
+          <span class="w-7/8 text-left truncate" :style="{ fontFamily: `${selectedFont}` }">
+            {{ selectedFont || t('placeHolder.selectFont') }}
+          </span>
+          <ChevronsUpDownIcon class="opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-full p-0 bg-base-100">
+        <Command>
+          <CommandInput class="h-9" placeholder="Search framework..." />
+          <CommandList @scroll="handleScroll">
+            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandGroup>
+              <CommandItem
+                v-for="[key, value] in fonts"
+                :key="key"
+                :value="key"
+                class="w-full hover:bg-gray-200/60"
+                @select="selectFont(key)"
+              >
+                <Popover :open="debouncedActiveKey === key" class="w-full">
+                  <PopoverTrigger class="w-full">
+                    <div :style="{ fontFamily: `${key}` }" class="w-full flex justify-between items-center" @mouseleave="handelActiveKey('')" @mouseenter="handelActiveKey(key)">
+                      {{ key }}
+                      <ChevronRight
+                        :class="cn(
+                          'ml-auto',
+                        )"
+                      />
+                    </div>
+                  </PopoverTrigger>
+                  <PopoverContent class="p-2 bg-base-100" side="right" @mouseleave="handelActiveKey('')" @mouseenter="handelActiveKey(key)">
+                    <PopoverArrow />
+                    <Command>
+                      <CommandGroup>
+                        <CommandItem
+                          v-for="child in value"
+                          :key="child.value"
+                          :value="child.value"
+                          class="w-full hover:bg-gray-200/60"
+                          :style="{ fontFamily: `${key}` }"
+                          @select="selectFont(child.value)"
+                        >
+                          {{ child.name }}
+                        </CommandItem>
+                      </CommandGroup>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+
+</style>

src/views/Config/Global/FaceConfig/components/UploadDialog.vue

@@ -0,0 +1,73 @@
+<script setup lang='ts'>
+import type { IFileData } from '@/components/FileUpload/type'
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'vue-toast-notification'
+import CustomDialog from '@/components/Dialog/index.vue'
+import FileUpload from '@/components/FileUpload/index.vue'
+
+interface Props {
+  importAllConfigData: (data: any) => void
+}
+
+const props = defineProps<Props>()
+const toast = useToast()
+const limitType = ref('application/json')
+const visible = defineModel('visible', {
+  type: Boolean,
+  required: true,
+})
+const jsonFileData = ref<IFileData | null>(null)
+const { t } = useI18n()
+const uploadDialogRef = ref()
+
+async function uploadFile(fileData: IFileData | null) {
+  if (!fileData) {
+    jsonFileData.value = null
+    return
+  }
+  const isJson = /application\/json/.test(fileData?.type || '')
+  if (!isJson) {
+    toast.open({
+      message: t('error.notJsonFile'),
+      type: 'error',
+      position: 'top-right',
+    })
+    return
+  }
+  jsonFileData.value = fileData
+}
+
+function submitUpload() {
+  if (jsonFileData.value) {
+    // 把文件转化为json数据
+    const jsonData = jsonFileData.value.data
+    props.importAllConfigData(jsonData)
+  }
+}
+watch(visible, (newVal) => {
+  if (newVal) {
+    uploadDialogRef.value.showDialog()
+  }
+})
+</script>
+
+<template>
+  <CustomDialog
+    ref="uploadDialogRef"
+    v-model:visible="visible"
+    :title="t('dialog.uploadFileTitle')"
+    :submit-func="submitUpload"
+    class=""
+  >
+    <template #content>
+      <div class="flex flex-col items-center gap-6 w-full px-12">
+        <FileUpload v-if="visible" :limit-type="limitType" mode="json" @upload-file="uploadFile" />
+      </div>
+    </template>
+  </CustomDialog>
+</template>
+
+<style scoped>
+
+</style>

src/views/Config/Global/FaceConfig/index.vue

@@ -0,0 +1,97 @@
+<script setup lang='ts'>
+import { useI18n } from 'vue-i18n'
+import GridWaterfall from '@/components/Waterfall/index.vue'
+import { AbilitySetting, DataSetting, LayoutSetting, PatternSetting, TextSetting, ThemeSetting } from './parts'
+import { useViewModel } from './useViewModel'
+
+const { t } = useI18n()
+const {
+  resetData,
+  topTitleValue,
+  languageValue,
+  textSizeValue,
+  currentFontValue,
+  currentTitleFontValue,
+  titleFontSyncGlobalValue,
+  languageList,
+  formErr,
+  formData,
+  cardSizeValue,
+  isShowPrizeListValue,
+  isShowAvatarValue,
+  resetPersonLayout,
+  isRowCountChange,
+  themeValue,
+  backgroundImageValue,
+  cardColorValue,
+  luckyCardColorValue,
+  textColorValue,
+  patternColorValue,
+  imageList,
+  rowCount,
+  cardColor,
+  patternColor,
+  patternList,
+  clearPattern,
+  resetPattern,
+  exportAllConfigData,
+  importAllConfigData,
+  definiteTimeValue,
+  isWinMusicValue,
+} = useViewModel()
+</script>
+
+<template>
+  <div class="w-4/5 flex flex-col gap-4">
+    <h2>{{ t('viewTitle.globalSetting') }}</h2>
+    <!-- <div class="flex flex-wrap h-auto w-full gap-6"> -->
+    <GridWaterfall>
+      <!-- 数据操作 -->
+      <DataSetting :reset-data="resetData" :export-all-config-data="exportAllConfigData" :import-all-config-data="importAllConfigData" />
+      <!-- 文本设置（主标题、语言、文字大小） -->
+      <TextSetting
+        v-model:top-title-value="topTitleValue"
+        v-model:language-value="languageValue"
+        v-model:text-size-value="textSizeValue"
+        v-model:current-font-value="currentFontValue"
+        v-model:current-title-font-value="currentTitleFontValue"
+        v-model:title-font-sync-global-value="titleFontSyncGlobalValue"
+        v-model:language-list="languageList"
+      />
+      <!-- 布局设置（列数、卡片宽度、卡片高度 -->
+      <LayoutSetting
+        v-model:form-err="formErr"
+        v-model:form-data="formData"
+        v-model:card-size-value="cardSizeValue"
+        v-model:is-show-prize-list-value="isShowPrizeListValue"
+        v-model:is-show-avatar-value="isShowAvatarValue"
+        :reset-person-layout="resetPersonLayout"
+        :is-row-count-change="isRowCountChange"
+      />
+      <!-- 主题设置（主题、背景图片） -->
+      <ThemeSetting
+        v-model:theme-value="themeValue"
+        v-model:background-image-value="backgroundImageValue"
+        v-model:card-color-value="cardColorValue"
+        v-model:lucky-card-color-value="luckyCardColorValue"
+        v-model:text-color-value="textColorValue"
+        v-model:pattern-color-value="patternColorValue"
+        :image-list="imageList"
+      />
+      <!-- 图案设置 -->
+      <PatternSetting
+        :row-count="rowCount"
+        :card-color="cardColor"
+        :pattern-color="patternColor"
+        :pattern-list="patternList"
+        :clear-pattern="clearPattern"
+        :reset-pattern="resetPattern"
+      />
+      <!-- 功能设置 -->
+      <AbilitySetting v-model:definite-time="definiteTimeValue" v-model:win-music="isWinMusicValue" />
+    </GridWaterfall>
+    <!-- </div> -->
+  </div>
+</template>
+
+<style lang='scss' scoped></style>

src/views/Config/Global/FaceConfig/parts/AbilitySetting.vue

@@ -0,0 +1,47 @@
+<script setup lang='ts'>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const definiteTime = defineModel<number | null>('definiteTime', { required: true })
+const winMusic = defineModel<boolean>('winMusic', { required: true })
+</script>
+
+<template>
+  <fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
+    <legend class="fieldset-legend">
+      {{ t('table.abilitySetting') }}
+    </legend>
+
+    <label class="flex flex-row items-center form-control">
+      <div class="">
+        <div class="label flex flex-col justify-start items-start">
+          <label class="label">
+            <span class="label-text text-left">{{ t('table.timedStop') }}</span>
+            <div class="tooltip" :data-tip="t('tooltip.timedStop')">
+              <button class="btn btn-circle h-4 hover:bg-base-300">
+                ?
+              </button>
+            </div>
+          </label>
+          <input
+            v-model="definiteTime" type="number" :placeholder="t('placeHolder.timedStop')"
+            class="w-full max-w-xs input input-bordered"
+          >
+        </div>
+      </div>
+    </label>
+    <div class="flex items-center justify-between w-full max-w-xs gap-2 mb-3 form-control">
+      <div class="label">
+        <span class="label-text">{{ t('table.playWinMusic') }}</span>
+      </div>
+      <input
+        type="checkbox" :checked="winMusic" class="border-solid checkbox checkbox-secondary border"
+        @change="winMusic = !winMusic"
+      >
+    </div>
+  </fieldset>
+</template>
+
+<style scoped>
+
+</style>

src/views/Config/Global/FaceConfig/parts/DataSetting.vue

@@ -0,0 +1,87 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import UploadJsonModal from '../components/UploadDialog.vue'
+
+interface Props {
+  resetData: () => void
+  exportAllConfigData: () => void
+  importAllConfigData: (data: any) => void
+}
+
+defineProps<Props>()
+
+const { t } = useI18n()
+const resetDataDialogRef = ref()
+const uploadVisible = ref(false)
+</script>
+
+<template>
+  <fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
+    <legend class="fieldset-legend">
+      {{ t('table.dataSetting') }}
+    </legend>
+    <dialog id="my_modal_1" ref="resetDataDialogRef" class="border-none modal">
+      <div class="modal-box">
+        <h3 class="text-lg font-bold">
+          {{ t('dialog.titleTip') }}
+        </h3>
+        <p class="py-4">
+          {{ t('dialog.dialogResetAllData') }}
+        </p>
+        <div class="modal-action">
+          <form method="dialog" class="flex gap-3">
+            <!-- if there is a button in form, it will close the modal -->
+            <button class="btn" @click="resetDataDialogRef.close()">
+              {{ t(`button.cancel`) }}
+            </button>
+            <button class="btn" @click="resetData">
+              {{ t('button.confirm') }}
+            </button>
+          </form>
+        </div>
+      </div>
+    </dialog>
+    <UploadJsonModal v-model:visible="uploadVisible" :import-all-config-data="importAllConfigData" />
+    <label class="flex flex-row items-center form-control">
+      <div class="">
+        <div class="label flex flex-col justify-start items-start">
+          <span class="label-text text-left">{{ t('table.resetAllData') }}</span>
+          <div class="help">
+            <button class="btn btn-sm btn-primary" @click="resetDataDialogRef.showModal()">
+              {{ t('button.resetAllData') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </label>
+    <!-- <label class="flex flex-row items-center form-control">
+      <div class="">
+        <div class="label flex flex-col justify-start items-start">
+          <span class="label-text text-left">导出数据</span>
+          <div class="help">
+            <button class="btn btn-sm btn-primary" @click="exportAllConfigData">
+              导出全部数据
+            </button>
+          </div>
+        </div>
+      </div>
+    </label>
+    <label class="flex flex-row items-center form-control">
+      <div class="">
+        <div class="label flex flex-col justify-start items-start">
+          <span class="label-text text-left">导入数据</span>
+          <div class="help">
+            <button class="btn btn-sm btn-primary" @click="uploadVisible = true">
+              导入设置
+            </button>
+          </div>
+        </div>
+      </div>
+    </label> -->
+  </fieldset>
+</template>
+
+<style scoped>
+
+</style>

src/views/Config/Global/FaceConfig/parts/LayoutSetting.vue

@@ -0,0 +1,91 @@
+<script setup lang='ts'>
+import { useI18n } from 'vue-i18n'
+
+interface Props {
+  resetPersonLayout: () => void
+  isRowCountChange: number
+}
+defineProps<Props>()
+
+const { t } = useI18n()
+const formErr = defineModel<{ rowCount: string }>('formErr', { required: true })
+const formData = defineModel<{ rowCount: number }>('formData', { required: true })
+const cardSizeValue = defineModel<{ width: number, height: number }>('cardSizeValue', { required: true })
+const isShowPrizeListValue = defineModel<boolean>('isShowPrizeListValue', { required: true })
+const isShowAvatarValue = defineModel<boolean>('isShowAvatarValue', { required: false })
+</script>
+
+<template>
+  <fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
+    <legend class="fieldset-legend">
+      {{ t('table.layoutSetting') }}
+    </legend>
+    <label class="flex flex-row items-center form-control">
+      <div class="">
+        <div class="label">
+          <span class="label-text">{{ t('table.columnNumber') }}</span>
+          <div class="help">
+            <span v-if="formErr.rowCount" class="text-xs text-red-400 help-text">
+              {{ formErr.rowCount }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </label>
+    <div class="join">
+      <input
+        v-model="formData.rowCount" type="number" placeholder="Type here"
+        class="w-full input input-bordered join-item"
+      >
+      <div class="tooltip join-item" :data-tip="t('tooltip.resetLayout')">
+        <button class="btn btn-neutral w-30 join-item" :disabled="isRowCountChange !== 1" @click="resetPersonLayout">
+          <span>{{ t('button.setLayout') }}</span>
+          <span v-show="isRowCountChange === 2" class="loading loading-ring loading-md" />
+        </button>
+      </div>
+    </div>
+
+    <label class="flex flex-row w-full max-w-xs gap-10 form-control">
+      <div>
+        <div class="label">
+          <span class="label-text">{{ t('table.cardWidth') }}</span>
+        </div>
+        <input
+          v-model="cardSizeValue.width" type="number" placeholder="Type here"
+          class="w-full max-w-xs input input-bordered"
+        >
+      </div>
+      <div>
+        <div class="label">
+          <span class="label-text">{{ t('table.cardHeight') }}</span>
+        </div>
+        <input
+          v-model="cardSizeValue.height" type="number" placeholder="Type here"
+          class="w-full max-w-xs input input-bordered"
+        >
+      </div>
+    </label>
+    <div class="flex items-center justify-between w-full max-w-xs gap-2 mb-3 form-control">
+      <div class="label">
+        <span class="label-text">{{ t('table.alwaysDisplay') }}</span>
+      </div>
+      <input
+        type="checkbox" :checked="isShowPrizeListValue" class="border-solid checkbox checkbox-secondary border"
+        @change="isShowPrizeListValue = !isShowPrizeListValue"
+      >
+    </div>
+    <div class="flex items-center justify-between w-full max-w-xs gap-2 mb-3 form-control">
+      <div class="label">
+        <span class="label-text">{{ t('table.avatarDisplay') }}</span>
+      </div>
+      <input
+        type="checkbox" :checked="isShowAvatarValue" class="border-solid checkbox checkbox-secondary border"
+        @change="isShowAvatarValue = !isShowAvatarValue"
+      >
+    </div>
+  </fieldset>
+</template>
+
+<style scoped>
+
+</style>

src/views/Config/Global/FaceConfig/parts/PatternSetting.vue

@@ -0,0 +1,50 @@
+<script setup lang='ts'>
+import { useI18n } from 'vue-i18n'
+import PatternEdit from '../components/PatternEdit.vue'
+
+interface Props {
+  rowCount: number
+  cardColor: string
+  patternColor: string
+  patternList: number[]
+  clearPattern: () => void
+  resetPattern: () => void
+}
+defineProps<Props>()
+const { t } = useI18n()
+</script>
+
+<template>
+  <fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
+    <legend class="fieldset-legend">
+      {{ t('table.patternSetting') }}
+    </legend>
+    <div class="items-center gap-24 mb-0 form-control">
+      <div>
+        <label class="label">
+          <span class="label-text">{{ t('table.patternSetting') }}</span>
+        </label>
+        <div class="h-auto">
+          <PatternEdit
+            :row-count="rowCount" :card-color="cardColor" :pattern-color="patternColor"
+            :pattern-list="patternList"
+          />
+        </div>
+      </div>
+      <div class="flex w-full gap-3 m-0">
+        <button class="mt-5 btn btn-info btn-sm" @click.stop="clearPattern">
+          <span>{{ t('button.clearPattern') }}</span>
+        </button>
+        <div class="tooltip" :data-tip="t('tooltip.defaultLayout')">
+          <button class="mt-5 btn btn-info btn-sm" @click="resetPattern">
+            <span>{{ t('button.DefaultPattern') }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</template>
+
+<style scoped>
+
+</style>

src/views/Config/Global/FaceConfig/parts/TextSetting.vue

@@ -0,0 +1,72 @@
+<script setup lang='ts'>
+import { useI18n } from 'vue-i18n'
+import SelectFont from '../components/SelectFont.vue'
+
+const { t } = useI18n()
+const languageList = defineModel<any[]>('languageList')
+const topTitleValue = defineModel<string>('topTitleValue', { default: '' })
+const languageValue = defineModel<string>('languageValue', { default: 'zh-CN' })
+const textSizeValue = defineModel<number>('textSizeValue')
+const currentFontValue = defineModel<string>('currentFontValue', { default: '', type: String })
+const currentTitleFontValue = defineModel<string>('currentTitleFontValue', { default: '', type: String })
+const titleFontSyncGlobalValue = defineModel<boolean>('titleFontSyncGlobalValue')
+</script>
+
+<template>
+  <fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
+    <legend class="fieldset-legend">
+      {{ t('table.textSetting') }}
+    </legend>
+    <label class="label">
+      <div class="label">
+        <span class="label-text">{{ t('table.title') }}</span>
+      </div>
+    </label>
+    <input
+      v-model="topTitleValue" type="text" :placeholder="t('placeHolder.enterTitle')"
+      class="w-full max-w-xs input input-bordered"
+    >
+    <label class="w-full max-w-xs form-control">
+      <div class="label">
+        <span class="label-text">{{ t('table.language') }}</span>
+      </div>
+      <select v-model="languageValue" data-choose-theme class="w-full max-w-xs border-solid select border">
+        <option disabled selected>{{ t('table.language') }}</option>
+        <option v-for="item in languageList" :key="item.key" :value="item.key">{{ item.name }}</option>
+      </select>
+    </label>
+    <label class="w-full max-w-xs form-control">
+      <div class="label">
+        <span class="label-text">{{ t('table.textSize') }}</span>
+      </div>
+      <input
+        v-model="textSizeValue" type="number" placeholder="Type here"
+        class="w-full max-w-xs input input-bordered"
+      >
+    </label>
+    <label class="w-full max-w-xs form-control mt-3">
+      <div class="label">
+        <span class="label-text">{{ t('table.globalFont') }}</span>
+      </div>
+      <SelectFont v-model:selected-font="currentFontValue" />
+    </label>
+    <label class="flex flex-row w-full max-w-xs mt-5 gap-10 form-control">
+      <div class="w-3/4">
+        <div class="label">
+          <span class="label-text">{{ t('table.titleFont') }}</span>
+        </div>
+        <SelectFont v-model:selected-font="currentTitleFontValue" :disabled="titleFontSyncGlobalValue" />
+      </div>
+      <div class="flex flex-col gap-4">
+        <div class="label">
+          <span class="label-text">{{ t('table.syncGlobalFont') }}</span>
+        </div>
+        <input type="checkbox" :checked="titleFontSyncGlobalValue" class="border-solid checkbox checkbox-secondary border" @change="titleFontSyncGlobalValue = !titleFontSyncGlobalValue">
+      </div>
+    </label>
+  </fieldset>
+</template>
+
+<style scoped>
+
+</style>

src/views/Config/Global/FaceConfig/parts/ThemeSetting.vue

@@ -0,0 +1,108 @@
+<script setup lang='ts'>
+import type { IImage } from '@/types/storeType'
+import { reactive } from 'vue'
+import { ColorPicker } from 'vue3-colorpicker'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { daisyuiThemes } from '@/constant/theme'
+import 'vue3-colorpicker/style.css'
+
+interface Props {
+  imageList: Array<IImage>
+}
+defineProps<Props>()
+const themeList = reactive(daisyuiThemes)
+const router = useRouter()
+const { t } = useI18n()
+
+const themeValue = defineModel<string>('themeValue')
+const backgroundImageValue = defineModel<object>('backgroundImageValue')
+const cardColorValue = defineModel<string>('cardColorValue')
+const luckyCardColorValue = defineModel<string>('luckyCardColorValue')
+const textColorValue = defineModel<string>('textColorValue')
+const patternColorValue = defineModel<string>('patternColorValue')
+</script>
+
+<template>
+  <fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
+    <legend class="fieldset-legend">
+      {{ t('table.themeSetting') }}
+    </legend>
+
+    <div class="w-full max-w-xs form-control">
+      <label class="label">
+        <span class="label-text">{{ t('table.theme') }}</span>
+      </label>
+      <select v-model="themeValue" data-choose-theme class="w-full max-w-xs border-solid select border">
+        <option disabled selected>
+          {{ t('table.theme') }}
+        </option>
+        <option v-for="(item, index) in themeList" :key="index" :value="item">
+          {{ item }}
+        </option>
+      </select>
+    </div>
+    <div class="w-full max-w-xs form-control">
+      <label class="label">
+        <span class="label-text">{{ t('table.backgroundImage') }}</span>
+      </label>
+      <select
+        v-model="backgroundImageValue" data-choose-theme
+        class="box-border w-full max-w-xs truncate border-solid select border"
+      >
+        <option disabled selected class="w-full truncate">
+          {{ t('table.backgroundImage') }}
+        </option>
+        <option
+          v-for="(item, index) in [{ name: '❌', url: '', id: '' }, ...imageList]" :key="index"
+          :value="item"
+          :title="item.name"
+          class="box-border w-full truncate"
+        >
+          <span class="truncate w-option-xs">{{ item.name }}</span>
+        </option>
+      </select>
+      <span class="label">
+        {{ t('tooltip.pleaseGoto') }}
+        <a class="link link-info" @click="() => { router.push('image') }">
+          {{ t('sidebar.imagesManagement') }}
+        </a>
+        {{ t('tooltip.uploadImage') }}</span>
+    </div>
+    <div class="grid w-full grid-cols-2 gap-4">
+      <div class="flex flex-col items-center max-w-xs gap-1 form-control">
+        <label class="label">
+          <span class="label-text">{{ t('table.cardColor') }}</span>
+        </label>
+        <ColorPicker v-model="cardColorValue" v-model:pure-color="cardColorValue" />
+      </div>
+      <div class="flex flex-col items-center max-w-xs gap-1 form-control">
+        <label class="label">
+          <span class="label-text">{{ t('table.winnerColor') }}</span>
+        </label>
+        <ColorPicker v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue" />
+      </div>
+      <div class="flex flex-col items-center max-w-xs gap-1 form-control">
+        <label class="label">
+          <span class="label-text">{{ t('table.textColor') }}</span>
+          <div class="tooltip" data-tip="设置文本颜色会覆盖标题样式">
+            <button class="btn btn-circle h-4 hover:bg-base-300">
+              ?
+            </button>
+          </div>
+        </label>
+        <ColorPicker v-model="textColorValue" v-model:pure-color="textColorValue" />
+      </div>
+      <div class="flex flex-col items-center max-w-xs gap-1 form-control">
+        <label class="label">
+          <span class="label-text">{{ t('table.highlightColor') }}</span>
+        </label>
+        <ColorPicker v-model="patternColorValue" v-model:pure-color="patternColorValue" />
+      </div>
+    </div>
+  </fieldset>
+</template>
+
+<style scoped>
+
+</style>

src/views/Config/Global/FaceConfig/parts/index.ts

@@ -0,0 +1,6 @@
+export { default as AbilitySetting } from './AbilitySetting.vue'
+export { default as DataSetting } from './DataSetting.vue'
+export { default as LayoutSetting } from './LayoutSetting.vue'
+export { default as PatternSetting } from './PatternSetting.vue'
+export { default as TextSetting } from './TextSetting.vue'
+export { default as ThemeSetting } from './ThemeSetting.vue'

src/views/Config/Global/FaceConfig/useViewModel.ts

@@ -0,0 +1,241 @@
+import { storeToRefs } from 'pinia'
+import { onMounted, ref, watch } from 'vue'
+import { z as zod } from 'zod'
+import i18n, { languageList } from '@/locales/i18n'
+import useStore from '@/store'
+import { themeChange } from '@/utils'
+import { clearAllDbStore } from '@/utils/localforage'
+
+export function useViewModel() {
+  type ValidatePayload = zod.infer<typeof schema>
+  const globalConfig = useStore().globalConfig
+  const personConfig = useStore().personConfig
+  const prizeConfig = useStore().prizeConfig
+  const {
+    getGlobalConfig: globalConfigData,
+    getTopTitle: topTitle,
+    getTheme: localTheme,
+    getPatterColor: patternColor,
+    getPatternList: patternList,
+    getCardColor: cardColor,
+    getLuckyColor: luckyCardColor,
+    getTextColor: textColor,
+    getCardSize: cardSize,
+    getTextSize: textSize,
+    getRowCount: rowCount,
+    getIsShowPrizeList: isShowPrizeList,
+    getLanguage: userLanguage,
+    getBackground: backgroundImage,
+    getFont: currentFont,
+    getTitleFont: currentTitleFont,
+    getTitleFontSyncGlobal: titleFontSyncGlobal,
+    getImageList: imageList,
+    getIsShowAvatar: isShowAvatar,
+    getDefiniteTime: definiteTime,
+    getWinMusic: isWinMusic,
+  } = storeToRefs(globalConfig)
+  const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
+
+  const isRowCountChange = ref(0) // 0未改变，1改变,2加载中
+  const themeValue = ref(localTheme.value.name)
+  const topTitleValue = ref(structuredClone(topTitle.value))
+  const cardColorValue = ref(structuredClone(cardColor.value))
+  const luckyCardColorValue = ref(structuredClone(luckyCardColor.value))
+  const textColorValue = ref(structuredClone(textColor.value))
+  const cardSizeValue = ref(structuredClone(cardSize.value))
+  const textSizeValue = ref(structuredClone(textSize.value))
+  const rowCountValue = ref(structuredClone(rowCount.value))
+  const languageValue = ref(structuredClone(userLanguage.value))
+  const isShowPrizeListValue = ref(structuredClone(isShowPrizeList.value))
+  const isShowAvatarValue = ref(structuredClone(isShowAvatar.value))
+  const patternColorValue = ref(structuredClone(patternColor.value))
+  const backgroundImageValue = ref(backgroundImage.value)
+  const currentFontValue = ref(structuredClone(currentFont.value))
+  const currentTitleFontValue = ref(structuredClone(currentTitleFont.value))
+  const titleFontSyncGlobalValue = ref(structuredClone(titleFontSyncGlobal.value))
+  const definiteTimeValue = ref(structuredClone(definiteTime.value))
+  const isWinMusicValue = ref(structuredClone(isWinMusic.value))
+  const formData = ref({
+    rowCount: rowCountValue,
+  })
+  const formErr = ref({
+    rowCount: '',
+  })
+  const schema = zod.object({
+    rowCount: zod.number({
+      error: i18n.global.t('error.require'),
+      // required_error: i18n.global.t('error.require'),
+      // invalid_type_error: i18n.global.t('error.requireNumber'),
+    })
+      .min(1, i18n.global.t('error.minNumber1'))
+      .max(100, i18n.global.t('error.maxNumber100')),
+    // 格式化
+
+  })
+  const payload: ValidatePayload = {
+    rowCount: formData.value.rowCount,
+  }
+  function parseSchema(props: ValidatePayload) {
+    return schema.parseAsync(props)
+  }
+
+  function resetPersonLayout() {
+    isRowCountChange.value = 2
+    setTimeout(() => {
+      const alreadyLen = alreadyPersonList.value.length
+      const notLen = notPersonList.value.length
+      if (alreadyLen <= 0 && notLen <= 0) {
+        return
+      }
+      const allPersonList = alreadyPersonList.value.concat(notPersonList.value)
+      const newAlreadyPersonList = allPersonList.slice(0, alreadyLen)
+      const newNotPersonList = allPersonList.slice(alreadyLen, notLen + alreadyLen)
+      personConfig.deleteAllPerson()
+      personConfig.addNotPersonList(newNotPersonList)
+      personConfig.addAlreadyPersonList(newAlreadyPersonList, null)
+
+      isRowCountChange.value = 0
+    }, 1000)
+  }
+
+  function clearPattern() {
+    globalConfig.setPatternList([] as number[])
+  }
+  function resetPattern() {
+    globalConfig.resetPatternList()
+  }
+
+  function resetData() {
+    globalConfig.reset()
+    personConfig.reset()
+    prizeConfig.resetDefault()
+    //   删除所有indexDb
+    clearAllDbStore()
+    // 刷新页面
+    window.location.reload()
+  }
+
+  function exportAllConfigData() {
+    // const globalConfigData = globalConfig.getGlobalConfig()
+    // console.log(globalConfigData.value)
+    // const globalConfigData = globalConfig.getGlobalConfig()
+    const dataStr = JSON.stringify(globalConfigData.value, null, 2)
+    const dataUri = `data:application/json;charset=utf-8,${encodeURIComponent(dataStr)}`
+
+    const exportFileDefaultName = 'global-config.json'
+
+    const linkElement = document.createElement('a')
+    linkElement.setAttribute('href', dataUri)
+    linkElement.setAttribute('download', exportFileDefaultName)
+    linkElement.click()
+  }
+  function importAllConfigData(data: any) {
+    globalConfig.setGlobalConfig(data)
+    window.location.reload()
+  }
+
+  watch(() => formData.value.rowCount, () => {
+    payload.rowCount = formData.value.rowCount
+    parseSchema(payload).then((res) => {
+      if (res.rowCount) {
+        isRowCountChange.value = 1
+        globalConfig.setRowCount(res.rowCount)
+      }
+    }).catch((err) => {
+      formErr.value.rowCount = err.issues[0].message
+    })
+  })
+
+  watch(topTitleValue, (val) => {
+    globalConfig.setTopTitle(val)
+  })
+  watch(themeValue, (val: any) => {
+    globalConfig.setTheme({ name: val })
+    themeChange(val)
+  }, { deep: true })
+
+  watch(cardColorValue, (val: string) => {
+    globalConfig.setCardColor(val)
+  }, { deep: true })
+  watch(luckyCardColorValue, (val: string) => {
+    globalConfig.setLuckyCardColor(val)
+  }, { deep: true })
+  watch(patternColorValue, (val: string) => {
+    globalConfig.setPatterColor(val)
+  })
+  watch(textColorValue, (val: string) => {
+    globalConfig.setTextColor(val)
+  }, { deep: true })
+
+  watch(cardSizeValue, (val: { width: number, height: number }) => {
+    globalConfig.setCardSize(val)
+  }, { deep: true })
+
+  watch(isShowPrizeListValue, () => {
+    globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
+  })
+  watch(backgroundImageValue, (val) => {
+    globalConfig.setBackground(val)
+  })
+  watch(currentFontValue, (val) => {
+    globalConfig.setFont(val)
+    document.documentElement.style.setProperty('--app-font-family', `"${val}", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`)
+  })
+  watch(currentTitleFontValue, (val) => {
+    globalConfig.setTitleFont(val)
+  })
+  watch(titleFontSyncGlobalValue, (val) => {
+    globalConfig.setTitleFontSyncGlobal(val)
+  })
+  watch(languageValue, (val: string) => {
+    globalConfig.setLanguage(val)
+  })
+  watch(isShowAvatarValue, () => {
+    globalConfig.setIsShowAvatar(isShowAvatarValue.value)
+  })
+  watch(definiteTimeValue, () => {
+    globalConfig.setDefiniteTime(definiteTimeValue.value)
+  })
+  watch(isWinMusicValue, () => {
+    globalConfig.setIsPlayWinMusic(isWinMusicValue.value)
+  })
+  watch(textSizeValue, (val: number) => {
+    globalConfig.setTextSize(val)
+  })
+  onMounted(() => {
+  })
+  return {
+    resetData,
+    topTitleValue,
+    languageValue,
+    textSizeValue,
+    currentFontValue,
+    currentTitleFontValue,
+    titleFontSyncGlobalValue,
+    languageList,
+    formErr,
+    formData,
+    cardSizeValue,
+    isShowPrizeListValue,
+    isShowAvatarValue,
+    resetPersonLayout,
+    isRowCountChange,
+    themeValue,
+    backgroundImageValue,
+    cardColorValue,
+    luckyCardColorValue,
+    textColorValue,
+    patternColorValue,
+    imageList,
+    rowCount,
+    cardColor,
+    patternColor,
+    patternList,
+    clearPattern,
+    resetPattern,
+    exportAllConfigData,
+    importAllConfigData,
+    definiteTimeValue,
+    isWinMusicValue,
+  }
+}

src/views/Config/Global/ImageConfig.vue

@@ -1,118 +0,0 @@
-<script setup lang='ts'>
-import type { IImage } from '@/types/storeType'
-import ImageSync from '@/components/ImageSync/index.vue'
-import useStore from '@/store'
-import { readFileData } from '@/utils/file'
-import localforage from 'localforage'
-import { storeToRefs } from 'pinia'
-import { onMounted, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-const globalConfig = useStore().globalConfig
-const { getImageList: localImageList } = storeToRefs(globalConfig)
-const limitType = ref('image/*')
-const imgUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
-const imageDbStore = localforage.createInstance({
-  name: 'imgStore',
-})
-async function handleFileChange(e: Event) {
-  const isImage = /image*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
-  if (!isImage) {
-    imgUploadToast.value = 3
-
-    return
-  }
-  const { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
-  imageDbStore.setItem(`${new Date().getTime().toString()}+${fileName}`, dataUrl)
-    .then(() => {
-      imgUploadToast.value = 1
-      getImageDbStore()
-    })
-    .catch(() => {
-      imgUploadToast.value = 2
-    })
-}
-
-async function getImageDbStore() {
-  const keys = await imageDbStore.keys()
-  if (keys.length > 0) {
-    imageDbStore.iterate((value, key) => {
-      globalConfig.addImage({
-        id: key,
-        name: key,
-        url: 'Storage',
-      })
-    })
-  }
-}
-
-function removeImage(item: IImage) {
-  if (item.url === 'Storage') {
-    imageDbStore.removeItem(item.id).then(() => {
-      globalConfig.removeImage(item.id)
-    })
-  }
-  globalConfig.removeImage(item.id)
-}
-onMounted(() => {
-  // getImageDbStore()
-})
-watch(() => imgUploadToast.value, (val) => {
-  if (val !== 0) {
-    setTimeout(() => {
-      imgUploadToast.value = 0
-    }, 2000)
-  }
-})
-</script>
-
-<template>
-  <div class="toast toast-top toast-end">
-    <div v-if="imgUploadToast === 2" class="alert alert-error">
-      <span>{{ t('error.uploadFail') }}</span>
-    </div>
-    <div v-if="imgUploadToast === 1" class="alert alert-success">
-      <span>{{ t('error.uploadSuccess') }}</span>
-    </div>
-    <div v-if="imgUploadToast === 3" class="alert alert-error">
-      <span>{{ t('error.notImage') }}</span>
-    </div>
-  </div>
-
-  <div>
-    <div class="">
-      <label for="explore">
-        <input
-          id="explore" type="file" class="" style="display: none" :accept="limitType"
-          @change="handleFileChange"
-        >
-        <span class="btn btn-primary btn-sm">{{ t('button.upload') }}</span>
-      </label>
-    </div>
-    <ul class="p-0">
-      <li v-for="item in localImageList" :key="item.id" class="mb-3">
-        <div class="flex items-center gap-8">
-          <div class="avatar h-14">
-            <div class="w-12 h-12 mask mask-squircle hover:w-14 hover:h-14">
-              <!-- <img v-if="item.url!=='Storage'" :src="item.url" alt="Avatar Tailwind CSS Component" /> -->
-              <ImageSync :img-item="item" />
-            </div>
-          </div>
-          <div class="w-64">
-            <div class="overflow-hidden font-bold whitespace-nowrap text-ellipsis">
-              {{ item.name }}
-            </div>
-          </div>
-          <div>
-            <button class="btn btn-error btn-xs" @click="removeImage(item)">
-              {{ t('button.delete') }}
-            </button>
-          </div>
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style lang='scss' scoped></style>

src/views/Config/Global/ImageConfig/components/UploadDialog.vue

@@ -0,0 +1,114 @@
+<script setup lang='ts'>
+import type { IFileData } from '@/components/FileUpload/type'
+import localforage from 'localforage'
+import { v4 as uuidv4 } from 'uuid'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import CustomDialog from '@/components/Dialog/index.vue'
+import FileUpload from '@/components/FileUpload/index.vue'
+import useStore from '@/store'
+
+const { t } = useI18n()
+const limitType = ref('image/*')
+const imgUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
+const visible = defineModel('visible', {
+  type: Boolean,
+  required: true,
+})
+const globalConfig = useStore().globalConfig
+const imageDbStore = localforage.createInstance({
+  name: 'imgStore',
+})
+const imageData = ref<IFileData | null>(null)
+
+const fileName = computed({
+  get() {
+    return imageData.value?.fileName || null
+  },
+  set(value) {
+    if (imageData.value && value) {
+      imageData.value.fileName = value
+    }
+  },
+})
+const uploadDialogRef = ref()
+
+async function uploadFile(fileData: IFileData | null) {
+  if (!fileData) {
+    imageData.value = null
+    return
+  }
+  const isImage = /image*/.test(fileData?.type || '')
+  if (!isImage) {
+    imgUploadToast.value = 3
+    return
+  }
+  imageData.value = fileData
+}
+async function getImageDbStore() {
+  const keys = await imageDbStore.keys()
+  if (keys.length > 0) {
+    imageDbStore.iterate((value: { fileName: string, data: Blob }, key: string) => {
+      globalConfig.addImage({
+        id: key,
+        name: value.fileName,
+        url: 'Storage',
+      })
+    })
+  }
+}
+function submitUpload() {
+  if (imageData.value) {
+    const { data, fileName } = imageData.value
+    const uniqueId = uuidv4()
+    imageDbStore.setItem(uniqueId, {
+      data,
+      fileName,
+    })
+      .then(() => {
+        imgUploadToast.value = 1
+        getImageDbStore()
+      })
+      .catch(() => {
+        imgUploadToast.value = 2
+      })
+  }
+}
+watch(visible, (newVal) => {
+  if (newVal) {
+    uploadDialogRef.value.showDialog()
+  }
+})
+</script>
+
+<template>
+  <div class="toast toast-top toast-end">
+    <div v-if="imgUploadToast === 2" class="alert alert-error">
+      <span>{{ t('error.uploadFail') }}</span>
+    </div>
+    <div v-if="imgUploadToast === 1" class="alert alert-success">
+      <span>{{ t('error.uploadSuccess') }}</span>
+    </div>
+    <div v-if="imgUploadToast === 3" class="alert alert-error">
+      <span>{{ t('error.notImage') }}</span>
+    </div>
+  </div>
+  <CustomDialog
+    ref="uploadDialogRef"
+    v-model:visible="visible"
+    :title="t('dialog.uploadImageTitle')"
+    :submit-func="submitUpload"
+    class=""
+  >
+    <template #content>
+      <div class="flex flex-col items-center gap-6 w-full px-12">
+        <FileUpload v-if="visible" :limit-type="limitType" @upload-file="uploadFile" />
+        <input v-model="fileName" :disabled="imageData === null" type="text" :placeholder="t('placeHolder.imageName')" class="input w-full">
+      </div>
+    </template>
+  </CustomDialog>
+</template>
+
+<style scoped>
+
+</style>

src/views/Config/Global/ImageConfig/index.vue

@@ -0,0 +1,77 @@
+<script setup lang='ts'>
+import type { IImage } from '@/types/storeType'
+import localforage from 'localforage'
+import { storeToRefs } from 'pinia'
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import ImageSync from '@/components/ImageSync/index.vue'
+import PageHeader from '@/components/PageHeader/index.vue'
+import useStore from '@/store'
+import UploadDialog from './components/UploadDialog.vue'
+
+const { t } = useI18n()
+const globalConfig = useStore().globalConfig
+const { getImageList: localImageList } = storeToRefs(globalConfig)
+const imgUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
+const imageDbStore = localforage.createInstance({
+  name: 'imgStore',
+})
+
+const uploadVisible = ref(false)
+
+function removeImage(item: IImage) {
+  if (item.url === 'Storage') {
+    imageDbStore.removeItem(item.id).then(() => {
+      globalConfig.removeImage(item.id)
+    })
+  }
+  globalConfig.removeImage(item.id)
+}
+watch(() => imgUploadToast.value, (val) => {
+  if (val !== 0) {
+    setTimeout(() => {
+      imgUploadToast.value = 0
+    }, 2000)
+  }
+})
+</script>
+
+<template>
+  <UploadDialog v-model:visible="uploadVisible" />
+
+  <div>
+    <PageHeader :title="t('sidebar.imagesManagement')">
+      <template #buttons>
+        <div class="">
+          <label for="explore">
+            <span class="btn btn-primary btn-sm" @click="uploadVisible = true">{{ t('button.upload') }}</span>
+          </label>
+        </div>
+      </template>
+    </PageHeader>
+
+    <ul class="p-0">
+      <li v-for="item in localImageList" :key="item.id" class="mb-3">
+        <div class="flex items-center gap-8">
+          <div class="avatar h-14">
+            <div class="w-12 h-12 mask mask-squircle hover:w-14 hover:h-14">
+              <ImageSync :img-item="item" />
+            </div>
+          </div>
+          <div class="w-64">
+            <div class="overflow-hidden font-bold whitespace-nowrap text-ellipsis">
+              {{ item.name }}
+            </div>
+          </div>
+          <div>
+            <button class="btn btn-error btn-xs" @click="removeImage(item)">
+              {{ t('button.delete') }}
+            </button>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang='scss' scoped></style>

src/views/Config/Global/MusicConfig.vue

@@ -1,113 +0,0 @@
-<script setup lang='ts'>
-import type { IMusic } from '@/types/storeType'
-import useStore from '@/store'
-import { readFileData } from '@/utils/file'
-import localforage from 'localforage'
-import { storeToRefs } from 'pinia'
-
-import { onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-const audioUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
-const audioDbStore = localforage.createInstance({
-  name: 'audioStore',
-})
-const globalConfig = useStore().globalConfig
-
-const { getMusicList: localMusicList } = storeToRefs(globalConfig)
-const limitType = ref('audio/*')
-const localMusicListValue = ref(localMusicList)
-async function play(item: IMusic) {
-  globalConfig.setCurrentMusic(item, false)
-}
-
-function deleteMusic(item: IMusic) {
-  globalConfig.removeMusic(item.id)
-  audioDbStore.removeItem(item.name)
-  // setTimeout(()=>{
-  //     localMusicListValue.value=localMusicList
-  // },100)
-}
-function resetMusic() {
-  globalConfig.resetMusicList()
-  audioDbStore.clear()
-}
-function deleteAll() {
-  globalConfig.clearMusicList()
-  audioDbStore.clear()
-}
-async function getMusicDbStore() {
-  const keys = await audioDbStore.keys()
-  if (keys.length > 0) {
-    audioDbStore.iterate((value: string, key: string) => {
-      globalConfig.addMusic({
-        id: key + new Date().getTime().toString(),
-        name: key,
-        url: 'Storage',
-      })
-    })
-  }
-}
-async function handleFileChange(e: Event) {
-  const isAudio = /audio*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
-  if (!isAudio) {
-    audioUploadToast.value = 3
-
-    return
-  }
-  const { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
-  audioDbStore.setItem(`${new Date().getTime().toString()}+${fileName}`, dataUrl)
-    .then(() => {
-      audioUploadToast.value = 1
-      getMusicDbStore()
-    })
-    .catch(() => {
-      audioUploadToast.value = 2
-    })
-}
-
-onMounted(() => {
-  getMusicDbStore()
-})
-</script>
-
-<template>
-  <div>
-    <div class="flex gap-3">
-      <button class="btn btn-primary btn-sm" @click="resetMusic">
-        {{ t('button.reset') }}
-      </button>
-      <label for="explore">
-        <input
-          id="explore" type="file" class="" style="display: none" :accept="limitType"
-          @change="handleFileChange"
-        >
-        <span class="btn btn-primary btn-sm">{{ t('button.upload') }}</span>
-      </label>
-      <button class="btn btn-error btn-sm" @click="deleteAll">
-        {{ t('button.allDelete') }}
-      </button>
-    </div>
-    <div>
-      <ul class="p-0">
-        <li v-for="item in localMusicListValue" :key="item.id" class="flex items-center gap-6 pb-2 mb-3 divide-y">
-          <div class="mr-12 overflow-hidden w-72 whitespace-nowrap text-ellipsis">
-            <span>
-              {{ item.name }}</span>
-          </div>
-          <div class="flex gap-3">
-            <button class="btn btn-primary btn-xs" @click="play(item)">
-              {{ t('button.play') }}
-            </button>
-            <button class="btn btn-error btn-xs" @click="deleteMusic(item)">
-              {{ t('button.delete') }}
-            </button>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<style lang='scss' scoped></style>

src/views/Config/Global/MusicConfig/components/UploadDialog.vue

@@ -0,0 +1,116 @@
+<script setup lang='ts'>
+import type { IFileData } from '@/components/FileUpload/type'
+import localforage from 'localforage'
+import { v4 as uuidv4 } from 'uuid'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'vue-toast-notification'
+import CustomDialog from '@/components/Dialog/index.vue'
+import FileUpload from '@/components/FileUpload/index.vue'
+import useStore from '@/store'
+
+const { t } = useI18n()
+const toast = useToast()
+const limitType = ref('audio/*')
+const visible = defineModel('visible', {
+  type: Boolean,
+  required: true,
+})
+const globalConfig = useStore().globalConfig
+const audioDbStore = localforage.createInstance({
+  name: 'audioStore',
+})
+const audioData = ref<IFileData | null>(null)
+
+const fileName = computed({
+  get() {
+    return audioData.value?.fileName || null
+  },
+  set(value) {
+    if (audioData.value && value) {
+      audioData.value.fileName = value
+    }
+  },
+})
+const uploadDialogRef = ref()
+
+async function uploadFile(fileData: IFileData | null) {
+  if (!fileData) {
+    audioData.value = null
+    return
+  }
+  const isAudio = /audio*/.test(fileData?.type || '')
+  if (!isAudio) {
+    toast.open({
+      message: t('error.notAudioFile'),
+      type: 'error',
+      position: 'top-right',
+    })
+    return
+  }
+  audioData.value = fileData
+}
+async function getAudioDbStore() {
+  const keys = await audioDbStore.keys()
+  if (keys.length > 0) {
+    audioDbStore.iterate((value: { fileName: string, data: Blob }, key: string) => {
+      globalConfig.addMusic({
+        id: key,
+        name: value.fileName,
+        url: 'Storage',
+      })
+    })
+  }
+}
+function submitUpload() {
+  if (audioData.value) {
+    const { data, fileName } = audioData.value
+    const uniqueId = uuidv4()
+    audioDbStore.setItem(uniqueId, {
+      data,
+      fileName,
+    })
+      .then(() => {
+        toast.open({
+          message: t('error.uploadSuccess'),
+          type: 'success',
+          position: 'top-right',
+        })
+        getAudioDbStore()
+      })
+      .catch(() => {
+        toast.open({
+          message: t('error.uploadFail'),
+          type: 'error',
+          position: 'top-right',
+        })
+      })
+  }
+}
+watch(visible, (newVal) => {
+  if (newVal) {
+    uploadDialogRef.value.showDialog()
+  }
+})
+</script>
+
+<template>
+  <CustomDialog
+    ref="uploadDialogRef"
+    v-model:visible="visible"
+    :title="t('dialog.uploadAudioTitle')"
+    :submit-func="submitUpload"
+    class=""
+  >
+    <template #content>
+      <div class="flex flex-col items-center gap-6 w-full px-12">
+        <FileUpload v-if="visible" :limit-type="limitType" @upload-file="uploadFile" />
+        <input v-model="fileName" :disabled="audioData === null" type="text" class="input w-full">
+      </div>
+    </template>
+  </CustomDialog>
+</template>
+
+<style scoped>
+
+</style>

src/views/Config/Global/MusicConfig/index.vue

@@ -0,0 +1,81 @@
+<script setup lang='ts'>
+import type { IMusic } from '@/types/storeType'
+import localforage from 'localforage'
+import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import PageHeader from '@/components/PageHeader/index.vue'
+import { sidebar } from '@/locales/modules'
+import useStore from '@/store'
+import UploadDialog from './components/UploadDialog.vue'
+
+const { t } = useI18n()
+const audioDbStore = localforage.createInstance({
+  name: 'audioStore',
+})
+const globalConfig = useStore().globalConfig
+
+const { getMusicList: localMusicList } = storeToRefs(globalConfig)
+const localMusicListValue = ref(localMusicList)
+const uploadVisible = ref(false)
+async function play(item: IMusic) {
+  globalConfig.setCurrentMusic(item, false)
+}
+
+function deleteMusic(item: IMusic) {
+  globalConfig.removeMusic(item.id)
+  audioDbStore.removeItem(item.name)
+  // setTimeout(()=>{
+  //     localMusicListValue.value=localMusicList
+  // },100)
+}
+function resetMusic() {
+  globalConfig.resetMusicList()
+  audioDbStore.clear()
+}
+function deleteAll() {
+  globalConfig.clearMusicList()
+  audioDbStore.clear()
+}
+</script>
+
+<template>
+  <UploadDialog v-model:visible="uploadVisible" />
+  <div>
+    <PageHeader :title="t('sidebar.musicManagement')">
+      <template #buttons>
+        <div class="flex gap-3">
+          <button class="btn btn-primary btn-sm" @click="resetMusic">
+            {{ t('button.reset') }}
+          </button>
+          <label for="explore">
+            <span class="btn btn-primary btn-sm" @click="uploadVisible = true">{{ t('button.upload') }}</span>
+          </label>
+          <button class="btn btn-error btn-sm" @click="deleteAll">
+            {{ t('button.allDelete') }}
+          </button>
+        </div>
+      </template>
+    </PageHeader>
+
+    <div>
+      <ul class="p-0">
+        <li v-for="item in localMusicListValue" :key="item.id" class="flex items-center gap-6 pb-2 mb-3">
+          <div class="mr-12 overflow-hidden w-72 whitespace-nowrap text-ellipsis" :title="item.name">
+            <a class="link hover:text-primary">{{ item.name }}</a>
+          </div>
+          <div class="flex gap-3">
+            <button class="btn btn-primary btn-xs" @click="play(item)">
+              {{ t('button.play') }}
+            </button>
+            <button class="btn btn-error btn-xs" @click="deleteMusic(item)">
+              {{ t('button.delete') }}
+            </button>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped></style>

src/views/Config/Person/PersonAll.vue

@@ -1,226 +0,0 @@
-<!-- eslint-disable vue/no-parsing-error -->
-<script setup lang='ts'>
-import type { IPersonConfig } from '@/types/storeType'
-import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
-import i18n from '@/locales/i18n'
-import useStore from '@/store'
-import { addOtherInfo } from '@/utils'
-import { readFileBinary } from '@/utils/file'
-import { storeToRefs } from 'pinia'
-import { onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import * as XLSX from 'xlsx'
-
-const { t } = useI18n()
-const personConfig = useStore().personConfig
-const { getAllPersonList: allPersonList, getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
-const limitType = '.xlsx,.xls'
-// const personList = ref<any[]>([])
-
-const resetDataDialog = ref()
-const delAllDataDialog = ref()
-
-async function handleFileChange(e: Event) {
-  const dataBinary = await readFileBinary(((e.target as HTMLInputElement).files as FileList)[0]!)
-  const workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
-  const workSheet = workBook.Sheets[workBook.SheetNames[0]]
-  const excelData = XLSX.utils.sheet_to_json(workSheet)
-  const allData = addOtherInfo(excelData)
-  personConfig.resetPerson()
-  personConfig.addNotPersonList(allData)
-}
-function exportData() {
-  let data = JSON.parse(JSON.stringify(allPersonList.value))
-  // 排除一些字段
-  for (let i = 0; i < data.length; i++) {
-    delete data[i].x
-    delete data[i].y
-    delete data[i].id
-    delete data[i].createTime
-    delete data[i].updateTime
-    delete data[i].prizeId
-    // 修改字段名称
-    if (data[i].isWin) {
-      data[i].isWin = i18n.global.t('data.yes')
-    }
-    else {
-      data[i].isWin = i18n.global.t('data.no')
-    }
-    // 格式化数组为
-    data[i].prizeTime = data[i].prizeTime.join(',')
-    data[i].prizeName = data[i].prizeName.join(',')
-  }
-  let dataString = JSON.stringify(data)
-  dataString = dataString
-    .replaceAll(/uid/g, i18n.global.t('data.number'))
-    .replaceAll(/isWin/g, i18n.global.t('data.isWin'))
-    .replaceAll(/department/g, i18n.global.t('data.department'))
-    .replaceAll(/name/g, i18n.global.t('data.name'))
-    .replaceAll(/identity/g, i18n.global.t('data.identity'))
-    .replaceAll(/prizeName/g, i18n.global.t('data.prizeName'))
-    .replaceAll(/prizeTime/g, i18n.global.t('data.prizeTime'))
-
-  data = JSON.parse(dataString)
-
-  if (data.length > 0) {
-    const dataBinary = XLSX.utils.json_to_sheet(data)
-    const dataBinaryBinary = XLSX.utils.book_new()
-    XLSX.utils.book_append_sheet(dataBinaryBinary, dataBinary, 'Sheet1')
-    XLSX.writeFile(dataBinaryBinary, 'data.xlsx')
-  }
-}
-
-function resetData() {
-  personConfig.resetAlreadyPerson()
-}
-
-function deleteAll() {
-  personConfig.deleteAllPerson()
-}
-
-function delPersonItem(row: IPersonConfig) {
-  personConfig.deletePerson(row)
-}
-
-const tableColumns = [
-  {
-    label: i18n.global.t('data.number'),
-    props: 'uid',
-  },
-  {
-    label: i18n.global.t('data.name'),
-    props: 'name',
-  },
-  {
-    label: i18n.global.t('data.department'),
-    props: 'department',
-  },
-  {
-    label: i18n.global.t('data.avatar'),
-    props: 'avatar',
-    formatValue(row: any) {
-       return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-';
-    }
-  },
-  {
-    label: i18n.global.t('data.identity'),
-    props: 'identity',
-  },
-  {
-    label: i18n.global.t('data.isWin'),
-    props: 'isWin',
-    formatValue(row: IPersonConfig) {
-      return row.isWin ? i18n.global.t('data.yes') : i18n.global.t('data.no')
-    },
-  },
-  {
-    label: i18n.global.t('data.operation'),
-    actions: [
-      // {
-      //     label: '编辑',
-      //     type: 'btn-info',
-      //     onClick: (row: any) => {
-      //         delPersonItem(row)
-      //     }
-      // },
-      {
-        label: i18n.global.t('data.delete'),
-        type: 'btn-error',
-        onClick: (row: IPersonConfig) => {
-          delPersonItem(row)
-        },
-      },
-
-    ],
-  },
-]
-onMounted(() => {
-})
-</script>
-
-<template>
-  <dialog id="my_modal_1" ref="resetDataDialog" class="border-none modal">
-    <div class="modal-box">
-      <h3 class="text-lg font-bold">
-        {{ t('dialog.titleTip') }}
-      </h3>
-      <p class="py-4">
-        {{ t('dialog.dialogResetWinner') }}
-      </p>
-      <div class="modal-action">
-        <form method="dialog" class="flex gap-3">
-          <!-- if there is a button in form, it will close the modal -->
-          <button class="btn" @click="resetDataDialog.close()">
-            {{ t('button.cancel') }}
-          </button>
-          <button class="btn" @click="resetData">
-            {{ t('button.confirm') }}
-          </button>
-        </form>
-      </div>
-    </div>
-  </dialog>
-  <dialog id="my_modal_1" ref="delAllDataDialog" class="border-none modal">
-    <div class="modal-box">
-      <h3 class="text-lg font-bold">
-        {{ t('dialog.titleTip') }}
-      </h3>
-      <p class="py-4">
-        {{ t('dialog.dialogDelAllPerson') }}
-      </p>
-      <div class="modal-action">
-        <form method="dialog" class="flex gap-3">
-          <!-- if there is a button in form, it will close the modal -->
-          <button class="btn" @click="delAllDataDialog.close()">
-            {{ t('button.cancel') }}
-          </button>
-          <button class="btn" @click="deleteAll">
-            {{ t('button.confirm') }}
-          </button>
-        </form>
-      </div>
-    </div>
-  </dialog>
-  <div class="min-w-1000px">
-    <h2>{{ t('viewTitle.personManagement') }}</h2>
-    <div class="flex gap-3">
-      <button class="btn btn-error btn-sm" @click="delAllDataDialog.showModal()">
-        {{ t('button.allDelete') }}
-      </button>
-      <div class="tooltip tooltip-bottom" :data-tip="t('tooltip.downloadTemplateTip')">
-        <a
-          class="no-underline btn btn-secondary btn-sm" :download="t('data.xlsxName')" target="_blank"
-          :href="`/log-lottery/${t('data.xlsxName')}`"
-        >{{ t('button.downloadTemplate') }}</a>
-      </div>
-      <div class="">
-        <label for="explore">
-
-          <div class="tooltip tooltip-bottom" :data-tip="t('tooltip.uploadExcelTip')">
-            <input
-              id="explore" type="file" class="" style="display: none" :accept="limitType"
-              @change="handleFileChange"
-            >
-
-            <span class="btn btn-primary btn-sm">{{ t('button.importData') }}</span>
-          </div>
-        </label>
-      </div>
-      <button class="btn btn-error btn-sm" @click="resetDataDialog.showModal()">
-        {{ t('button.resetData') }}
-      </button>
-      <button class="btn btn-accent btn-sm" @click="exportData">
-        {{ t('button.exportResult') }}
-      </button>
-      <div>
-        <span>{{ t('table.luckyPeopleNumber') }}:</span>
-        <span>{{ alreadyPersonList.length }}</span>
-        <span>&nbsp;/&nbsp;</span>
-        <span>{{ allPersonList.length }}</span>
-      </div>
-    </div>
-    <DaiysuiTable :table-columns="tableColumns" :data="allPersonList" />
-  </div>
-</template>
-
-<style lang='scss' scoped></style>

src/views/Config/Person/PersonAll/columns.ts

@@ -0,0 +1,53 @@
+import type { IPersonConfig } from '@/types/storeType'
+import i18n from '@/locales/i18n'
+
+interface IColumnsProps {
+    handleDeletePerson: (row: IPersonConfig) => void
+}
+export function tableColumns(props: IColumnsProps) {
+    return [
+        {
+            label: i18n.global.t('data.number'),
+            props: 'uid',
+        },
+        {
+            label: i18n.global.t('data.name'),
+            props: 'name',
+        },
+        {
+            label: i18n.global.t('data.department'),
+            props: 'department',
+        },
+        {
+            label: i18n.global.t('data.avatar'),
+            props: 'avatar',
+            formatValue(row: any) {
+                return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-'
+            },
+        },
+        {
+            label: i18n.global.t('data.identity'),
+            props: 'identity',
+        },
+        {
+            label: i18n.global.t('data.isWin'),
+            props: 'isWin',
+            formatValue(row: IPersonConfig) {
+                return row.isWin ? i18n.global.t('data.yes') : i18n.global.t('data.no')
+            },
+        },
+        {
+            label: i18n.global.t('data.operation'),
+            actions: [
+                {
+                    label: i18n.global.t('data.delete'),
+                    type: 'btn-error',
+                    onClick: (row: IPersonConfig) => {
+                        props.handleDeletePerson(row)
+                    },
+                },
+
+            ],
+        },
+    ]
+}

src/views/Config/Person/PersonAll/components/SinglePerson.vue

@@ -0,0 +1,49 @@
+<script setup lang='ts'>
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  addOnePersonDrawerRef: any
+  addOnePerson: (addOnePersonDrawerRef: any, event: any) => void
+}>()
+
+const { t } = useI18n()
+const singlePersonData = defineModel<any>('singlePersonData', { required: true })
+</script>
+
+<template>
+  <form class="fieldset rounded-box w-xs p-4" @submit="(e) => addOnePerson(addOnePersonDrawerRef, e)">
+    <label class="fieldset">
+      <span class="label">{{ t('table.number') }}</span>
+      <input v-model="singlePersonData.uid" type="text" class="input validator" :placeholder="t('placeHolder.number')">
+    </label>
+    <fieldset class="fieldset">
+      <label class="label" required>{{ t('table.name') }}<span class="text-red-500">*</span></label>
+      <input v-model="singlePersonData.name" type="text" class="input validator" :placeholder="t('placeHolder.name')" required minlength="1">
+      <p class="validator-hint hidden">
+        {{ t('error.personNameEmpty') }}
+      </p>
+    </fieldset>
+    <label class="fieldset">
+      <span class="label">{{ t('table.department') }}</span>
+      <input v-model="singlePersonData.department" type="text" class="input validator" :placeholder="t('placeHolder.department')">
+    </label>
+    <label class="fieldset">
+      <span class="label">{{ t('table.avatar') }}</span>
+      <input v-model="singlePersonData.avatar" type="text" class="input validator" :placeholder="t('placeHolder.avatar')">
+    </label>
+    <label class="fieldset">
+      <span class="label">{{ t('table.identity') }}</span>
+      <input v-model="singlePersonData.identity" type="text" class="input validator" :placeholder="t('placeHolder.identity')">
+    </label>
+    <button class="btn btn-neutral mt-4" type="submit">
+      {{ t('button.submit') }}
+    </button>
+    <button class="btn btn-ghost mt-1" type="reset" @click="addOnePersonDrawerRef.closeDrawer()">
+      {{ t('button.cancel') }}
+    </button>
+  </form>
+</template>
+
+<style scoped>
+
+</style>

src/views/Config/Person/PersonAll/importExcel.worker.ts

@@ -0,0 +1,60 @@
+import * as XLSX from 'xlsx'
+import i18n from '@/locales/i18n'
+import { addOtherInfo } from '@/utils'
+// 定义消息类型
+interface WorkerMessage {
+  type: 'start' | 'stop' | 'reset'
+  data: any
+  templateData: any
+}
+
+let allData: any[] = []
+
+function headersEqual(template: string[], actual: string[]): boolean {
+  return template.length >= actual.length
+    && actual.some(item => template.includes(item))
+}
+// 接收主线程消息
+globalThis.onmessage = async (e: MessageEvent<WorkerMessage>) => {
+  switch (e.data.type) {
+    case 'start':
+    {
+      const fileData = e.data.data
+      const templateData = e.data.templateData
+
+      const workBook = XLSX.read(fileData, { type: 'binary', cellDates: true })
+      const workSheet = workBook.Sheets[workBook.SheetNames[0]]
+      const excelData: object[] = XLSX.utils.sheet_to_json(workSheet)
+
+      const templateWorkBook = XLSX.read(templateData, { type: 'array', cellDates: true })
+      const templateWorkSheet = templateWorkBook.Sheets[templateWorkBook.SheetNames[0]]
+      const templateExcelData: object[] = XLSX.utils.sheet_to_json(templateWorkSheet)
+
+      const templateHeader = Object.keys(templateExcelData[0])
+      const header = Object.keys(excelData[0])
+
+      if (!headersEqual(templateHeader, header)) {
+        globalThis.postMessage({
+          type: 'error',
+          data: null,
+          message: 'not right template',
+        })
+        return
+      }
+      allData = addOtherInfo(excelData)
+      globalThis.postMessage({
+        type: 'done',
+        data: allData,
+        message: '读取完成',
+      })
+      break
+    }
+    default:
+      globalThis.postMessage({
+        type: 'fail',
+        data: null,
+        message: '读取失败',
+      })
+      break
+  }
+}

src/views/Config/Person/PersonAll/index.vue

@@ -0,0 +1,106 @@
+<!-- eslint-disable vue/no-parsing-error -->
+<script setup lang='ts'>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
+import CustomDialog from '@/components/Dialog/index.vue'
+import CustomDrawer from '@/components/Drawer/index.vue'
+import PageHeader from '@/components/PageHeader/index.vue'
+import SinglePersonContent from './components/SinglePerson.vue'
+import { useViewModel } from './useViewModel'
+
+const resetDataDialogRef = ref()
+const delAllDataDialogRef = ref()
+const exportInputFileRef = ref()
+const addOnePersonDrawerRef = ref()
+const {
+  resetData,
+  deleteAll,
+  handleFileChange,
+  exportData,
+  addOnePerson,
+  singlePersonData,
+  alreadyPersonList,
+  allPersonList,
+  tableColumnList,
+  downloadTemplate,
+} = useViewModel({ exportInputFileRef })
+const { t } = useI18n()
+const limitType = '.xlsx,.xls'
+</script>
+
+<template>
+  <CustomDialog
+    ref="resetDataDialogRef"
+    :title="t('dialog.titleTip')"
+    :desc="t('dialog.dialogResetWinner')"
+    :submit-func="resetData"
+  />
+  <CustomDialog
+    ref="delAllDataDialogRef"
+    :title="t('dialog.titleTip')"
+    :desc="t('dialog.dialogDelAllPerson')"
+    :submit-func="deleteAll"
+  />
+  <CustomDrawer ref="addOnePersonDrawerRef">
+    <template #content>
+      <SinglePersonContent
+        v-model:single-person-data="singlePersonData"
+        :add-one-person-drawer-ref="addOnePersonDrawerRef"
+        :add-one-person="addOnePerson"
+      />
+    </template>
+  </CustomDrawer>
+
+  <div class="min-w-1000px">
+    <PageHeader :title="t('viewTitle.personManagement')">
+      <template #buttons>
+        <div class="flex gap-3">
+          <button class="btn btn-error btn-sm" @click="delAllDataDialogRef.showDialog()">
+            {{ t('button.allDelete') }}
+          </button>
+          <div class="tooltip tooltip-bottom" :data-tip="t('tooltip.downloadTemplateTip')">
+            <button class="no-underline btn btn-secondary btn-sm" @click="downloadTemplate">
+              {{ t('button.downloadTemplate') }}
+            </button>
+            <!-- <a
+              class="no-underline btn btn-secondary btn-sm" :download="t('data.xlsxName')" target="_blank"
+              :href="`${baseUrl}${t('data.xlsxName')}`"
+            >{{ t('button.downloadTemplate') }}</a> -->
+          </div>
+          <div class="">
+            <label for="explore">
+              <div class="tooltip tooltip-bottom" :data-tip="t('tooltip.uploadExcelTip')">
+                <input
+                  id="explore" ref="exportInputFileRef" type="file" class="" style="display: none"
+                  :accept="limitType" @change="handleFileChange"
+                >
+
+                <span class="btn btn-primary btn-sm">{{ t('button.importData') }}</span>
+              </div>
+            </label>
+          </div>
+          <button class="btn btn-error btn-sm" @click="resetDataDialogRef.showDialog()">
+            {{ t('button.resetData') }}
+          </button>
+          <button class="btn btn-accent btn-sm" @click="exportData">
+            {{ t('button.exportResult') }}
+          </button>
+          <button class="btn btn-neutral btn-sm" @click="addOnePersonDrawerRef.showDrawer()">
+            {{ t('button.add') }}
+          </button>
+          <div>
+            <span>{{ t('table.luckyPeopleNumber') }}:</span>
+            <span>{{ alreadyPersonList.length }}</span>
+            <span>&nbsp;/&nbsp;</span>
+            <span>{{ allPersonList.length }}</span>
+          </div>
+        </div>
+      </template>
+    </PageHeader>
+
+    <DaiysuiTable :table-columns="tableColumnList" :data="allPersonList" />
+  </div>
+</template>
+
+<style lang='scss' scoped></style>

src/views/Config/Person/PersonAll/useViewModel.ts

@@ -0,0 +1,201 @@
+import type { Ref } from 'vue'
+import type { IPersonConfig } from '@/types/storeType'
+import { storeToRefs } from 'pinia'
+import { v4 as uuidv4 } from 'uuid'
+import { inject, ref, toRaw } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'vue-toast-notification'
+import * as XLSX from 'xlsx'
+import { loadingKey } from '@/components/Loading'
+import i18n from '@/locales/i18n'
+import useStore from '@/store'
+import { addOtherInfo } from '@/utils'
+import { readFileBinary, readLocalFileAsArraybuffer } from '@/utils/file'
+import { tableColumns } from './columns'
+import ImportExcelWorker from './importExcel.worker?worker'
+
+type IBasePersonConfig = Pick<IPersonConfig, 'uid' | 'name' | 'department' | 'identity' | 'avatar'>
+
+export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<HTMLInputElement> }) {
+  const { t } = useI18n()
+  const baseUrl = import.meta.env.BASE_URL
+  const toast = useToast()
+  const worker: Worker | null = new ImportExcelWorker()
+  const loading = inject(loadingKey)
+  const personConfig = useStore().personConfig
+  const { getAllPersonList: allPersonList, getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
+  const tableColumnList = tableColumns({ handleDeletePerson: delPersonItem })
+  const addPersonModalVisible = ref(false)
+  const singlePersonData = ref<IBasePersonConfig>({
+    uid: '',
+    name: '',
+    department: '',
+    avatar: '',
+    identity: '',
+  })
+  async function getExcelTemplateContent() {
+    const locale = i18n.global.locale.value
+    if (locale === 'zhCn') {
+      const templateData = await readLocalFileAsArraybuffer(`${import.meta.env.BASE_URL}人口登记表-zhCn.xlsx`)
+      return templateData
+    }
+    else {
+      const templateData = await readLocalFileAsArraybuffer(`${import.meta.env.BASE_URL}personListTemplate-en.xlsx`)
+      return templateData
+    }
+  }
+  /// 向worker发送消息
+  function sendWorkerMessage(message: any) {
+    if (worker) {
+      worker.postMessage(message)
+    }
+  }
+  /// 开始导入
+  async function startWorker(data: string) {
+    loading?.show()
+    getExcelTemplateContent()
+    sendWorkerMessage({ type: 'start', data, templateData: await getExcelTemplateContent() })
+  }
+  /**
+   * 获取用户数据
+   */
+  async function handleFileChange(e: Event) {
+    if (worker) {
+      worker.onmessage = (e) => {
+        if (e.data.type === 'done') {
+          personConfig.resetPerson()
+          personConfig.addNotPersonList(e.data.data)
+          // 提示导入成功
+          toast.open({
+            message: t('error.importSuccess'),
+            type: 'success',
+            position: 'top-right',
+          })
+          // 导入成功后清空file input
+          clearFileInput()
+        }
+        if (e.data.type === 'error') {
+          if (e.data.message === 'not right template') {
+            toast.open({
+              message: t('error.excelFileError'),
+              type: 'error',
+              position: 'top-right',
+            })
+            return
+          }
+          toast.open({
+            message: e.data.message || t('error.importFail'),
+            type: 'error',
+            position: 'top-right',
+          })
+          // toast.warning(e.data.message || '导入错误')
+        }
+        loading?.hide()
+      }
+    }
+    const dataBinary = await readFileBinary(((e.target as HTMLInputElement).files as FileList)[0]!)
+    startWorker(dataBinary)
+  }
+  // 清空file input
+  function clearFileInput() {
+    if (exportInputFileRef.value) {
+      exportInputFileRef.value.value = ''
+    }
+  }
+  function downloadTemplate() {
+    // 下载
+    const templateFileName = i18n.global.t('data.xlsxName')
+    const fileUrl = `${baseUrl}${templateFileName}`
+    fetch(fileUrl)
+      .then(res => res.blob())
+      .then((blob) => {
+        const url = window.URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = templateFileName
+        a.click()
+        toast.open({
+          message: t('error.downloadSuccess'),
+          type: 'success',
+          position: 'top-right',
+        })
+      })
+  }
+  // 导出数据
+  function exportData() {
+    let data = JSON.parse(JSON.stringify(allPersonList.value))
+    // 排除一些字段
+    for (let i = 0; i < data.length; i++) {
+      delete data[i].x
+      delete data[i].y
+      delete data[i].id
+      delete data[i].createTime
+      delete data[i].updateTime
+      delete data[i].prizeId
+      // 修改字段名称
+      if (data[i].isWin) {
+        data[i].isWin = i18n.global.t('data.yes')
+      }
+      else {
+        data[i].isWin = i18n.global.t('data.no')
+      }
+      // 格式化数组为
+      data[i].prizeTime = data[i].prizeTime.join(',')
+      data[i].prizeName = data[i].prizeName.join(',')
+    }
+    let dataString = JSON.stringify(data)
+    dataString = dataString
+      .replaceAll(/uid/g, i18n.global.t('data.number'))
+      .replaceAll(/isWin/g, i18n.global.t('data.isWin'))
+      .replaceAll(/department/g, i18n.global.t('data.department'))
+      .replaceAll(/name/g, i18n.global.t('data.name'))
+      .replaceAll(/identity/g, i18n.global.t('data.identity'))
+      .replaceAll(/prizeName/g, i18n.global.t('data.prizeName'))
+      .replaceAll(/prizeTime/g, i18n.global.t('data.prizeTime'))
+
+    data = JSON.parse(dataString)
+
+    if (data.length > 0) {
+      const dataBinary = XLSX.utils.json_to_sheet(data)
+      const dataBinaryBinary = XLSX.utils.book_new()
+      XLSX.utils.book_append_sheet(dataBinaryBinary, dataBinary, 'Sheet1')
+      XLSX.writeFile(dataBinaryBinary, 'data.xlsx')
+    }
+  }
+
+  function resetData() {
+    personConfig.resetAlreadyPerson()
+  }
+
+  function deleteAll() {
+    personConfig.deleteAllPerson()
+  }
+
+  function delPersonItem(row: IPersonConfig) {
+    personConfig.deletePerson(row)
+  }
+  function addOnePerson(addOnePersonDrawerRef: any, event: any) {
+    event.preventDefault()
+    // 表单中的验证信息清除
+
+    const personData = addOtherInfo([toRaw(singlePersonData.value)])
+    personData[0].id = uuidv4()
+    personConfig.addOnePerson(personData)
+    // singlePersonData.value = {} as IBasePersonConfig
+    addOnePersonDrawerRef.closeDrawer()
+    singlePersonData.value = {} as IBasePersonConfig
+  }
+  return {
+    resetData,
+    deleteAll,
+    handleFileChange,
+    exportData,
+    alreadyPersonList,
+    allPersonList,
+    tableColumnList,
+    addOnePerson,
+    addPersonModalVisible,
+    singlePersonData,
+    downloadTemplate,
+  }
+}

src/views/Config/Person/PersonAlready.vue

@@ -1,145 +0,0 @@
-<!-- eslint-disable vue/no-parsing-error -->
-<script setup lang='ts'>
-import type { IPersonConfig } from '@/types/storeType'
-import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
-import i18n from '@/locales/i18n'
-import useStore from '@/store'
-import { storeToRefs } from 'pinia'
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-const personConfig = useStore().personConfig
-
-const { getAlreadyPersonList: alreadyPersonList, getAlreadyPersonDetail: alreadyPersonDetail } = storeToRefs(personConfig)
-// const personList = ref<any[]>(
-//     alreadyPersonList
-// )
-
-// const deleteAll = () => {
-//     personConfig.deleteAllPerson()
-// }
-
-const isDetail = ref(false)
-function handleMoveNotPerson(row: IPersonConfig) {
-  personConfig.moveAlreadyToNot(row)
-}
-
-const tableColumnsList = [
-  {
-    label: i18n.global.t('data.number'),
-    props: 'uid',
-    sort: true,
-  },
-  {
-    label: i18n.global.t('data.name'),
-    props: 'name',
-  },
-  {
-    label: i18n.global.t('data.avatar'),
-    props: 'avatar',
-    formatValue(row: any) {
-       return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-';
-    }
-  },
-  {
-    label: i18n.global.t('data.department'),
-    props: 'department',
-  },
-  {
-    label: i18n.global.t('data.identity'),
-    props: 'identity',
-  },
-  {
-    label: i18n.global.t('data.prizeName'),
-    props: 'prizeName',
-    sort: true,
-  },
-  {
-    label: i18n.global.t('data.operation'),
-    actions: [
-      {
-        label: i18n.global.t('data.removePerson'),
-        type: 'btn-info',
-        onClick: (row: IPersonConfig) => {
-          handleMoveNotPerson(row)
-        },
-      },
-    ],
-  },
-]
-const tableColumnsDetail = [
-  {
-    label: i18n.global.t('data.number'),
-    props: 'uid',
-    sort: true,
-  },
-  {
-    label: i18n.global.t('data.number'),
-    props: 'name',
-  },
-  {
-    label: i18n.global.t('data.avatar'),
-    props: 'avatar',
-    formatValue(row: any) {
-       return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-';
-    }
-  },
-  {
-    label: i18n.global.t('data.department'),
-    props: 'department',
-  },
-  {
-    label: i18n.global.t('data.identity'),
-    props: 'identity',
-  },
-  {
-    label: i18n.global.t('data.prizeName'),
-    props: 'prizeName',
-    sort: true,
-  },
-  {
-    label: i18n.global.t('data.prizeTime'),
-    props: 'prizeTime',
-
-  },
-  {
-    label: i18n.global.t('data.operation'),
-    actions: [
-      {
-        label: i18n.global.t('data.removePerson'),
-        type: 'btn-info',
-        onClick: (row: IPersonConfig) => {
-          handleMoveNotPerson(row)
-        },
-      },
-
-    ],
-  },
-]
-</script>
-
-<template>
-  <div class="overflow-y-auto">
-    <h2>{{ t('viewTitle.winnerManagement') }}</h2>
-    <div class="flex items-center justify-start gap-10">
-      <div>
-        <span>{{ t('table.luckyPeopleNumber') }}：</span>
-        <span>{{ alreadyPersonList.length }}</span>
-      </div>
-      <div class="flex flex-col">
-        <div class="form-control">
-          <label class="cursor-pointer label">
-            <span class="label-text">{{ t('table.detail') }}:</span>
-            <input v-model="isDetail" type="checkbox" class="border-solid toggle toggle-primary border-1">
-          </label>
-        </div>
-      </div>
-    </div>
-    <DaiysuiTable v-if="!isDetail" :table-columns="tableColumnsList" :data="alreadyPersonList" />
-
-    <DaiysuiTable v-if="isDetail" :table-columns="tableColumnsDetail" :data="alreadyPersonDetail" />
-  </div>
-</template>
-
-<style lang='scss' scoped></style>

src/views/Config/Person/PersonAlready/columns.ts

@@ -0,0 +1,58 @@
+import type { IPersonConfig } from '@/types/storeType'
+import i18n from '@/locales/i18n'
+
+interface IColumnsProps {
+    showPrizeTime?: boolean
+    handleDeletePerson: (row: IPersonConfig) => void
+}
+
+export function tableColumns(props: IColumnsProps) {
+    return [
+        {
+            label: i18n.global.t('data.number'),
+            props: 'uid',
+            sort: true,
+        },
+        {
+            label: i18n.global.t('data.name'),
+            props: 'name',
+        },
+        {
+            label: i18n.global.t('data.avatar'),
+            props: 'avatar',
+            formatValue(row: any) {
+                return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-'
+            },
+        },
+        {
+            label: i18n.global.t('data.department'),
+            props: 'department',
+        },
+        {
+            label: i18n.global.t('data.identity'),
+            props: 'identity',
+        },
+        {
+            label: i18n.global.t('data.prizeName'),
+            props: 'prizeName',
+            sort: true,
+        },
+        props.showPrizeTime && {
+            label: i18n.global.t('data.prizeTime'),
+            props: 'prizeTime',
+
+        },
+        {
+            label: i18n.global.t('data.operation'),
+            actions: [
+                {
+                    label: i18n.global.t('data.removePerson'),
+                    type: 'btn-info',
+                    onClick: (row: IPersonConfig) => {
+                        props.handleDeletePerson(row)
+                    },
+                },
+            ],
+        },
+    ]
+}

src/views/Config/Person/PersonAlready/index.vue

@@ -0,0 +1,43 @@
+<script setup lang='ts'>
+import { useI18n } from 'vue-i18n'
+import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
+import PageHeader from '@/components/PageHeader/index.vue'
+import { useViewModel } from './useViewModel'
+
+const { t } = useI18n()
+
+const { alreadyPersonList, alreadyPersonDetail, isDetail, tableColumnsList, tableColumnsDetail } = useViewModel()
+</script>
+
+<template>
+  <div class="overflow-y-auto">
+    <PageHeader :title="t('viewTitle.winnerManagement')">
+      <template #buttons>
+        <div class="flex items-center justify-start gap-10">
+          <div>
+            <span>{{ t('table.luckyPeopleNumber') }}：</span>
+            <span>{{ alreadyPersonList.length }}</span>
+          </div>
+
+          <div class="flex flex-col">
+            <div class="form-control">
+              <label class="label flex items-center gap-2">
+                <p class="label-text">{{ t('table.detail') }}:</p>
+                <div class="flex items-center">
+                  <!-- <Switch v-model="isDetail" class="cursor-pointer" /> -->
+                  <input v-model="isDetail" type="checkbox" :checked="isDetail" class="toggle toggle-primary">
+                </div>
+              </label>
+            </div>
+          </div>
+        </div>
+      </template>
+    </PageHeader>
+
+    <DaiysuiTable v-if="!isDetail" :table-columns="tableColumnsList" :data="alreadyPersonList" />
+
+    <DaiysuiTable v-if="isDetail" :table-columns="tableColumnsDetail" :data="alreadyPersonDetail" />
+  </div>
+</template>
+
+<style lang='scss' scoped></style>

src/views/Config/Person/PersonAlready/useViewModel.ts

@@ -0,0 +1,26 @@
+import type { IPersonConfig } from '@/types/storeType'
+import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
+import useStore from '@/store'
+import { tableColumns } from './columns'
+
+export function useViewModel() {
+    const personConfig = useStore().personConfig
+
+    const { getAlreadyPersonList: alreadyPersonList, getAlreadyPersonDetail: alreadyPersonDetail } = storeToRefs(personConfig)
+
+    const isDetail = ref(false)
+    function handleMoveNotPerson(row: IPersonConfig) {
+        personConfig.moveAlreadyToNot(row)
+    }
+
+    const tableColumnsList = tableColumns({ showPrizeTime: false, handleDeletePerson: handleMoveNotPerson })
+    const tableColumnsDetail = tableColumns({ showPrizeTime: true, handleDeletePerson: handleMoveNotPerson })
+    return {
+        alreadyPersonList,
+        alreadyPersonDetail,
+        isDetail,
+        tableColumnsList,
+        tableColumnsDetail,
+    }
+}

src/views/Config/Prize/PrizeConfig.vue

@@ -1,195 +1,57 @@
 <script setup lang='ts'>
-import type { IPrizeConfig } from '@/types/storeType'
-import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
-import i18n from '@/locales/i18n'
-import useStore from '@/store'
-import localforage from 'localforage'
-import { storeToRefs } from 'pinia'
-import { onMounted, ref, watch } from 'vue'
+import { Grip } from 'lucide-vue-next'
+import { VueDraggable } from 'vue-draggable-plus'
 import { useI18n } from 'vue-i18n'
+import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
+import PageHeader from '@/components/PageHeader/index.vue'
+import { usePrizeConfig } from './usePrizeConfig'
 
+const { addPrize, resetDefault, delAll, delItem, prizeList, currentPrize, selectedPrize, submitData, changePrizePerson, changePrizeStatus, selectPrize, localImageList } = usePrizeConfig()
 const { t } = useI18n()
-const imageDbStore = localforage.createInstance({
-  name: 'imgStore',
-})
-const prizeConfig = useStore().prizeConfig
-const globalConfig = useStore().globalConfig
-const { getPrizeConfig: localPrizeList, getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
-
-const { getImageList: localImageList } = storeToRefs(globalConfig)
-const prizeList = ref(localPrizeList)
-const imgList = ref<any[]>([])
-
-const selectedPrize = ref<IPrizeConfig | null>()
-
-function addPrize() {
-  const defaultPrizeCOnfig: IPrizeConfig = {
-    id: new Date().getTime().toString(),
-    name: i18n.global.t('data.prizeName'),
-    sort: 0,
-    isAll: false,
-    count: 1,
-    isUsedCount: 0,
-    picture: {
-      id: '',
-      name: '',
-      url: '',
-    },
-    separateCount: {
-      enable: false,
-      countList: [],
-    },
-    desc: '',
-    isUsed: false,
-    isShow: true,
-    frequency: 1,
-  }
-  prizeConfig.addPrizeConfig(defaultPrizeCOnfig)
-}
-
-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 changePrizeStatus(item: IPrizeConfig) {
-  // if (item.isUsed == true) {
-  //     item.isUsedCount = 0;
-  //     if (item.separateCount && item.separateCount.countList.length) {
-  //         item.separateCount.countList.forEach((countItem: any) => {
-  //             countItem.isUsedCount = 0;
-  //         })
-  //     }
-  // }
-  // else {
-  //     item.isUsedCount = item.count;
-  //     if (item.separateCount && item.separateCount.countList.length) {
-  //         item.separateCount.countList.forEach((countItem: any) => {
-  //             countItem.isUsedCount = countItem.count;
-  //         })
-  //     }
-  // }
-  item.isUsed ? item.isUsedCount = 0 : item.isUsedCount = item.count
-  item.separateCount.countList = []
-  item.isUsed = !item.isUsed
-}
-
-function changePrizePerson(item: IPrizeConfig) {
-  let indexPrize = -1
-  for (let i = 0; i < prizeList.value.length; i++) {
-    if (prizeList.value[i].id === item.id) {
-      indexPrize = i
-      break
-    }
-  }
-  if (indexPrize > -1) {
-    prizeList.value[indexPrize].separateCount.countList = []
-    prizeList.value[indexPrize].isUsed ? prizeList.value[indexPrize].isUsedCount = prizeList.value[indexPrize].count : prizeList.value[indexPrize].isUsedCount = 0
-  }
-}
-function submitData(value: any) {
-  selectedPrize.value!.separateCount.countList = value
-  selectedPrize.value = null
-}
-function resetDefault() {
-  prizeConfig.resetDefault()
-}
-
-async function getImageDbStore() {
-  const keys = await imageDbStore.keys()
-  if (keys.length > 0) {
-    imageDbStore.iterate((value, key) => {
-      imgList.value.push({
-        key,
-        value,
-      })
-    })
-  }
-}
-
-function sort(item: IPrizeConfig, isUp: number) {
-  const itemIndex = prizeList.value.indexOf(item)
-  if (isUp === 1) {
-    prizeList.value.splice(itemIndex, 1)
-    prizeList.value.splice(itemIndex - 1, 0, item)
-  }
-  else {
-    prizeList.value.splice(itemIndex, 1)
-    prizeList.value.splice(itemIndex + 1, 0, item)
-  }
-}
-function delItem(item: IPrizeConfig) {
-  prizeConfig.deletePrizeConfig(item.id)
-}
-async function delAll() {
-  await prizeConfig.deleteAllPrizeConfig()
-}
-onMounted(() => {
-  getImageDbStore()
-})
-watch(() => prizeList.value, (val: IPrizeConfig[]) => {
-  prizeConfig.setPrizeConfig(val)
-}, { deep: true })
 </script>
 
 <template>
   <div>
-    <h2>{{ t('viewTitle.prizeManagement') }}</h2>
-    <div class="flex w-full gap-3">
-      <button class="btn btn-info btn-sm" @click="addPrize">
-        {{ t('button.add') }}
-      </button>
-      <button class="btn btn-info btn-sm" @click="resetDefault">
-        {{ t('button.resetDefault') }}
-      </button>
-      <button class="btn btn-error btn-sm" @click="delAll">
-        {{ t('button.allDelete') }}
-      </button>
-    </div>
-    <div role="alert" class="w-full my-4 alert alert-info">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 stroke-current shrink-0">
-        <path
-          stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-        />
-      </svg>
-      <span>{{ t('dialog.tipResetPrize') }}</span>
-    </div>
-    <ul class="p-0 m-0">
-      <li
-        v-for="item in prizeList" :key="item.id" class="flex gap-10"
-        :class="currentPrize.id === item.id ? 'border-1 border-dotted rounded-xl' : null"
+    <PageHeader :title="t('viewTitle.prizeManagement')">
+      <template #buttons>
+        <div class="flex w-full gap-3">
+          <button class="btn btn-info btn-sm" @click="addPrize">
+            {{ t('button.add') }}
+          </button>
+          <button class="btn btn-info btn-sm" @click="resetDefault">
+            {{ t('button.resetDefault') }}
+          </button>
+          <button class="btn btn-error btn-sm" @click="delAll">
+            {{ t('button.allDelete') }}
+          </button>
+        </div>
+      </template>
+      <template #alerts>
+        <div role="alert" class="w-full my-4 alert alert-info">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 stroke-current shrink-0">
+            <path
+              stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+          <span>{{ t('dialog.tipResetPrize') }}</span>
+        </div>
+      </template>
+    </PageHeader>
+    <VueDraggable
+      v-model="prizeList"
+      :animation="150"
+      handle=".handle"
+      class="p-0 m-0"
+    >
+      <div
+        v-for="item in prizeList" :key="item.id" class="flex items-center justify-center gap-10 py-5"
+        :class="currentPrize.id === item.id ? 'border border-dotted rounded-xl' : null"
       >
-        <label class="max-w-xs mb-10 form-control">
-          <!-- 向上向下 -->
-          <div class="flex flex-col items-center gap-2 pt-5">
-            <svg-icon
-              class="cursor-pointer hover:text-blue-400"
-              :class="prizeList.indexOf(item) === 0 ? 'opacity-0 cursor-default' : ''" name="up"
-              @click="sort(item, 1)"
-            />
-            <svg-icon
-              class="cursor-pointer hover:text-blue-400" name="down" :class="prizeList.indexOf(item) === prizeList.length - 1 ? 'opacity-0 cursor-default' : ''"
-              @click="sort(item, 0)"
-            />
-          </div>
+        <label class="flex items-center justify-center max-w-xs px-2 handle form-control">
+          <Grip class="w-10 h-10 cursor-move handle" />
         </label>
-        <label class="w-1/2 max-w-xs mb-10 form-control">
+        <label class="w-1/2 max-w-xs form-control">
           <div class="label">
             <span class="label-text">{{ t('table.prizeName') }}</span>
           </div>
@@ -198,16 +60,16 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
             class="w-full max-w-xs input-sm input input-bordered"
           >
         </label>
-        <label class="w-1/2 max-w-xs mb-10 form-control">
+        <label class="flex items-center w-1/2 max-w-xs gap-2 form-control">
           <div class="label">
             <span class="label-text">{{ t('table.fullParticipation') }}</span>
           </div>
           <input
-            type="checkbox" :checked="item.isAll" class="mt-2 border-solid checkbox checkbox-secondary border-1"
+            type="checkbox" :checked="item.isAll" class="border-solid checkbox checkbox-secondary border"
             @change="item.isAll = !item.isAll"
           >
         </label>
-        <label class="w-1/2 max-w-xs mb-10 form-control">
+        <label class="w-1/2 max-w-xs form-control">
           <div class="label">
             <span class="label-text">{{ t('table.numberParticipants') }}</span>
           </div>
@@ -219,27 +81,28 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
             <progress class="w-full progress" :value="item.isUsedCount" :max="item.count" />
           </div>
         </label>
-        <label class="w-1/2 max-w-xs mb-10 form-control">
+        <label class="flex items-center w-1/2 max-w-xs gap-2 form-control">
           <div class="label">
             <span class="label-text">{{ t('table.isDone') }}</span>
           </div>
           <input
-            type="checkbox" :checked="item.isUsed" class="mt-2 border-solid checkbox checkbox-secondary border-1"
+            type="checkbox" :checked="item.isUsed" class="border-solid checkbox checkbox-secondary border"
             @change="changePrizeStatus(item)"
           >
         </label>
-        <label class="w-full max-w-xs mb-10 form-control">
+        <label class="w-full max-w-xs form-control">
           <div class="label">
             <span class="label-text">{{ t('table.image') }}</span>
           </div>
-          <select v-model="item.picture" class="w-full max-w-xs select select-warning select-sm">
+          <select v-model="item.picture" class="truncate select select-warning select-sm">
             <option v-if="item.picture.id" :value="{ id: '', name: '', url: '' }">❌</option>
             <option disabled selected>{{ t('table.selectPicture') }}</option>
-            <option v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{ picItem.name }}
+            <option v-for="picItem in localImageList" :key="picItem.id" :title="picItem.name" class="w-full max-w-full" :value="picItem">
+              <span class="truncate w-option-xs">{{ picItem.name }}</span>
             </option>
           </select>
         </label>
-        <label v-if="item.separateCount" class="w-full max-w-xs mb-10 form-control">
+        <label v-if="item.separateCount" class="w-full max-w-xs form-control">
           <div class="label">
             <span class="label-text">{{ t('table.onceNumber') }}</span>
           </div>
@@ -267,16 +130,16 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
             <button v-else class="btn btn-secondary btn-xs">{{ t('button.setting') }}</button>
           </div>
         </label>
-        <label class="w-full max-w-xs mb-10 form-control">
+        <label class="w-full max-w-xs form-control">
           <div class="label">
             <span class="label-text">{{ t('table.operation') }}</span>
           </div>
           <div class="flex gap-2">
-            <button class="btn btn-error btn-sm" @click="delItem(item)">{{ t('button.delete') }}</button>
+            <button class="btn btn-error btn-xs" @click="delItem(item)">{{ t('button.delete') }}</button>
           </div>
         </label>
-      </li>
-    </ul>
+      </div>
+    </VueDraggable>
     <EditSeparateDialog
       :total-number="selectedPrize?.count" :separated-number="selectedPrize?.separateCount.countList"
       @submit-data="submitData"

src/views/Config/Prize/usePrizeConfig.ts

@@ -0,0 +1,140 @@
+import type { IPrizeConfig } from '@/types/storeType'
+import localforage from 'localforage'
+import { cloneDeep } from 'lodash-es'
+import { storeToRefs } from 'pinia'
+import { onMounted, ref, watch } from 'vue'
+import { useToast } from 'vue-toast-notification'
+import i18n from '@/locales/i18n'
+import useStore from '@/store'
+
+export function usePrizeConfig() {
+  const toast = useToast()
+  const imageDbStore = localforage.createInstance({
+    name: 'imgStore',
+  })
+  const prizeConfig = useStore().prizeConfig
+  const globalConfig = useStore().globalConfig
+  const { getPrizeConfig: localPrizeList, getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
+
+  const { getImageList: localImageList } = storeToRefs(globalConfig)
+  const imgList = ref<any[]>([])
+
+  const prizeList = ref(cloneDeep(localPrizeList.value))
+  const selectedPrize = ref<IPrizeConfig | null>()
+
+  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 changePrizeStatus(item: IPrizeConfig) {
+    item.isUsed ? item.isUsedCount = 0 : item.isUsedCount = item.count
+    item.separateCount.countList = []
+    item.isUsed = !item.isUsed
+  }
+
+  function changePrizePerson(item: IPrizeConfig) {
+    let indexPrize = -1
+    for (let i = 0; i < prizeList.value.length; i++) {
+      if (prizeList.value[i].id === item.id) {
+        indexPrize = i
+        break
+      }
+    }
+    if (indexPrize > -1) {
+      prizeList.value[indexPrize].separateCount.countList = []
+      prizeList.value[indexPrize].isUsed ? prizeList.value[indexPrize].isUsedCount = prizeList.value[indexPrize].count : prizeList.value[indexPrize].isUsedCount = 0
+    }
+  }
+  function submitData(value: any) {
+    selectedPrize.value!.separateCount.countList = value
+    selectedPrize.value = null
+  }
+
+  async function getImageDbStore() {
+    const keys = await imageDbStore.keys()
+    if (keys.length > 0) {
+      imageDbStore.iterate((value, key) => {
+        imgList.value.push({
+          key,
+          value,
+        })
+      })
+    }
+  }
+
+  function delItem(item: IPrizeConfig) {
+    prizeConfig.deletePrizeConfig(item.id)
+    toast.success(i18n.global.t('error.deleteSuccess'))
+  }
+  function addPrize() {
+    const defaultPrizeCOnfig: IPrizeConfig = {
+      id: new Date().getTime().toString(),
+      name: i18n.global.t('data.prizeName'),
+      sort: 0,
+      isAll: false,
+      count: 1,
+      isUsedCount: 0,
+      picture: {
+        id: '',
+        name: '',
+        url: '',
+      },
+      separateCount: {
+        enable: false,
+        countList: [],
+      },
+      desc: '',
+      isUsed: false,
+      isShow: true,
+      frequency: 1,
+    }
+    prizeList.value.push(defaultPrizeCOnfig)
+    toast.success(i18n.global.t('error.success'))
+  }
+  function resetDefault() {
+    prizeConfig.resetDefault()
+    prizeList.value = cloneDeep(localPrizeList.value)
+    toast.success(i18n.global.t('error.success'))
+  }
+  async function delAll() {
+    prizeList.value = []
+    toast.success(i18n.global.t('error.success'))
+  }
+  onMounted(() => {
+    getImageDbStore()
+  })
+  watch(() => prizeList.value, (val: IPrizeConfig[]) => {
+    prizeConfig.setPrizeConfig(val)
+  }, { deep: true })
+
+  return {
+    addPrize,
+    resetDefault,
+    delAll,
+    delItem,
+    prizeList,
+    currentPrize,
+    selectedPrize,
+    submitData,
+    changePrizePerson,
+    changePrizeStatus,
+    selectPrize,
+    localImageList,
+  }
+}

src/views/Config/Readme/index.vue

@@ -1,18 +1,36 @@
 <script setup lang='ts'>
-import i18n from '@/locales/i18n'
 import markdownit from 'markdown-it'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
+import readmeEn from '@/assets/md/readme-en.md?raw'
+import readmeZh from '@/assets/md/readme-zhCn.md?raw'
+import i18n from '@/locales/i18n'
 
 const md = markdownit()
 const readmeHtml = ref('')
-function readMd() {
-  fetch(`/log-lottery/${i18n.global.t('data.readmeName')}`)
-    .then(res => res.text())
-    .then((res) => {
-      readmeHtml.value = md.render(res)
-    })
-}
 
+function getReadmeContent() {
+  const locale = i18n.global.locale.value
+  if (locale === 'zhCn') {
+    return readmeZh
+  }
+  else {
+    return readmeEn
+  }
+}
+function readMd() {
+  try {
+    const content = getReadmeContent()
+    readmeHtml.value = md.render(content)
+  }
+  catch (error) {
+    console.error('Failed to load readme:', error)
+    readmeHtml.value = '<p>Failed to load README content.</p>'
+  }
+}
+// 监听语言变化
+watch(() => i18n.global.locale.value, () => {
+  readMd()
+})
 onMounted(() => {
   readMd()
 })

src/views/Config/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import dayjs from 'dayjs'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
@@ -8,6 +9,7 @@ const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
 const menuList = ref<any[]>(configRoutes.children)
+const currentYear = dayjs().year()
 
 function cleanMenuList(menu: any) {
   const newList = menu
@@ -67,7 +69,7 @@ function skip(path: string) {
     </ul>
     <router-view class="flex-1 mt-5" />
   </div>
-  <footer class="p-10 rounded footer footer-center bg-base-200 text-base-content">
+  <footer class="p-10 rounded footer footer-center bg-base-200 h-70 flex flex-col gap-4 text-base-content">
     <nav class="grid grid-flow-col gap-4">
       <a class="cursor-pointer link link-hover text-inherit" target="_blank" href="https://1kw20.fun">{{ t('footer.self-reflection') }}</a>
     </nav>
@@ -86,10 +88,10 @@ function skip(path: string) {
       </div>
     </nav>
     <aside>
-      <p class="p-0 m-0">
+      <a class="p-0 m-0 hover:text-primary" href="https://beian.miit.gov.cn/" target="_blank">
         蜀ICP备2021028666号
-      </p>
-      <p>Copyright © 2024 - All right reserved by Log1997</p>
+      </a>
+      <p>Copyright © {{ currentYear }} - All right reserved by <a class="link link-primary" href="https://github.com/LOG1997" target="_blank">log1997</a></p>
     </aside>
   </footer>
 </template>

src/views/Demo/index.vue

@@ -1,14 +1,241 @@
-<script setup lang='ts'>
+<script setup lang="ts">
+import gsap from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import { onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue'
+
+gsap.registerPlugin(ScrollTrigger)
+
+const list = ref<any[]>([])
+
+list.value = [{
+  label: 1,
+  value: 1,
+  color: 'red',
+}, {
+  label: 2,
+  value: 2,
+  color: 'blue',
+}, {
+  label: 3,
+  value: 3,
+  color: 'yellow',
+}, {
+  label: 4,
+  value: 4,
+  color: 'green',
+}, {
+  label: 5,
+  value: 5,
+  color: 'pink',
+}, {
+  label: 6,
+  value: 6,
+  color: 'orange',
+}, {
+  label: 7,
+  value: 7,
+  color: 'purple',
+}, {
+  label: 8,
+  value: 8,
+  color: 'brown',
+}, {
+  label: 9,
+  value: 9,
+  color: 'gray',
+}, {
+  label: 10,
+  value: 10,
+  color: 'cyan',
+}, {
+  label: 11,
+  value: 11,
+  color: 'white',
+}, {
+  label: 12,
+  value: 12,
+  color: 'black',
+}, {
+  label: 13,
+  value: 13,
+  color: 'orange',
+}, {
+  label: 14,
+  value: 14,
+  color: 'yellow',
+}, {
+  label: 15,
+  value: 14,
+  color: 'pink',
+}, {
+  label: 15,
+  value: 15,
+  color: 'orange',
+}, {
+  label: 16,
+  value: 16,
+  color: 'yellow',
+}, {
+  label: 17,
+  value: 17,
+  color: 'green',
+}, {
+  label: 18,
+  value: 18,
+  color: 'purple',
+}]
+
+// 为每个 li 元素创建引用
+const liRefs = ref()
+const scrollContainerRef = ref()
+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() {
+  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) {
+    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
+}
+onMounted(() => {
+  initGsapAnimation()
+  listenScrollContainer()
+})
+onBeforeUnmount(() => {
+  removeScrollContainer()
+})
+onUnmounted(() => {
+  disposeGsapAnimation()
+})
 </script>
 
 <template>
-  <div>
-    <button class="btn btn-error">
-      打印
-    </button>
+  <div class="h-full w-48 flex flex-col justify-center overflow-hidden relative">
+    <div class="w-full h-16 flex justify-center scroll-button scroll-button-up">
+      <SvgIcon v-show="showUpButton" name="chevron-up" size="64px" class="text-gray-200/80 cursor-pointer" @click="handleScroll(-100)" />
+    </div>
+    <div ref="scrollContainerRef" class="h-150 w-48 overflow-y-auto overflow-x-hidden relative scroll-smooth hide-scrollbar">
+      <ul class="li-container relative bg-slate-500/50">
+        <li
+          v-for="item in list" :key="item.value" ref="liRefs" :style="{ backgroundColor: item.color }"
+          class="w-full h-28 text-center leading-30 cursor-pointer duration-300"
+        >
+          {{ item.label }}
+        </li>
+        <li class="h-16" />
+      </ul>
+    </div>
+    <div class="w-full h-16 flex justify-center scroll-button scroll-button-down">
+      <SvgIcon v-show="showDownButton" name="chevron-down" size="64px" class="text-gray-200/80 cursor-pointer" @click="handleScroll(100)" />
+    </div>
   </div>
 </template>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
+.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;
+}
+
+@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);
+}
 </style>

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),
+    })
+}