重构图片组件，使用naive-ui的NImage替换el-image，移除冗余依赖和样式

src/views/Gallery.vue

@@ -1,9 +1,7 @@
 <template>
   <!-- <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> -->
-      <n-input class="mb-8 !w-[90%] ml-[5%]" size="large" v-model:value="kw" @keyup.enter="onSearch" placeholder="请输入">
+    <div ref="myCon" class="py-5 px-[10%]">
+      <n-input class="my-4 !w-[90%] ml-[5%]" round size="large" v-model:value="kw" @keyup.enter="onSearch" placeholder="请输入关键字">
         <template #suffix>
           <n-icon size="large">
             <icon-search />
@@ -12,7 +10,7 @@
       </n-input>
 
       <!-- <div v-infinite-scroll="loadMore"> -->
-      <Waterfall ref="waterfall" :list="fileList" :width="cwidth" :gutter="gutter" :columns="column" img-selector="url"
+      <Waterfall ref="waterfall" :list="fileList"  :gutter="gutter" :columns="column" img-selector="url"
         animation-effect="fadeIn" :animation-duration="1000" :animation-delay="300" backgroundColor="transparent"> >
         <template #item="{ item }">
           <div
@@ -24,11 +22,11 @@
               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
+              class="absolute hidden 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>
         </template>
       </Waterfall>
@@ -60,14 +58,14 @@ const pn = ref(1);
 const ps = ref(40);
 const loading = ref(false);
 const kw = ref<string>('');
-const cwidth = ref<number>(220);
+const cwidth = ref<number>(240);
 const column = ref<number>(5);
 const gutter = ref<number>(20);
 
 // 计算列数
 function calculateColumns() {
   const totalWidth = window.innerWidth * 0.8; // 画廊宽度为视口宽度的80%
-  const col = Math.floor(totalWidth / (cwidth.value + gutter.value));
+  const col = Math.floor((totalWidth + gutter.value) / (cwidth.value + gutter.value));
   column.value = col > 0 ? col : 1;
   waterfall.value?.renderer()
 }
@@ -162,37 +160,5 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="less">
-/* 画廊页样式 */
-:deep(.devui-tabs__nav) {
-  display: flex;
-  justify-content: center;
-  width: 100% !important;
-  // padding: 0 10%;
 
-  li {
-    width: 50%;
-    display: flex;
-    justify-content: center;
-  }
-
-  li a span {
-    font-size: 18px !important;
-    font-weight: 500;
-  }
-}
-
-.ps {
-  height: calc(100vh - 65px);
-
-  width: 100%;
-}
-
-:deep(.devui-upload) {
-  width: 100%;
-
-  &>div {
-    width: 100%;
-
-  }
-}
 </style>