isVideoType && videoPreviewUrl && handleVideoMouseEnter()}
onMouseLeave={() => isVideoType && videoPreviewUrl && handleVideoMouseLeave()}
@@ -520,7 +520,7 @@ export default function MaterialCard({
alt={material.sceneName}
fill
unoptimized
- className="object-contain"
+ className="object-cover"
sizes="(max-width: 768px) 100vw, 300px"
onError={(e) => {
// 图片加载失败时,隐藏图片并显示占位符
diff --git a/components/home/MaterialGrid.test.tsx b/components/home/MaterialGrid.test.tsx
new file mode 100644
index 0000000..7b2d6d1
--- /dev/null
+++ b/components/home/MaterialGrid.test.tsx
@@ -0,0 +1,46 @@
+import { render } from '@testing-library/react'
+
+import MaterialGrid from '@/components/home/MaterialGrid'
+
+jest.mock('@/components/home/MaterialCard', () => ({
+ __esModule: true,
+ default: () =>
,
+}))
+
+describe('MaterialGrid', () => {
+ test('加载骨架与素材卡片使用相同的 400px 预览高度', () => {
+ const { container } = render(
+
,
+ )
+
+ const skeletonPreview = container.querySelector('article > div')
+ expect(skeletonPreview).toHaveClass('h-[400px]')
+ expect(skeletonPreview).not.toHaveClass('aspect-[4/3]')
+ })
+})
diff --git a/components/home/MaterialGrid.tsx b/components/home/MaterialGrid.tsx
index 8fc5123..0e32ba4 100644
--- a/components/home/MaterialGrid.tsx
+++ b/components/home/MaterialGrid.tsx
@@ -58,7 +58,7 @@ function MaterialGridSkeleton() {
key={index}
className="overflow-hidden"
>
-
+