迁移UI框架至naive-ui，重构组件和样式，添加Gallery和Mask组件

src/views/Gallery.vue

@@ -1,126 +1,75 @@
 <template>
-  <PerfectScrollbar ref="scrollbar" @ps-scroll-y="handleScroll">
+  <!-- <PerfectScrollbar ref="scrollbar" @ps-scroll-y="handleScroll"> -->
     <div ref="myCon" class="gallery-page py-5 px-[10%]">
-      <d-search class="mt-0 mb-8 w-2/3 mx-auto rounded-full" v-model="kw" is-keyup-search :delay="1000"
-        @search="onSearch"></d-search>
-      <div class="gallery-container w-full box-border">
-        <!-- 瀑布流容器 -->
-        <div ref="waterfallContainer" v-image-preview
-          class="waterfall-container flex justify-between flex-nowrap w-full overflow-hidden">
-          <!-- 动态生成的列 -->
-          <div v-for="(column, index) in columns" :key="index" class="waterfall-column flex flex-col w-[240px]">
-            <div v-for="item in column" :key="item.id"
-              class="gallery-item group relative my-[10px] rounded-lg overflow-hidden transition-transform duration-300 box-border hover:-translate-y-1.5">
-              <div
-                class="absolute px-2 truncate hidden group-hover:block top-0 text-center w-full bg-[#00000070] text-white">
-                {{ item.filename }}</div>
-              <img :src="item.filepath" alt="" class="gallery-image block w-full h-auto object-cover rounded-md">
-              <div class="px-2 absolute  bottom-0 flex justify-between w-full bg-[#00000060]">
-                <div class="text-white ">由 <span class="text-[#f1d9db] font-600">{{ item.nickname }}</span> 上传</div>
-                <d-popover content="下载" trigger="hover" class="!bg-primary" style="color: #fff">
-                  <icon-download @click="downloadFile(item.filepath)"
-                    class="w-5 h-5 text-white hover-text-primary"></icon-download>
-                </d-popover>
-              </div>
+      <!-- <d-search class="mt-0 mb-8 w-2/3 mx-auto rounded-full" v-model="kw" is-keyup-search :delay="1000"
+        @search="onSearch"></d-search> -->
+      <n-input class="mb-8 !w-[90%] ml-[5%]" size="large" v-model:value="kw" @keyup.enter="onSearch" placeholder="请输入">
+        <template #suffix>
+          <n-icon size="large">
+            <icon-search />
+          </n-icon>
+        </template>
+      </n-input>
+
+      <!-- <div v-infinite-scroll="loadMore"> -->
+      <Waterfall ref="waterfall" :list="fileList" :width="cwidth" :gutter="gutter" :columns="column" img-selector="url"
+        animation-effect="fadeIn" :animation-duration="1000" :animation-delay="300" backgroundColor="transparent"> >
+        <template #item="{ item }">
+          <div
+            class="card rounded-md overflow-hidden group shadow-md transition-transform duration-300 box-border hover:-translate-y-1.5">
+            <!-- <div class="image-wrapper"> -->
+            <LazyImg class="rounded-md overflow-hidden" :url="item.filepath" />
+            <!-- </div> -->
+            <div
+              class="hidden truncate group-hover:block absolute rounded-md z-10 truncate top-0 text-center w-full bg-[#00000070] text-white">
+              {{ item.filename }}
+            </div>
+            <div
+              class="absolute rounded-md flex z-10 truncate bottom-0  w-full bg-[#00000070] text-white justify-between items-center">
+              <div>由 <span class="text-[#f1d9db] font-600">{{ item.nickname }}</span> 分享</div>
+              <icon-download class="cursor-pointer w-4 h-4" @click="downloadFile(item.filepath)" />
             </div>
           </div>
-        </div>
-        <!-- 加载中指示器 -->
-        <div v-if="loading" class="loading-indicator text-center p-5 text-gray-600">加载中...</div>
-        <div v-else class="loading-indicator text-center p-5 text-gray-600">已全部加载完成</div>
-      </div>
+        </template>
+      </Waterfall>
     </div>
-  </PerfectScrollbar>
+    <!-- </div> -->
+  <!-- </PerfectScrollbar> -->
 
 </template>
 
 <script setup lang="ts">
 import { throttle } from 'es-toolkit';
-import { onMounted, onUnmounted, ref } from 'vue';
-
+import { LazyImg, Waterfall } from '../lib';
 definePage({
   name: 'gallery',
   meta: {
     title: '画廊',
   }
 })
-
+declare module "vue" {
+  interface HTMLAttributes {
+    "v-infinite-scroll"?: () => void;
+  }
+}
+const waterfall = ref<any>(null);
 
 // 画廊页逻辑
 const fileList = ref<any[]>([]);
 const pn = ref(1);
 const ps = ref(40);
 const loading = ref(false);
-const waterfallContainer = ref<HTMLDivElement | null>(null);
-const columns = ref<Array<Array<any>>>([]);
-const columnHeights = ref<number[]>([]);
-const columnCount = ref(4); // 默认列数
-const itemWidth = ref(240); // 图片宽度固定为240px
 const kw = ref<string>('');
+const cwidth = ref<number>(220);
+const column = ref<number>(5);
+const gutter = ref<number>(20);
 
