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
2025-12-28 00:04:20 +08:00
parent a0223bda4f
commit bd5eac7d70
27 changed files with 4287 additions and 4439 deletions
--- a/src/views/Home/components/PrizeList/usePrizeList.ts
+++ b/src/views/Home/components/PrizeList/usePrizeList.ts
@@ -0,0 +1,98 @@
+import type { IPrizeConfig } from '@/types/storeType'
+import { storeToRefs } from 'pinia'
+import { onMounted, ref } from 'vue'
+import i18n from '@/locales/i18n'
+
+import useStore from '@/store'
+
+export function usePrizeList(temporaryPrizeRef: any) {
+    const prizeConfig = useStore().prizeConfig
+    const globalConfig = useStore().globalConfig
+    const system = useStore().system
+    const {
+        getPrizeConfig: localPrizeList,
+        getCurrentPrize: currentPrize,
+        getTemporaryPrize: temporaryPrize,
+    } = storeToRefs(prizeConfig)
+    const {
+        getIsShowPrizeList: isShowPrizeList,
+        getImageList: localImageList,
+    }
+        = storeToRefs(globalConfig)
+    const { getIsMobile: isMobile } = storeToRefs(system)
+
+    const selectedPrize = ref<IPrizeConfig | null>()
+    const prizeShow = ref(structuredClone(isShowPrizeList.value))
+
+    function addTemporaryPrize() {
+        temporaryPrizeRef.value.showDialog()
+    }
+
+    function deleteTemporaryPrize() {
+        temporaryPrize.value.isShow = false
+        prizeConfig.setTemporaryPrize(temporaryPrize.value)
+    }
+    function submitTemporaryPrize() {
+        if (!temporaryPrize.value.name || !temporaryPrize.value.count) {
+            // eslint-disable-next-line no-alert
+            alert(i18n.global.t('error.completeInformation'))
+            return
+        }
+        temporaryPrize.value.isShow = true
+        temporaryPrize.value.id = new Date().getTime().toString()
+        prizeConfig.setCurrentPrize(temporaryPrize.value)
+    }
+    function selectPrize(item: IPrizeConfig) {
+        selectedPrize.value = item
+        selectedPrize.value.isUsedCount = 0
+        selectedPrize.value.isUsed = false
+
+        if (selectedPrize.value.separateCount.countList.length > 1) {
+            return
+        }
+        selectedPrize.value.separateCount = {
+            enable: true,
+            countList: [
+                {
+                    id: '0',
+                    count: item.count,
+                    isUsedCount: 0,
+                },
+            ],
+        }
+    }
+    function submitData(value: any) {
+        selectedPrize.value!.separateCount.countList = value
+        selectedPrize.value = null
+    }
+    function changePersonCount() {
+        temporaryPrize.value.separateCount.countList = []
+    }
+    function setCurrentPrize() {
+        for (let i = 0; i < localPrizeList.value.length; i++) {
+            if (localPrizeList.value[i].isUsedCount < localPrizeList.value[i].count) {
+                prizeConfig.setCurrentPrize(localPrizeList.value[i])
+
+                return
+            }
+        }
+    }
+    onMounted(() => {
+        setCurrentPrize()
+    })
+
+    return {
+        temporaryPrize,
+        changePersonCount,
+        selectPrize,
+        currentPrize,
+        localImageList,
+        addTemporaryPrize,
+        submitTemporaryPrize,
+        submitData,
+        deleteTemporaryPrize,
+        prizeShow,
+        localPrizeList,
+        isMobile,
+    }
+}