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/Home/components/PrizeList/index.vue

@@ -1,319 +1,65 @@
 <script setup lang='ts'>
 import type { IPrizeConfig } from '@/types/storeType'
-import { storeToRefs } from 'pinia'
-import { onMounted, ref } from 'vue'
-
-import { useI18n } from 'vue-i18n'
-import defaultPrizeImage from '@/assets/images/龙.png'
-import ImageSync from '@/components/ImageSync/index.vue'
-
+import { ref } from 'vue'
+// import { useI18n } from 'vue-i18n'
 import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
-
-import i18n from '@/locales/i18n'
-import useStore from '@/store'
-
-const { t } = useI18n()
-const prizeConfig = useStore().prizeConfig
-const globalConfig = useStore().globalConfig
-const system = useStore().system
-const { getPrizeConfig: localPrizeList, getCurrentPrize: currentPrize, getTemporaryPrize: temporaryPrize } = storeToRefs(prizeConfig)
-const { getIsShowPrizeList: isShowPrizeList, getImageList: localImageList } = storeToRefs(globalConfig)
-const { getIsMobile: isMobile } = storeToRefs(system)
-const prizeListRef = ref()
-const prizeListContainerRef = ref()
+import OfficialPrizeList from './parts/OfficialPrizeList/index.vue'
+import OperationButton from './parts/OperationButton.vue'
+import TemporaryDialog from './parts/TemporaryDialog.vue'
+import TemporaryList from './parts/TemporaryList.vue'
+import { usePrizeList } from './usePrizeList'
 
 const temporaryPrizeRef = ref()
+const {
+  temporaryPrize,
+  changePersonCount,
+  selectPrize,
+  localImageList,
+  addTemporaryPrize,
+  submitTemporaryPrize,
+  submitData,
+  deleteTemporaryPrize,
+  prizeShow,
+  currentPrize,
+  localPrizeList,
+  isMobile,
+} = usePrizeList(temporaryPrizeRef)
 const selectedPrize = ref<IPrizeConfig | null>()
-// 获取prizeListRef高度
-function getPrizeListHeight() {
-  let height = 200
-  if (prizeListRef.value) {
-    height = (prizeListRef.value as HTMLElement).offsetHeight
-  }
-
-  return height
-}
-const prizeShow = ref(structuredClone(isShowPrizeList.value))
-
-function addTemporaryPrize() {
-  temporaryPrizeRef.value.showModal()
-}
-
-function deleteTemporaryPrize() {
-  temporaryPrize.value.isShow = false
-  prizeConfig.setTemporaryPrize(temporaryPrize.value)
-}
-function submitTemporaryPrize() {
-  if (!temporaryPrize.value.name || !temporaryPrize.value.count) {
-    // eslint-disable-next-line no-alert
-    alert(i18n.global.t('error.completeInformation'))
-    return
-  }
-  temporaryPrize.value.isShow = true
-  temporaryPrize.value.id = new Date().getTime().toString()
-  prizeConfig.setCurrentPrize(temporaryPrize.value)
-}
-function selectPrize(item: IPrizeConfig) {
-  selectedPrize.value = item
-  selectedPrize.value.isUsedCount = 0
-  selectedPrize.value.isUsed = false
-
-  if (selectedPrize.value.separateCount.countList.length > 1) {
-    return
-  }
-  selectedPrize.value.separateCount = {
-    enable: true,
-    countList: [
-      {
-        id: '0',
-        count: item.count,
-        isUsedCount: 0,
-      },
-    ],
-  }
-}
-function submitData(value: any) {
-  selectedPrize.value!.separateCount.countList = value
-  selectedPrize.value = null
-}
-function changePersonCount() {
-  temporaryPrize.value.separateCount.countList = []
-}
-function setCurrentPrize() {
-  for (let i = 0; i < localPrizeList.value.length; i++) {
-    if (localPrizeList.value[i].isUsedCount < localPrizeList.value[i].count) {
-      prizeConfig.setCurrentPrize(localPrizeList.value[i])
-
-      return
-    }
-  }
-}
-onMounted(() => {
-  prizeListContainerRef.value.style.height = `${getPrizeListHeight()}px`
-  setCurrentPrize()
-})
 </script>
 
 <template>
