96 UI optimization (#122)

* fix(home): 🐛 解决多次切换路由后页面卡顿的问题 #96

卸载路由时清除requestAnimationFrame

* feat: ✨ 文件存储使用Blob格式

* style: 💄 修改部分类型any为具体类型

* feat: ✨ 界面设置中模块使用瀑布流布局 #96

* fix: 🐛 md文档更换文件夹解决控制台警告

* style: 💄 switch按钮改回使用daisyui组件

* refactor: ♻️ 所有人员列表提取tableColumn

* style: 💄 奖项列表中的图片类型修复

src/components/FileUpload/index.vue

@@ -2,7 +2,7 @@
 import type { IFileData } from './type'
 import { ListMusic, Upload, X } from 'lucide-vue-next'
 import { ref } from 'vue'
-import { readFileAsJsonData, readFileData } from '@/utils/file'
+import { getBlobObjectUrl, readFileAsJsonData, readFileData, readFileDataAsBlob } from '@/utils/file'
 
 const props = defineProps<{
   limitType?: string
@@ -21,13 +21,14 @@ async function handleFileChange(e: Event) {
   if (props.mode === 'json') {
     const fileRes = await readFileAsJsonData(file)
     const jsonData = JSON.parse(fileRes)
-    fileData.value = { dataUrl: jsonData, fileName: file.name, type }
+    fileData.value = { data: jsonData, fileName: file.name, type }
     originFileName.value = file.name
     emits('uploadFile', fileData.value)
     return
   }
-  const { dataUrl, fileName } = await readFileData(file)
-  fileData.value = { dataUrl, fileName, type }
+  const { data: blobData, fileName } = await readFileDataAsBlob(file)
+  console.log('datafile', blobData, fileName)
+  fileData.value = { data: blobData, fileName, type }
   originFileName.value = fileName
   emits('uploadFile', fileData.value)
 }
@@ -46,7 +47,7 @@ function removeFile() {
       @change="handleFileChange"
     >
     <label for="file-upload" :class="fileData ? 'cursor-not-allowed' : null" class="w-full h-52 cursor-pointer border-2 border-dashed flex items-center justify-center overflow-hidden">
-      <img v-if="fileData && fileData.type.includes('image')" class="w-full object-cover stroke-0" :src="fileData.dataUrl" alt="">
+      <img v-if="fileData && fileData.type.includes('image')" class="w-full object-cover stroke-0" :src="getBlobObjectUrl(fileData.data as Blob)" alt="">
       <ListMusic v-else-if="fileData && fileData.type.includes('audio')" class="w-2/3 h-2/3 stroke-1 text-gray-500/50" />
       <div v-else class="w-full h-full flex justify-center items-center flex-col gap-4">
         <Upload class="w-2/3 h-2/3 stroke-1 text-gray-500/50" />

src/components/FileUpload/type.ts

@@ -1,5 +1,5 @@
 export interface IFileData {
-    dataUrl: string
+    data: string | Blob | ArrayBuffer
     fileName: string
     type: string
 }

src/components/ImageSync/index.vue

@@ -1,36 +1,35 @@
 <script setup lang='ts'>
+import type { IFileData } from '../FileUpload/type'
+import type { IImage } from '@/types/storeType'
 import localforage from 'localforage'
 import { onMounted, ref } from 'vue'
 
-const props = defineProps({
-  imgItem: {
-    type: Object,
-    default: () => ({}),
-  },
-})
+interface IProps {
+  imgItem: IImage
+}
+const props = defineProps<IProps>()
 const imageDbStore = localforage.createInstance({
   name: 'imgStore',
 })
 
 const imgUrl = ref('')
 
-async function getImageStoreItem(item: any): Promise<string> {
+async function getImageStoreItem(item: IImage): Promise<string> {
   let image = ''
   if (item.url === 'Storage') {
     const key = item.id
-    const imageData = await imageDbStore.getItem(key) as any
-    image = imageData.dataUrl
+    const imageData = await imageDbStore.getItem<IFileData>(key)
+    image = URL.createObjectURL(imageData?.data as Blob)
   }
   else {
-    image = item.url
+    image = item.url as string
   }
 
   return image
 }
 
 onMounted(async () => {
-  const image = await getImageStoreItem(props.imgItem)
-  imgUrl.value = image
+  imgUrl.value = await getImageStoreItem(props.imgItem)
 })
 </script>
 

src/components/Waterfall/index.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import { throttle } from 'lodash-es' // lodash-es 节流
+import Masonry from 'masonry-layout'
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+
+// 布局参数 Props
+interface MasonryWaterfallProps {
+  columnWidth?: number | string // 列宽（px/选择器）
+  gutter?: number // 列/行间距
+  fitWidth?: boolean // 容器宽度自适应居中
+}
+
+// 默认参数
+const props = withDefaults(defineProps<MasonryWaterfallProps>(), {
+  columnWidth: 120,
+  gutter: 16,
+  fitWidth: true,
+})
+
+// Vue Ref 管理 DOM 容器和 masonry 实例
+const masonryContainer: Ref<HTMLDivElement | null> = ref(null)
+const masonryInstance: Ref<Masonry | null> = ref(null)
+
+// 初始化 masonry（仅执行一次，因卡片固定）
+async function initMasonry() {
+  if (!masonryContainer.value)
+    return
+
+  // 等待插槽内容（固定卡片）完全渲染
+  await nextTick()
+
+  // 初始化 masonry 实例（固定卡片无需销毁旧实例）
+  masonryInstance.value = new Masonry(masonryContainer.value, {
+    itemSelector: '.masonry-container > *', // 匹配所有固定子项
+    columnWidth: props.columnWidth,
+    gutter: props.gutter,
+    fitWidth: props.fitWidth,
+    initLayout: true, // 固定卡片直接初始化布局
+  })
+}
+
+// 刷新布局（仅用于卡片内部内容高度变化）
+async function refreshLayout() {
+  await nextTick()
+  if (masonryInstance.value) {
+    masonryInstance.value.layout?.()
+  }
+}
+
+// 窗口缩放节流重排（优化性能）
+const handleResize = throttle(() => {
+  if (masonryInstance.value) {
+    masonryInstance.value.layout?.()
+  }
+}, 300)
+
+// 生命周期：挂载时初始化，卸载时清理
+onMounted(async () => {
+  await initMasonry()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  // 销毁实例 + 释放内存
+  if (masonryInstance.value) {
+    masonryInstance.value.destroy?.()
+    masonryInstance.value = null
+  }
+  // 移除监听 + 取消节流任务
+  window.removeEventListener('resize', handleResize)
+  handleResize.cancel()
+})
+
+// 仅暴露刷新方法（适配卡片内部内容变化）
+defineExpose({ refreshLayout })
+</script>
+
+<template>
+  <!-- masonry 容器：ref 绑定，接收固定插槽内容 -->
+  <div ref="masonryContainer" class="masonry-container">
+    <!-- 插槽：直接传入固定的卡片/组件 -->
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.masonry-container {
+  width: 100%;
+  /* max-width: 1400px; */
+  margin: 0 auto;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+/* 固定卡片基础样式 */
+.masonry-container > * {
+  margin-bottom: v-bind('`${gutter}px`');
+  box-sizing: border-box;
+  break-inside: avoid; /* 兼容 Safari */
+  min-height: 100px; /* 避免内容过矮导致布局异常 */
+}
+
+/* 响应式适配：小屏调整列宽 */
+/* @media (max-width: 768px) {
+  .masonry-container {
+    padding: 10px;
+  }
+  .masonry-container > * {
+    width: calc(50% - v-bind('`${gutter}px`')) !important;
+  }
+} */
+</style>