fix: 优化瀑布流布局和图片加载体验

- 移除 vueDevTools 插件，解决 localStorage 错误
- 添加动态图片尺寸检测，支持无预设尺寸的图片
- 修复长图造成的布局空隙问题（统一使用 Math.floor）
- 滚动加载改用 throttle，提前加载距离增至 300px
- 批量更新布局优化，减少重复计算
- 底部显示加载状态

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: dreamhunter2333

src/components/ImageWaterfall.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch } from 'vue'
-import { NImage, NCard, NSpin, NButton, NIcon } from 'naive-ui'
+import { NCard, NSpin, NButton, NIcon, NImage } from 'naive-ui'
 import { OpenOutline } from '@vicons/ionicons5'
 import type { ImageItem } from '@/types/waterfall'
-import { debounce } from 'lodash-es'
+import { debounce, throttle } from 'lodash-es'
 
 const props = defineProps<{
   images: ImageItem[]
@@ -21,6 +21,8 @@ const containerRef = ref<HTMLElement | null>(null)
 const columns = ref<ImageItem[][]>([])
 const columnCount = ref(1)
 const columnWidth = ref(240)
+// 存储图片实际尺寸
+const imageSizes = ref<Map<string, { width: number; height: number }>>(new Map())
 
 function calculateColumnCount() {
   if (!containerRef.value) return
@@ -53,17 +55,47 @@ function distributeImages() {
   })
 }
 
+function getImageSize(image: ImageItem): { width: number; height: number } {
+  // 优先使用缓存的实际尺寸
+  if (imageSizes.value.has(image.id)) {
+    return imageSizes.value.get(image.id)!
+  }
+  // 其次使用 API 返回的尺寸
+  if (image.width && image.height && image.width > 0 && image.height > 0) {
+    return { width: image.width, height: image.height }
+  }
+  // 默认使用 1:1 比例
+  return { width: 1, height: 1 }
+}
+
 function getColumnHeight(column: ImageItem[]) {
   return column.reduce((height, image) => {
-    // 使用 API 返回的尺寸计算高度
-    const scaledHeight = (columnWidth.value * image.height) / image.width
+    const size = getImageSize(image)
+    const scaledHeight = Math.floor((columnWidth.value * size.height) / size.width)
     return height + scaledHeight + 8
   }, 0)
 }
 
 function calculateImageHeight(image: ImageItem): number {
-  // 使用 API 返回的尺寸计算高度
-  return Math.floor((columnWidth.value * image.height) / image.width)
+  const size = getImageSize(image)
+  return Math.floor((columnWidth.value * size.height) / size.width)
+}
+
+// 批量更新布局，合并短时间内的多次调用
+const debouncedDistribute = debounce(() => {
+  distributeImages()
+}, 50)
+
+function onImageLoad(imageId: string, event: Event) {
+  const img = event.target as HTMLImageElement
+  if (img.naturalWidth > 0 && img.naturalHeight > 0) {
+    imageSizes.value.set(imageId, {
+      width: img.naturalWidth,
+      height: img.naturalHeight
+    })
+    // 使用 debounced 版本，50ms 内的多次调用会合并为一次
+    debouncedDistribute()
+  }
 }
 
 // 使用 debounce 优化 resize 处理
@@ -72,19 +104,19 @@ const handleResize = debounce(() => {
   distributeImages()
 }, 100)
 
