From 91b617bc2e9b66853eb2bb4a9f8dbca42d4b1804 Mon Sep 17 00:00:00 2001
From: chenpei <chenpei@1080p.hk>
Date: Mon, 17 Aug 2026 12:04:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=B4=A0=E6=9D=90=E9=AA=A8=E6=9E=B6?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=20CSS=20=E5=8A=A8=E7=94=BB=EF=BC=8C=E9=81=BF?=
 =?UTF-8?q?=E5=85=8D=E6=9E=84=E5=BB=BA=E9=A2=84=E6=B8=B2=E6=9F=93=E8=AE=BF?=
 =?UTF-8?q?=E9=97=AE=20window?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/home/MaterialGrid.tsx | 41 +++++---------------------------
 1 file changed, 6 insertions(+), 35 deletions(-)

diff --git a/components/home/MaterialGrid.tsx b/components/home/MaterialGrid.tsx
index 896b037..a722667 100644
--- a/components/home/MaterialGrid.tsx
+++ b/components/home/MaterialGrid.tsx
@@ -1,12 +1,8 @@
 'use client'
 
-import React, { useRef } from 'react'
-import gsap from 'gsap'
-import { useGSAP } from '@gsap/react'
+import React from 'react'
 import MaterialCard, { Material } from './MaterialCard'
 
-gsap.registerPlugin(useGSAP)
-
 // 用户会话类型
 interface UserSession {
   id: string
@@ -49,33 +45,8 @@ interface MaterialGridProps {
 }
 
 function MaterialGridSkeleton() {
-  const rootRef = useRef<HTMLDivElement>(null)
-
-  useGSAP(() => {
-    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return
-
-    const motion = gsap.matchMedia()
-    motion.add('(prefers-reduced-motion: no-preference)', () => {
-      gsap.fromTo(
-        '[data-skeleton-block]',
-        { opacity: 0.42 },
-        {
-          opacity: 0.92,
-          duration: 1.15,
-          ease: 'sine.inOut',
-          yoyo: true,
-          repeat: -1,
-          stagger: { each: 0.08, from: 'start' },
-        },
-      )
-    })
-
-    return () => motion.revert()
-  }, { scope: rootRef })
-
   return (
     <div
-      ref={rootRef}
       className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
       aria-busy="true"
       aria-live="polite"
@@ -86,13 +57,13 @@ function MaterialGridSkeleton() {
           key={index}
           className="overflow-hidden rounded-[14px] border border-[#e7e8ea] bg-white"
         >
-          <div data-skeleton-block className="h-[400px] bg-[#eceef0]" />
+          <div className="h-[400px] animate-pulse bg-[#eceef0]" />
           <div className="space-y-3 px-4 py-4">
-            <div data-skeleton-block className="h-4 w-3/4 bg-[#eceef0]" />
-            <div data-skeleton-block className="h-3 w-1/2 bg-[#f2f3f5]" />
+            <div className="h-4 w-3/4 animate-pulse bg-[#eceef0]" />
+            <div className="h-3 w-1/2 animate-pulse bg-[#f2f3f5]" />
             <div className="flex items-center justify-between pt-1">
-              <div data-skeleton-block className="h-3 w-20 bg-[#f2f3f5]" />
-              <div data-skeleton-block className="h-3 w-12 bg-[#f2f3f5]" />
+              <div className="h-3 w-20 animate-pulse bg-[#f2f3f5]" />
+              <div className="h-3 w-12 animate-pulse bg-[#f2f3f5]" />
             </div>
           </div>
         </article>