From d9d6110a9c470e6c77174a25f019a34588488332 Mon Sep 17 00:00:00 2001
From: chenpei <chenpei@1080p.hk>
Date: Fri, 21 Aug 2026 13:19:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=81=A2=E5=A4=8D=E7=B4=A0=E6=9D=90=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E9=A2=84=E8=A7=88=E6=AF=94=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/home/MaterialCard.test.tsx |  9 ++++++
 components/home/MaterialCard.tsx      |  4 +--
 components/home/MaterialGrid.test.tsx | 46 +++++++++++++++++++++++++++
 components/home/MaterialGrid.tsx      |  2 +-
 4 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 components/home/MaterialGrid.test.tsx

diff --git a/components/home/MaterialCard.test.tsx b/components/home/MaterialCard.test.tsx
index 01eaf6a..30ddc9f 100644
--- a/components/home/MaterialCard.test.tsx
+++ b/components/home/MaterialCard.test.tsx
@@ -173,6 +173,15 @@ describe('MaterialCard', () => {
     expect(screen.getByAltText('SPU-001 视频封面')).toBeInTheDocument()
   })
 
+  test('普通素材恢复 400px 高预览区并铺满容器', () => {
+    const { container } = render(<MaterialCard {...defaultProps} />)
+
+    const previewArea = container.querySelector('[data-material-link="true"]')
+    expect(previewArea).toHaveClass('h-[400px]')
+    expect(previewArea).not.toHaveClass('aspect-[4/3]')
+    expect(screen.getByAltText('客厅')).toHaveClass('object-cover')
+  })
+
   test('15天保护期内仍可复制分享链接', () => {
     render(
       <MaterialCard
diff --git a/components/home/MaterialCard.tsx b/components/home/MaterialCard.tsx
index d888ce7..d6f085a 100644
--- a/components/home/MaterialCard.tsx
+++ b/components/home/MaterialCard.tsx
@@ -343,7 +343,7 @@ export default function MaterialCard({
     <article data-card className="bg-transparent">
       {/* Preview Image/Video */}
       <div
-        className="relative w-full aspect-[4/3] cursor-pointer overflow-hidden rounded-[12px] border border-[#e7e8ea] bg-[#f3f4f5] group"
+        className="relative h-[400px] w-full cursor-pointer overflow-hidden rounded-[12px] border border-[#e7e8ea] bg-[#f3f4f5] group"
         data-material-link="true"
         onMouseEnter={() => 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: () => <article data-testid="material-card" />,
+}))
+
+describe('MaterialGrid', () => {
+  test('加载骨架与素材卡片使用相同的 400px 预览高度', () => {
+    const { container } = render(
+      <MaterialGrid
+        materials={[]}
+        displayedCount={0}
+        session={null}
+        loading
+        isTransitionLoading={false}
+        playingAudioId={null}
+        audioElement={null}
+        audioProgress={0}
+        audioCurrentTime={0}
+        audioDuration={0}
+        audioRef={{ current: null }}
+        downloadingId={null}
+        downloadProgress={0}
+        themeColor="#1a1c1d"
+        hasFilters={false}
+        onAudioPlay={jest.fn()}
+        onDownload={jest.fn()}
+        onLike={jest.fn()}
+        onFavorite={jest.fn()}
+        onShare={jest.fn()}
+        onEdit={jest.fn()}
+        onDelete={jest.fn()}
+        onMaterialClick={jest.fn()}
+        onRetryTranscode={jest.fn()}
+        showToast={jest.fn()}
+      />,
+    )
+
+    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"
         >
-          <div className="aspect-[4/3] animate-pulse rounded-[12px] bg-[#eceef0]" />
+          <div className="h-[400px] animate-pulse rounded-[12px] bg-[#eceef0]" />
           <div className="space-y-3 px-4 py-4">
             <div className="h-4 w-3/4 animate-pulse bg-[#eceef0]" />
             <div className="h-3 w-1/2 animate-pulse bg-[#f2f3f5]" />