-  <div class="flex items-center">
-    <dialog id="my_modal_1" ref="temporaryPrizeRef" class="border-none modal">
-      <div class="modal-box">
-        <h3 class="text-lg font-bold">
-          {{ t('dialog.titleTemporary') }}
-        </h3>
-        <div class="flex flex-col gap-3">
-          <label class="flex w-full max-w-xs">
-            <div class="label">
-              <span class="label-text">{{ t('table.name') }}:</span>
-            </div>
-            <input
-              v-model="temporaryPrize.name" type="text" :placeholder="t('placeHolder.name')"
-              class="max-w-xs input-sm input input-bordered"
-            >
-          </label>
-          <label class="flex w-full max-w-xs">
-            <div class="label">
-              <span class="label-text">{{ t('table.fullParticipation') }}</span>
-            </div>
-            <input
-              type="checkbox" :checked="temporaryPrize.isAll"
-              class="mt-2 border-solid checkbox checkbox-secondary border"
-              @change="temporaryPrize.isAll = !temporaryPrize.isAll"
-            >
-          </label>
-          <label class="flex w-full max-w-xs">
-            <div class="label">
-              <span class="label-text">{{ t('table.setLuckyNumber') }}</span>
-            </div>
-            <input
-              v-model="temporaryPrize.count" type="number" :placeholder="t('placeHolder.winnerCount')" class="max-w-xs input-sm input input-bordered"
-              @change="changePersonCount"
-            >
-          </label>
-          <label class="flex w-full max-w-xs">
-            <div class="label">
-              <span class="label-text">{{ t('table.luckyPeopleNumber') }}</span>
-            </div>
-            <input
-              v-model="temporaryPrize.isUsedCount" disabled type="number" :placeholder="t('placeHolder.winnerCount')"
-              class="max-w-xs input-sm input input-bordered"
-            >
-          </label>
-          <label v-if="temporaryPrize.separateCount" class="flex w-full max-w-xs">
-            <div class="label">
-              <span class="label-text">{{ t('table.onceNumber') }}</span>
-            </div>
-            <div class="flex justify-start h-full" @click="selectPrize(temporaryPrize)">
-              <ul
-                v-if="temporaryPrize.separateCount.countList.length"
-                class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
-              >
-                <li
-                  v-for="se in temporaryPrize.separateCount.countList"
-                  :key="se.id" class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
-                >
-                  <div
-                    class="flex items-center justify-center w-full h-full tooltip"
-                    :data-tip="`${t('tooltip.doneCount') + se.isUsedCount}/${se.count}`"
-                  >
-                    <div
-                      class="absolute left-0 z-50 h-full bg-blue-300/80"
-                      :style="`width:${se.isUsedCount * 100 / se.count}%`"
-                    />
-                    <span>{{ se.count }}</span>
-                  </div>
-                </li>
-              </ul>
-              <button v-else class="btn btn-secondary btn-xs">{{ t('button.setting') }}</button>
-            </div>
-          </label>
-          <label class="flex w-full max-w-xs">
-            <div class="label">
-              <span class="label-text">{{ t('table.image') }}</span>
-            </div>
-            <select v-model="temporaryPrize.picture" class="flex-1 w-12 select select-warning select-sm">
-              <option v-if="temporaryPrize.picture.id" :value="{ id: '', name: '', url: '' }">❌
-              </option>
-              <option disabled selected>{{ t('table.selectPicture') }}</option>
-              <option v-for="picItem in localImageList" :key="picItem.id" class="w-auto" :value="picItem">{{
-                picItem.name }}
-              </option>
-            </select>
-          </label>
-        </div>
-        <div class="modal-action">
-          <form method="dialog" class="flex gap-3">
-            <button class="btn btn-sm" @click="submitTemporaryPrize">
-              {{ t('button.confirm') }}
-            </button>
-            <button class="btn btn-sm">
-              {{ t('button.cancel') }}
-            </button>
-          </form>
-        </div>
-      </div>
-    </dialog>
+  <div v-if="localPrizeList.length" class="flex h-2/3 items-center overflow-hidden">
+    <TemporaryDialog
+      ref="temporaryPrizeRef"
+      v-model:temporary-prize="temporaryPrize"
+      :change-person-count="changePersonCount"
+      :select-prize="selectPrize"
+      :local-image-list="localImageList"
+      :add-temporary-prize="addTemporaryPrize"
+      :submit-temporary-prize="submitTemporaryPrize"
+    />
     <EditSeparateDialog
       :total-number="selectedPrize?.count" :separated-number="selectedPrize?.separateCount.countList"
       @submit-data="submitData"
     />
