<!-- Generated by SpecStory -->

# Hide exif grid for short items (2025-06-26 20:49:48)

_**User**_

判断 item 高度，在少于 300px 时，不显示 exif 网格

---

_**Assistant**_

我将帮你在照片项目高度少于 300px 时隐藏 EXIF 网格。

---

```diff
  
              {/* EXIF 信息网格 */}
-             <div className="grid grid-cols-2 gap-2 text-xs">
-               {exifData.focalLength35mm && (
-                 <div className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 opacity-0 backdrop-blur-md transition-opacity duration-300 group-hover:opacity-100">
-                   <StreamlineImageAccessoriesLensesPhotosCameraShutterPicturePhotographyPicturesPhotoLens className="text-white/70" />
-                   <span className="text-white/90">
-                     {exifData.focalLength35mm}mm
-                   </span>
-                 </div>
-               )}
+             {calculatedHeight >= 300 && (
+               <div className="grid grid-cols-2 gap-2 text-xs">
+                 {exifData.focalLength35mm && (
+                   <div className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 opacity-0 backdrop-blur-md transition-opacity duration-300 group-hover:opacity-100">
+                     <StreamlineImageAccessoriesLensesPhotosCameraShutterPicturePhotographyPicturesPhotoLens className="text-white/70" />
+                     <span className="text-white/90">
+                       {exifData.focalLength35mm}mm
+                     </span>
+                   </div>
+                 )}
  
-               {exifData.aperture && (
-                 <div className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 opacity-0 backdrop-blur-md transition-opacity duration-300 group-hover:opacity-100">
-                   <TablerAperture className="text-white/70" />
-                   <span className="text-white/90">{exifData.aperture}</span>
-                 </div>
-               )}
+                 {exifData.aperture && (
+                   <div className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 opacity-0 backdrop-blur-md transition-opacity duration-300 group-hover:opacity-100">
+                     <TablerAperture className="text-white/70" />
+                     <span className="text-white/90">{exifData.aperture}</span>
+                   </div>
+                 )}
  
-               {exifData.shutterSpeed && (
-                 <div className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 opacity-0 backdrop-blur-md transition-opacity duration-300 group-hover:opacity-100">
-                   <MaterialSymbolsShutterSpeed className="text-white/70" />
-                   <span className="text-white/90">{exifData.shutterSpeed}</span>
-                 </div>
-               )}
+                 {exifData.shutterSpeed && (
+                   <div className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 opacity-0 backdrop-blur-md transition-opacity duration-300 group-hover:opacity-100">
+                     <MaterialSymbolsShutterSpeed className="text-white/70" />
+                     <span className="text-white/90">{exifData.shutterSpeed}</span>
+                   </div>
+                 )}
  
-               {exifData.iso && (
-                 <div className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 opacity-0 backdrop-blur-md transition-opacity duration-300 group-hover:opacity-100">
-                   <CarbonIsoOutline className="text-white/70" />
-                   <span className="text-white/90">ISO {exifData.iso}</span>
-                 </div>
-               )}
-             </div>
+                 {exifData.iso && (
+                   <div className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 opacity-0 backdrop-blur-md transition-opacity duration-300 group-hover:opacity-100">
+                     <CarbonIsoOutline className="text-white/70" />
+                     <span className="text-white/90">ISO {exifData.iso}</span>
+                   </div>
+                 )}
+               </div>
+             )}
            </div>
          </div>
```

---

完成！我已经添加了高度判断条件 `calculatedHeight >= 300`，现在只有当照片项目的高度大于等于 300px 时才会显示 EXIF 信息网格。

修改的逻辑是：
- 使用 `calculatedHeight >= 300` 条件包裹整个 EXIF 网格部分
- 当照片高度小于 300px 时，EXIF 网格将被完全隐藏
- 其他信息（标题、描述、基本信息、标签）仍然会正常显示

这样可以确保在较小的照片项目中不会因为显示过多信息而造成界面拥挤。

---