-// 使用 debounce 优化滚动处理
-const handleScroll = debounce(() => {
+// 使用 throttle 优化滚动处理（throttle 比 debounce 更适合滚动场景）
+const handleScroll = throttle(() => {
   if (props.loading || !props.hasMore) return
 
   const scrollTop = window.scrollY || document.documentElement.scrollTop
   const windowHeight = window.innerHeight
   const documentHeight = document.documentElement.scrollHeight
 
-  // 当距离底部 100px 时触发加载
-  if (documentHeight - (scrollTop + windowHeight) < 100) {
+  // 当距离底部 300px 时触发加载（增大触发距离，提前加载）
+  if (documentHeight - (scrollTop + windowHeight) < 300) {
     emit('load-more')
   }
-}, 200)
+}, 100)
 
 let resizeObserver: ResizeObserver | null = null
 
@@ -115,15 +147,25 @@ onUnmounted(() => {
   window.removeEventListener('resize', handleResize)
   window.removeEventListener('scroll', handleScroll)
 
-  // 取消未执行的 debounce 函数
+  // 取消未执行的 debounce/throttle 函数
   handleResize.cancel()
   handleScroll.cancel()
+  debouncedDistribute.cancel()
 })
 
 // 监听图片数组变化
 watch(
   () => props.images,
-  () => {
+  (newImages) => {
+    // 清理不存在的图片尺寸缓存
+    const imageIds = new Set(newImages.map(img => img.id))
+    const newSizes = new Map<string, { width: number; height: number }>()
+    imageSizes.value.forEach((size, id) => {
+      if (imageIds.has(id)) {
+        newSizes.set(id, size)
+      }
+    })
+    imageSizes.value = newSizes
     distributeImages()
   },
   { deep: true },
@@ -137,68 +179,65 @@ watch(columnCount, () => {
 
 <template>
   <div ref="containerRef" class="waterfall">
-    <NSpin :show="loading">
-      <div class="columns">
-        <div
-          v-for="(column, columnIndex) in columns"
-          :key="columnIndex"
-          class="column"
-          :style="{ width: `${columnWidth}px` }"
-        >
-          <NCard
-            v-for="image in column"
-            :key="image.id"
-            class="image-card"
-            :content-style="{ padding: 0 }"
-            :header-style="{ padding: 0 }"
-            :footer-style="{ padding: 0 }"
-            :segmented="{ content: false }"
-            :bordered="false"
-            :style="{ marginBottom: '8px' }"
-          >
-            <div class="image-wrapper">
+    <div class="columns">
+      <div v-for="(column, columnIndex) in columns" :key="columnIndex" class="column"
+        :style="{ width: `${columnWidth}px` }">
+        <NCard v-for="image in column" :key="image.id" class="image-card" :content-style="{ padding: 0 }"
+          :header-style="{ padding: 0 }" :footer-style="{ padding: 0 }" :segmented="{ content: false }"
+          :bordered="false" :style="{ marginBottom: '8px' }">
+          <div class="image-wrapper">
+            <div class="image-container" :style="{
+              width: '100%',
+              height: `${calculateImageHeight(image)}px`,
+              overflow: 'hidden',
+              borderRadius: '4px',
+              position: 'relative',
+              backgroundColor: '#f0f0f0',
+            }">
               <NImage
                 :src="image.url"
-                :width="columnWidth"
-                :height="calculateImageHeight(image)"
                 :preview-src="image.originalUrl"
-                object-fit="cover"
-                :show-toolbar-tooltip="false"
-                :preview-disabled="false"
+                :img-props="{
+                  style: {
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    objectPosition: 'top',
+                    display: 'block',
+                  }
+                }"
                 :style="{
                   width: '100%',
-                  height: 'auto',
+                  height: `${calculateImageHeight(image)}px`,
                   display: 'block',
                   borderRadius: '4px',
                   cursor: 'zoom-in',
                 }"
+                @load="(e: Event) => onImageLoad(image.id, e)"
               />
-              <NButton
-                quaternary
-                circle
-                size="small"
-                class="open-link"
-                tag="a"
-                :href="image.wb_url"
-                target="_blank"
-                :style="{
-                  '--n-text-color': '#ffffff',
-                  '--n-text-color-hover': '#ffffff',
-                  '--n-text-color-pressed': '#ffffff',
-                }"
-              >
-                <template #icon>
-                  <NIcon>
-                    <OpenOutline />
-                  </NIcon>
-                </template>
-              </NButton>
             </div>
-          </NCard>
-        </div>
+            <NButton quaternary circle size="small" class="open-link" tag="a" :href="image.wb_url" target="_blank"
+              :style="{
+                '--n-text-color': '#ffffff',
+                '--n-text-color-hover': '#ffffff',
+                '--n-text-color-pressed': '#ffffff',
+              }">
+              <template #icon>
+                <NIcon>
+                  <OpenOutline />
+                </NIcon>
+              </template>
+            </NButton>
+          </div>
+        </NCard>
       </div>
-      <div v-if="!loading && !hasMore" class="no-more">没有更多了</div>
-    </NSpin>
+    </div>
+    <!-- 底部加载状态 -->
+    <div v-if="loading" class="loading-more">
+      <NSpin size="small" />
+      <span>加载中...</span>
+    </div>
+    <div v-else-if="!hasMore && images.length > 0" class="no-more">没有更多了</div>
   </div>
 </template>
 
@@ -260,6 +299,15 @@ watch(columnCount, () => {
   color: var(--n-text-color-3);
 }
 
+.loading-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px;
+  color: var(--n-text-color-3);
+}
+
 :deep(.n-card) {
   background-color: transparent;
 }

vite.config.ts

@@ -2,13 +2,11 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
-    vueDevTools(),
   ],
   resolve: {
     alias: {