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

src/lib/components/Waterfall.vue

@@ -1,34 +1,21 @@
 <template>
-  <div
-    ref="waterfallWrapper"
-    class="waterfall-list"
-    :style="{ height: `${wrapperHeight}px` }"
-  >
-    <div
-      v-for="(item, index) in list"
-      :key="getKey(item, index)"
-      class="waterfall-item"
-    >
+  <div ref="waterfallWrapper" class="waterfall-list" :style="{ height: `${wrapperHeight}px` }">
+    <div v-for="(item, index) in list" :key="getKey(item, index)" class="waterfall-item">
       <div class="waterfall-card">
-        <slot
-          name="item"
-          :item="item"
-          :index="index"
-          :url="getRenderURL(item)"
-        />
+        <slot name="item" :item="item" :index="index" :url="getRenderURL(item)" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useDebounceFn } from "@vueuse/core";
 import type { PropType } from "vue";
 import { provide, ref, watch } from "vue";
-import { useDebounceFn } from "@vueuse/core";
+import type { ViewCard } from "../types/waterfall";
 import { useCalculateCols, useLayout } from "../use";
 import Lazy from "../utils/Lazy";
 import { getValue } from "../utils/util";
-import type { ViewCard } from "../types/waterfall";
 
 const props = defineProps({
   list: {
@@ -85,7 +72,7 @@ const props = defineProps({
   },
   loadProps: {
     type: Object,
-    default: () => {},
+    default: () => { },
   },
   crossOrigin: {
     type: Boolean,
@@ -174,6 +161,7 @@ defineExpose({
   overflow: hidden;
   background-color: v-bind(backgroundColor);
 }
+
 .waterfall-item {
   position: absolute;
   left: 0;
@@ -189,18 +177,22 @@ defineExpose({
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
 }
+
 @keyframes fadeIn {
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
 }
+
 .fadeIn {
   -webkit-animation-name: fadeIn;
   animation-name: fadeIn;