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

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

@@ -11,7 +11,28 @@ export function useViewModel() {
     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,
+    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)
 
@@ -32,6 +53,8 @@ export function useViewModel() {
     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,
     })
@@ -170,6 +193,12 @@ export function useViewModel() {
     watch(isShowAvatarValue, () => {
         globalConfig.setIsShowAvatar(isShowAvatarValue.value)
     })
+    watch(definiteTimeValue, () => {
+        globalConfig.setDefiniteTime(definiteTimeValue.value)
+    })
+    watch(isWinMusicValue, () => {
+        globalConfig.setIsPlayWinMusic(isWinMusicValue.value)
+    })
     onMounted(() => {
     })
     return {
@@ -203,5 +232,7 @@ export function useViewModel() {
         resetPattern,
         exportAllConfigData,
         importAllConfigData,
+        definiteTimeValue,
+        isWinMusicValue,
     }
 }