From 7f22bc87b5b616c3c8c0734c9f277ccdb33bc6c0 Mon Sep 17 00:00:00 2001
From: SongPro <ovoxinsong@gmail.com>
Date: Thu, 3 Jul 2025 23:09:05 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E7=BB=84=E4=BB=B6=E5=B9=B6=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E8=BF=90=E8=A1=8C=E6=97=B6=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除多个卡片组件的懒加载属性以提升首屏性能
- 使用ImagePlaceholder组件统一骨架屏实现
- 修复DemoCard组件中的拼写错误
- 标准化runtime.ts中的JSON格式
- 更新package.json中的包管理器配置
---
 package.json                          | 3 ++-
 src/app/douban/page.tsx               | 2 +-
 src/components/AggregateCard.tsx      | 1 -
 src/components/DemoCard.tsx           | 3 +--
 src/components/DoubanCardSkeleton.tsx | 8 ++++----
 src/components/VideoCard.tsx          | 3 +--
 6 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index f634ebc..14c0ab6 100644
--- a/package.json
+++ b/package.json
@@ -80,5 +80,6 @@
     "**/*.{json,css,scss,md,webmanifest}": [
       "prettier -w"
     ]
-  }
+  },
+  "packageManager": "pnpm@10.12.4+sha512.5ea8b0deed94ed68691c9bad4c955492705c5eeb8a87ef86bc62c74a26b037b08ff9570f108b2e4dbd1dd1a9186fea925e527f141c648e85af45631074680184"
 }
diff --git a/src/app/douban/page.tsx b/src/app/douban/page.tsx
index 92628be..ecf9688 100644
--- a/src/app/douban/page.tsx
+++ b/src/app/douban/page.tsx
@@ -189,7 +189,7 @@ function DoubanPageClient() {
           ) : (
             <>
               {/* 内容网格 */}
-              <div className='grid grid-cols-3 gap-x-2 gap-y-12 px-0 sm:px-2 sm:grid-cols-[repeat(auto-fit,minmax(160px,1fr))] sm:gap-x-8 sm:gap-y-20 sm:px-4'>
+              <div className='grid grid-cols-3 gap-x-2 gap-y-12 px-0 sm:px-2 sm:grid-cols-[repeat(auto-fit,minmax(160px,1fr))] sm:gap-x-8 sm:gap-y-20'>
                 {loading
                   ? // 显示骨架屏
                     skeletonData.map((index) => (
diff --git a/src/components/AggregateCard.tsx b/src/components/AggregateCard.tsx
index 760b944..d04fece 100644
--- a/src/components/AggregateCard.tsx
+++ b/src/components/AggregateCard.tsx
@@ -134,7 +134,6 @@ const AggregateCard: React.FC<AggregateCardProps> = ({
             src={first.poster}
             alt={first.title}
             fill
-            loading='lazy'
             className={`object-cover transition-transform duration-500 cubic-bezier(0.4,0,0.2,1) group-hover:scale-110
                       ${
                         isLoaded
diff --git a/src/components/DemoCard.tsx b/src/components/DemoCard.tsx
index 1995086..ba65546 100644
--- a/src/components/DemoCard.tsx
+++ b/src/components/DemoCard.tsx
@@ -58,7 +58,7 @@ const DemoCard = ({ id, title, poster, rate, type }: DemoCardProps) => {
 
   return (
     <div
-      className='group relative w-full rounded-lg bg-transparent flex flex-col cursor-pointer transition-all duration-300 ease-in-out'
+      className='group relative w-full rounded-lg bg-transparen flex flex-col cursor-pointer transition-all duration-300 ease-in-out'
       onClick={handleClick}
     >
       {/* 海报图片区域 */}
@@ -72,7 +72,6 @@ const DemoCard = ({ id, title, poster, rate, type }: DemoCardProps) => {
           alt={title}
           fill
           ref={imgRef}
-          loading='lazy'
           className={`object-cover transition-transform duration-500 cubic-bezier(0.4,0,0.2,1) group-hover:scale-110
                       ${
                         isLoaded
diff --git a/src/components/DoubanCardSkeleton.tsx b/src/components/DoubanCardSkeleton.tsx
index 26bc645..1d4e80b 100644
--- a/src/components/DoubanCardSkeleton.tsx
+++ b/src/components/DoubanCardSkeleton.tsx
@@ -1,11 +1,11 @@
+import { ImagePlaceholder } from '@/components/ImagePlaceholder';
+
 const DoubanCardSkeleton = () => {
   return (
     <div className='w-full'>
       <div className='group relative w-full rounded-lg bg-transparent shadow-none flex flex-col'>
-        {/* 海报骨架 - 2:3 比例 */}
-        <div className='relative aspect-[2/3] w-full overflow-hidden rounded-lg bg-gray-200 animate-pulse dark:bg-gray-800'>
-          <div className='absolute inset-0 bg-gray-300 dark:bg-gray-700'></div>
-        </div>
+        {/* 图片占位符 - 骨架屏效果 */}
+        <ImagePlaceholder aspectRatio='aspect-[2/3]' />
 
         {/* 信息层骨架 */}
         <div className='absolute top-[calc(100%+0.5rem)] left-0 right-0'>
diff --git a/src/components/VideoCard.tsx b/src/components/VideoCard.tsx
index d8a0e33..2452f39 100644
--- a/src/components/VideoCard.tsx
+++ b/src/components/VideoCard.tsx
@@ -158,7 +158,7 @@ export default function VideoCard({
       )}${year ? `&year=${year}` : ''}${from ? `&from=${from}` : ''}`}
     >
       <div
-        className={`group relative w-full rounded-lg bg-transparent flex flex-col cursor-pointer transition-all duration-300 ease-in-out ${
+        className={`group relative w-full rounded-lg bg-transparent/0 flex flex-col cursor-pointer transition-all duration-300 ease-in-out ${
           isDeleting ? 'opacity-0 scale-90' : ''
         }`}
       >
@@ -171,7 +171,6 @@ export default function VideoCard({
             src={poster}
             alt={title}
             fill
-            loading='lazy'
             className={`object-cover transition-transform duration-500 cubic-bezier(0.4,0,0.2,1) group-hover:scale-110
                       ${
                         isLoaded