Merge pull request samqin123#50 from OuOumm/main

refactor(components): 优化卡片组件并更新运行时配置

Author: senshinya

package.json

@@ -80,5 +80,6 @@
     "**/*.{json,css,scss,md,webmanifest}": [
       "prettier -w"
     ]
-  }
+  },
+  "packageManager": "pnpm@10.12.4+sha512.5ea8b0deed94ed68691c9bad4c955492705c5eeb8a87ef86bc62c74a26b037b08ff9570f108b2e4dbd1dd1a9186fea925e527f141c648e85af45631074680184"
 }

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) => (

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

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

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'>

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