恢复素材卡片预览比例

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

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) => {
                 // 图片加载失败时，隐藏图片并显示占位符

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]')
+  })
+})

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]" />