-// const uploadOptions = ref({
-//   uri: 'https://www.hxyouzi.com/api/files/upload',
-//   method: 'POST',
-//   maximumSize: 5 * 1024 * 1024,
-//   headers: {
-//     'Authorization': 'Bearer ' + $cookies.get('token'),
-//   },
-// });
-
-// 计算列数 based on 屏幕宽度
-function calculateColumnCount() {
-  if (!waterfallContainer.value) return;
-  const containerWidth = waterfallContainer.value.clientWidth;
-  const newColumnCount = Math.max(1, Math.floor(containerWidth / itemWidth.value));
-  if (newColumnCount !== columnCount.value) {
-    columnCount.value = newColumnCount;
-    resetWaterfall();
-  }
-}
-
-// 重置瀑布流
-function resetWaterfall() {
-  columns.value = Array(columnCount.value).fill(0).map(() => []);
-  columnHeights.value = Array(columnCount.value).fill(0);
-  // 重新分配图片
-  fileList.value.forEach(async item =>await addToWaterfall(item));
-  console.log('>>> --> resetWaterfall --> fileList:', fileList.value)
-}
-
-// 添加图片到瀑布流
-async function addToWaterfall(item: any) {
-  if (columns.value.length === 0) return;
-  const { height, width } =await getImageSizeByCheck(item.filepath)
-
-  // 找到高度最小的列
-  let minHeight = Math.min(...columnHeights.value);
-  let minIndex = columnHeights.value.indexOf(minHeight);
-  console.log('>>> --> addToWaterfall --> item:', item)
-  console.log('>>> --> addToWaterfall --> minIndex:', minIndex)
-  // 添加到该列
-  columns.value[minIndex].push(item);
-  // 估算列高 - 实际高度会在图片加载后更新
-  const estimatedHeight = itemWidth.value * height / width
-  columnHeights.value[minIndex] += estimatedHeight + 20; // 加上padding和margin
-}
-
-function getImageSizeByCheck(url: string): any {
-  return new Promise(function (resolve, reject) {
-  let image = new Image();
-  image.src = url;
-  let height = 0
-  let width = 0
-  // let timer = setTimeout(() => {
-  image.onload = () => {
-    if (image.width > 0 && image.height > 0) {
-      height = image.height
-      width = image.width
-      resolve({ height, width })
-      // clearTimeout(timer)
-    }
-  }
-  // }, 100)
-  });
+// 计算列数
+function calculateColumns() {
+  const totalWidth = window.innerWidth * 0.8; // 画廊宽度为视口宽度的80%
+  const col = Math.floor(totalWidth / (cwidth.value + gutter.value));
+  column.value = col > 0 ? col : 1;
+  waterfall.value?.renderer()
 }
 
 // 获取文件列表
@@ -137,55 +86,27 @@ async function getFileList() {
 
     if (pn.value === 1) {
       fileList.value = res.data;
-      resetWaterfall();
     } else {
       // 追加新数据
       res.data.forEach((item: any) => {
         fileList.value.push(item);
-        addToWaterfall(item);
       });
     }
   } catch (error) {
     console.error('获取文件列表失败:', error);
   } finally {
     loading.value = false;
+    waterfall.value?.renderer();
   }
 }
 
-// // 获取我的文件列表
-// async function getMyList() {
-//   if (loading.value) return;
-//   loading.value = true;
-//   try {
-//     const res = await $http.file.getMyList({
-//       page_num: pn.value,
-//       page_size: ps.value,
-//     });
-//     // console.log('>>> --> getFileList --> res:', res);
-
-//     if (pn.value === 1) {
-//       fileList.value = res.data;
-//       resetWaterfall();
-//     } else {
-//       // 追加新数据
-//       res.data.forEach((item: any) => {
-//         fileList.value.push(item);
-//         addToWaterfall(item);
-//       });
-//     }
-//   } catch (error) {
-//     console.error('获取文件列表失败:', error);
-//   } finally {
-//     loading.value = false;
-//   }
-// }
 
 // 监听滚动事件
 const handleScroll: any = throttle((e: any) => {
-  console.log('>>> --> handleScroll --> loading:', e)
+  // console.log('>>> --> handleScroll --> loading:', e)
   if (loading.value) return;
   const scrollTop = e.target.scrollTop
-  console.log('>>> --> handleScroll --> scrollTop:', scrollTop)
+  // console.log('>>> --> handleScroll --> scrollTop:', scrollTop)
   const scrollHeight = e.target.scrollHeight
   // console.log('>>> --> handleScroll --> scrollHeight:', scrollHeight)
   const clientHeight = e.target.offsetHeight;
@@ -224,12 +145,10 @@ function downloadFile(url: string) {
 }
 
 onMounted(() => {
+  calculateColumns()
   getFileList();
-  // 计算初始列数
-  calculateColumnCount();
-  // 添加窗口大小变化监听
-  window.addEventListener('resize', calculateColumnCount);
   // 添加滚动监听
+  window.addEventListener('resize', calculateColumns);
   window.addEventListener('scroll', handleScroll);
 });
 
@@ -237,10 +156,7 @@ onUnmounted(() => {
   pn.value = 1;
   kw.value = '';
   fileList.value = [];
-  resetWaterfall();
-
   // 移除监听
-  window.removeEventListener('resize', calculateColumnCount);
   window.removeEventListener('scroll', handleScroll);
 });
 </script>