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>