-    <div ref="prizeListContainerRef">
-      <div v-if="temporaryPrize.isShow" class="h-20 w-72" :class="temporaryPrize.isShow ? 'current-prize' : ''">
-        <div class="relative flex flex-row items-center justify-between w-full h-full shadow-xl card bg-base-100">
-          <div
-            v-if="temporaryPrize.isUsed"
-            class="absolute z-50 w-full h-full bg-gray-800/70 item-mask rounded-xl"
-          />
-          <figure class="w-10 h-10 rounded-xl">
-            <ImageSync v-if="temporaryPrize.picture.url" :img-item="temporaryPrize.picture" />
-            <img v-else :src="defaultPrizeImage" alt="Prize" class="object-cover h-full rounded-xl">
-          </figure>
-          <div class="items-center p-0 text-center card-body">
-            <div class="tooltip tooltip-left" :data-tip="temporaryPrize.name">
-              <h2 class="p-0 m-0 overflow-hidden w-28 card-title whitespace-nowrap text-ellipsis">
-                {{
-                  temporaryPrize.name }}
-              </h2>
-            </div>
-            <p class="absolute z-40 p-0 m-0 text-gray-300/80 mt-9">
-              {{ temporaryPrize.isUsedCount }}/{{
-                temporaryPrize.count }}
-            </p>
-            <progress
-              class="w-3/4 h-6 progress progress-primary" :value="temporaryPrize.isUsedCount"
-              :max="temporaryPrize.count"
-            />
-            <!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->
-          </div>
-          <div class="flex flex-col gap-1 mr-2">
-            <div class="tooltip tooltip-left" :data-tip="t('tooltip.edit')">
-              <div class="cursor-pointer hover:text-blue-400" @click="addTemporaryPrize">
-                <svg-icon name="edit" />
-              </div>
-            </div>
-            <div class="tooltip tooltip-left" :data-tip="t('tooltip.delete')">
-              <div class="cursor-pointer hover:text-blue-400" @click="deleteTemporaryPrize">
-                <svg-icon name="delete" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <transition name="prize-list" :appear="true">
-        <div v-if="prizeShow && !isMobile && !temporaryPrize.isShow" class="flex items-center">
-          <ul ref="prizeListRef" class="flex flex-col gap-1 p-2 rounded-xl bg-slate-500/50">
-            <li
-              v-for="item in localPrizeList" :key="item.id"
-              :class="currentPrize.id === item.id ? 'current-prize' : ''"
-            >
-              <div
-                v-if="item.isShow"
-                class="relative flex flex-row items-center justify-between w-64 h-20 px-3 gap-6 shadow-xl card bg-base-100"
-              >
-                <div
-                  v-if="item.isUsed"
-                  class="absolute z-50 w-full h-full bg-gray-800/70 item-mask rounded-xl"
-                />
-                <figure class="w-10 h-10 rounded-xl">
-                  <ImageSync v-if="item.picture.url" :img-item="item.picture" />
-                  <img
-                    v-else :src="defaultPrizeImage" alt="Prize"
-                    class="object-cover h-full rounded-xl"
-                  >
-                </figure>
-                <div class="items-center p-0 card-body">
-                  <div class="tooltip tooltip-left w-full pl-1" :data-tip="item.name">
-                    <h2
-                      class="w-24 p-0 m-0 overflow-hidden card-title whitespace-nowrap text-ellipsis"
-                    >
-                      {{ item.name }}
-                    </h2>
-                  </div>
-                  <p class="absolute z-40 p-0 m-0 text-gray-300/80 mt-9">
-                    {{ item.isUsedCount }}/{{
-                      item.count }}
-                  </p>
-                  <progress
-                    class="w-full h-6 progress bg-[#52545b] progress-primary" :value="item.isUsedCount"
-                    :max="item.count"
-                  />
-                  <!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->
-                </div>
-              </div>
-            </li>
-          </ul>
-          <div class="flex flex-col gap-3">
-            <div class="tooltip tooltip-right" :data-tip="t('tooltip.prizeList')">
-              <div
-                class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
-                @click="prizeShow = !prizeShow"
-              >
-                <svg-icon name="arrow_left" class="w-full h-full" />
-              </div>
-            </div>
-            <div class="tooltip tooltip-right" :data-tip="t('tooltip.addActivity')">
-              <div
-                class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
-                @click="addTemporaryPrize"
-              >
-                <svg-icon name="add" class="w-full h-full" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </transition>
+    <div class="h-full">
+      <TemporaryList
+        v-if="temporaryPrize.isShow"
+        :temporary-prize="temporaryPrize"
+        :add-temporary-prize="addTemporaryPrize"
+        :delete-temporary-prize="deleteTemporaryPrize"
+      />
+      <OfficialPrizeList
+        v-show="!temporaryPrize.isShow"
+        v-model:prize-show="prizeShow"
+        :temporary-prize-show="temporaryPrize.isShow"
+        :local-prize-list="localPrizeList"
+        :current-prize="currentPrize"
+        :is-mobile="isMobile"
+        :add-temporary-prize="addTemporaryPrize"
+      />
     </div>
-
-    <transition name="prize-operate" :appear="true">
-      <div v-show="!prizeShow" class="tooltip tooltip-right" :data-tip="t('tooltip.prizeList')">
-        <div
-          class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
-          @click="prizeShow = !prizeShow"
-        >
-          <svg-icon name="arrow_right" class="w-full h-full" />
-        </div>
-      </div>
-    </transition>
+    <OperationButton v-if="!temporaryPrize.isShow" v-model:prize-show="prizeShow" :add-temporary-prize="addTemporaryPrize" />
   </div>
 </template>