重构核心模块并同步更新项目配置与相关实现

web/src/components/MediaCard.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useRef, useState, type ReactNode } from 'react'
+import { memo, useEffect, useRef, useState, type ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 import { Film, Play, Layers, Star } from 'lucide-react'
 import { imageURL } from '../api/client'
@@ -22,7 +22,12 @@ export const MediaCard = memo(function MediaCard({
   const ref = useRef<HTMLDivElement>(null)
   const href = linkTo ?? `/media/${media.id}`
   const [posterFit, setPosterFit] = useState<'cover' | 'contain'>('cover')
-  const posterSrc = imageURL(media.poster_url, media.updated_at)
+  const posterSrc = imageURL(media.poster_url, media.updated_at, {
+    maxWidth: compact ? 320 : 480,
+    maxHeight: compact ? 480 : 600,
+    quality: 82,
+  })
+  const blurredPosterSrc = imageURL(media.poster_url, media.updated_at, { maxWidth: 160, quality: 60 })
   const displayRating = rating ?? media.rating
   const versionCount = media.versions?.length ?? 0
   // renderActions 延迟到卡片自身渲染时才调用，保证 memo 生效
@@ -43,7 +48,7 @@ export const MediaCard = memo(function MediaCard({
             <>
               {posterFit === 'contain' && (
                 <img
-                  src={posterSrc}
+                  src={blurredPosterSrc}
                   alt=""
                   aria-hidden="true"
                   loading="lazy"