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: 💄 下载模板成功后进行提示

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

@@ -13,8 +13,18 @@ const resetDataDialogRef = ref()
 const delAllDataDialogRef = ref()
 const exportInputFileRef = ref()
 const addOnePersonDrawerRef = ref()
-const baseUrl = import.meta.env.BASE_URL
+const {
-const { resetData, deleteAll, handleFileChange, exportData, addOnePerson, singlePersonData, alreadyPersonList, allPersonList, tableColumnList } = useViewModel({ exportInputFileRef })
+  resetData,
+  deleteAll,
+  handleFileChange,
+  exportData,
+  addOnePerson,
+  singlePersonData,
+  alreadyPersonList,
+  allPersonList,
+  tableColumnList,
+  downloadTemplate,
+} = useViewModel({ exportInputFileRef })
 const { t } = useI18n()
 const limitType = '.xlsx,.xls'
 </script>
@@ -50,10 +60,13 @@ const limitType = '.xlsx,.xls'
             {{ t('button.allDelete') }}
           </button>
           <div class="tooltip tooltip-bottom" :data-tip="t('tooltip.downloadTemplateTip')">
-            <a
+            <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>
+            >{{ t('button.downloadTemplate') }}</a> -->
           </div>
           <div class="">
             <label for="explore">

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

@@ -16,6 +16,7 @@ import ImportExcelWorker from './importExcel.worker?worker'
 type IBasePersonConfig = Pick<IPersonConfig, 'uid' | 'name' | 'department' | 'identity' | 'avatar'>
 
 export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<HTMLInputElement> }) {
+    const baseUrl = import.meta.env.BASE_URL
     const toast = useToast()
     const worker: Worker | null = new ImportExcelWorker()
     const loading = inject(loadingKey)
@@ -62,6 +63,12 @@ export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<H
                 if (e.data.type === 'done') {
                     personConfig.resetPerson()
                     personConfig.addNotPersonList(e.data.data)
+                    // 提示导入成功
+                    toast.open({
+                        message: '导入成功',
+                        type: 'success',
+                        position: 'top-right',
+                    })
                     // 导入成功后清空file input
                     clearFileInput()
                 }
@@ -85,6 +92,25 @@ export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<H
             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: '下载成功',
+                    type: 'success',
+                    position: 'top-right',
+                })
+            })
+    }
     // 导出数据
     function exportData() {
         let data = JSON.parse(JSON.stringify(allPersonList.value))
@@ -140,7 +166,7 @@ export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<H
     }
     function addOnePerson(addOnePersonDrawerRef: any, event: any) {
         event.preventDefault()
-        // 表单中的验证信息清除 
+        // 表单中的验证信息清除
 
         const personData = addOtherInfo([toRaw(singlePersonData.value)])
         personData[0].id = uuidv4()
@@ -160,5 +186,6 @@ export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<H
         addOnePerson,
         addPersonModalVisible,
         singlePersonData,
+        downloadTemplate,
     }
 }